2019. 10. 12. 17:11ㆍJavaScript
자바스크립트에서 querySelectorAll을 쓰던 중에 저 var [a, b]가 이해되지 않아서 찾아보았다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<button> a </button>
<button> b </button>
</div>
<script src="src/index.js">
</script>
</body>
</html>import "./styles.css";
var [a, b] = document.querySelectorAll("button");
console.log(typeof([a,b]));
console.log([a]);
console.log([a,b]);
console.log([a,b][0]);
ES6 : Desctructing - an elegant way of extracting data from arrays and objects in JavaScript
디스트럭터링 : 자바스크립트 배열, 객체에서 데이터를 추출하는 우아한 방법
예시 1. 배열에서 데이터 추출하기
const names = ['haley', 'alex', 'luke'];
const [first] = names; 는
names라는 array의 첫번째 요소를 first라는 변수에 담는다는 뜻.
console.log(first); // haley
console.log([fisrt]; // ["haley"] 0: "haley"
변수명에 대괄호[]를 치면 array에 순차적으로 접근하여 값을 가져온다는 뜻이다.
const animals = ['dog', 'cat', 'rabbit', 'mouse'];
const [one, two, three] = animals;
console.log(one); // dog
console.log(two); // cat
console.log(three); // mouse
여기서 animals array는 요소를 4개만 가지고 있는데, 다섯번째 요소를 추출하는 둥의 짓거리를 할 때 default 값을 주고 싶다면
const [one, two, three, four, five='none'] = names; 이런 식으로 변수를 선언할 때 정의하면 된다.
만약에 animals array에서 1번째, 3번째 요소(dog와 rabbit)만 꺼내오고 싶다면
변수를 선언할 때 콤마를 이용하여 const [one, , three] = names; 라고 쓰면 된다.
const flowers = ['rose', 'tulip', 'sunflower', 'iris'];
만약에 1번째 요소를 제외한 나머지 요소만 꺼내오고 싶다면
변수를 선언할 때 점 세개 ...를 이용하여 const [a, ...b] = flowers; 이런 식으로 쓰면 된다.
console.log(b);의 결과값은 object 타입인 ["tulip", "sunflower", "iris"] 가 된다.
콤마(,)와 점 세개(...)를 조합하여 배열 안에서 원하는 값만을 꺼내올 수 있다.
'JavaScript' 카테고리의 다른 글
| 자바스크립트 모달창(Modal popup) 만들기 (0) | 2019.10.12 |
|---|---|
| 자바스크립트 변수명에 대괄호 ...(2) (0) | 2019.10.12 |
| 자바스크립트 호이스팅 뜻 (0) | 2019.10.11 |
| 자바스크립트 reduce (0) | 2019.10.03 |
| 자바스크립트 map, filter (0) | 2019.10.03 |