8 ES6 for Vue.js - 화살표 함수

source: categories/study/vue-beginner-lv2/vue-beginner-lv2_8.md

8.1 화살표 함수 소개 및 설명

Arrow Function - 화살표 함수

  • 함수를 정의할 때 function이라는 키워드를 사용하지 않고 =>로 대체
  • 흔히 사용하는 콜백 함수의 문법을 간결화
  • 화살표 함수는 function 일반 함수와 다른 스코프를 가짐
// ES5 함수 정의 방식
var sum = function (a, b) {
    return a + b;
}

// ES6 함수 정의 방식
var sum = (a, b) => {
    return a + b;
}

sum(10, 20);

화살표 함수 사용 예시

// ES5
var arr = ['a', 'b', 'c'];
arr.forEach(function (value) {
    console.log(value);
})
// a
// b
// c

// ES6
var arr = ['a', 'b', 'c'];
arr.forEach(value => console.log(value)); 
// a
// b
// c

8.2 화살표 함수 실습

  • babel transpiler

    TARGETS에서 IE11 지원안한다는 메시지 지우면 바벨이 IE까지 지원되게 트랜스파일링해줌.

// ES6
var arr = [1, 2, 3];
arr.forEach(value => {
    console.log(value);
})

var multiply = () => {
    return 1 * 2;
}

// babel -> ES5
"use strict";

var arr = [1, 2, 3];
arr.forEach(function (value) {
    console.log(value);
})

var multiply = function multiply () {
    return 1 * 2;
}