Index
① 디스트럭처링 할당
1. 디스트럭처링 할당
- 객체나 배열처럼 복잡한 데이터 구조에서 필요한 값을 간단하고 직관적으로 꺼낼 수 있다는 것이 디스트럭처링의 핵심
- 코드의 가독성과 효율성을 높이는 방법
1.1 객체 디스트럭처링
const user = { name: "Jay Tak", age: 30};
const { name, age } = user;
console.log(name); // "Jay Tak"
console.log(age); // 30
1.2 배열 디스트럭처링
const colors = ["red", "green", "blue"];
const [first, second] = colors;
console.log(first); // "red"
console.log(second); // "green"
1.3 객체, 배열 디스트럭처링 예시
function parseURL(url = '') {
const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
console.log(parsedURL);
if(!parsedURL) return {};
const [, protocol, host, path] = parsedURL;
return { protocol, host, path };
}
const parsedURL = parseURL('https://developer.mozilla.org/ko/docs/Web/JavaScript');
{
prtocol: 'https',
host: 'developer.mozilla.org',
path: 'ko/docs/Web/JavaScript'
}
🧐 Q. 왜 중요할까?
- 필요한 데이터만 추출할 수 있어 깔끔한 코드 작성 가능
- 함수의 매개변수에서 바로 추출 가능
- 기본값 설정, 중첩 구조 추출 등 유연한 활용 가능