[JS] Arrow 함수

2019. 06. 08 수정

1. Arrow 함수란?

arrow 함수는 함수를 정의할 때 화살표(=>)를 사용하여 정의하는 것을 의미합니다.

// 기본 함수 선언 방식
function(){ ... }

// Arrow 함수 선언 방식
() => { ... }

• arrow 함수는 익명함수입니다.
• 함수 선언 시 기존의 function 키워드가 => 으로 대체됩니다.
• arrow 함수와 function 키워드로 선언한 함수는 비슷하지만 조금 다릅니다.

이 글에서는 예제를 통해 Arrow 함수의 여러 표현법을 살펴보고, function 키워드로 선언한 함수간의 차이점을 살펴보도록 하겠습니다.

2. Arrow 함수 사용하기 예제

1) 함수에 이름짓기

let foo = () => { ... }

함수를 선언해서 변수에 할당하는 방법입니다.

function 키워드가 사라지고, =>가 생성된 것을 확인할 수 있습니다.

2) 여러 매개변수 할당하기

let add = (a, b) => {
    return a + b
}

console.log(add(3, 5))

함수에 매개변수를 정의하는 방법입니다.

3) 즉시 실행함수

((a, b) => {
    console.log(a + b)
})(3,5)

즉시 실행이 가능하며, 즉시 실행 시 파라미터를 넘겨주는 예제입니다.

2. function 키워드로 선언한 함수와 Arrow로 선언한 함수 비교

1) prototype

let foo = ( ) => {
    this.name = "victolee"
}

let goo = new foo()
console.log(goo.name)

Arrow 함수는 new 키워드로 함수를 생성할 수 없습니다.

에러 메시지를 보시면 constructor가 없다고하네요.

그 이유는 다음과 같습니다.

let foo = ( ) => {
    this.name = "victolee"
}

function goo(){
    this.name = "victolee"
}

console.dir(foo)
console.dir(goo)

console.dir() 메서드를 통해 프로퍼티들을 살펴보면 위와 같습니다.

Arrow 함수(foo)에는 prototype이 없기 때문에 생성자 함수를 만들 수 없었던 것입니다.

2) arguments 사용 불가

let foo = ( ) => {
    console.log(arguments[0])
    console.log(arguments[1])
    console.log(arguments[2])
}
foo(1,2,3);

function goo(){
  console.log(arguments[0])
  console.log(arguments[1])
  console.log(arguments[2])
}
goo(1,2,3);

함수에 매개변수를 정의하지 않아도 매개변수가 넘어오면 인자들을 저장하고 있는 arguments 객체가 있습니다.

그런데 arrow 함수에는 arguments가 정의되어 있지 않기 때문에 위와 같이 arguments를 사용하려고 하면 에러가 발생합니다.

3) prototype에서 this

// 1. arrow 함수
let Foo = function(){
    this.number = 10
}
Foo.prototype = {
    add : (num) => {
        return this.number + num
    }
}
let foo = new Foo()
console.log(foo.add(20))



// 2. 일반적인 함수
let Goo = function(){
    this.number = 10
}
Goo.prototype = {
  add : function(num){
    return this.number + num
  }
}
let goo = new Goo()
console.log(goo.add(20))

Foo 함수, Goo 함수의 prototype으로 add 속성을 추가했습니다.

add는 각각 일반적인 함수와 arrow 함수를 통해 함수를 생성한 것이며, this를 통해 number 프로퍼티를 참조합니다.

이 때 일반적인 함수 Goo.add() 함수 호출 결과 30을 얻지만, arrow 함수인 Foo.add()는 NaN을 얻습니다.

그 이유는 Foo.add()를 선언한 방식인 arrow 함수에서 this는 window를 가르키기 때문입니다.

따라서 window + 20의 결과는 NaN이기 때문에 NaN이라는 결과를 얻은것입니다.

반면, Goo.add()에서 this는 자신을 호출한 객체를 가르킵니다.

따라서 10 + 20의 값인 30이 출력됩니다.

이상으로 Arrow 함수에 대해 알아보았습니다.

function 키워드를 사용하여 함수를 선언하는 것보다 간단하긴 하지만 몇 가지 주의사항이 있었습니다.