[🍦] JS 문법 - Destructuring (구조 분해 할당)

'destucture'의 뜻은 파괴하다

배열, 객체 안의 데이터를 뽑아쓰다.

 

Destructuring

 

📍array 적용 예시

1. 아래 배열에서 "강아지"는 dog라는 변수에,

"고양이"는 cat이라는 변수에 넣으려면?

const 동물리스트 = ["강아지", "고양이"];

정답

1.

const dog = 동물리스트[0]; // dog => "강아지"
const cat = 동물리스트[1]; // cat => "고양이"

 

2.

const 동물리스트 = ["강아지", "고양이"];
const [dog, cat] = 동물리스트;
// dog => "강아지"
// cat => "고양이"

=> 순서에 맞게 구조분해할당이 적용된다.

 

2. 배열 colors에서 세 번째 값인 blue만 출력하려면?

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

console.log();

 

정답

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

console.log(thirdColor); //blue 출력됨

 

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 객체를 구조 분해 할당 하세요.
        
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

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

정답

function confirmReservation(user) {
        // 여기에 user 객체를 구조 분해 할당 하세요.
        const {name, roomType, date: firstDate} = user;
        
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

const userInfo = {
  name: "James",
  roomType: "Deluxe",
  date: "2023-05-30"
}
const result = confirmReservation(userInfo);
console.log(result); // 출력 결과: 'James 고객님의 Deluxe룸 입실날짜는 2023-05-30 입니다.'

 

 

 

📍object 적용 예시

1. 아래 객체에서 "멋진셔츠"는 '상품명'이라는 변수에,

10000은 '가격'이라는 변수에 넣으려면?

const product = {
	상품명: "멋진셔츠",
	가격: 10000,
}

정답

1.

const 상품명 = product.상품명;
const 가격 = product.가격;

 

2.

const product = {
	상품명: "멋진셔츠",
	가격: 10000,
}

const { 가격, 상품명 } = product;

 

=> 객체 내부 요소였던 것이 각각의 변수에 할당되었다.

 

2. person의 name과 age를 greet 함수에 적용시켜서

"안녕하세요. 제 이름은 르순이입니다. 나이는 28이에요." 를 출력하는 방법은?

function greet() {
	console.log()
}

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

greet(person);

정답

1.

function greet(person) {
	console.log(`안녕하세요. 제 이름은 ${person.name}입니다. 나이는 ${person.age}이에요.`)
}

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

greet(person);

 

2.

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

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

greet(person);

 => 객체는 key의 이름을 따라가기 때문에 greet 내부의 인자의 순서가 바뀌어도 결과는 같다.

 

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

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

정답

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

 

4. 다음 자바스크립트 객체에서 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