[Javascript] - 화살표 함수는 왜 쓰는걸까?
Javascript / January 14, 2021
Q. “화살표 함수와 function 키워드를 사용한 일반 함수의 차이가 무엇인가요?”
A. “ES6에서 새로 등장한 화살표 함수는 function
키워드를 짧게 줄여줄 수 있다는 장점이 있습니다!”
// 기존의 함수 표현식
function add(a, b) {
return a + b
}
const add = (a, b) => a + b
Q. “어… 끝인가요?”
오늘은 function
키워드 함수와 화살표 함수의 차이를 다뤄 보도록 하겠습니다.
화살표 함수
일반 함수가 this
가 가리키는 범위를 호출 시점에 결정하는 것과는 달리 화살표 함수에서 사용된 this
는 언제나 상위 스코프를 가리킵니다.
const student = {
name: "Chanmin",
// 일반 함수인 greeting()의 this는 greeting() 함수를 호출한 객체를 가리킨다.
greeting: function () {
console.log(`Hi, I'm ${this.name}!`)
},
}
student.greeting() // `Hi, I'm Chanmin!`
//
const student = {
name: "Chanmin",
// 화살표 함수에서 사용된 this는 언제나 상위 스코프(여기서는 window 객체)를 가리키게 된다.
greeting: () => {
console.log(`Hi, I'm ${this.name}!`)
},
}
student.greeting() // `Hi, I'm `
그럼 융통성없는 화살표 함수가 오히려 별로인 것 아닌가요?
위의 예제에서도 화살표 함수를 사용하면 값을 제대로 출력하지 못하는데요?
제 생각은 조금 다른게, 화살표 함수를 사용하면 언제나 일관적인 상위 객체의 참조가 가능합니다.
코드로 예를 들어 살펴보겠습니다.
function Class() {
this.value = 1
this.increase = function () {
this.value++
}
}
const obj = new Class()
// ** 동적 바인딩 - 일반 함수는 호출 객체에 바인딩됩니다.
obj.increase() // increase() 의 this는 obj 객체를 가리킵니다.
console.log(obj.value) // 2
const increase = obj.increase
increase() // 이제 this는 window 객체를 가리킵니다.
console.log(obj.value) // 2
increase
함수는 일반 함수이므로 호출한 객체에 바인딩됩니다.
따라서 다른 변수에 참조를 할당한 후 독립적으로 사용하게 되면 아무 기능도 하지 못하는데요, 이 코드를 화살표 함수를 사용해 고쳐보겠습니다.
function Class() {
this.value = 1
this.increase = () => this.value++
}
const obj = new Class()
// ** 정적 바인딩 - 화살표 함수는 상위 스코프에 바인딩됩니다.
obj.increase() // increase() 의 this는 obj 객체를 가리킵니다.
console.log(obj.value)
const increase = obj.increase
increase()
console.log(obj.value) // 2 (효과 X)