8.1 객체 디스트럭처링
JavaScript에서 디스트럭처링은 배열에서 값을 분해하거나 객체에서 속성을 개별 변수로 추출할 수 있는 문법이야. 이렇게 하면 코드가 더 깔끔하고 읽기 쉬워져. 이번 강의에서는 객체와 배열 디스트럭처링을 자세히 살펴보고 여러 가지 예시와 적용 방법을 배울 거야.
1. 기본 문법
객체 디스트럭처링은 객체의 속성 값을 추출하여 변수에 할당할 수 있게 해줘:
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // 출력: John
console.log(age); // 출력: 30
console.log(isStudent); // 출력: false
2. 새로운 변수에 할당
객체의 속성 값을 다른 이름의 변수에 할당할 수도 있어:
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // 출력: John
console.log(personAge); // 출력: 30
3. 기본값
객체에 존재하지 않는 속성이 있을 경우, 기본값을 설정할 수 있어:
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // 출력: true
4. 중첩 디스트럭처링
중첩된 객체에서 값을 추출할 수도 있어:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // 출력: New York
console.log(country); // 출력: USA
5. 함수의 파라미터에서 디스트럭처링
함수의 파라미터에서 디스트럭처링을 사용할 수도 있어:
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // 출력: Hello, my name is John and I am 30 years old.
8.2 배열 디스트럭처링
1. 기본 문법
배열 디스트럭처링은 배열 요소 값을 추출하여 변수에 할당할 수 있게 해줘:
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // 출력: apple
console.log(second); // 출력: banana
console.log(third); // 출력: cherry
2. 요소 건너뛰기
추출할 필요 없는 배열 요소를 건너뛸 수 있어:
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // 출력: apple
console.log(third); // 출력: cherry
3. 기본값
배열 요소에 기본값을 설정할 수 있어:
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // 출력: banana
4. 중첩 디스트럭처링
중첩된 배열에서 값을 추출할 수도 있어:
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // 출력: 2
console.log(three); // 출력: 3
5. 함수의 파라미터에서 디스트럭처링
배열의 경우 함수의 파라미터에서 디스트럭처링을 사용할 수 있어:
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // 출력: John Doe
8.3 디스트럭처링 활용 예시
1. 변수값 교환
디스트럭처링을 사용하면 쉽게 변수값을 교환할 수 있어:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 출력: 2
console.log(b); // 출력: 1
2. 객체에서 데이터 추출
디스트럭처링은 API 응답 등에서 객체 데이터를 추출하는 데 유용해:
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // 출력: John Doe
console.log(email); // 출력: john@example.com
3. 함수에서 기본값 설정
디스트럭처링을 사용하면 함수 파라미터의 기본값을 쉽게 설정할 수 있어:
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// 출력: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// 출력: { name: 'Anonymous', age: 0, isAdmin: false }
4. 배열과 함수
디스트럭처링은 배열 작업을 더욱 간편하게 도와줘, 특히 배열 메소드 사용 시에 말이야:
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 출력: 1
console.log(second); // 출력: 2
console.log(rest); // 출력: [3, 4, 5]
GO TO FULL VERSION