240723 구조분해할당 (Destructuring)

구조분해 할당?

객체 안에 있는 각각의 속성들을 분해해서 변수에 할당

배열의 경우

let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // new

let arr = ["value3", "value4", "value5"];
let [a,b,c] = arr; // = ["value3", "value4", "value5"]
let [d,e,f,g = 4] = arr; // = ["value3", "value4", "value5", 4]

객체의 경우

let user = {
  name : "길동",
  age : 30,
};

let {name, age} = user; // { name: '길동', age: 30 }

객체를 새로운 이름으로 할당

let {
  name : newName,
  age : newAge,
} = user;

console.log(newName); // 길동
console.log(newAge); // 30

🎈 실습

1. 다음 자바스크립트 객체에서 name과 age를 디스트럭처링을 사용하여 추출하고 출력하는 코드를 작성하세요.

const person = {
    name: "르탄이",
    age: 25,
    job: "개발자"
};

// 정답
const {name, age} = person;
console.log(name); // 르탄이
console.log(age); // 25

2. ⭐ 다음 자바스크립트 객체에서 title과 year를 디스트럭처링을 사용하여 추출하고 출력하는 코드를 작성하세요.

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

// 정답
const { title, release: { year } } = movie
console.log(title); // Inception
console.log(year); // 2010

3. 다음 자바스크립트 배열에서 첫 번째와 세 번째 요소를 디스트럭처링을 사용하여 추출하여 first, third 변수에 담아 출력하는 코드를 작성하세요.

const numbers = [10, 20, 30, 40, 50];

// 정답
const [first,,third] = numbers;
console.log(first); // 10
console.log(third); // 30

4. ⭐ 호텔의 예약 확인 시스템의 함수라고 가정합니다. 아래 결과와 같이 출력되도록 함수를 완성해 보세요.

function confirmReservation(user) {
    // 여기에 user 객체를 구조 분해 할당 하세요.
     const {name, roomType, date: firstDate} = user; 
  // ⭐ 1. userInfo 가 아닌 user // 2. date의 이름을 firstDate로 바꿔주기 
    return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

const userInfo = {
    name: "James",
    roomType: "Deluxe",
    date: "2023-05-30"
}
const result = confirmReservation(userInfo);
console.log(result);