[javascript]구조분해할당 기초

'구조분해할당'은 객체나 배열의 구조를 분해하여 변수로 할당하여 그 값을 활용하는 것을 의미한다.

배열의 구조분해할당

const arr = [1, 2, 3, 4, 5]

라고할때 각 배열을 변수에 대하여 할당하고자 한다면 아래처럼 만들 수 있다.

const one = arr[0] // 1
const two = arr[1] // 2
const three = arr[2] // 3

이때, 배열을 구조분해할당하면 위의 현상을 쉽고 편하게 만들 수 있다.

const [one, two, three] = arr;

//console.log(one, two, three) = 1, 2, 3

객체의 구조분해할당

obj = {
 x: 10,
 y: 20
}

라고 할때 객체의 key값에 대하여 할당하여 구조분해 할 수 있다

const {x,y} = obj;

//console.log(x,y) = 10, 20

객체의 구조분해할당에서는 객체의 key값을 변경하는 방법도 있다.

const {x: hello, y: world} = obj;

//console.log(hello, world) = 10,20

key값의 명을 변경했을 뿐, value의 값은 기존과 같다.

구조분해할당의 예제

1. 배열의 구조분해할당 예제

배열의 변수를 서로 switch(전환)할 수도 있다

let a = 123;
let b = 456;

이라고할때 구조분해할당을 사용하지 않고 서로의 값을 바꾸려고한다면

let a = 123;
let b = 456;
let temp = a;

a= b; // 456
b= temp; // 123

하지만 이때 구조분해할당을 사용하게된다면

[a,b]=[b,a]

를 활용하면 서로의 값을 바꿀 수 있다.

여기서 더 응용과 심화되는 경우에는 동료분이 잘 작성해주신 구조분해할당에 대한 지식이 있는데 꼭 참조하여 이를 활용할 수 있어야 할 것 같다.

참고자료
1. 둉료분이 작성해주신 구조분해할당의 추가내용 : https://velog.io/@fromsy2018/JS-구조-분해-할당
2. 참고 유튜브 : https://www.youtube.com/watch?v=-3QmIXIEWkk