JavaScript_ES6_Study [ Arrow function ]

2022-03-08 노션페이지
기록된 노션을 다시 정리

어려웠던 부분

• 화살표 함수에서 this를 사용할 경우

1. 화살표 함수 선언 방법

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             
// 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다.
//위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

2. this

function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.

1. 일반 함수의 this

함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

2. 화살표 함수의 this

일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.
이를 Lexical this라 한다.

function Prefixer(prefix) {
  this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
  // this는 상위 스코프인 prefixArray 메소드 내의 this를 가리킨다.
  return arr.map(x => `${this.prefix}  ${x}`);
};
// map의 인자로 일반함수로 했다면 
// 내부함수이므로 this는 전역객체를 가르킨다.
const pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

3. 화살표 함수를 사용해서는 안되는 경우

메소드, prototype, addEventListener 함수의 콜백 함수

위의 설명한 this의 특성으로 인해 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리킨다.

const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};
person.sayHi(); // Hi undefined

this를 사용하지 않는다면 괜찮다.

참조: poiemaweb.com