Spread syntax, Destructing

Spread

배열을 풀어서 늘어놓는 것. 인자로 전달하거나 각각의 요소를 어딘가에 넣을 때 사용!

1. 배열 중간에 넣기

const spread = [1, 2, 3];
const arr = [0, ...spread, 4];

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

2. 배열 또는 객체 이어붙이기

• 합치는 두 객체의 중복 사항이 있으면 뒤에 있는 객체의 값을 따른다.
• 배열의 합은 obj1.concat(obj2)와 같다.
• spread로 합친 배열(객체)은 얕은 복사가 이루어진 다른 배열(객체)이다. 따라서 기존 배열(객체)와는 주소를 달리해 서로 영향을 끼치지 않는다.
  근데 그 속에 다른 object가 있다면 또 다른 이야기..

const obj1 = {
  name: 'yein',
  age: 20,
  sex: 'female',
}

const obj2 = {
  age: 25,
  location: 'seoul',
  tall: 163
}

const whoiam = {...obj1, ...obj2}
console.log(whoiam) 
//{ name: 'yein', sex: 'female',  age: 25, location: 'seoul', tall: 163 }

Rest

배열형식으로 받아오기. 파라미터 개수가 가변적일 때 배열의 형태로 받아 사용.

❗️자바스크립트는 named parameter를 지원하지 않기 때문에 함수 호출 시 인자의 순서가 중요!

function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
}

cosole.log(getAllParams(123)) // [123, undefined, []])

위 함수에서는 2개의 값을 받고 추가로 있다면 ...args rest를 이용해 배열로 받아오고자한다. 하지만 함수 호출문에서 인자를 하나밖에 넣지 않았기때문에, 첫값은 그대로 / 둘째값은 undefined로, 셋째값은 빈 배열로 나타나게된다.

argument

spread syntax가 생기기 전에 함수의 인자를 배열로 만들어주기위해 사용했다.

function getAllParamsByArgumentsObj() {
      return arguments;
}

유사 배열 '객체'를 생성하는데, 보이지 않는(?) key를 배열 인덱스처럼 붙여준다.

아무튼 이런 정신없는 상황이 생기고, rest처럼 배열로 만들어주기 위해서는 Object.values() 또는 Array.from()를 다시 적용시켜야한다.
이러한 번거로움때문에 JS는 개발자들 편하라고 spread를 만들어주었다고 한다,,

Destructing

구조 분해 할당은 쓰임이 너무 광범위하게 넓어질 수 있어서 가장 모호하다고 느꼈다.

1. 배열에서 특정 인덱스를 떼올 수 있다.

const array = ['hi', 'hello', 'bye'];
const [first, second] = array; // first === 'hi', second === 'hello'

2. 배열이나 객체를 분해시킬 수 있다.

3. 객체의 단축

const name = '다이애나'
const age = 25

const person = {
  name,
  age,
  level: 'Junior',
} // name에 '다이애나', age에 25가 값으로 들어간 것과 같다

4. 객체의 분해

const student = { name: '다이애나', major: '전전', nationality: '대한민국' }
const { name, ...args } = student
// 객체의 단축과 반대의 역할을 한다. 
// name은 마치 변수가 선언 및 할당된 것 처럼, name을 쓰면 '다이애나'가 반환된다.
// args는 name을 뺀 나머지 속성들을 객체로 묶는다. 
// {major: '전전', nationality: '대한민국'}이 그 값이 된다.