[JavaScript] ES6 문법정리 (화살표 함수)

ES6의 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략하게 함수를 선언할 수 있다

화살표함수 작성 방법

매개변수 지정

• 매개변수가 없을 경우

() => { ... }

• 매개변수가 한개인경우
• 소괄호를 생략할 수 있다.

x => { ... }

• 매개변수가 여러 개인 경우
• 소괄호를 생략할 수 없다.

(x, y) => { ... }

 

함수 몸체 지정

• single line인 경우
• 함수가 한줄이라면 중괄호 생략가능
• 암묵적으로 return

x => { return 2 + x }
x => 2 + x 

• multi line인 경우

() => {          
  const x = 5;
  return 2 + x;
};

 

ES6 코드 사용 사례 & 효과

일반적인 함수 표현식보다 표현이 간결하다.

// ES5
var arr = [1, 2, 3];
var pow = arr.map(function (x) {
  return x * x;
});

console.log(pow); // [ 1, 4, 9 ]

// ES6
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

 

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 
콜백 함수 내부의 this는 전역 객체 window를 가리킨다.
JavaScript VS Java : This란?

[JavaScript vs Java] This

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 일반 함수와는 달리 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다 (Lexical this - Lexical Scope와 유사하다. Lexical Scope는 차후 정리 예정)
call, apply, bind 혹은 변수대입 없이 상위 스코프에 this를 고정시킬 수 있다.
(단, call, apply, bind 메소드를 사용하여 다른 객체로 변경이 불가하다.)

function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  // this는 상위 스코프인 prefixArray 메소드 내의 this를 가리킨다.
  return arr.map(x => `${this.prefix}  ${x}`);
};

const pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

 

화살표함수의 사용을 피해야 하는 경우

메소드를 정의할 때

메소드로 정의한 화살표 함수 내부의 this는 메소드를 호출한 객체(소유한 객체)를 가리키지 않고 상위 객체인 전역객체 window(global)를 가리킨다.

const introduce = {
  name: 'hyewon',
  hello: () => console.log(`Hi, My name is ${this.name}`)
};

introduce.hello(); // Hi, My name is undefined

 

생성자 함수를 사용할 때

화살표 함수는 생성자 함수로 사용할 수 없다.
.생성자 함수는 prototype 프로퍼티가 가리키는 prototype 객체의 constructor를 사용한다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.

const Example = () => {};

//prototype프로퍼티를 가지고 있는지 검사
console.log(Example.hasOwnProperty('prototype')); // false

const example = new Example(); // TypeError: Example is not a constructor

 

addEvantListener함수의 콜백함수로 사용할 때

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.
function키워드로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 타겟된 요소를 가리킨다.

var btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked btn';
});

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  console.log(this === btn); // => true
  this.innerHTML = 'Clicked btn';
});