화살표 함수(arrow function) 이해하기

 

기존 함수 정의 방식

var a = function() {
    // ...
};

화살표 함수 정의 방식

var a = () => {
    // ...
};

 

화살표 함수는 ES6문법에서 함수를 표현하는 새로운 방식입니다. ES5의 function 함수와 비슷한 방식으로 동작하지만 몇 가지 차이점이 있습니다.

// ES5
var add = function(x, y) {return x+y;}

// ES6
let add = (x, y) => {return x+y};

 

ES5와 비교해보면 function이 사라졌고 그 자리를 => 함수가 대체했네요. 지금은 그것 말곤 크게 다른 게 없는 것 같죠?

우선 기본적인 화살표 함수 사용방법을 알아볼께요.

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

// 함수 지정 방법
x => { return x * x }  // single line function
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며
                       // 암묵적으로 return, 위와 동일코드

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

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

 

화살표 함수 예제 사용 복습

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// 이 문장은 배열을 반환함: [8, 6, 7, 9]
elements.map(function(element) {
  return element.length;
});

// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
// 중괄호({})를 생략할 수 있다.
elements.map(element => element.length); // [8, 6, 7, 9]

// 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다.
// 'length'는 우리가 얻고자 하는 속성에 해당하는 반면,
// lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로
// 원하는 유효한 변수명으로 변경할 수 있다.
elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

// destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다.
// 이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 대신, "length" 변수의
// 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다.
elements.map(({ length }) => length); // [8, 6, 7, 9] 

 

우리는 간략히 화살표 함수 사용방법을 알아보았습니다.

그럼 이런 의문이 생길 수 있어요. function과 화살표 함수의 큰 차이점이 문법의 차이인가? 그렇다면 왜 화살표 함수를 사용해야 하지? 만약 이런 의문이 드신다면 지금까지 아주 잘 따라오고 계신 거예요.

 

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

서로 가리키고 있는 this 값이 다릅니다. 화살표 함수가 나오기 전까지는, 모든 새로운 함수는, 어떻게 그 함수가 호출되는지에 따라  자신의 this 값을 정의했습니다. 화살표 함수는 자신의 this가 없습니다.  대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용됩니다.

 

말이 조금 어렵죠? 그럼 일반 함수와 화살표 함수의 this의 차이점을 비교해 볼게요. 그럼 이해하시기가 좀 더 수월할 거예요.

 

일반 함수의 this

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 객체는 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다.

• 생성자 함수와 객체 메서드: this = 객체
• (생성자 함수와 객체 메서드를 제외한) 내부 함수, 콜백 함수 등: this = 전역 객체(window)

 

화살표 함수의 this

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정됩니다. 함수 실행 시점에 따라 동적으로 결정되는 일반 함수의 this와 달리, 화살표 함수의 this는 언제나 (화살표 함수의) 상위 스코프의 this를 가리킵니다.

function DogTest1 (){
    this.name = "푸들"
    return {
        name : "진돗개",
        type : function(){
            console.log(this.name + "입니다")
        }
    }
}

const dogType1 = new DogTest1 ();
dogType1.type(); //진돗개입니다

function DogTest2(){
    this.name = "푸들"
    return {
        name : "진돗개",
        type : ()=> {
            console.log(this.name + "입니다")
        }
    }
}

const dogType2 = new DogTest2();
dogType2.type(); //푸들입니다.

 

위의 예제 코드를 실행시켜 보면 차이점이 명확히 보입니다. 일반 함수는 자신이 종속된 객체를 this로 가리키고 화살표 함수는 자신이 종속된 인스턴스를 가리킵니다.

 

화살표 함수 기본 사용법 코드

//  empty 화살표 함수는 undefined를 반환 
let empty = () => {};

(() => 'foobar')();
// "foobar" 반환
// (this is an Immediately Invoked Function Expression

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18]

var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// 더 간결한 promise 체인
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// 매개변수가 없는 경우에도 더 읽기 쉬움
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);

감사합니다.