[JS] 자바스크립트 '화살표 함수' 정의와 사용법

'코딩앙마'님 자바스크립트 기초 강좌 필기록입니다.

 

---

 

함수 표현식: 화살표 함수 사용법

let add = function(num1, num2){
	return num1 + num2;
}

위와같은 함수 표현식을 화살표 함수로 나타내면

아래와 같이 나타낼 수 있다.

 

let add = (num1, num2) => {
	return num1 + num2;
}

function이란 단어가 사라지고

(num1, num2) 뒤에 =>가 생겼다.

 

함수 표현식은 이렇게 바꿀 수 있다.

함수 선언문은 아래처럼 바꿀 수 있다.

 

---

함수 선언문: 화살표 함수

 

function add(num1, num2){
	return num1 + num2
}

 

맨 처음에 소개한 함수 표현식과 다르게   

위의 코드는 함수 선언문이다. 

 

add = (num1, num2) => {
	return num1 + num2;
}

 

함수 선언문을 화살표 함수로 바꾸면 위와같이 바뀐다.

 

---

 

return을 소괄호로

let add = (num1, num2) => (
	num1 + num2;
)

return을 지우고 중괄호{}를 소괄호()로 바꿔서 쓸 수도 있다. 

즉 return문은 소괄호로 바꿀 수 있다. 

 

---

소괄호 생략: return문이 한 줄일 때

let add = (num1, num2) => num1 + num2;

return문이 한 줄이라면

소괄호를 생략할 수 있다.

 

---

매개변수 소괄호 생략 가능

let add = num1 => num1 + num1;

 

매개변수가 한 개라면 매개변수를 감싸는

소괄호를 생략할 수 있다.

위의 코드는 num1이란 매개변수 하나만 있어서

num1이란 매개변수를 감싸던 소괄호를 생략했다.

 

---

매개변수 소괄호 생략 불가능

 

let showError = () => {
	alert('error!');
}

 

매개변수가 없다면 소괄호 생략이 불가하다.

 

---

퀴즈1

 

const sayHello = function(name){
  const msg = `Hello, ${name}`;
  console.log(msg);
}

위의 코드를 화살표 함수로 바꾸시오.

정답은 '더보기'를 클릭하면 확인할 수 있습니다.

 

const sayHello = name => {
  const msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello("buang");

 

 

퀴즈2

 

const add = function (num1, num2) {
  const result = num1 + num2;
  return result;
}

console.log(add(1, 2));

 

조건1. return과 중괄호를 지우고, 소괄호를 사용하지 않고 화살표 함수 만들어 보기

조건2.  result가 없다고 생각하고 만들어 보기. 일부 줄을 수정, 삭제해서 만들어야 한다.

 

const add = (num1, num2) => num1 + num2;

console.log(add(1, 2));

 

return문이 한 줄이라

소괄호 없이 한 줄로 작성할 수 있다.