[ECMA Script6] 2. 화살표 함수(arow function) 및 트랜스파일링

  화살표 함수는 ES6에서 새로 추가된 기능입니다. 기존 자바스크립트 함수를 선언하려면 function 키워드를 이용해야 했으나, 화살표 함수는 해당 키워드 없이도 생성이 가능하며 returen을 사용하지 않아도 식을 계산한 값이 자동으로 반환됩니다.

아래는 기존 방식의 자바스크립트 function을 선언하는 예제입니다.

var myFunc = function (pName){
    return `내 이름은 ${pName}. 탐정이죠.`
}
 
console.log(myFunc("코난")) //내 이름은 코난 탐정이죠.
console.log(myFunc("고난")) //내 이름은 고난 탐정이죠.

화살표 함수는 아래와 같이 선언 및 사용이 가능합니다.
한 줄로 함수 정의가 가능하며, function키워드를 없애고 반환 값을 지정해주기 때문에 return키워드도 없앴습니다.

var myFunc = (pName, pText) => `내 이름은 ${pName}. ${pText}이죠.`
 
console.log(myFunc("코난", "탐정")) //내 이름은 코난 탐정이죠.
console.log(myFunc("고난", "역경")) //내 이름은 고난 역경이죠.

화살표 함수는 this를 새로 바인딩 하지 않습니다.
아래 함수 실행 예제를 보시면 this는 window 객체를 가르키기 때문에 undefined 오류가 발생합니다.

//function 키워드를 사용하여 선언된 함수
var gamechangers = {
    grade: ["A","B","C","D","F"],
    print: function(delay=1000){
        setTimeout(function(){
            console.log(this.grade.join(","))
        }, delay)
    }
}
 
gamechangers.print() // Cannot read property 'join' of undefined 오류 발생

반면 화살표 함수를 사용하게되면 this 영역이 제대로 유지되게 됩니다.

//setTimeout 내 function 키워드 제거
var gamechangers = {
    grade: ["A","B","C","D","F"],
    print: function(delay=1000){
        setTimeout(() => { //function 대신 () => 사용
            console.log(this.grade.join(","))
        }, delay)
    }
}
 
gamechangers.print() //A,B,C,D,F

여기서 재미있는 점은, print 프로퍼티를 화살표 함수로 바꿀 경우, 이때의 this는 window 객체로 인지하게 됩니다.
이 문제를 해결하려면 위와 같이 함수를 선언해야 합니다.

//print 프로퍼티를 화살표함수로 
var gamechangers = {
    grade: ["A","B","C","D","F"],
    print: (delay=1000){ //function 대신 () => 사용
        setTimeout(() => { 
            console.log(this.grade.join(","))
        }, delay)
    }
}
 
gamechangers.print() //Cannot read property 'join' of undefined 오류 발생

 

트랜스파일링

  ES6의 경우 아쉽게도 아직은 모든 웹 브루우져가 지원하지는 않습니다. 그리고 ES6를 지원하는 브라우져라고 할 지라도 모든 ES6 기능을 지원하지 않는 경우도 있습니다. 하여, ES6코드를 실행 가능한 ES5로 컴파일 하는 이러한 변환을 트랜스파일링이라고 합니다. 가장 유명한 트랜스파일링 도구로는 바벨이 있습니다.

아래는 트랜스파일링된 코드에 대한 예제입니다.
트랜스파일러는 use strict 선언을 맨 위에 추가하여 해당코드가 엄격한 모드에서 실행되도록 합니다.

// ES6 코드
const add = (x=5, y=10) => console.log(x+y)
 
//트랜스 파일러로 변환 된 ES5 
"use strict";
 
var add = function add(){
    var x = arguments.length <=0 || arguments[0] ===undefined ? 5 : argumength[0];
    var y = arguments.length <=1 || arguments[1] ===undefined ? 10 : argumength[1];
    return console.log(x + y);
};

인라인 바벨 트랜스파일러를 사용 할 경우 브라우저에서 자바스크립트를 직접 트랜스파일 할 수도 있습니다.
사용 방법은, script 태그에 type="text/babel"을 지정하면 됩니다.

단 , 아래 방식을 사용하면 브라우져가 런타임에 트랜스파일링을 수행하게 되는데 애플리케이션의 실행속도가 저하되기 때문에 좋은 방법은 아니라고 할 수 있습니다.

<div id="output"></div>
<!-- 바벨 로딩 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 변환할 코드를 script 태그 안에 삽입 -->
<script type="text/babel">
const getMessage = () => "Hello Wordl";
document.getElementById('output').innerHtml = getMessage();
</script>
 
<!-- 파일에 있는 소스 코드를 트랜스파일링 할 경우 -->
<script src="myScript.js" type="text/babel">