ES6(ECMAScript 2015) – 화살표 함수 – 1 – this 바인딩

소제목: 화살표 함수란?

ES6(ECMAScript 2015)에서 도입된 화살표 함수는 기존의 함수 선언 방식과는 다른 간결하고 편리한 문법을 제공합니다. 화살표 함수는 함수를 선언할 때 function 키워드 대신 => 기호를 사용하여 작성합니다. 화살표 함수는 주로 콜백 함수나 간단한 함수 정의에 사용되며, 코드의 가독성을 높여줍니다.

예시:

// 기존 함수 선언 방식
function greet(name) {
  console.log('안녕하세요, ' + name + '님!');
}

// 화살표 함수
const greet = (name) => {
  console.log(`안녕하세요, ${name}님!`);
};

소제목: 화살표 함수와 this 바인딩

화살표 함수는 함수가 생성될 당시의 this 값을 유지합니다. 이는 일반 함수와는 달리, 함수가 호출된 시점의 this 값과 상관없이 항상 상위 스코프의 this 값을 참조합니다. 이로 인해 일반 함수에서 발생하는 this 바인딩 문제를 해결할 수 있습니다.

예시를 통해 비유적인 표현으로 이해해보겠습니다. 우리는 화살표 함수가 청소 도우미라고 생각해볼 수 있습니다. 청소 도우미는 집 주인(상위 스코프)의 지시에 따라 일을 수행하며, 별도의 신분을 가지지 않습니다. 따라서 화살표 함수는 상위 스코프의 this 값을 그대로 사용하여 일을 처리합니다. 이렇게 함으로써 화살표 함수는 주변 환경과 관계없이 항상 일관된 this 값을 가질 수 있습니다.

예시:

const person = {
  name: '홍길동',
  sayHello: function() {
    setTimeout(function() {
      console.log('안녕하세요, 저는 ' + this.name + '입니다.'); // 일반 함수에서의 this 사용
    }, 1000);

    setTimeout(() => {
      console.log('안녕하세요, 저는 ' + this.name + '입니다.'); // 화살표 함수에서의 this 사용
    }, 2000);
  }
};

person.sayHello();

위의 예시에서, 일반 함수를 사용한 콜백 함수의 this는 타이머에 의해 호출되는 시점의 객체를 참조하지 않고, undefined가 됩니다. 그러나 화살표 함수를 사용한 콜백 함수는 상위 스코프인 person 객체의 this 값을 유지하므로, 예상대로 ‘홍길동’을 출력할 수 있습니다.

소제목: 주의해야 할 점

1. 화살표 함수는 항상 익명 함수로 사용됩니다. 따라서 화살표 함수를 객체의 메서드로 사용할 때는 메서드 이름을 붙이지 않습니다.
2. 화살표 함수는 arguments 객체를 가지지 않습니다. 따라서 화살표 함수 내부에서 arguments를 사용할 수 없습니다. 만약 가변 인자를 다루어야 한다면, 일반 함수를 사용해야 합니다.
3. 화살표 함수는 생성자 함수로 사용할 수 없습니다. new 키워드와 함께 호출하면 에러가 발생합니다.
4. 화살표 함수의 this는 상위 스코프의 this를 참조하므로, 함수 호출 시점에 따라 동적으로 this를 바인딩하는 일반 함수와는 달리, 정적으로 this를 결정합니다. 이에 따라 this가 필요한 동적인 상황에서는 일반 함수를 사용해야 합니다.

이제 화살표 함수와 this 바인딩에 대해 친근하게 이해하셨을 것입니다. 화살표 함수는 코드 작성을 간결하게 만들어주고, this 바인딩 문제를 해결하는 강력한 기능입니다. 올바르게 활용하면 보다 효율적이고 가독성 좋은 코드를 작성할 수 있습니다. 지금부터 화살표 함수를 적극 활용하여 자바스크립트 프로그래밍을 즐겨보세요!