[JavaScript] ES6 문법 정리 (구조분해할당, 단축 속성명, 전개 구문 ...)

1. 구조분해할당 (destructuring)

 

de(not/분해) + structure(구조) + ing

객체의 속성을 하나 하나 분해해서 값을 변수에 담을 수 있게 해주는 문법 

// Array
let arr = [1, 2, "hi"];
let [a, b, c, d] = arr;

console.log(a, b, c, d); // 1 2 hi undefined

// Object
let person = {
    name: "kdh",
    age: 23,
    height: 182
}
let { name, age, height: tall, weight = 75 } = person;
console.log(name, age, tall, weight); // kdh 23 182 75

 

 

2. 단축 속성명 (property shorthand)

 

객체를 정의할 때 Key와 value의 이름이 같다면 value를 생략하여 표현하는 방식
obj = {name: name, age: age}   ≫  obj = {name, age} 

const name = "kdh"
const age = 23;

let obj = { name: name, age: age };
let obj2 = { name, age };

console.log(obj); // { name: 'kdh', age: 23 }
console.log(obj2); // { name: 'kdh', age: 23 }

 

 

3. 전개 구문 (spread operator)

 

구조분해할당(destructuring)과 함께 가장 많이 사용되는 ES6 문법 중 하나로

...Object로 표현하여 객체의 중괄호(소괄호)를 지우고 안에 들어있는 값을 풀어줌

let Arr = [1, 2, 3, 4, 5];
let Obj = { name: "kdh", age: 23, };
let Obj2 = { height: 182, weight: 75 };

console.log(...Arr); // 1 2 3 4 5
console.log({ ...Obj, ...Obj2 }); // { name: 'kdh', age: 23, height: 182, weight: 75 }

 

 

4. 나머지 매개변수 (rest parameter)

 

매개변수의 수를 한정시켜놓지 않고 배열로 받는 문법

function f(...args) {
    console.log(args); // [ 1, 2, 3, 4, 5 ]
}

f(1, 2, 3, 4, 5);

 

 

5. 템플릿 리터럴 (Template Literal)

 

문자열을 입력할 때 ``(백틱)안에 문자열 외에도 ${}로 필요한 내장된 표현식을 불러올 수 있음

멀티라인으로 여러 줄을 편리하게 출력할 수 있음

let name = "kdh";
let age = 23;

console.log(`My name is ${name}.
And I'm ${age} years old
                I also put string in here!`);
/*
My name is kdh.
And I'm 23 years old
                I also put string in here!
*/

 

 

6. 일급 객체로서의 함수 (First-Class Object)

 

Javascript에선 함수를 일급 객체(First-Class Object)라고 표현하여 함수를 객체처럼 여러가지 방식으로 다룸

일급 객체(First-Class Object)의 특징으로는

1. 변수에 함수를 할당할 수 있음

let f = function (a) {
    return a * 2
};

console.log(f(5)); // 10

 

2. 함수를 인자로 다른 함수에 전달할 수 있음

function ff(f, a) {
    f(a);
}

ff(function (a) {
    console.log(a * 2); // 10
}, 5);

 

          2-1. 고차함수 - 함수를 인자로 받거나 return하는 함수 (콜백함수를 전달받는 함수)

          2-2. 콜백함수 - 매개변수로써 쓰이는 함수 (고차함수의 한 매개변수)

function f(str, func) { // 고차함수
    for (let val of str) {
        func(val);
    }
}

let str = [1, "a", 2, "b", 3, "c"];

let printAll = val => { // 콜백함수1
    console.log(val);
}
let printNumber = val => { // 콜백함수2
    if (typeof val === "number") console.log(val);
}

f(str, printAll); // 1 a 2 b 3 c
f(str, printNumber); // 1 2 3

3. 함수를 반환할 수 있음

function f(val) {
    return function (val2) {
        return val + val2;
    }
}

const ff = f(10);
console.log(ff(1000)); // 1010

위에서 f()에 넣은 10은 val에 들어가 대입되어 결국 ff를 다음과 같은 함수로 만들어준다.

 

const ff = function (val2) {
    return 10 + val2;
};

val2에 1000의 값이 들어가면 1010을 return하게 되며 콘솔에 1010이 찍히게 된다.