티스토리 뷰

수업자료/ECMA Script

[ECMA Script 2015] 화살표 함수 ( Arrow function )

개발 레시피 2018. 8. 7. 10:55

이 내용은 아래 링크에서 동영상 강의도 같이 보실 수 있습니다.

화살표 함수 ( Arrow function )

ECMA Script 2015에 새로운 익명함수 정의 방법인 화살표 함수가 추가됐습니다.

사용방법은 아래와 같이 기존 함수 선언문법에서 function을 제거하고 괄호 뒤에 => 화살표를 추가해줍니다.

// 매개변수가 없을 경우
() => { ... }
// 매개변수가 한개인 경우 소괄호를 생략할 수 있습니다.
param => { ... } 
// 매개변수가 두개 이상인 경우 소괄호를 생략할 수 없습니다.
(param1, param2) => { ... } 

// 함수 내부 코드가 1줄이라면 중괄호도 생략 가능하고 실행 결과를 리턴합니다.
param => param + 1

이런 간단한 함수 선언으로 인해 아래와 같이 코드 가독성이 높아졌습니다.

const numbers = [1, 2, 3, 4, 5];

// [2, 3, 4, 5, 6] 출력
console.log(numbers.map(function(number) { return number + 1 })); // 기존 방법
console.log(numbers.map(number => number + 1)); // 화살표 함수

화살표 함수는 간단한 문법 이외에도 this의 동작이 명확해졌습니다.

자바스크립트의 this

Java나 PHP등 대부분의 언어가 그렇듯 this의 용도는 클래스 내부에서 자신을 가리키는게 더 익숙합니다.

하지만 자바스크립트는 this가 아래와 같이 실행하는 위치마다 의미가 다릅니다.

함수 안에서의 this

function func() {
    console.log(this); // window 객체
    console.log(this === window); // true
}

func();

엄격모드에서 함수 안에서의 this

"use strict"

function func() {
    console.log(this); // undefined
}

func();

메소드 안에서의 this

const object = {
    func: function() {
        console.log(this); // object 객체
        console.log(this === object); // true
    }
};

object.func();

생성자 실행에서의 this

function SomeObject(name) {
    this.name = name;
    console.log(this); // 새로 생성된 객체 ( someObject 혹은 someObject2 )
}

const someObject = new SomeObject('someObject');
const someObject2 = new SomeObject('someObject2');

이렇게 함수가 임의로 this를 바인딩하기 때문에 일관성 없는 동작방식으로 개발자에게 많은 혼란을 줬습니다.

화살표 함수는 더이상 임의로 this를 바인딩 하지 않고 상위 스코프의 this를 가져옵니다.

일반 함수와 화살표 함수 비교

- 일반 함수

개발자가 원하는 this를 사용하기 위해 별도의 변수에 넣거나, bind()를 사용하는 등 불필요한 코드를 추가해야합니다.

function Person(name) {
    this.firstName = name;
}

Person.prototype.prefixName = function (arr) {
    // 아래 일반 함수에서 사용하기 위해 that이란 변수 생성
    const that = this;
    
    return arr.map(function (character) {
        // 일반 익명 함수에서 this는 window객체이므로 this.firstName === undefined
        // 따라서 위에서 정의한 that을 사용
        return character + ' ' + that.firstName;
    });
};

const person = new Person('철수');
console.log(person.prefixName(['김', '이']));

function Person(name) {
    this.firstName = name;
}

Person.prototype.prefixName = function (arr) {
    return arr.map(
        function (character) {
            return character + ' ' + this.firstName;
        }.bind(this) // 개발자가 임의로 this바인딩을 변경
    );
};

const person = new Person('철수');
console.log(person.prefixName(['김', '이']));