Spread operator

ES6에 추가된 문법으로 ... 을 통해 사용할 수 있다.

코드를 통해 확인해보도록 하자!

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

console.log(arr) // [ 1,2,3,4,5 ]
console.log(...arr) // 1,2,3,4,5

arr 배열을 spread 연산자로 찍어보면 배열이 아닌 개별적인 요소가 반환된다.

const arr = [1,2,3,4,5];
const a = [...arr];

console.log(a) // [1,2,3,4,5]

기존에 arr 배열을 새로운 배열에 복제하려면 반복문으로 하나씩 담아줬는데 이렇게 전개 연산자를 사용하면 쉽게 만들 수 있다.

배열의 병합

const arrA = [1,2,3]
const arrB = [4,5,6]

// concat 사용
console.log(arrA.concat(arrB)); // [1,2,3,4,5,6]

// Spread 사용
console.log([...arrA, ...arrB]); [1,2,3,4,5,6]

spread 연산자를 이용하여 array.concat()을 대체 할 수 있다.

const arrA = [1,2,3];
const arrB = [4,5,6];

const newArr = [...arrA, "전개연산자", ...arrB];
console.log(newArr) [1, 2, 3,'전개연산자', 4, 5, 6]

이렇게 배열의 병합시 중간에 새로운 값을 쉽게 넣어줄 수 있다.

객체 복제

const obj = { a:1 , b:2 , c:3 };
const newObj = {...obj , b:4};

객체를 복제가능하며 위와 같이 객체의 일부를 변경할 수도 있다.

배열 객체화

알고리즘을 풀다가 알게 됬는데 정말 좋았던 기능이었다!

const obj  = [1,2,3]

const objArr = {...obj}

console.log(objArr) // { '0': 1, '1': 2, '2': 3 }

spread 연산자 사용하여 배열을 쉽게 객체로 변환 할 수 있다.

Math 사용

let arr = [11, 30, 45, 28]
let value = Math.max(arr)
console.log(value) // NaN
 
let arr = [11, 30, 45, 28]
let maxValue = Math.max(...arr)
let minValue = Math.min(...arr)
console.log(maxValue) // 45
console.log(minValue) // 11

전개 연산자와 Math를 활용하면 배열의 가장 큰 숫자, 작은 숫자를 쉽게 얻을 수 있다.

객체 수정

객체 수정

const user = {
  name: "jongjin",
  age: 31,
  password: 12345
};

const killPassword = ({ password, ...rest }) => rest;

const cleanUser = killPassword(user);

console.log(cleanUser); // name,age 만 출력됨

기본값 설정하기

const user = {
  name: "jongjin",
  age: 31,
};

const setCountry = ({ country = "KR", ...rest }) => ({ country, ...rest });

console.log(setCountry(user));

Rest Parameter

spread 연산은 배열을 개별적으로 전개하지만 Rest 파라미터는 개별 요소들을 배열로 묶어준다.

function func(...rest) {
  console.log(rest);
}

func(1, 2, 3); // [ 1, 2, 3 ]

함수를 호출할때 사용되는 함수의 매개변수(Parameter)를 spread 연산자로 작성한 형태를
Rest Parameter라고 한다.