JavaScript 익히기 #15 구조 분해 할당

Sunki-Kim·2022년 9월 18일
0

JavaScript 익히기

목록 보기
16/22

destucturing assginment 구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructing(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

배열 디스트럭처링 할당
// 배열 분해하기
let arr = ["Sunki", "Kim"]

// 구조분해할당을 이용해서
// firstName에는 arr[0]을
// surName에는 arr[1]을 할당

let [firstName, surName] = arr;

// or
let [firstName, surName] = "Sunki Kim".split(' ');

console.log(firstName) // Sunki
console.log(surName)// Kim

다음과 같이 1개 이상의 배열을 추출하여 할당을 진행한다.

// ES5
var arr2 = [1, 2, 3];

var one = arr2[0];
var two = arr2[1];
var three = arr2[2];

console.log(one, two, three); // 1, 2, 3

// ES6

const arr3 = [1, 2, 3];

const [one1, two1, three1] = arr3;

console.log(one1, two1, three1); // 1, 2, 3

ES6 배열 디스트럭처링 할당은 각 요소를 배열로부터 추출하여, 1개 이상의 변수에 할당한다.
변수 one, two, three를 선언하고 배열 arr3를 디스트럭처링하여 할당한다. 해당 대상이 이터러블이며,
이때 할당 기준은 배열의 인덱스다.


URL을 파싱하여 protocal, host, path 프로퍼티를 갖는 객체를 생성해 반환하는 예시다.

// ex)  url parsing

function parseURL(url = '') {
    // '://' 앞의 문자열(protocal)rhk '/' 이전의 '/'로 시작하지 않는 문자열(host)과
    // '/' 이후의 문자열(path)을 검색한다.
    const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
    console.log(parsedURL);
    /*
    [
     'https://developer.mozilla.org/ko/docs/Web/JavaScript',
     'https',
     'developer.mozilla.org',
     'ko/docs/Web/JavaScript',
     index: 0,
     input: 'https://developer.mozilla.org/ko/docs/Web/JavaScript',
     groups: undefined
    ]
     */

    if (!parsedURL) return {};

    // 배열 디스트럭처링 할당을 사용하여 이터러블에서 필요한 요소만 추출한다.

    const [, protocol, host, path] = parsedURL;
    return { protocol, host, path };

}
const parsedURL = parseURL('https://developer.mozilla.org/ko/docs/Web/JavaScript');

console.log(parsedURL);
/*
{
  protocol: 'https',
  host: 'developer.mozilla.org',
  path: 'ko/docs/Web/JavaScript'
}
 */

배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하게 사용가능하다.


객체 디스트럭처링 할당

// ES5
var user = {firstName : 'Sunki', lastName : 'Kim'};

var firstName1 = user.firstName;
var lastName1 = user.lastName;

console.log(firstName1, lastName1); // Sunki Kim

// ES6
const user2 = { firstName2: 'Sunki', lastName2: 'Kim' };
const { lastName2, firstName2 } = user2

console.log(firstName2, lastName2); // Sunki Kim

ES6 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
객체 디스트럭처링 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티 키다.
배열 디스트럭처링 할당과 마찬가지로 할당을 위해서는 할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언해야 한다.
이때 객체 리터럴 형태로 선언한다.


// todo 예시
function printTodo(todo) {
    console.log(`오늘 ${todo.content}${todo.completed ? '완료' : '진행중'} 상태입니다`);
}
printTodo({id: 1, content: '블로깅', completed: true});
// 오늘 블로깅은 완료 상태입니다.

객체를 인수로 전달받는 매개변수 todo에 객체 디스트럭처링 할당을 사용하면 좀 더 간단하고 가독성 좋게 표현할 수 있다.

// todo 예시2
function printTodo2({ content, completed }) {
    console.log(`오늘 ${content}${completed ? '완료' : '진행중'} 상태입니다`);
}
printTodo2({ id: 1, content: '블로깅', completed: false})
// 오늘 블로깅은 진행중 상태입니다.

소스코드

profile
당신에게 가치있는 Developer가 되고자

0개의 댓글