[JS] Destructuring, Spread Operator, Rest Operator

Destructuring

객체

객체 내부의 요소들을 쪼개서 사용할 수 있다

 

const person = {
  name: "르순이",
  age: 28,
};

function greet({age, name}) {
  console.log(`안녕하세요. 제 이름은 ${name}이고, ${age}살 입니다.`);
}

greet(person);

위처럼 사용하는 경우 객체 내부에서 요소의 순서와 분해된 순서가 달라지면 영향이 있지 않을까 생각할 수 있지만, key의 이름과 일치하는 변수에 할당되므로 영향 없다!

 

객체 Destructuring 사용 예시

const movie = {
  title: "Inception",
  // 생략
};

const { title } = movie;  // "Inception"

// ----------------------------------------


const movie = {
  title: "Inception",
  release:  {
    year: 2010,
    month: "July",
  },
};

const { title,
  release: { year },
} = movie;

console.log(year);  // 2010

 

 

기존의 키를 다른 변수명으로 바꾸고싶은 경우

콜론을 사용한다!

const userInfo = {
  name: "James",
  roomType: "Delux",
  date: "2023-05-30",
};

function confirmReservation(user) {
  const { name, roomType, date: firstDate } = user;
  console.log(`${name}님의 ${roomType}룸 입실 날짜는 ${firstDate}입니다.`);
}

const result = confirmReservation(userInfo);
// 만약 date: firstDate가 아닌 firstDate로 바로 할당받으려는 경우
// user에는 firstDate라는 키가 없기 때문에 undefined가 뜬다

배열

유사한 동작을 하지만, 배열은 객체의 할당과 다르게 순서가 중요하다!

 

const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;

console.log(firstColor);  // red

순서에 맞게 할당된다.

 

만약 n번째 요소가 필요한 경우라면 아래와 같이 사용할 수 있다.

const colors = ["red", "green", "blue"];
const [, , thirdColor] = colors;

console.log(thirdColor);  // blue

첫번째 두번째는 어디에도 할당하지 않고 세번째 요소를 thirdColor에 할당하겠다는 의미다.

 

 

Spread Operators

배열이나 객체의 틀을 벗겨 내부 요소들의 값을 복사해갈 수 있다. 객체/배열을 복사할 때, 합칠 때 많이 쓰인다.

 

참조타입 복사

const originalUser = {
  name: "르탄이",
  age: 29,
};

const updatedUser = originalUser;  // 참조를 복사, updatedUser의 값을 변경하면 원본도 변경됨
const updatedUser = { ...originalUser };  // 원본 내부의 값을 복사, 복사본의 값을 변경해도 원본 수정X

 

참조타입 합치기

const first = [1, 2, 3];
const second = [4, 5, 6];

const combinedArray = [ ...first, ...second ];  // [1, 2, 3, 4, 5, 6]

 

합치는 객체들 중 키가 겹칠 때 우선적으로 반영되어야 하는 값이 있다면 반영되길 원하는 객체를 후에 대입해줘야 한다. (나중에 대입되는 것이 앞의 값을 덮어씀)

const obj1 = { name: "르탄이", age: 26 };
const obj2 = { name: "르순이", email: "address@aaa.com" };

// 두 객체를 합치는데, 겹치는 키가 있는 경우 obj2의 값을 반영하라
const mergedObj = { ...obj1, ...obj2 };
// { name: "르순이", age: 26, email: "address@aaa.com" };

 

 

Rest Operator

sperad operator와 사용방법은 동일하다. 하지만 사용 상황이 다르다!

 

사용하는 경우

1) 함수의 매개변수

function sum(numbers) {
  return numbers.reduce((acc, cur) => acc + cur);
}

const result = sum([1, 2, 3, 4, 5]);

function restSum(...numbers) {
  console.log(numbers);  // [1, 2, 3, 4, 5]
  return numbers.reduce((acc, cur) => acc + cur);
}

const restResult = restSum(1, 2, 3, 4, 5);

 

함수의 매개변수로 여러 값들을 보내줬을 때 받아주는 곳에서 rest operator를 이용해 받아주면, 전달한 여러개의 값들이 배열로 받아진다.

 

 

2) 객체 분해 할당 시, 여러 값을 그룹핑 하는 경우

const person = {
  name: "John",
  age: 30,
  country: "USA",
  occupation: "Developer",
};

// occupation을 제외한 나머지(rest) 값들을 하나의 객체로 받고싶음
const { occupation, ...rest } = person;
console.log(rest);  // { name: 'John', age: 30, country: 'USA' }