프로그래밍/JavaScript

Javascript Destructuring (자바스크립트 비구조화 할당)

SpiritLink 2018. 9. 7. 16:02

자바스크립트 코드를 작성하다 보면 객체 내에서 일부 데이터만 필요하고

나머지 데이터는 필요없는 상황이 많다.

이때 간단하게 오브젝트 내에서 필요한 데이터만 추출해 보자.


1. 배열 (Array)


let data = ["crong", "honux", "jk", "jinny"];
let [jisu,,jung] = data;
console.log(jisu, jung);

data의 배열 내에 4개의 이름이 들어가 있다.

jisu는 data의 0번째, jung은 data의 2번째 값을 받고있다.

1번째 값은 ,,으로 건너 뛰었다.

로그를 출력하면 crong, jk가 출력되는것을 확인할 수 있다.


2. 오브젝트 (Object)


let obj = {
    name : "crong",
    address : "Korea",
    age : 10
};

오브젝트 내에서 원하는 데이터를 뽑고싶다면

let {name, age} = obj;

이렇게 추출하면 된다.

name은 crong

age는 10이 들어있다.


만약 변수의 이름을 다르게 하고 싶다면

let {name:myName, age:myAge } = obj;

myName에 name의 값이 들어가게 되고

myAge에 age의 값이 들어가게 된다.


myName, myAge 변수를 사용하면 된다.


3. JSON 파싱


let news = [
    {
        "title" : "sbs",
        "imgurl" : "http://static.naver.net/1",
        "newslist" : [
            "[가보니] 가상 경주도 즐기고, 내 손으로 자동차도 만들고",
            "'갤럭시S8' 출시? '갤노트7' 처리 계획부터 밝혀야"
        ]
    },
    {
        "title" : "mbc",
        "imgurl" : "http://static.naver.net/2",
        "newslist" : [
            "Lerem ipsum dolor sit amet",
            "ipsum dolor sit amet"
        ]
    }
];

JSON 내의 데이터중 필요한 데이터만 추출해보자.


let [,mbc] = news;

JSON 배열 내의 데이터중 1번째 데이터를 mbc에 할당한다.

let {title, imgurl} = mbc;

title에 mbc의 title값이 담기고 imgurl에 mbc의 imgurl값이 담긴다.

console.log(title, imgurl);

출력하면 mbc와 url주소가 출력된다.


Destructuring을 이용해서

let [, {title, imgurl} ] = news;

바로 뽑아낼 수도 있다.


4. Event 객체 파싱


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
<ul>
    <div>            "Lerem ipsum dolor sit amet",
        "ipsum dolor sit amet"</div>
</ul>
</body>
</html>

HTML에 div 속성으로 다음과 같은 데이터를 삽입한다.


document.querySelector("div").addEventListener("click", function({type,target}){
    console.log(type, target.tagName);
});

argument로 객체 전체가 넘어오게 되는데

상당수가 필요없는 데이터 일때가 많다.

type과 target의 데이터만 필요할 경우 function의 파라미터에 { type, target }을 이용해서 해당 데이터만 추출한다.

console.log 를 통해 확인하면 해당 데이터만 전달 받는것을 확인할 수 있다.