TIL3: Arrow Function / 'this' Keyword

charlie-lyc·2020년 10월 20일
0

Immersive Course TIL

목록 보기
3/39
post-thumbnail

Arrow Fuction는 일반적인 함수 표현(선언)식을 축약한 형태로 표시하는 것으로 ES6에서 새로 도입된 방법입니다. 클로저함수를 표현할 때 특히 강점이 있습니다.

// 일반적인 함수 표현식
const add = function (x, y) {
  return x + y;
};
// 화살표 함수
const add = (x, y) => {
  return x + y;
};
// 함수 내의 statement가 한줄일 경우 {}, ; 생략 가능 => return만 있는 경우 return 까지 생략 가능
const add = (x, y) => x + y;
// 파라미터가 한 개일 경우 () 생략 가능
// 함수내 statement의 명확한 표현을 위해 () 사용 가능 
const adder3 = x => (x + 3);

그리고 화살표 함수는 다음과 같은 중요한 특징들이 있습니다.

  • call, apply, bind(함수의 메소드)를 사용할 수 없습니다.
  • 화살표 함수의 실행은 this 객체를 결정짓지 않습니다.

**this**는 함수 실행호출 방법에 의해 결정되는 특별한 객체 입니다. 즉, this 객체는 함수가 실행되는 맥락(Execution Context)과 방법에 따라 다르게 결정됩니다.

함수 실행과 관련된 this 결정 패턴에는 다섯 가지가 있으며, 이 때 바인딩되는 객체는 다음과 같습니다.

(1) Global에서 참조: window객체(Browser) / module.exports객체(node.js)

console.log(this);

(2) Function 호출: window객체(Browser) / global객체(node.js)

foo();

(3) Method 호출: 부모객체(메소드 왼쪽 '.'을 기준으로 왼쪽 객체)

obj.foo();

(4) 'new'키워드를 이용한 생성자 호출: 생성된 인스턴스객체

new Foo();

(5) call 또는 apply 호출: 첫번째 인자로 전달되는 객체

foo.call()
foo.apply()

코드 및 자료 출처: 코드스테이츠(CodeStates)

0개의 댓글