[JS] Spread / Rest Syntax (2)

Spread / Rest Syntax

// 구조분해 할당 (비구조화 할당)

// example
const [ a, b, ...rest ] = [1, 2, 3, 4, 5];
console.log(a);         // 1
console.log(b);         // 2
console.log(...rest);   // 3 4 5

// for of문에서 구조분해 할당(비구조화 할당) 사용
// example
const user = [
    {name : 'kimcoding', age : 20, country : 'korea'},
    {name : 'parkcoding', age : 24, country : 'america'},
    {name : 'choicoding', age : 23, country : 'japan'}
];

// for of문
for(let {name, age, country} of user){              // kimcoding 20 korea
    console.log(name, age, country)                 // parkcoding 24 america
};                                                  // choicoding 23 japan

반응형

// 함수에서 구조분해 할당(비구조화 할당) 사용
// example
const user = [
    {name : 'kimcoding', age : 20, country : 'korea'},
    {name : 'parkcoding', age : 24, country : 'america'},
    {name : 'choicoding', age : 23, country : 'japan'}
];

// forEach문
user.forEach(function({name, age, country}, index){  // 0 kimcoding 20 korea
    return console.log(index, name, age, country)    // 1 parkcoding 24 america
});                                                  // 2 choicoding 23 japan

// map
user.map(function({name, age, country}, index){     // kimcoding 20 korea 0
    return console.log(name, age, country, index)   // parkcoding 24 america 1
});                                                 // choicoding 23 japan 2

// rest (나머지 매개변수)

// 매개변수를 배열의 형태로 받아서 사용할 수 있습니다. 매개변수의 개수가 가변적일 때 유용합니다.
// 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 나머지 매개변수
// 나머지 매개변수는 항상 마지막에 있어야 한다.

// example 1
function func(first, second, ...rest){
    console.log(first);          // 1
    console.log(second);         // 2
    console.log(...rest);        // 3, 4, 5, 6
}
func(1, 2, 3, 4, 5, 6);

// example 2
function f(arg1, ...rest, arg2) { 
}  // Error (...rest가 마지막에 있지 않아서 Error 발생)

 

---

 

 

Spread / Rest Syntax(2)를 알아보는 시간이었습니다.

틀린 내용은 댓글로 알려주시면 감사하겠습니다.