Spread Operator(...) / Rest parameter(...)

!Spread Operator와 Rest parameter의 형태가 동일함으로 주의 필요!

Spread Operator : 요소를 개별적으로 분리
Rest parameter : 요소를 배열로 전달

Spread Operator(...)

👀 Spread 문법을 배열에서 사용하면 보다 간결하고 가독성 좋게 표현할 수 있다
Spread문법(...)은 대상을 개별 요소로 분리해주는 연산자이며, 순회 가능한 자료 구조에만 사용할 수 있다!

const array = ['hello','world'];
console.log(array); // ['hello','world']
console.log(...array); // 'hello','world'

const string = 'hello'
console.log(...string) // 'h', 'e', 'l', 'l', 'o'

console.log(...{ a: 1, b: 2 }); // 일반 객체는 순회가 가능하지 않은 자료 구조
// TypeError: Found non-callable @@iterator

array에서의 사용

1. 배열 합치기(concat 메소드를 기능)

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

2. 배열 추가하기(push 메소드를 기능)

const arr1 = [1,2,3]
const arr2 = [4,5,6]
console.log(...arr1,...arr2)

3. 배열에 다른 배열의 개별 요소 삽입하기(splice 메소드 기능)

const arr1 = [1,2,3]
const arr2 = [4,5,6]
console.log(arr1[2],...arr2) // 3, 4, 5, 6
// 또는...
arr1.splice(3,0, ...arr2) // 3번째 요소를 기준으로 arr2요소 추가해줘

4. 배열의 복사(Deep copy)(slice 메소드 기능)

const arr1 = [1,2,3]
const arr2 = arr1
// =(등호)를 사용하면 복사가 가능하지만 arr1값을 할당한거라 값 공유가 일어난다!

const arr1 = [1,2,3]
const arr2 = [...arr1]
// ...을 이용해 분해해 준 다음 다시 배열에 담아서 복사를 하자!

5. 파라미터 형태로 삽입할 때

functoin add(a,b,c){
  console.log(a+b+c)
}
// 직접 하드코딩하거나(add(10,20,30), 배열 하나씩 넣었었는데 add(arr[0],arr[1],arr[2]))
// ... 으로 해결!
const arr = [10, 20, 30]
add(...arr);

object에서의 사용

1. 객체 합치기

const obj1 = {a:1, b:10}
const obj2 = {b:2, c:3, d:4}
const obj3 = {...obj1, ...obj2}
console.log(obj3);
// 만약 key값이 중복되면 뒤에 오는 key값이 앞의 값을 덮어쓴다!

Rest parameter(...)

👀 Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다!
👀 Rest 파라미터는 length 프로퍼티에 영향을 주지 않는다!
👀 Rest 파라미터는 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담긴다. => 마지막에 한번만 사용할것!
Rest 파라미터(...)는 파라미터의 매개변수 이름 앞에 사용하여 정의한 매개변수를 의미함.

function A(parameter1,parameter2,...rest){
	console.log(rest); // [3,4,5]
  	console.log(rest.length); // 0
	console.log(A.length); // 2 = parameter1, parameter2
}
A(1,2,3,4,5)
// parameter1에는 1 / parameter2에는 2 가 할당된다.

예제

let a = [1,2,3];
let b = ['you', 'are'];
let c = function(a,b){
  console.log([[...a], ...[...b]]);  
}
c(a,b) // [Array(3),'you','are']

// 배열안에 담기
function obj(...rest){
  return rest
}
let text = obj(1,2,3,4,5);
console.log(text); // [1,2,3,4,5]

// 문자를 넣으면 정렬
function txt(a){
  let newarr = ([...a])
  console.log(newarr); // ['b','e','a','r'] 하나씩 배열에 담김
  let arrsort = newarr.sort()
  console.log(arrsort); // ['a','b','e','r'] 
}
txt('bear');