본문 바로가기

Web/Javascript

비구조화 할당 (이터레이터 공부 후 마무리하기)

배열, 객체, 반복 가능한 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장.

배열

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

 

반복 가능한 객체의 비구조화 할당