자바스크립트 코드를 작성하다 보면 객체 내에서 일부 데이터만 필요하고
나머지 데이터는 필요없는 상황이 많다.
이때 간단하게 오브젝트 내에서 필요한 데이터만 추출해 보자.
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 를 통해 확인하면 해당 데이터만 전달 받는것을 확인할 수 있다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 자바스크립트 배열 순회 (array loop) (0) | 2018.09.06 |
|---|---|
| WebPack 빌드 및 사용하기 (2) | 2018.08.21 |
| Three.js 에서 jd 모델 사용하기. (0) | 2018.08.08 |
| 자바스크립트 모바일 브라우저 감지하기 (0) | 2018.07.17 |
| 스파인 애니메이션 재생 문제 (Spine Animation) (0) | 2018.07.13 |