배열, 객체, 반복 가능한 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장.
배열
1) 배열 요소들을 한 번에 각 변수에 초기화 할 수 있다.
let [a,b] = [1,2]; // let a = 1, let b = 2와 같은 의미이다.(이를 분할 할당이라고도 함)
[a,b] = [a*3, b*5]; //a = a*3, b = b*5 와 같다.
let array, first, second;
array = [first, second] = [100,200];
console.log('array:', array, 'first:',first, 'second:', second);
//결과 array:[100,200], first: 100, second: 200
2) 좌변의 변수와 우변 값 갯수가 같을 필요 없다.
//좌변의 갯수가 더 많을 때
let [x,y,z] = ['A','B'] // x = 'A', y = 'B', z = undefined
// 우변 값이 더 많을 때
let [one, two] = ['가','나','다'] // one = '가', two = '나', '다'는 무시됨
//
let [a,,c,,f] = [1,2,3,4,5]; //a = 1, c = 3, f = 5가 된다
3) 나머지 요소를 활용 할 수 있다.
//...rest 부분이 나머지 요소이며 변수 rest에는 할당되지 않은 남은 값들이 배열로 할당된다
let [a,b, ...rest] = [1,2,3,4,5,6]; // a = 1, b = 2, rest = [3,4,5,6];이 된다.
4) 함수가 배열로 반환한 값을 비구조화 할당받기
function rotation(x, y, theta){
let s = Math.sin(theta), c = Math.cos(theta);
return [c*x - s*y, s*y + c*y]
}
let [a, b] = rotation(1,2, Math.PI/3);
객체
1) 객체에서 비구조화 할당을 쓰려면 속성값을 맞춰줘야 한다.
//a속성의 값인 x에 1로 초기화, b속성의 값인 y에 2로 초기화
let {a:x, b:y} = {a:1, b:2}; //let x = 1, let y = 2
//이미 선언 된 변수의 값을 변경하기
{a:x, b:y} = {a:7, b:12};
//속성 값이 매치되지 않는 값은 undefinde가 된다.
let {a:x, c:y} = {a:7, b:12}; //x=7 ,y = undefined
//우변 객체의 프로퍼티에 일치하는 프로퍼티가 있으면 그 값이 대입된다.
let {sin, cos, tan, PI} = Math; //sin:Math.sin, cos:Math.cos ----와 같음
2)프로퍼티의 기본값 설정 가능하다
let {a:x=1, b:y=2 , c:z=3} = {a:'one', b:'two'} //x = 'one', y= 'two', z = 3
반복 가능한 객체의 비구조화 할당
'Web > Javascript' 카테고리의 다른 글
[Javascript Promise 한빛미디어] - 무료 ebook (0) | 2020.06.28 |
---|---|
scroll 이벤트를 위해 미리 알아둘 것들 (0) | 2020.05.30 |
비슷해 보이는- setTimeout , setInterval, requestAnimationFrame (0) | 2020.04.18 |
canvas 시작해보기 (내용 다듬기!!) (0) | 2020.04.17 |
생성자와 클래스 - p682~ (0) | 2020.03.18 |