Destructuring은 ES6에서 도입된 방법으로 배열 및 객체에서 원하는 정보만을 뽑아내는 새로운 방법입니다. 보통 배열에서 정보를 뽑을때 index 번호로 접근하셨는데요. 이 방법을 쓰면 index 번호를 굳이 지정하지 않아도 됩니다.
※ Destructuring Array
예제로 보겠습니다.
[선언할변수명, ...] 처럼 배열 인덱스 대신 배열 인덱스에 해당하는 위치에 변수명을 넣었는데요. 이렇게 하면 우측에 선언한 배열에서 변수명을 지정한 위치의 값을 추출해서 각각의 변수로 생성해줍니다. 그 다음은 일반적인 변수처럼 사용하면 되고, 실제로도 변수입니다.
※ Destructuring Object
역시 예제로 보겠습니다.
객체를 생성한 후 객체에서 특정 프로퍼티의 값들을 뽑아내고 싶을때 let {프로퍼티명, ...} = 객체 문법으로 작성하면 각각의 프로퍼티가 변수로 추출됩니다. 추출될때 변수명을 다르게 하고 싶은 경우는 예제의 5번째처럼 {프로퍼티명:지정할변수명, ...} 으로 대체하면 되죠. 생각보다 단순한거 같죠?
※ Destructuring 응용 #1 - JSON 파싱
Destructuring은 ajax등으로 수신받은 데이터를 집합한 객체에서 원하는 데이터만 추출할때 유용합니다. 만약 JSON 형태로 데이터를 받았다면, 그 변수는 자바스크립트 객체이므로 Destructuring을 바로 적용할 수 있죠. 역시 예제를 만들어 보겠습니다. json 객체는 ajax 통신으로 다음과 같이 전달받았다고 가정합니다.
let jsonData = [
{
title: "ES6 문법 정리 (1) – let, const 키워드"
,author: "kevini"
,category: "IT관련, Javascript"
,tags: "const, ES6, let, 자바스크립트"
,publishDate: "2018-03-02"
}
,{
title: "ES6 문법 정리 개요"
,author: "kevini"
,category: "IT관련, Javascript"
,tags: "ECMAScript, ES6"
,publishDate: "2018-03-01"
}
,{
title: "자바스크립트 개념 정리 (3) – prototype 3탄 (자바스크립트 내장 메소드, 상속구조 구현을 위한 ES6 문법)"
,author: "kevini"
,category: "IT관련, Javascript"
,tags: "ES6 class, Object.스태틱메소드, 자바스크립트"
,publishDate: "2018-03-01"
}
,{
title: "자바스크립트 개념 정리 (3) – prototype 2탄 (prototype chaining)"
,author: "kevini"
,category: "IT관련, Javascript"
,tags: "prototype chaining, 자바스크립트, 클로저"
,publishDate: "2018-03-01"
}
,{
title: "자바스크립트 개념 정리 (3) – prototype 1탄"
,author: "kevini"
,category: "IT관련, Javascript"
,tags: "prototype, 생성자함수, 자바스크립트"
,publishDate: "2018-02-25"
}
,{
title: "자바스크립트 개념 정리 (2) – context & scope"
,author: "kevini"
,category: "Javascript"
,tags: "context, javascript, this"
,publishDate: "2018-02-24"
}
,{
title: "자바스크립트 개념 정리 (1) – 변수 타입"
,author: "kevini"
,category: "Javascript"
,tags: "==, ===, 변수타입, 자바스크립트"
,publishDate: "2018-02-03"
}
,{
title: "Atom 에디터에서 오류 발생할때 대처방법"
,author: "kevini"
,category: "개발툴관련"
,tags: ""
,publishDate: "2018-01-27"
}
,{
title: "자바스크립트 표준 ES6 문법 체킹을 위한 JSHint"
,author: "kevini"
,category: "Javascript"
,tags: "ES6, JSHint, 자바스크립트"
,publishDate: "2018-01-27"
}
]이 데이터를 바탕으로 Destructuring을 해봤습니다.
JSON 배열의 3번째 값 객체에서 title을 aTitle로, author를 aAuthor로 추출하였고 그 결과는 예제 결과와 같습니다. 이런식으로 JSON에서 Destructuring을 유용하게 사용할 수 있겠네요.
※ Destructuring 응용 #2 - Event 객체 전달
웹 페이지에서 자바스크립트를 구현할때 보통 클릭 등의 이벤트가 발생할때 수행할 기능들을 리스너에 등록합니다. 그때 이벤트 객체가 파라미터로 전달되는데, 보통 우리는 여기서 클릭한 DOM 객체에 있는 값 혹은 입력 텍스트를 원할 때가 많습니다. 이런 처리에서 Destructuring을 활용하면 불필요한 변수선언이나 프로퍼티를 .으로 찾아가는일 없이 간편하게 필요한 것만 추려낼 수 있죠. 예제로 작성해보았습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="javascript">
document.querySelector("#forClick").addEventListener("click", function({target}){
alert(target.innerText);
});
</script>
</head>
<body>
<div id="forClick">
abcdefg
</div>
</body>
</html>실행결과 입니다. (jsbin.com 에서 테스트했습니다.)
Destructuring으로 id로 지정한 div 태그만 가져오도록 했고, 거기에서 innerText만 경고창으로 뿌려주도록 했습니다. 잘 돌아가네요.
※ 레퍼런스
이 글은 인프런 사이트의 '모던자바스크립트(javascript) 개발을 위한 ES6 강좌' 강좌의 내용을 토대로 예제코드를 작성하여 설명하였습니다. ES6 자바스크립트의 기능을 좀 더 알기를 원하시면 해당 강좌를 수강하시는 것을 권장합니다. 비용 결재 후 수강 가능합니다만 인프런 사이트 내 상당수의 강좌가 무료이며, 유료강좌도 비용이 강좌당 몇만원 수준이어서 크게 부담은 안되실겁니다. 그리고 인프런과 협약을 맺은 대학교의 학생들은 이 유로강좌도 무료로 들을 수 있으니 인프런 사이트를 참고하시기 바랍니다.
다음에는 template, arrow function, module export & import를 정리하겠습니다~
'Web 개발 (업데이트 없음)' 카테고리의 다른 글
| Vanilla JS .. ? (0) | 2018.10.28 |
|---|---|
| ES6 문법 정리 (3) – template, arrow function, module (0) | 2018.10.28 |
| ES6 문법 정리 (1) - let, const 키워드 (0) | 2018.10.28 |
| ES6 문법 정리 개요 (0) | 2018.10.28 |
| 자바스크립트 개념 정리 (3) – prototype 3탄 (자바스크립트 내장 메소드, 상속구조 구현을 위한 ES6 문법) (0) | 2018.10.28 |
