자바스크립트 화살표 함수

화살표 함수는 ES6의 문법. function 키워드를 이용한 함수를 간단히 표현한 것으로 화살표 함수는 항상 익명이다.

 

 

 

1. 기본 형태 및 문법

1-1. 기존 문법과 비교

//function 키워드 이용
var foo = function() { /*작업 내용*/ };

//화살표 함수
var foo = () => { /*한 줄밖에 없을 때는 중괄호 생략 가능*/ }; 

 

1-2. 매개 변수가 있는 경우

// 매개변수가 하나인 경우
var foo = x => x;

// 매개변수가 여러개인 경우
var foo = (a, b) => a + b;
foo(1, 2); // 3

 

1-3. 콜백함수에서 사용할 경우

// ES5
var numbers = [1, 4, 9];
var oddArr = numbers.filter(function (x) { return x % 2 !== 0;});
console.log(oddArr); // [1, 9]

// ES6
var numbers = [1, 4, 9];
var oddArr = numbers.filter( x => (x % 2) !== 0 );
console.log(oddArr); // [1, 9]

 

 

2. this

기존에 일반 함수는 자신의 this 값을 정의했었지만, 화살표 함수는 전역 컨텍스트에서 실행될 때 this를 새로 정의하지 않는다. 대신 코드의 바로 바깥의 함수(혹은 class)의 this값이 사용된다. 

function Person(){
  this.age = 0;

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

var p = new Person();

 

 

---

참고 

1.  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

2.  https://poiemaweb.com/js-this

3.  https://poiemaweb.com/es6-arrow-function