구조 분해 할당

2023년 01월 25일

구조 분해 할당이란?

Javascript의 객체와 배열은 굉장히 자주 사용되는 구조이다. 이를 효과적으로 사용하기 위한 방법 중에 구조 분해 할당(Destructuring Assignment)이 있는데, 객체 또는 배열에서 일부만 사용하고 싶을 경우 변수로 분해하여 값을 개별 변수에 담아 사용할 수 있게 도와준다.

배열 분해

먼저 배열을 분해하는 간단한 방법이다.

let arr = ["apple", "banana", "tomato", "pear", "grapes"]

// let one = arr[0]
// let two = arr[1]
// let three = arr[2]
// let four = arr[3]
// let five = arr[4]    // 배열의 값을 각각 저장

let [one, two, three, four, five] = arr // 위 코드와 동일하게 동작

console.log(one) // apple
console.log(two) // banana
console.log(three) // tomato
console.log(four) // pear
console.log(five) // grapes

좌변은 값을 담을 변수, 우변에는 분해 할 값이 위치한다. 배열의 요소를 직접 변수에 할당하지 않고 원래의 arr을 복사 후 분해하여 one, two, three로 사용 할 수 있어 직접 변수에 할당하는 것보다 코드의 양을 대폭 줄일 수 있다.

객체 분해

객체 분해 또한 배열과 유사하다.

let user = {
  name: "James",
  job: "developer",
  age: 28,
}

let { name, job, age } = user

console.log(name) // James
console.log(job) // developer
console.log(age) // 28

여기서 좌변 프로퍼티 키를 다른 이름의 변수로 저장할 수 있다.

let user = {
  name: "James",
  job: "developer",
  age: 28,
}

// 각각 name을 a, job을 b, age를 c로 저장
let { name: a, job: b, age: c } = user

console.log(a) // James
console.log(b) // developer
console.log(c) // 28

다양한 분해 형태

기본값 설정

좌변에 기본값을 미리 부여한 후, 할당된 값이 없을 시 기본값이 출력된다.

let one, two
;[one = "apple", two = "banana"] = ["tomato"] // one에만 값이 할당됨
console.log(one) // tomato
console.log(two) // banana // 할당된 값이 없어 기본값이 출력됨

객체에서도 위와 같이 기본값을 설정할 수 있다.

배열 요소 버리기

쉼표를 사용하여 사용하지 않을 배열 요소를 건너뛸 수 있다. 오타를 주의해야 할 것 같다.

let arr = ["apple", "banana", "tomato", "pear", "grapes", "mango"]

let [one, two, , three, , four] = arr

console.log(`${one}, ${two}, ${three}, ${four}`)
// apple, banana, pear, mango

나머지 요소

... 패턴을 이용하여 나머지 배열, 객체 요소를 한데 모아서 저장할 수 있다.

let arr = ["apple", "banana", "tomato", "pear", "grapes", "mango"]

let user = {
  name: "James",
  job: "developer",
  age: 28,
}

let [one, two, three, ...other] = arr // 나머지를 other에 저장
let { name: a, ...rest } = user

console.log(`${one}, ${two}, ${three}`)
// apple, banana, tomato

console.log(`나머지 : ${other}`)
// 나머지 : pear,grapes,mango

console.log(`job: ${rest.job}, age: ${rest.age}`)
// job: developer, age: 28

객체 프로퍼티

좌변의 변수로 객체 프로퍼티와 같은 형태도 사용 가능하다. 할당 가능한 값이면 뭐든지 사용할 수 있다고 한다.

let arr = ["apple", "banana", "tomato", "pear", "grapes", "mango"]

let fruit = {}

;[fruit.one, fruit.two, fruit.three] = arr

console.log(fruit)
// {one: "apple", two: "banana", three: "tomato"}

변수 교환

변수를 교환할 때 구조 분해 할당을 사용할 수 있다.

let apple = "apple"
let banana = "banana"

;[apple, banana] = [banana, apple] // 임시 배열을 이용하여 배열을 분해

console.log(`${apple}, ${banana}`) // banana, apple

JSON 구조 분해 할당

json 데이터에서 어떠한 값만 순회하여 출력하고 싶을 경우, Object.entries 메서드와 구조 분해를 활용하여 나타낼 수 있다. jsonplaceholder에서는 테스트를 위한 무료 fake api를 지원한다.

전체 URL은 https://jsonplaceholder.typicode.com/ + 리소스명으로 접속이 되고, 각 응답의 내용은 리소스 별로 다르다. axios를 통해 jsonplaceholder의 리소스를 받아 보았다.

axios({
  url: "https://jsonplaceholder.typicode.com/users",
  method: "get",
}).then(function (response) {
  console.log(JSON.stringify(response.data, null, 5))
})

jsonplaceholder

jsonplaceholder의 users에는 총 10명의 정보가 들어있다. id, 이름, 이메일, 주소 등등...

모든 user의 이름을 나타내기 위해 다음과 같이 코드를 작성했다.

axios({
  url: "https://jsonplaceholder.typicode.com/users",
  method: "get",
}).then(function (response) {
  for (let [key, value] of Object.entries(response.data)) {
    console.log(`id : ${key}\nname : ${value.name}`)
  }
})

objectEntries

Object.entries 메서드를 사용하면 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환, 객체의 키(key)와 값(value)을 순회할 수 있다. response.data에 있는 value의 name을 순회하며 모든 user의 이름을 얻을 수 있게 되었다.

Reference

구조 분해 할당 | 모던 JavaScript 튜토리얼

[자바스크립트] ES6(ECMA Script 6) - 구조분해 할당(Destructuring assignment)

JSONPlaceholder - Free Fake REST API

구조 분해 할당

2023년 01월 25일

TOC