진취적 삶
36 디스트럭처링 할당 본문
디스트럭처링 할당: 구조화된 배열과 같은 이러터블 또는 객체를 destructing 하여 1개 이상의 변수에 개별적으로 할당하는것을 말한다.
36.1 배열 디스트럭처링 할당
배열 디스트럭처링 할당의 대상은 이터러블이어야한다. 할당 기준은 배열의 인덱스다.
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3
기본값보다 할당된 값이 우선시 된다.
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3
function parseURL(url = "") {
// '://" 앞의 문자열과 / 이전의 / 로 시작하지 않는 문자열과
// / 이후의 문자열을 검색한다.
const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
if (!parseURL) return {};
const [, protocol, host, path] = parsedURL;
return { protocol, host, path };
console.log(parseURL);
}
const parsedURL = parseURL(
"https://developer.mosziila.org/ko/docs/Web/JavaScript"
);
console.log(parsedURL);
36.2 객체 디스트럭처링 할당
const user = { firstName: "suha", lastName: "hwang" };
const { lastName, firstName } = user;
console.log(firstName, lastName);
객체의 프로퍼티 키와 다른 변수이름으로 프로퍼티 값을 할당 받으려면 다음과 같이 변수를 선언해야한다.
const user = { firstName: "suha", lastName: "hwang" };
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln);
function printTodo(todo) {
console.log(
`할일 ${todo.content} 은 ${
todo.completed ? "완료" : "비완료"
} 상태 입니다 `
);
}
printTodo({ id: 1, content: "js", completed: false });
'개발 도서 > 자바스크립트 deepdive' 카테고리의 다른 글
47 에러처리 (0) | 2023.07.13 |
---|---|
48 모듈 (0) | 2023.07.13 |
37 set 과 map (0) | 2023.07.13 |
38 브라우저의 렌더링 과정 (0) | 2023.07.13 |
39 DOM (0) | 2023.07.13 |