자바스크립트에서는 ES6부터 arrow function 형식으로 익명 함수를 사용할 수 있다.
최근 인턴을 하면서 자바스크립트에 입문하게 되었는데,
bind를 arrow function으로 고쳐달라는 리뷰를 받아서 둘의 차이를 정리하고자 글을 쓰게 되었다.
실행 컨텍스트 (execution context)
용어 그대로 현재 코드가 연산되고 실행되는 환경(범위)를 의미한다.
이 실행 컨텍스트는 자바스크립트 코드 실행시 자바스크립트 엔진의 스택에 쌓이게 된다!
실행 컨텍스트가 바뀌면서 코드의 특정 지점에서 this를 호출할 때 가리키는 객체가 달라지게 된다.
그렇다면 this는 언제 어떤 객체를 가리킬까?
동적 바인딩
1. Global context(default)
전역 객체, 즉 노드에서는 global / 브라우저에서는 window 객체를 가리킨다.
*다만, 엄격 모드(strict) 모드에서는 global context로 바인딩 되지 않고 에러가 나는 경우도 존재한다.
const name = 'global context';
function echo() {
console.log(this.name);
}
echo() // TypeError: cannot read property of undefined
2. 객체의 메소드
메소드의 경우 this의 값이 해당 객체에 바인딩 된다.
단, 메소드 내에 또 다른 함수가 정의되어 있을 경우 이 함수의 this는 전역 객체를 가리킨다.
3. 생성자 함수로 객체 생성
new 키워드로 객체를 생성시, 해당 생성자 함수 내부의 this는 새로 생성되는 객체를 가리키게 된다.
위 세 가지는 함수 호출시 동적으로 바인딩이 결정되기 때문에 동적 바인딩이라고 부른다.
우리가 사용하는 call, bind, apply와 같은 함수들을 통해 this를 변경할 수 있다.
정적 바인딩
화살표 함수(arrow function)
언제나 상위 scope의 this를 가리킨다. 즉, 누가 자신을 호출하는 지에 대한 context를 생성하지 않고 상위의 것을 참조하는 것이다.
call, bind, apply같은 함수들로 바인딩을 변경할 수 없다.
특히 콜백 함수를 활용할 때 바인딩을 잘 신경써줘야 한다.
다음은 콜백을 사용할 때 헷갈릴만한 예시이다.
const name = 'global context';
function echo() {
console.log(this.name);
}
const test = {
name : 'functional context',
echo: echo,
}
test.echo() // output: functional context
setTimeout(test.echo, 3000) // output: global context위 예시에서 객체의 property로 할당된 함수를 콜백에 넘겨주었을 때, this는 객체인 test가 아니라 global context를 가리키게 된당.
