[JavaScript] 화살표 함수

자바스크립트는 ES6부터 함수를 사용목적에 따라 구별하고 있다. 일반함수, 메서드, 화살표 함수이다. 이러한 함수들은 호출방식을 달리하고 있으며, 각자 내부슬롯이 다르게 작동된다. 그 중에서도 화살표 함수는 es6 이전에는 없던 기능이다. 화살표 함수의 정의 방식을 살펴보자.

 

//값을 반환하고, 문이 하나인 경우 중괄호를 생략할 수 있다.
const func = (x, y) => x*y;
 
//매개변수가 하나인 경우, 소괄호를 생략할 수 있다.
const func1 = x => x*2;
 
//객체 리터럴을 반환할 수 있지만, 소괄호를 감싸줘야 한다.
const func2 = (x,y) => ({ x, y});
func2(1, "text"); // { x: 1, y: "text" }
 
 

 

앞서 말했듯이 es6에서는 함수의 종류별로 그 기능을 달리 사용하게 된다. 화살표함수는 일반함수와 달리 인스턴스를 갖지 않으므로 new를 사용하여 생성자 함수로 호출할 수 없다. 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다. 또한 매개변수에는 중복된 이름을 사용할 수 없다는 특징이 있다. 이와같은 특징 외에 가장 크게 구별되는 점이 this이다. 간단히 말하자면 화살표 함수의 this 는 함수 자체의 this 바인딩을 갖지 않는다.

따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프에서 this를 탐색한다. 결국 화살표함수의 this는 함수가 정의된 위치에 의해 결정된다는 것이다.

 

class Prefixer {
    constructor(prefix) {
        this.prefix = prefix;
    }
 
   add(arr) {
    return arr.map(item => this.prefix + item);
    }
}
 
const prefixer = new Prefixer('-webkit-');
console.log(prefixer. add (['tansition', 'user-select']));
 

class Person {
    name = 'Lee';
    sayHi() { console.log(`Hi ${this.name}`); }
// sayHi : function () { console.log(...) }
}
const person = new Person();
person.sayHi(); // Hi Lee