ES6 문법 예제

1.1. Destructuring: Object

// ES5 Syntax

var user = {
    first: 'Benji',
    vast: 'Marinacci',
    age: 32
};

var first = user.first;
var last = user.last;

first;  // 'Benji'

# // ES6 Syntax

var user = {
    first: 'Benji',
    vast: 'Marinacci',
    age: 32
};

var {first, last} = user;
first;  // 'Benji'

1.2. Destructuring: Array

// ES5 Syntax

var numbers = [1, 2, 3, 4];

var indexZero = numbers[0];
var indexOne = numbers[1];
var indexTwo = numbers[2];

indexZero;  // 1

// ES6 Syntax

var numbers = [1, 2, 3, 4];

var [indexZero, indexOne, indexTwo] = numbers;

indexZero;  // 1

• 함수의 파라미터에서 사용

// ES5 Syntax

var countToTwo = function(numbers) {
    var indexZero = number[0];
    var indexOne = number[1];

    console.log(indexZero + ', ' + indexOne);
};

countToTwo(numbers);    // 1, 2

// ES6 Syntax

var countToTwo = function([indexZero, indexOne]) {
    console.log(indexZero + ', ' + indexOne);
};

countToTwo(numbers);    // 1, 2

2. Spread Operation

// ES5 Syntax

function someFn(a, b, c, d) {
    console.log(a + b + c +d);
};

var args = [1, 2, 4, 16];
someFn.apply(null, args);

// ES6 Syntax

someFn(...args);

3. Rest Parameters

// ES5 Syntax

var multiplyByNum = function(x) {
    var nums = Array.prototype.slice.call(arguments, 1);
    nums.forEach (function(num) {
        console.log(x * num);
    });
};


// ES6 Syntax

var multiplyByNum = function(x, ...nums) {      // rest parameters(...)
    nums.forEach((num) => console.log(x * num));
};

4. Default Parameters

// ES5 Syntax

var generateAddress = function(city, state, country) {
    country = country === undefined ? 'USA' : country;
    return city + ', ' + state.toUpperCase() + ', ' + county;
};

// ES6 Syntax

var generateAddress = function(city, state, country = 'USA') {  // Default Parameters
    return `${city}, ${state.toUpperCase()}, ${county}`;    // Template Literals
};

generateAddress('Oakland', 'CA');   // 'Oakland, CA, USA'
generateAddress('Calgary', AB, 'Canada');   // 'Calgary, 'AB, Canada'

5. Arrow Functions: Expressions

// ES5 Syntax

var multiplier = function(x, y) {
    return x * y;
};

// ES6 Syntax

var multiplier = (x, y) => x * y;

// ES5 Syntax

var doubleValues = function (values) {
    return values.map(function(values) {
        return value * 2;
    });
};

// ES6 Syntax

var doubleValues = values => values.map(value => value * 2);

6. Arrow Functions and the Keyword: this, setTimeout()

// ES5 Syntax

var Delay = function(delay, reaction) {
    this.delay = delay;
    this.reaction = reaction;
};

Delay.prototype.haveReaction = function () {
    setTimeout(function() {
        console.log(this.reaction);
    }.bind(this), this.delay);
};


// ES6 Syntax

Delay.prototype.haveReaction = function () {
    setTimeout(() => {
        console.log(this.reaction);
    }, this.delay);

7. for...of Loop

// ES5 Syntax

var nums = [1, 4, 6, 7];

for(let i = 0; i < nums.length; i++) {
    console.log(nums[i]);
}


// ES6 Syntax

for(let ele of nums) {
    console.log(ele);
}