5일차 공부내용 3

1. Function

1.1 Destructuring Assignment

New in ES6 is a welcome feature called destructuring assignment that allows you to take an object or an array, and “destructure” it into individual variables. 

. Object

// a normal object
const obj = { b: 2, c: 3, d: 4 };
// object destructuring assignment
const {a, b, c} = obj;
a; // undefined: there was no property "a" in obj
b; // 2
c; // 3
d; // reference error: "d" is not defined

Object destructuring can be done on assignment alone, but it must be surrounded by parentheses;

const obj = { b: 2, c: 3, d: 4 };
let a, b, c;
// this produces an error:
{a, b, c} = obj;
// this works:
({a, b, c} = obj);

. Array

you can assign any names you want (in order) to the elements of the array:

// a normal array
const arr = [1, 2, 3];
// array destructuring assignment
let [x, y] = arr;
x; // 1
y; // 2
z; // error: z hasn't been defined

const arr = [1, 2, 3, 4, 5];
let [x, y, ...rest] = arr;
x; // 1
y; // 2
rest; // [3, 4, 5]

1.2 Destructuring Arguments

function getSentence({ subject, verb, object }) {
    return `${subject} ${verb} ${object}`;
}
const o = {
    subject: "I",
    verb: "love",
    object: "JavaScript",
};
getSentence(o); // "I love JavaScript"

As with destructuring assignment, property names must be identifier strings, and a variable that doesn’t have a matching property in the incoming object will receive the value undefined.

You can also destructure arrays:

function getSentence([ subject, verb, object ]) {
     return `${subject} ${verb} ${object}`;
}
const arr = [ "I", "love", "JavaScript" ];
getSentence(arr); // "I love JavaScript"

you can use the spread operator (...) to collect any additional arguments:

function addPrefix(prefix, ...words) {
    // we will learn a better way to do this later!
    const prefixedWords = [];
    for(let i=0; i<words.length; i++) {
        prefixedWords[i] = prefix + words[i];
    }
    return prefixedWords;
}

addPrefix("con", "verse", "vex"); // ["converse", "convex"]

1.3 Default Arguments

New in ES6 is the ability to specify default values for arguments

function f(a, b = "default", c = 3) {
    return `${a} - ${b} - ${c}`;
}
f(5, 6, 7); // "5 - 6 - 7"
f(5, 6); // "5 - 6 - 3"
f(5); // "5 - default - 3"
f(); // "undefined - default - 3"

1.4 Functions as Properties of Objects

When a function is a property of an object, it is often called a method to distinguish it from a normal function

const o = {
    name: 'Wallace', // primitive property
    bark: function() { return 'Woof!'; }, // function property (method)
}

ES6 introduces a new shorthand syntax for methods.

const o = {
    name: 'Wallace', // primitive property
    bark() { return 'Woof!'; }, // function property (method)
}