[ 연산자와 구문 ] 전개 연산자

//  전개 연산자 (Spread Operator)
//  => 배열 데이터의 대괄호 [] 를 날려주는 역할 !
//  => 객체 데이터의 중괄호 {} 를 날려주는 역할 !

//  유용 하게 사용 된다 !

const a = [1, 2, 3]

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

//  ... 은 전개 연산자 라고 부른다. 즉, 데이터를 쭉 펼쳐서 전개 한다. => 1 2 3
console.log(...a)   //  1 2 3

console.log(1, 2, 3)    //  1 2 3   => console.log 는 , (콤마) 를 제거 하고 출력.

const b = [1, 2, 3]
const c = [4, 5, 6]

b.concat(c) //  [1, 2, 3, 4, 5, 6]

d = b.concat(c)

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

const e = [b, c]

//  e 라는 변수 안에 하나의 큰 배열이 들어 있고, 그 배열 안에 다른 작은 배열 2개가 들어 있다.
console.log(e)

//  전개 연산자를 사용 !
const f = [...b, ...c]

console.log(f)  //  배열 b와 배열 c의 [] 대괄호를 전부 없애 준다.

console.log(...f)  //   큰 배열을 담은 f에 ... 전개 연산자를 붙혀서 [] 를 없앤다.
//  => 1 2 3 4 5 6

//  =============================================

const g = {x: 1, y: 2}
const h = {y: 3, z: 4}

//  Object 의 assgin() 함수를 사용 함으로써,
//  빈 객체 데이터 { } 와, 객체 g와 h를 작성 해서,
//  빈 객체 데이터에 객체 g와 객체 h를 병합 하고, 새로운 객체 데이터가 생성 된다.
const i = Object.assign({}, g, h)

//  객체 데이터는 키값 (프로퍼티) 이 고유 해야 하기 때문에,
//  기존의 y의 데이터의 값은 나중에 들어온 y의 데이터의 값으로 덮어 씌워 진다.
console.log(i)  //  {x: 1, y: 3, z: 4}

const j = {...g, ...h}  //  전개 연산자 ... 을 사용.

console.log(j)  //  {x: 1, y: 3, z: 4}

function fn(x, y, z) {
    console.log(x, y, z)
}

fn(1, 2, 3) //  1 2 3

const k = [1, 2, 3]

//  배열 데이터의 각각의 요소를 함수 fn의 인자로 넣기.
//  근데 조금 불편 하다.
fn(k[0], k[1], k[2])    //  1 2 3

//  ★★★★★

//  함수 fn() 의 인자 배열 k를 넣으면, [1, 2, 3] undefined undefined 가 나온다.
//  함수 fn() 의 인자에 값이 들어 가지 않으면,
//  자동으로 undefined 를 출력 하게 된다.
fn(k)   //  [1, 2, 3] undefined undefined

//  이때 전개 연산자를 사용 할 수 있는데,
//  fn() 함수의 인자로 ...k 를 넣게 되면,
//  배열 데이터 k의 대괄호가 날라 간다.
//  그러면 [1, 2, 3] 에서 => 1, 2, 3 이 된다 !
//  즉, fn() 함수의 인자가 모두 채워 지게 된다.
fn(...k)    //   1 2 3

//  [ 정리 ]
//  전개 연산자 : ...
//  => 배열 데이터의 대괄호 [] 를 날려주는 역할 !
//  => 객체 데이터의 중괄호 {} 를 날려주는 역할 !