[JavaScript] spread 연산자(...)

spread 연산자(...)

spread 연산자(...)

처음 수업에서 이 연산자를 접했을 때 따로 더 공부를 해보고 싶었지만 ...을 검색을 해봐도 나오지 않아 어려움을 겪었었다. spread operater, spread 연산자로 검색하면 나오는 이 연산자는 spread 문법으로 여러 상황에서 유용하게 쓸 수 있는 연산자이다.

spread 연산자의 역할

배열 구조 분해 할당

• ...연산자는 배열을 분해할 때 나머지 요소들을 저장한다.
• 배열을 분해하여 저장할 때 앞의 값들을 분해 할당한 후, 남은 값들을 모아서 저장하기 위해 마지막에 추가하여 사용한다.
• ...연산자를 사용하면 나머지 요소들은 배열로 저장된다.

// ...연산자 사용
let [animal1, animal2, ...rest] = ["cat", "dog", "rabbit", "tiger", "lion"];

console.log(animal1); // cat
console.log(animal2); // dog

// rest = [rabbit, tiger, lion]
console.log(rest[0]); // rabbit
console.log(rest[1]); // tiger
console.log(rest.length); // 3

객체 구조 분해 할당

• 배열에서와 같은 방식으로 객체도 ...연산자를 사용하여 나머지 요소를 할당할 수 있다.
• 이때 ...연산자를 사용하면 나머지 요소들은 객체로 저장된다.

let animal = { name: "Munzi", type: "cat", age: 2 , breed: "British Shorthair"};

// name = name의 값을 그대로 name 변수에 저장
// t = type의 값을 t 변수에 저장
// rest = { age: 2, breed: British Shorthair }
let { name, type: t, ...rest} = animal;

console.log(name); // Munzi
console.log(t); // cat
console.log(rest.age); // 2
console.log(rest.breed); // British Shorthair

가변 인자 전달

• 자바스크립트에서 함수의 매개변수에 가변 인자를 전달하고 싶을 때는 ...연산자를 사용한다.
• ...연산자는 나머지 매개변수를 모아서 배열로 넘긴다.

function sumAll(...args) { // args => 가변 인자를 전달함
    // args는 배열로 만들어짐
    console.log(Array.isArray(args)); // true
    let sum = 0;
    for (let num of args) {
      sum += num;
    }
    return sum;
}

console.log( sumAll(2) ); // 2
console.log( sumAll(2, 4) ); // 6
console.log( sumAll(2, 4, 6) ); // 12

• 앞부분은 매개변수로 넘기고 나머지 매개변수를 모아 배열로 전달할 수 있다.
  > ※ 단 ...연산자는 항상 맨 마지막에 전달해야 한다.

function sumAll(num1, num2, ...args) {
    let sum = num1 + num2;
    for (let num of args) {
      sum += num;
    }
    return sum;
}

console.log( sumAll(1, 2, 3, 4) ); // 10
console.log( sumAll(1, 2, 3, 4, 5) ); // 15
console.log( sumAll(1, 2, 3, 4, 5, 6) ); // 21