전개 연산자

1. 정의 

(1) 형태

const a = [1,2,3]

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

console.log(...a) // 1,2,3

const b = {a:'apple', b: 'banana', c: 'car'}
const c = {d:'digest', e: 'earth', f: 'fool\'s day'}
const r = {...b,...c}
console.log(r) // {a:'apple', b: 'banana', c: 'car', d:'digest', e: 'earth', f: 'fool\'s day'}

(2) 정의 

배열이나 객체의 원소들을 차례대로 전개하는 연산자이다. 

배열의 대괄호나, 객체의 중괄호를 벗긴다. 

 

** console.log() 에 여러 개의 data를 찍는 법 

,(쉼표)로 출력하고픈 data를 나열하면 된다. 그러면 출력시에는 공백으로 구분되어 나온다. 

2. 배열에서 쓰이는 모습

3. 객체에서 쓰이는 모습 

4. 함수로 응용

** 3번째가 1 2 3 으로 나온 이유는 ...a로 인해 [1,2,3]이 1,2,3으로 변해  두,세번째 인자에 2와 3이란 값이 들어갔기 때문이다.

5. 스스로 해보기 

// 배열 병합
const a = [1,2,3]
const b = [4,5,6] 
  // 전개 연산자 안 쓰고 병합
  const c = a.concat(b)
  console.log(c)
  // 병합 하지 말고 넣어보기
  console.log(a,b) 
  // 전개 연산자 써서 병합
  const d = [...a,...b]
  console.log(d)
  console.log(...d)

// 배열 병합 
const x = {a:'apple', b: 'banana', c: 'car'}
const y = {d:'digest', e: 'earth', f: 'fool\'s day'}
  // 전개 연산자 안 쓰고 병합
  const w = Object.assign({}, a,b)
  console.log(w)
  // 병합 하지 말고 넣어보기
  console.log(x,y) 
  // 전개 연산자 써서 병합
  const r = {...x,...y}
  console.log(r)

// 함수로 응용
  function fn (x,y,z) {
    console.log(x,y,z)
  }
  // 그냥 숫자 3개 넣기
  fn(1,2,3)
  // 첫 번째 인자만 배열 넣고 나머진 안 넣기
  fn([1,2,3]) 
  // 첫 번째 인자만 전개 연산자 쓴 배열 넣고 나머진 안 넣기
  fn(...[1,2,3])