[JS - 개념 ] 자바스크립트에 점점점(...)의 기능

배열

 

배열에서 ...을 사용하면 배열이 개별원소가 된다. 

 

const array = [1, 2, 3]



console.log(...array)   // 1 2 3
console.log([...array]) // [ 1, 2, 3 ]
console.log(array) // [1, 2, 3]

const array1 = [1, 2]
const array2 = [5, 6]
const array3 = [...array1, 3, 4, ...array2]
console.log(array3) // [ 1, 2, 3, 4, 5, 6]

이런식으로 출력이 된다.

 

그리고 ...을 사용해도 원본은 그대로 유지가 된다. 

 

객체

 

객체에서 사용할때는 나머지를 의미한다. 

 

 

const obj = {
    a : 1,
    b : 2,
    c : 3,
    d : 4,
    f : 5

}

const {a, b, ...c} = obj;

console.log(a, b, c) // 1 2 { c: 3, d: 4, f: 5 }

const newObj = {a, b, ...c};

console.log(newObj) // { a: 1, b: 2, c: 3, d: 4, f: 5 }

 

 

함수 

 

함수에서 사용될때는  Rest Parameter 을 의미한다. 

함수는 그 argument들을 배열로 받아옵니다.

 

function fun(a, b, ...args) {
    console.log(a);
    console.log(b);
    console.log(args);
}
fun(1, 2, 3, 4, 5); 

// 1
// 2
// [ 3, 4, 5 ]

주의할점은 마지막에만 사용이 가능하다 

 

function fun (a, ...args, b){
    
}

이런식으로 중간에 사용하면 에러가 뜬다.

 

 

rest parameter vs. arguments

 바로위에서 함수에서 사용할때는 배열로 받아온다고 했는데 이를 활용도 가능하다.

 

자바스크립트에는 함수에 들어오는 모든 argument 값들을 갖는 arguments라는 객체가 있다. 

함수의 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체는 length 속성이 있고 argument들을 전달된 순서대로

0부터 n까지 키를 부여한 유사 배열 객체(array-like object) 입니다.

 

덕분에 arguments 객체는 iterable하게 객체 내부를 순회할 수 있지만 배열이 아니기 때문에 map(), reduce(), pop() 등과 같은 메소드를 쓸 수는 없습니다. 

 

반면에 rest parameter은 배열이기 때문에 arguments 객체를 배열로 변환할 필요없이 배열처럼 사용 하면 된다.

 

 

function fun(... args) {
    for(let i = 0 ; i < args.length; ++i) console.log(args[i]);
    return args.reduce((acc, cur) => acc + cur);
}
fun(1, 2, 3, 4);
// 1
// 2
// 3
// 4
// 10        

function fun2(a, b, c) {
    for(let i = 0; i < arguments.length; ++i) console.log(arguments[i]);
    return arguments.reduce((acc, cur) => acc + cur);
}
fun2(1, 2, 3, 4);
// 1
// 2
// 3
// 4
// Uncaught TypeError: arguments.reduce is not a function

 

 

 

 

Destructuring rest parameters

 

Destructuring 번역하면 구조 분해 라는 뜻인데 한번에 이해가 가지 않는다. 

 

그대로 직역하면 파괴한다는 의미에 걸맞게 배열 또는 객체를 쪼개서 그 값을을 개별적인 변수에 할당해주는 기법을 의미한다.

코드로 보면 바로 이해가 간다.

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);           // 1 2 3

이런식으로 각각 변수들에 할당해주는 것으로 배열을 해체하는 것과 같은 결과를 얻었다.

 

 

rest parameter를 사용한다면 함수 안에서 argument들의 배열을 array destructuring 한 효과를 얻을 수 있습니다.

 

function fun(... [a, b, c]) {
    console.log(a, b, c);
}
fun(1, 2, 3);         // 1 2 3

rest parameter를 ...args의 형태가 아닌 ...[a, b, c]의 형태로 사용하여 배열 안의 a, b, c가 그대로 destructuring되어 함수 안에서 사용됩니다.

 

 

 

 

 

 

 

 

 

참고

 

https://dinn.github.io/javascript/js-dotdotdot/#abstract