15. Spread & Rest Operator / Destructuring

Spread Operator

배열의 원소나 객체의 프로퍼티를 나누는 데 사용한다.(배열이나 객체를 펼침)

const newArray = [...oldArray, 1, 2] → newArray에 oldArray의 내용과 원소 1, 2를 추가 

const newObject = {...oldObject, newProp : 5 } → oldObject의 모든 프로퍼티와 값을 꺼내 새 객체의 키 값으로 추가 

 

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
const newNumNoDot = [numbers, 4, 5]
// 점이 없으면 새 배열에 하나의 원소로 포함. 

console.log(newNumbers);  // 결과: [1, 2, 3, 4, 5]
console.log(newNumNoDot); // 결과: [[1, 2, 3], 4, 5]


const person = {
  name : "Kim"
}

const newPerson = {
  ...person,
  age : 30
}

console.log(newPerson) 
// 결과
//[object Object] {
//  age: 30,
//  name: "Kim"
// }

 

 

 

Rest Operator 

함수의 인수목록을 배열로 합치는데 사용하며, 함수 인수 목록에서 사용 

function sortArgs(...args){ return args.sort() } * args는 예시 아무 이름이나 써도 됨.. 

→ 함수는 매개변수가 몇 개이든, 매개변수를 무제한으로 받으며, 1개 이상의 매개변수를 갖고 있어도 모두 배열로 통합된다.

    그런 다음 매개변수 목록에 배열 메서드를 작성하는 등 편한 방법으로 매개변수를 저장할 수 있다. 

const filter = (...args) => {
  return args
}

console.log(filter("a","b","c","d")) // 결과 : ["a","b","c","d"]



const restOp = (...args) => {
  return args.filter(el => el === 1); 
}
// 매개변수 args를 JS내장함수 filter를 사용하여 배열의 각 요소에서 true인 값만 배열에 포함
// 즉, filter 함수에서 매개변수(el)로 들어온 값이 1과 같다면 배열에 추가

console.log(restOp(1,2,3)); // 결과: [1]
console.log(restOp(4,5,6)); // 결과: []

 

 

 

Destructuring(구조분할, 객체분할할당,구조분해할당) 

배열의 원소나 객체의 프로퍼티를 추출하여 변수에 저장 할 수 있음.

const { 속성1, 속성 2  ... } = 객체; 

 

* Spread Operator 와의 차이점

 : Spread는 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체 등에 전달하나, Destructuring은 원소나 프로퍼티 하나만 가져와 저장.

const numbers = [1,2,3];
[num1, ,num3] = numbers; 
console.log(num1, num3); // 결과: 1, 3

const person = {
    name: "Kim", 
    age: 30,
    gender: "female"
}

// person의 요소 값을 새로운 변수에 저장 
const {name: newName, gender: newGender} = person 

console.log(newName, newGender) // 결과: Kim female