[자바스크립트] 화살표 함수(arrow function)

화살표 함수는 함수를 간편한 문법으로 사용할 수 있도록 한 표현방법입니다.

 

화살표 함수 정의하기

간단한 익명 함수(anonymous function)의 정의를 보겠습니다.

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

이 익명함수와 동일한 기능의 화살표 함수는 아래와 같습니다. 소괄호 안에 인자 리스트가 있고, 다음에 화살표 모양의 기호(이름이 화살표 함수인 이유), 다음에 반환값을 나타내는 표현식이 옵니다. 

let sum = (a, b) => a + b;

 

화살표 함수의 다양한 형태

화살표 함수는 인자의 갯수 본문내의 문장의 갯수등에 따라 조금씩 다른 형태를 사용할 수 있습니다.

// 인자가 없을 경우 소괄호만 사용합니다. 소괄호를 생략할 수 없습니다.
let val = () => alert("인자가 없습니다.");

// 인자가 하나일 경우 괄호를 생략할 수 있습니다.
let inc = a => a++;

// 본문이 여러줄인 경우 중괄호로 본문을 둘러싸 줍니다.
let inc = a => {
    let result = a++;
    return result;
}

 

함수와 화살표 함수의 차이점

1. 화살표 함수는  this를 가지지 않습니다.

화살표 함수는 this를 가지지 않으므로 내부에서 this를 사용하면 자신 밖의 this를 사용하게 됩니다.

2. 화살표 함수에는  arguments가 없습니다.

arguments는 함수의 인자를 배열처럼 사용할 수 있도록 제공되는 객체 입니다. 화살표 함수에서는 이게 없습니다.

3. 화살표 함수는 new와 함께 호출할 수 없습니다.

일반 함수는  new 연산자를 이용해서 객체로 만들 수 있는데 화살표 함수는 this가 없으므로  new를 사용할 수 없습니다.

4. 화살표 함수에는 super가 없습니다.

super는 클래스 상속에 관련된 객체입니다. this가 없어 new를 쓰지 못하므로 super도 없습니다.