ES6 문법 배워보기 (Arrow function 화살표 함수)

화살표 함수

화살표 함수란 function 키워드 대신에 =>를 사용해서 보다 쉽게 함수를 선언할수 있다. 

모든 경우에서 화살표 함수를 사용할수 있는것은 아니다.

1 2 3 4 5

() => { }; //매개변수가 없을경우        x => { }; //매개변수가 하나일경우 ( 괄호를 생략 가능 )   (x, y) => { }; //매개변수가 두개 이상일 경우 ( 괄호 생략 불가능 )

cs

화살표 함수는 익명함수로만 사용할수 있다. 따라서 화살표 함수를 호출하기 위해선 함수 표현식을 사용한다.

const calc = x => x * x;
console.log(calc(5)); // 25

5가 매개변수로 들어가서 5 * 5가 되어 반환되어서 출력된다.

콜백함수로 사용할수도 있다. 이경우 es5보다 함수표현식이 간결 해진다.

// ES5
var arr = [1, 2, 3];
var pow = arr.map(function (x) { // 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

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

일반 함수의 this는 매번 함수를 정의할때마다 각각의 this가 존재 했습니다.

이것을 해결하기위해 that이나 bind()를 이용해서 문제점을 해결했습니다. 

하지만 화살표 함수는 자신의 this객체를 생성하지 않기 때문에 that이나 bind()를 사용하지 않아도

this를 사용할수 있습니다. 

// ES5
 
function foo() {
    console.log(this);        // foo{}
 
    setTimeout(function foo2() {
        console.log(this);    // window{}
    }, 1000);
}
 
var f = new foo();
 
 
// ES6
 
function foo() {
    console.log(this);        // foo{}
 
    setTimeout(() => { console.log(this) }, 1000);    // foo{}
}
 
var f = new foo();

function 키워드를 사용한 함수에서는 window객체를 반환하는 반면

화살표 함수를 이용한 곳은 foo객체를 반환하는것을 볼수 있다. 

화살표 함수를 사용하면 안되는 경우

화살표 함수는 Lexical this를 지원하므로 콜백 함수로 사용하기 편리하다. 

하지만 화살표 함수를 사용하는 것이 오히려 혼란을 불러오는경우도 있다

1. 메소드 

화살표 함수로 메소드를 정의하는 것은 피해야 한다. 

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

this는 window객체를 가르키고 있기 때문에 undefined가 출력된다.

기존에 function 키워드를 사용했다면 this는 person객체를 가르키기 때문에 name이 정상적으로 출력된다.

또는 ES6의 축약 메소드 표현을 사용하는 방법도 있다.

const person = {
  name: 'Ko',
  sayHi() { // seyHi() { === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};
 
person.sayHi(); // Hi Ko

2. 생성자 함수

화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼티를 가지며 

protorype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한. 

하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.

const Foo = () => {};
 
// 화살표 함수는 prototype 프로퍼티가 없다
console.log(Foo.hasOwnProperty('prototype')); // false
 
const foo = new Foo(); // TypeError: Foo is not a constructor

3. addEventListener

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역객체 window를 가리킨다.

var button = document.getElementById('myButton');
 
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

따라서 addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우,

function 키워드로 정의한 일반 함수를 사용하여야 한다.

일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소를 가리킨다.

var button = document.getElementById('myButton');
 
button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

참조 사이트 :  https://poiemaweb.com/es6-arrow-function