관리 메뉴

진취적 삶

36 디스트럭처링 할당 본문

개발 도서/자바스크립트 deepdive

36 디스트럭처링 할당

hp0724 2023. 7. 13. 12:00

디스트럭처링 할당: 구조화된 배열과 같은 이러터블 또는 객체를 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