오늘의 회고

오늘은 날이 지나서 TIL 을 작성하게 되었다.
사내 미니 프로젝트를 하다가 바로 뻗어버렸기 때문이다.. 오늘은 프로젝트만 진행하고 따로 학습한건 없었다. 하지만 Arrow Function 의 특징에 대해 간단히 소개하려고 한다.

오늘 학습한 것

• Javascript Arrow Function
• 미니 프로젝트 진행
• 프로젝트 칸반보드 생성

Javascript Arrow Function

Arrow Function 에 대해서는 간단하게 설명하였으니 생략하고, 저번에 설명하지 못했던 특징에 대해 설명하려고 한다.

바인딩 되지 않는 this

Arrow Function이 등장하기 전까지 모든 함수는 그 함수 자신의 this 값을 꼭 정의 했다. 이는 객체 지향 스타일로 프로그래밍 할때 별로 좋지 않다.
아래 코드를 보자.

function Person() {
  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
  this.age = 0;

  setInterval(function growUp() {
    // 비엄격 모드에서, growUp() 함수는 `this`를
    // 전역 객체로 정의하고, 이는 Person() 생성자에
    // 정의된 `this`와 다름.
    this.age++;
  }, 1000);
}

var p = new Person();

주석에 나와있는 설명과 같이 3번째 라인에 있는 this와 , 아래쪽에 위치한 this는 가리키는 대상이 다르다.

ECMAScript 3/5 에서는, 이 문제를 this 값을 폐쇄될 수 있는 (비전역) 변수에 할당하여 해결했다.

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
    that.age++;
  }, 1000);
}

위 코드를 보면 Person 함수에 해당하는 this 를 that 이라는 변수에 할당하고 that 을 이용하여 필드에 접근하는 모습을 볼 수 있다.

Arrow Function

화살표 함수(Arrow Function)은 위와 같은 과정이 필요 없다. 아래 코드를 살펴보자.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this|는 Person 객체를 참조
  }, 1000);
}

var p = new Person();

위 코드를 살펴보면, 아까 일반 함수와는 다르게 화살표 함수 안에서는 this 에 바로 접근이 되는 것을 볼 수 있다.

이유는 화살표 함수는 자신의 this 가 없다. 대신에 화살표 함수를 둘러싸는 렉시컬 범위(Lexical scope)의 this가 사용되기 때문에 접근이 가능한 것이다. 때문에 현재 범위에서 존재하지 않는 this 를 찾을 때 , 화살표 함수는 바로 바깥 범위에서 this 를 찾는것으로 검색을 끝내게 된다.

참고문헌

MDN - 화살표 함수