[Javascript] 화살표 함수 (Arrow Function)

❔ 화살표 함수와 일반 함수는 어떻게 다를까

---

문법 차이 - 함수를 표현 방식

1️⃣ function 키워드의 생략

function 키워드를 생략하여 간단하게 표현할 수 있다.

const func1 = function() { 
    const num = 3;
};

const func1 = () => {
    const num = 3;
};

2️⃣ 함수의 매개 변수의 괄호 생략

함수의 전달 인자인 매개 변수가 하나인 경우 괄호()를 생략할 수 있다.

const func2 = function(num){
    for(let i = 0; i < 10; i++){
        num++;
        return num;
    }
};

const func2 = num => {
    for(let i = 0; i < 10; i++){
        num++;
        return num;
    }    
}

3️⃣ 중괄호와 return 문 생략

함수 body가 표현식 하나라면 중괄호와 return 문을 생략할 수 있다.

const func3 = function(num) {
    return `${num}을 출력`;
};

const func3 = num => `${num}을 출력`;

---

this 바인딩의 차이

화살표 함수는 this가 없기 때문에, 부모 스코프의 this를 바인딩하는데 아래의 예시에서 이는 곧 Window객체를 의미한다. 따라서 메소드로 화살표 함수를 쓰면, this를 이용한 부모 객체에 접근할 수 없다.

• a : 일반적인 경우 this는 window를 바인딩한다.
• b : 메소드의 경우 this는 객체이므로 obj를 바인딩한다.
• c : 화살표 함수의 경우 정적 컨텍스트를 가진다. 함수를 호출하는 것과 this는 연관이 없기 때문에 화살표 함수가 정의된 obj 객체의 this를 바인딩하므로 this는 window이다.

---

var obj = {
    a: this, 
    b: function() {
      console.log(this) 
    },
    c: () => {
        console.log(this)
    }
}

---

여기에서 만약 부모 객체에 접근하고 싶다면 .bind(this)를 이용해서 바인딩해주면 된다.

var obj = {
    c: () => {
        console.log(this)
    }.bind(this);
}