JS - Spread operater

Spread operater

스프레드 연산자는 ES6에서 추가된 문법으로 ...을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 또는 요소로 확장하여 0개 이상의 키-값의 쌍의 객체로 확장시킬 수 있다!

너무 좋은 기능인데 조금 늦게 발견한 감이 없지 않지만 자주 쓰기 위해 포스팅을 남겨놓는다 ..!😎

예시

---

1. 배열의 복제

스프레드 사용전

const array = [1,2,3,4,5];

const newArray = [];

for(let i=0; i<array.length; i++){
  newArray[i] = array[i];
}

스프레드 사용후

const array = [1,2,3,4,5];
const newArray = [...array];

사용전과 사용후가 너무 다르다
또한 여기서 배열의 '복제'란 Reference 복사가 아닌 값 복사로써 newArray의 값이 변해도 원본의 array는 변경이 없다.

2. 배열의 병합

스프레드 사용전

const arrayA = [1,2,3];
const arrayB = [4,5,6];

const result = arrayA.concat(arrayB);

스프레드 사용후

const arrayA = [1,2,3];
const arrayB = [4,5,6];

const result = [...arrayA, '놀랍군!',...arrayB];

위와 같이 스프레드로 배열의 병합시 중간에 자신이 원하는 값을 넣어줄 수가 있다 !!

3. 객체를 복제

const objA = { a:1, b:2 };
const objB = {...objA};

이렇게 배열과 마찬가지로 복제가 가능하며

const objA = { a:1, b:2 };
const objB = {...objA, b:4};

이렇게 객체중 일부만 update를 할 때에도 사용이 된다.

4. 배열을 인수로 사용

const fruitStand = ['🍏','🍊','🍌']
const sellFruit = (f1, f2, f3) => { console.log(`Fruits for sale: ${f1}, ${f2}, ${f3}`) }
sellFruit(...fruitStand) // Fruits for sale: 🍏, 🍊, 🍌
fruitStand.pop()
fruitStand.pop()
fruitStand.push('🍉')
fruitStand.push('🍍')
sellFruit(...fruitStand) // Fruits for sale: 🍏, 🍉, 🍍
fruitStand.pop()
fruitStand.pop()
sellFruit(...fruitStand,'🍋') // Fruits for sale: 🍏, 🍋, undefined

위의 출력 결과를 확인하면 스프레드 연산자의 경우 배열을 다른 인수로 "확산"하므로 여러 인수를
허용하는 모든 함수는 확산 연산자를 사용하면 이점을 얻을 수 있습니다 !

5. Math기능 사용

const numbers = [37, -17, 7, 0]
console.log(Math.min(numbers)) // NaN
console.log(Math.min(...numbers)) // -17
console.log(Math.max(...numbers)) // 37

Math객체의 함수 집합은 함수에 대한 유일한 인수가 될 수 있는 스프레드 연산자를 표현하기 좋다!

6. Rest Parameter

function add(...rest) {
  let sum = 0;
  for (let item of rest) {
    sum += item;
  }
  return sum;
}

console.log( add(1) ); // 1
console.log( add(1, 2) ); // 3
console.log( add(1, 2, 3) ); // 6

마지막으로 소개하는 Rest parameter의 경우에는
함수를 호출할때 사용되는 함수의 매개변수(Parameter)를 스프레드 연산자로 작성한 형태를
Rest Parameter라고 한다!
위의 코드처럼 Rest Parameter를 사용하게 되면 함수의 파라미터 값들로 들어오는 애들이 모여서
배열로 집어넣어 진다 그렇게 되면 받아야하는 파라미터의 갯수가 인자의 갯수 만큼 맞추어져서
깔끔한 함수 표현이 적용 가능해진다.

또한 기본적으로 들어오는 다른 인자들과 같이 섞어서 적용 또한 가능한데

function test(parameter, ...RestParameter){
}

이런식으로 사용이 가능하다

하지만 Rest Parameter의 경우에는 항상 제일 마지막 파라미터로 있어야 한다.
만약 순서가 바뀌면 SyntaxError: Rest element must be last element의 에러가 뜬다!!