JavaScript 기초 - 구조 분해 할당

🌈 구조 분해 할당

🔥 객체 구조 분해 할당

🔥 배열 분해 분해 할당

🔥 구조 분해 할당 활용

1. 객체 구조 분해 할당

1) 구조 분해 할당 기본

• 객체 구조 분해할당은 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

const data = {
  name : 'Jaewon',
  age : 10,
  fav_food : 'Kimche',
  hobby : 'coding'
}
const {name, age, fav_food, hobby} = data;
console.log(name, age, fav_food, hobby) // Jaewon 10 Kimche coding

• 다른 변수명을 사용하자고 할 경우, 콜론(:)을 통해 매핑 시킴

const data = {
  name : 'Jaewon',
  age : 10,
  fav_food : 'Kimche',
  hobby : 'coding'
}
const {name:user_name, age:user_age, fav_food:user_food, hobby:user_hobby} = data;
console.log(user_name, user_age) // Jaewon 10

• 또한 일부 속성만 구조 분해하여 할당 가능

const data = {
  name : 'Jaewon',
  age : 10,
  fav_food : 'Kimche',
  hobby : 'coding'
}
const {name:user_name, hobby:user_hobby} = data;
console.log(user_name, user_hobby) // Jaewon coding

• 할당할 프로퍼티(속성)이 정의되어 있지 않을 경우, dafault 값을 미리 지정 가능
• 객체에 프로퍼티가 존재하면 사용하지만, 없을 경우에는 dafult 값을 사용

const data = {
  name : 'Jaewon',
  age : 10,
  fav_food : 'Kimche',
  hobby : 'coding'
}
const {name:user_name, fav_music = 'Lofi Music'} = data;
console.log(user_name, fav_music) // Jaewon Lofi Music

2. 배열 분해 분해 할당

• 배열 각 요소를 별도 변수에 할당 하는 문법
• 각 item에 매칭될 변수명을 지정해주면 할당 가능함

let numArray = [1,2,3,4,5,6,7,8,9];
let [a,b,c,d,e,f,g,h,i] = numArray;
console.log(a,b,c,d,e,f,g,h,i) // 1 2 3 4 5 6 7 8 9

• 일부 데이터만 할당하여 가져올 수 있음
• 콤마(,)로 빈자리를 만들어 줘야 함

let data = [10, 20, 30];
let [item1, , item3] = data
console.log(item1, item3) // 10 30

• 배열 내 요소들의 일부분을 배열로 가져오고 싶을 때
• ...변수로 사용 가능하고, ...변수 뒤에는 다른 변수가 올 수 없음(마지막에 위치)

let data = [10, 20, 30, 40, 50, 60];
let [item1, item2, ...item3] = data
console.log(item1, item2, item3) // 10 20 [ 30, 40, 50, 60 ]

• default 값 미리 지정 가능

let data = [10, 20, 30];
let [item1, item2, item3, item4, item5=50] = data
console.log(item1, item2, item3, item4, item5) // 10 20 30 undefined 50

3. 구조 분해 할당 활용

1) 변수값 교환

• Python에서는 튜플을 이용하여 (a,b) = (b,a)로 바로 변환 가능(괄호 없어도 됨)하지만, Javascript에서는 구조 분해 할당으로 매핑 시켜줌

let a = 'jaewon';
let b = 'haezin';
[a,b] = [b,a];
console.log(a) // haezin
console.log(b) // jaewon

2) 함수 리턴시 여러 데이터 넘기기

function getData(){
  return [10, 20, 30];
}
const [a, b, c] = getData();
console.log(a) // 10
console.log(b) // 20
console.log(c) // 30