구조 분해 할당

구조 분해 할당

• JavaScript에서 객체나 배열의 속성/요소를 쉽게 추출하여 변수에 할당할 수 있게 해줌
• 간결한 코드를 만들 수 있음
• 객체와 배열 모두 적용 가능

객체 구조 분해 할당

const user = {
  name: "차은우",
  email: "user1@naver.com",
  age: 25
};

// 객체 구조 분해 할당
const { name, email, age } = user;

console.log(name);  // 차은우
console.log(email); // user1@naver.com
console.log(age);   // 25

기본값 설정

const user = {
  name: "차은우",
  email: "user1@naver.com"
};

// 기본값 설정
const { name, email, age = 30 } = user;

console.log(age); // 30 (user 객체에 age 속성이 없으므로 기본값 사용)

다른 변수명으로 할당

const user = {
  name: "차은우",
  email: "user1@naver.com"
};

// 다른 변수명으로 할당
const { name: userName, email: userEmail } = user;

console.log(userName);  // 차은우
console.log(userEmail); // user1@naver.com

배열 구조 분해 할당

const numbers = [1, 2, 3];

// 배열 구조 분해 할당
const [first, second, third] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

기본값 설정

const numbers = [1, 2];

// 기본값 설정
const [first, second, third = 3] = numbers;

console.log(third); // 3 (numbers 배열에 세 번째 요소가 없으므로 기본값 사용)

나머지 요소 할당

const numbers = [1, 2, 3, 4, 5];

// 나머지 요소 할당
const [first, second, ...rest] = numbers;

console.log(rest); // [3, 4, 5]

함수 매개변수에서의 구조 분해 할당

• 많은 매개변수를 가지는 함수에서 유용함

const displayUser = ({ name, email }) => {
  console.log(`Name: ${name}, Email: ${email}`);
};

const user = {
  name: "차은우",
  email: "user1@naver.com"
};

displayUser(user); // Name: 차은우, Email: user1@naver.com