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' }
'JavaScript' 카테고리의 다른 글
[JS] 단축평가 (||, &&, ?., ??) (0) | 2024.08.08 |
---|---|
[JS] 자바스크립트 실행 컨텍스트 (0) | 2024.08.02 |
[JS] Scope, Class, this 바인딩 (0) | 2024.07.31 |
[JS] 클래스 상속 / 클로저 (0) | 2024.07.29 |
[JS] 참조타입의 변형을 막는 방법 (freeze, seal) (0) | 2024.07.25 |