프론트 087 - 구조 분해 할당

규링규링규리링·2024년 9월 2일

프론트 공부하기

목록 보기
87/135

구조 분해 할당

구조화 되어있는 배열, 객체와 같은 데이터를 destructuring (분해) 시켜서, 각각의 변수에 담는것.

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

배열이 있다고 했을 때

let one = arr[0]
let two = arr[1]
let three = arr[2]

이런식으로 저장 했었음.

구조분해 할당 사용법

let arr = [1,2,3]
let [one, two, three] = arr

위처럼 입력하면 자동으로 분해되어 저장됨.

주의점

해당 기능은 순회 가능한 객체(iterable)만 가능함함
객체의 경우는 순서가 아닌 key 값을 중요하게 하며 순회가 불가능하기에
위와같은 방법으로 분해할당이 불가능함.

let [one,two] = {name: 'otter'}

위처럼 에러발생함.

객체의 구조 분해 할당 방법

let obj = {name: 'otter',gender:'male'}
let userName = obj.name
let userGender = obj.gender

이런식으로 사용했었음

let obj = {name: 'otter',gender:'male'}
let {name,gender} = obj

객체는 이런 방식으로 구조분해 할당이 가능함.

주의할점은 배열의 경우는 순서에따라 앞의 변수에 배열의 앞값이 들어왔다면
객체의 경우는 key 값에 맞춰서 들어옴

let obj = {name: 'otter',gender:'male'}
let {gender,name} = obj

그래서 이렇게 변수명의 위치를 서로 바꿔주어도

각자 맞는 변수에 저장이됨.

키값에 맞지 않게 변수명을 지정하면 값이 저장되지 않음.

만약 변수명을 바꾸고 싶다면

let obj = {name: 'otter',gender:'male'}
let {gender:aa,name:bb} = obj

이런식으로 키값에 맞는 새로운 변수명을 지정해 주면

새로 지정한 변수에 값이 저장되는걸 알 수있다.

0개의 댓글