[JavaScript] ES6 화살표 함수 (Arrow Function)

정의

화살표 함수란, ES6 버전에서 새롭게 생긴 함수의 새로운 형태로 화살표(=>)를 통해 간단하게 함수를 선언할 수 있는 문법을 말한다. (함수 표현식에 해당한다. 호이스팅X)

 

쓰임

기본형

// 기존의 함수 표현식
const sum = function (){
    return a + b;
}

// 화살표 함수
// 바로 return 값이 나오는 경우 return과 중괄호는 생략 가능하다.
const sum = (a, b) => a + b

// 파라미터가 1개인 경우 소괄호를 생략해도 된다.
const myFunc = x => x * x

기존의 함수 표현식에서는 함수의 식별자 이름(sum)과 소괄호 안에 매개변수, 중괄호 안에 return 값을 넣는 게 일반적이었다. 하지만 화살표 함수에서는 'function'이 사라진 대신 함수 표현식으로 함수를 선언하고, "( ) => { }" 형태로 return 값을 작성해준다. 위처럼 바로 return이 나오는 경우, 중괄호와 return은 생략이 가능하다. 또한, 파라미터 값이 1개인 경우 소괄호 생략도 가능하다. ex) a => a + b

 

return 값이 객체인 경우

// 기존의 함수 선언식
function sum(){
    return {
        id: "Shawn",
        address: "abc@naver.com"
    };
}

// 화살표 함수
const sum = () => ({
    id: "Shawn",
    address: "abc@naver.com"
})

화살표 함수의 경우 return을 생략할 수 있다고 했다. 만약, 객체가 결과값으로 출력될 경우 객체의 중괄호를 소괄호로 한 번 더 묶어주면 return 값으로 객체를 사용하겠다는 의미가 된다.

 

화살표 함수의 this

// 기존의 함수 선언식
const red = {
    name: "Shawn",
    age: 29,
    myFunc: function(){
        return this.name;
    }
}
red.myFunc(); // 'Shawn'

// 화살표 함수
const red = {
    name: "Shawn",
    age: 29,
    myFunc: () => {
        return this.name;
    }
}
red.myFunc(); // ' '

위 두 가지의 식에서 서로 다른 부분이 있다면, myFunc에 화살표 함수를 썼냐 안 썼냐의 차이일 것이다.

기존의 함수 선언식에서는 myFunc의 스코프를 red 변수와 동일하게 보기 때문에 this = red로 인식된다.

하지만, 화살표 함수를 쓸 경우에는 스코프 상에 this가 없기 때문에, 상위 스코프(혹은 전역)으로 클로저되고 this를 red 변수의 상위로 인식하여 결과값이 나오지 않는 것이다. (상위 스코프에는 name이 없기 때문에)

 

화살표 함수에서 기억해야 할 부분 중 하나가 바로 화살표 함수에는 this가 존재하지 않는다는 점이다.

간단히 말해서, 화살표 함수에서의 this는 상위 스코프의 this라고 생각하면 쉽다.

 

화살표 함수의 arguments

// 기존의 함수 선언식
function myFunc(){
    return arguments[0] + arguments[1]
}
myFunc(100, 50) // 150

// 화살표 함수
const myFunc = () => arguments[0] + arguments[1]
myFunc(100, 50) // Error! (arguments is not defined)

arguments 역시 this와 같다. 화살표 함수에서의 arguments는 존재하지 않는다.

따라서, 화살표 함수에서 arguments 사용 시 정의되지 않은 요소라며 오류가 뜨는 것을 볼 수 있다.