[JS 이론] 화살표 함수 (Arrow Function)

Minha Sohn·2022년 12월 14일

[JS] 이론 공부

목록 보기

4/11

화살표 함수는 단순하고 간렬한 문법으로 함수를 만드는 방법이다.

구문

let func = (arg1, arg2, ...argN) => expression

코드를 작성하면 인자 (arg1, arg2, ...argN) 를 받는 함수 func이 만들어진다. 우측의 화살표는 표현식(expression)을 평가하고, 결과를 반환한다.

아래는 예시이다.

// 아래 함수의 화살표 함수
const sum = (a,b) => a + b;

const sum = function (a,b) {
	return a + b;
}

문법

다음은 화살표 함수의 기본 문법이다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

다른 예시들을 살펴 보겠다.

// 아래 함수의 화살표 함수
const sayHi = () => alert("안녕하세요!");
sayHi();

const sayHi = function () {
  alert("안녕하세요!")
}

// 아래 함수의 화살표 함수
const age = prompt("나이를 알려주세요.", 18);

const welcome = (age < 18) ? // 삼항연산자
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

const welcome = function () {
	if (age < 18) {
    	alert('안녕');
    } else {
    	alert('안녕하세요!');
    }
}

welcome();