[Javascript] ES6 문법 5 - 화살표 함수

ES6 문법 5 - 화살표 함수

기존 자바스크립트의 함수 사용방법

//add라는 이름이 있는 함수
function add(first, second){ return first + second; };

//이름이 없는 익명 함수를 변수에 대입
var add = function(first, second) {return first + second; };

ES6의 화살표 함수 사용 방법

기존 자바스크립트의 익명 함수를 선언하고 변수에 대입하는 방식과 유사하다. 다른 점은 function 키워드를 생략하고 인자 블록(()) 과 본문 블록({}) 사이에 => 를 표기한다는 점이다.

var add = (first, second) => {
    return first + second;
};
//결과값을 바로 return 하는 경우 중괄호{} 생략 & 반환표현식을 바로 넣을 수 있음.
var add = (first, second) => first + second ;
// 객체를 반환할 때는 괄호() 안에 객체{} 넣기
var addAndMultiple = (first, second) => ({ add : first+second, multiply : first*second});

위 코드에서 보았듯이 기존 자바스크립트의 익명함수를 선언하고 변수에 대입하는 것과 유사하고 본문 블록에서 결과값을 바로 반환(return)하는 경우에는 중괄호를 생략하고 => 뒤에 바로 반환 표현식 (first + second)를 넣을 수 있다. 또한 반환값이 객체인 경우 괄호로 결과값을 감싸서 간결하게 표현할 수 있다.

ES6의 화살표 함수의 장점

• 함수 표현식을 간결히 할 수 있음.
• 커링(currying)과 같은 디자인 패턴에서 사용되는 함수를 반환할 때 "계단형 함수 선언" 구조가 만들어 지지않게 해줌.
• 콜백 함수의 this 범위로 생기는 오류를 피하기 위한 bind() 함수를 사용하지 않아도 됨.

기존 함수 표현식을 화살표 함수로 변환 예제

function addNumber(num) {
    return function(value) { //반환값이 함수인 계단형 함수 선언
    	return num + value;
    };
}

//계단형 함수 선언을 간경하게 화살표 함수로 ⭐
var addNumber = num => value => num + value;

//콜백함수의 this 범위를 위한 바인딩
class MyCLass {
    value = 10;
    constructor() {
    	var addThis2 = function(first, second) {
        	return this.value + first + second;
        }.bind(this);
        // 바인딩이 필요없는 화살표 함수 ⭐
        var addThis3 = (first, second) => this.value + first + second;
    }
}