2. Arrow Function과 this 바인딩

1. 화살표 함수

화살표함수는 es6에서 추가된 기능으로 선언적 함수를 좀더 간결할 방식으로 정의할 수 있도록 해주는 문법입니다. 화살표 함수 이전 함수의 선언 방식은 다음과 같습니다.

function declareFn(a,b){
    return a*b;
}

위 함수를 화살표 함수 방식으로 변경하면 다음과 같습니다.

//1
const declareFn = (a, b) => {return a*b;}

//2 {}내부의 코드가 return문 뿐이라면 {return} 생략 가능.
const declareFn = (a,b) => a*b; 

//3. 매개변수가 1개뿐이라면 매개변수의 괄호도 생략 가능.
const declareFn = a => a;

화살표 함수는 함수를 값으로써 표현한 것이기 때문에 위처럼 변수에 값을 대입해 주셔야 합니다. 이때 변수의 선택지는 let , const, var 3가지가 있지만 const를 사용하는 것이 안전합니다. let이나 var로 함수값을 저장하게 되면 담긴 값이 바뀔 수가 있는데 const로 대입하게 되면 함수의 불변성을 유지시켜주기 때문입니다.

2. this바인딩

화살표 함수는 선언적 함수를 간결하게 표현한 문법임과 동시에 독특한 방식의 this binding 규칙이 존재합니다.

1) 일반 함수의 this

this는 모든 함수에 묵시적으로 존재하는 특별한 키워드입니다.

일반함수에서 this는 해당 함수를 호출하는 시점에 동적으로 바인딩됩니다.

즉, 일반함수에서 this의 값은 함수 작성시점에 어떤 값이 들어오는지 알 수 없습니다.

function callableFn(){
    console.log(this);
}
callableFn(); // 전역 컨텍스트에서 실행되므로 window바인딩

• callableFn함수는 호출하는주체가 없기 때문에 전역 컨텍스트(Global Execution Context)에서 실행됩니다.

• 이 경우 this에는 전역객체가 바인딩 됩니다.

const obj1 = {
    name : '객체1',
    callableFn : callableFn
}
obj1.callableFn(); // obj1

• callableFn함수는 obj객체의 메서드로 호출되고 있으므로, this에는 obj객체가 바인딩됩니다.

• 즉 일반함수는 해당 함수를 호출한 주체가 있다면 해당 주체가 this에 바인딩됩니다.

2) 화살표 함수의 this

화살표 함수는 자신만의 this값을 가질 수 없도록 설계되어 있습니다. (arguments, super도 X)

대신, 화살표 함수가 선언된 당시의 상위 스코프의 this를 그대로 가져옵니다.

즉, 화살표함수의 this값은 함수 정의 시점에서 어떤 값이 들어오는지 정해집니다.

const arrowFn = () => {
    console.log(this); // 선언된 위치 상위 스코프의 this는 global
}
arrowFn(); 

const obj2 = {
    name : '객체2', 
    arrowFn : () => {
        console.log(this); // 선언된 위치 상위 스코프의 this는 global
        // 객체자신의 값을 this로 사용할 수 없다.
    }
}
obj2.arrowFn(); 

const obj3 = {
    name : '객체3',
    arrowFn : function(){
        // 함수는 this스코프를 가짐.   
        const getName = () => {
            return this.name; // arrowFn의 this값 참조
        } 
        const getName2 = function() {
            return this.name // 현재함수를 호출하는 주체의 값을 참조
        } 
        console.log(getName()); // ?
        console.log(getName2()); // ?
    }
}
obj3.arrowFn();

3. 화살표 함수 vs 일반 함수

화살표 함수는 기존의 일반 함수를 완전히 대체할 수 없습니다. 각 함수 생성 방식은 고유의 특성과 사용 목적이 다르기 때문에, 상황에 맞게 적절히 선택하는 것이 중요합니다.

a. 화살표 함수를 사용하는게 적합한 경우

• this가 필요 없는 순수한 함수를 간결하게 표현하고 싶을 때

• 상위 스코프의 this를 그대로 유지해야 하는 콜백함수 사용시

function Timer() {
    this.seconds = 0;
    
    // 전달한 콜백함수는 setInterval내부에서 실행되나 this값은 현재 선언된 위치의 this로 바인딩
    setInterval(() => { 
        this.seconds++;
        console.log(this.seconds); 
    }, 1000);
}
new Timer();

b. 일반 함수를 사용하는게 적합한 경우

• this가 동적으로 바인딩되어야 하는 경우(객체의 메서드 및 생성자 함수)

• this를 현재 호출한 주체로부터 가져와야 하는 경우

const counter = {
    count: 0,
    increase() { // 화살표 함수로 작성시 this는 winodw가 바인딩된다.
        this.count++;
        console.log(this.count);
    }
};
counter.increase(); // this == counter

4. 일반함수의 정적 this바인딩

일반함수의 this값은 호출하는 주체에 따라 동적으로 바인딩 됩니다.

즉, 함수 정의 시점이 아니라 실행 시점에 누가 호출했느냐에 따라 this가 결정됩니다.

그런데 이 함수를 다른 객체에 빌려서 사용하고 싶거나, this를 특정 객체로 바꿔서 실행하고 싶을 때는정적 this 바인딩이 필요합니다.

const user = {
    name : 'mkm',
    printName : function(){
        console.log("my name is "+ this.name) // printName메서드 사용시 user객체를 통하여 호출하므로
        // this는 항상 user로 바인딩된다.
    }
}
user.printName(); // my name is mkm

1) call(thisargs, arg1, arg2, ...)

• 함수의 this를 첫 번째 인자인 thisArg로 바인딩한 후 즉시 호출합니다

user.printName.call({name:'Donald Trump'}); // my name is Donald Trump

2) apply(thisargs, [args])

• call과 동일하지만, 두 번째 인자를 배열 형태로 받습니다.

• 여러 인자를 받는 함수 호출시 사용합니다.

function printName(greeting, target) {
  console.log(`${greeting}, ${this.name} and ${target}`);
}
printName.apply({ name: "Donald Trump" }, ["Hello", "Mr. Lee"]);

3) bind(thisArg)

• 함수를 실행하지 않고, this가 지정된 새로운 함수를 반환합니다

• 함수의 this값을 미리 바인딩 해둬야 하는 경우 사용합니다.

• 나중에 실행하거나, 콜백으로 전달할 때 this가 유지되도록 사용할 수 있습니다.

const bindFn = user.printName.bind({name:'Donald Trump'});
bindFn(); // my name is Trump