Javascript 비구조화 할당

hongcoder·2020년 9월 3일
0

Front-end

목록 보기
5/12

비구조화 할당

비구조화 할당(=구조 분해 할당)은
배열(array) 또는 객체(object)의 속성을 해체하여 그 값을 개별 변수(variable)에 담을 수 있게 해주는 자바스크립트의 표현식이다.

한마디로 배열, 객체에서 원하는 값만 추출 가능하다.

Let a,b,rest;
[a,b] = [10, 20];

console.log(a); //expected output: 10
console.log(b); //expected output: 10

[a,b, ...rest] = [10,20,30,40,50];
console.log(rest); // expected output: [30,40,50]

({a,b} = {a:10, b:20});
console.log(a); //10
console.log(b); //20

const object = {a:1, b:2}
const {a, b} = object;

console.log(a) //1
console.log(b) //2

위처럼 배열 및 객체에서 값을 빼내서 새로운 변수에 대입이 가능하다.

비구조화 할당의 장점은 기존의 변수를 변형해서 사용하지않고 기존 변수를 토대로 새로운 변수를 만들어서 기존값이 그대로 유지된다는 점이다.

let x =[1,2,3,4,5];

let [y, z] = x;

console.log(y,z,x) //1,2 [1,2,3,4,5]

let a, b;

[a,b] = [1, 2]
console.log(a) //1
console.log(b) //2

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

비구조화 항당에서 선언 값의 이름을 바꾸는 방법도 있다.

const animal = {
	name: '멍멍이',
    	type: '개'
}

const nickname = animal.name;
console,log(nickname) //멍멍이

여기서 nickname과 animal.name이 같을 때 두 명칭이 서로 다르니까

const animal = {
	name: '멍멍이',
    	type: '개'
}

const {name:nickname} = animal
console.log(nickname) //멍멍이

animal객체 안에 있는 name을 nickname으로 선언하는 방법이다.

profile
기록하지 않으면 기억되지않음🧐

0개의 댓글