지저분한 JavaScript 작성을 피하세요: 오늘 Object Destructuring 배우기
Source: Dev.to
솔직히 말해봅시다.
If your JavaScript still looks like this:
const user = { name: "Alex", age: 25 };
const name = user.name;
const age = user.age;…we need to talk. 😅
Because JavaScript already gave us a much cleaner feature called Object Destructuring, and ignoring it is basically choosing more code for no reason.
오늘 배울 내용
- 객체 구조 분해가 무엇인지
- 그 작동 원리
- 뒤에서 정확히 무슨 일이 일어나는지
By the end, your code will be shorter, cleaner, and way more professional.
객체 구조 분해란?
객체 구조 분해를 사용하면 한 줄로 객체의 속성을 변수로 추출할 수 있습니다.
기본 예제
const user = {
name: "Alex",
age: 25,
country: "India"
};
const { name, age, country } = user;
console.log(name, age, country);출력
Alex 25 India설명
const { name, age, country } = user;means:
user객체에서 name, age, country 속성을 가져옵니다.- 동일한 이름의 변수를 생성합니다.
이는 세 개의 별도 할당을 작성하는 것보다 훨씬 깔끔합니다.
기본값
때때로 속성이 존재하지 않을 수 있습니다. 구조 분해 할당을 사용하면 default value를 설정할 수 있습니다.
const user = { name: "Alex" };
const { name, age = 18 } = user;
console.log(name, age);출력
Alex 18설명
age = 18은 객체에 age가 포함되지 않은 경우 기본값을 설정합니다. 이렇게 하면 코드에서 undefined 값을 방지할 수 있습니다.
변수 이름 바꾸기
때때로 변수 이름을 다르게 하고 싶을 때가 있습니다.
const user = { name: "Alex", age: 25 };
const { name: username, age } = user;
console.log(username, age);출력
Alex 25설명
name: username 은 다음을 의미합니다:
- 속성
name을 가져와서 username이라는 변수에 저장합니다
원본 객체는 수정되지 않습니다.
중첩 객체 구조 분해
객체는 다른 객체를 포함할 수 있습니다. 구조 분해를 사용하면 중첩된 값을 쉽게 추출할 수 있습니다.
const user = {
name: "Alex",
address: {
city: "Chennai",
country: "India"
}
};
const { address: { city, country } } = user;
console.log(city, country);출력
Chennai India설명
address: { city, country }는 address 객체 안으로 들어가 그 속성을 추출합니다. 이제 city와 country는 최상위 변수가 됩니다.
함수 매개변수에서 구조 분해 할당
구조 분해 할당은 함수 매개변수 내부에서도 직접 사용할 수 있습니다.
const user = { name: "Alex", age: 25 };
function greet({ name, age }) {
console.log(`Hello ${name}, you are ${age} years old.`);
}
greet(user);출력
Hello Alex, you are 25 years old.설명
함수 매개변수 { name, age }는 전달된 객체에서 값을 자동으로 추출합니다. 함수 내부에서 user.name을 작성할 필요가 없습니다—코드가 더 깔끔하고 읽기 쉬워집니다.
실제 예시: API 응답
Imagine you call an API and receive this response:
const apiResponse = {
id: 1,
username: "devAlex",
email: "alex@email.com",
profile: {
followers: 100,
following: 50
}
};You can destructure it like this:
const {
username,
email,
profile: { followers, following }
} = apiResponse;
console.log(username, email, followers, following);Output
devAlex
alex@email.com
100
50Explanation
구조 분해 할당을 사용하면 다음을 가져올 수 있습니다:
usernameemail- 중첩된
followers - 중첩된
following
모두 한 줄의 깔끔한 문장으로. apiResponse.profile.followers를 반복해서 작성할 필요가 없습니다.
객체 구조 분해 할당을 사용해야 하는 이유
- 코드 감소 – 반복적인 할당을 피함
- 가독성 향상 – 스캔하기 쉬움
- 기본값 –
undefined방지 - 함수 정리 – 매개변수 구조 분해
- 업계 표준 – React, Node.js, API 처리에서 널리 사용
빠른 팁
- 한 번만 구조 분해 – 함수나 모듈의 시작에서 필요한 모든 속성을 가져옵니다.
- 기본값 사용 – 누락된 데이터를 방지합니다.
- 필요할 때 이름 바꾸기 – 변수 이름을 의미 있게 유지합니다.
- 중첩은 현명하게 – 깊은 구조도 구조 분해할 수 있지만, 가독성을 해치는 지나치게 복잡한 패턴은 피하세요.
최종 생각
If you are still writing this:
const name = user.name;
const age = user.age;…깊게 숨을 쉬고 구조 분해 할당을 받아들여 보세요.
Your code will be 짧아지고, 더 깔끔하며, 유지보수가 훨씬 쉬워질 것입니다.
Happy coding! 🎉