티스토리 뷰
반응형
구조분해 할당(Destructuring Assignment)에 대한 자세한 내용은 아래 페이지에서 확인할 수 있다.
[Javascript] 구조분해 할당(destructuring assignment)
ES6부터 구조분해 할당(destructuring assignment)이라는 문법이 등장했다. 말 그대로 어떤 배열이나 객체를 분해한 후 다시 할당하는 것이다. ES5와 ES6를 비교하며 알아보자. 목차 배열 구조분해 할당 객
fromnowwon.tistory.com
구조분해 할당을 활용하여 클릭한 객체의 정보를 전달받을 수 있다. 그 이벤트 객체 내의 정보만 따로 출력할 수도 있다. 아래에서 살펴보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, architecto veniam.</div> <script> const $div = document.querySelector("div"); // 이벤트 객체 출력 $div.addEventListener("click", (event) => { console.log(event.target); // <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, architecto veniam.</div> }); // 이벤트 객체 내의 target의 태그 네임만 출력 $div.addEventListener("click", ({target}) => { console.log(target.tagName); // DIV }); // 이벤트 객체 내의 target의 innerText만 출력 $div.addEventListener("click", ({target}) => { console.log(target.innerText); // Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, architecto veniam. }); </script> </body> </html> | cs |
반응형
'JavaScript' 카테고리의 다른 글
| [Javascript] Set()과 WeakSet()의 차이 (0) | 2021.10.25 |
|---|---|
| [Javascript] 배열 중복 제거 Set() / filter() + indexOf() / forEach() + includes() (0) | 2021.10.24 |
| [Javascript] from() 메서드 사용해 배열로 만들기 (0) | 2021.10.24 |
| [Javascript] forEach(), for in 문, for of 문 특징과 비교 (0) | 2021.10.22 |
| [Javascript] 변수 var과 let 차이, var의 클로저(Closure) 이슈 (0) | 2021.10.22 |