Js - 화살표 함수(Arrow Function)

1. 화살표 함수 사용법
2. 화살표 함수의 this

화살표 함수는 es6에서 나온 문법이며, function을 사용하여 함수를 만드는 것보다 간단하게 함수를 작성할 수 있다는 장점이 있다. 화살표 함수의 특징을 보자면 아래와 같다.

 

• this, super에 대해 바인딩할 수 없다.
• 메소드로 사용할 수없다.
• call, apply, bind 메소드를 사용할 수 없다.
• 생성자 함수로 사용할 수 없다.
• 항상 익명 함수이다.

 

1. 화살표 함수 사용법

// 매개 변수가 없는 화살표 함수
const foo = () => {
    console.log("sik");
};

// 매개 변수가 있는 화살표 함수
const foo = (a, b) => {
    return a + b;
};
foo(1, 2) // 3

// return이 없는 경우
const foo = (a, b) => {
    a + b;
};
foo(1, 2) // undefined

// 콜백 함수
const nums = [1, 2, 3, 4, 5];
const makeArr = nums.map( x => x + 1);

console.log(makeArr); // [2, 3, 4, 5, 6]

 

 

2. 화살표 함수의 this

일반함수의 this는 함수를 호출하는 방식에 의해 값이 정해졌는데 화살표 함수의 this는 선언되는 시점에서 결정되며, 상위 스코프의 this를 가리킨다. 이러한 이유 때문에 화살표 함수를 메소드로 사용할 수 없다.

const name = 'Park';

const test1 = {
    name: 'Kim',
    printName: function() {
        console.log(this.name);
    }
};

// 일반 함수는 호출되는 방식에 따라 this값이 정해짐 test1을 통해 호출했으므로 this = test1
test1.printName(); // 'Kim'

--------------------------------------------------------------------------------

window.name = "Sik"

const test2 = {
    name: 'Lee',
    printName: () => {
        console.log(this.name);
    }
};

// 화살표 함수는 선언되는 시점에서 this가 결정되고 상위 스코프의 this를 가리기키 때문에
// window객체에 있는 name을 가리킨다. 이러한 이유때문에 화살표함수는 메소드로 사용 불가하다
test2.printName(); // 'Sik'