[Javascript] Object, Array Destructuring (분해)

자바스크립트에서 Object, Array 에 들어있는 데이터들을 Destructure 하여 사용하는 방법에 대해서 알아보겠습니다.
이렇게 사용하는 방법은 api를 연동하여 json 형식의 데이터들을 불러올 때 매우 유용하게 사용할 수 있습니다.

 

 

animals.js

const animals = [
  { name: "cat", sound: "meow" },
  { name: "dog", sound: "woof" }
];

export default animals;

 

 

index.js

import animals from "./data"

// (1)
console.log(animals);
// 결과 : [Object, Object]

// (2)
const [cat, dog] = animals;
console.log(cat);
// 결과 : {name: "cat", sound: "meow"}
 
// (3)
const {name, sound} = cat;
console.log(name + " " + sound);
// 결과 : cat meow

// (4)
const {name: catName, sound: catSound} = cat;
console.log(catName + " " + catSound);
// 결과 : cat meow

// (5)
const { name = "fluffy", sound = "meo" } = cat;
console.log(name + " " + sound);
// 결과 : cat meow

일단 animals.js 에는 name과 sound 속성이 들어있는 두 개의 오브젝트를 가진 배열이 선언되어있습니다.
즉, 두 개의 데이터가 들어있는 배열이라고 볼 수 있습니다.

(1) 
animals 배열 데이터를 그대로 콘솔로 출력해보면 두 개의 오브젝트가 출력되는 것을 확인할 수 있습니다.
- 결과 : [Object, Object]

(2)
자바스크립트에서는 배열을 선언할 때 다른 언어들처럼 변수명을 선언하는 대신 [] 대괄호를 사용하여 안에 오브젝트 명들을 넣음으로서 선언하여 사용할 수 있습니다.
import 받은 animals 배열 데이터를 가져와서 안에 있는 두 오브젝트들을 각각 cat, dog 라는 오브젝트 명으로 선언하여 고정시켜두었습니다.
이제 cat이라는 오브젝트 명을 호출해보면 cat 오브젝트가 가지고 있는 name, sound 속성의 내용이 나오게 됩니다.
- 결과 : {name: "cat", sound: "meow"}

(3)
배열 데이터를 가져와서 오브젝트 명을 선언해주어 호출하게 되면 다시 세분화하여 내용을 호출할 수 있습니다.
위에서 지정해준 cat이라는 오브젝트의 name, sound 속성을 {} 중괄호 변수로 선언해주어 호출하였습니다.
주의해야할 점은 속성이기 때문에 {} 중괄호로 호출한다는 점이며, 또한 오브젝트 명처럼 임의의 이름을 넣어서 변수를 생성하는 것이 아니라 배열 오브젝트가 가지고 있는 속성명 그대로 사용해야 한다는 점입니다.
따라서 형식은 const {name, sound} 가 되는 것입니다.
이제 name, sound 를 출력해보았을 때 cat 오브젝트의 name, sound 속성의 값이 출력되게 됩니다.
- 결과 : cat meow

(4) 
3번 항목에서 정리했던 내용과 동일하게 사용하지만 좀 더 자세하게 작성하여 사용하는 방법입니다.
중괄호 변수로 호출할 때 각 속성의 값에 임의의 변수명을 추가로 지정해주고 기존의 속성명으로 출력하는 것이 아닌 새로이 지정한 임의의 변수명으로 사용하는 방법입니다.
name 속성의 값에 catName, sount 속성의 값에는 catSound 라는 임의의 변수명을 지정해주어 catName과 catSound 를 호출했을 때 동일한 속성의 값을 불러올 수 있습니다.
- 결과 : cat meow

(5)
배열 데이터 속성 값을 지정하여 사용할 수 있습니다.
속성에 = 기호를 사용하여 원하는 값을 넣어줄 수 있습니다.
하지만, 이미 배열에 있는 cat 오브젝트의 name 과 sound 가 명시되어있는 상태이기 때문에 name, sound 를 변경해준다고 해도 기존의 값이 그대로 적용된 상태를 유지하게 됩니다.
변경하려면 배열을 정의한 파일에 가서 name 이나 sound 속성을 삭제하면 됩니다.
- 초기 결과 : cat meow
- 속성 삭제 후 결과 : fluffy meo

 

 

중첩 오브젝트 Destructuring

animals.js

const animals = [
  { name: "cat", sound: "meow", feeding:{
    food: 2,
    water: 3
  } },
  { name: "dog", sound: "woof" }
];

export default animals;

 

index.js

const {name, sound, feeding} = cat;
console.log(feeding);
// 결과 : {food:2, water: 3}

const {name, sound, feeding: {food, water}} = cat;
console.log{food);
// 결과 : 2

 

배열 내에 있는 오브젝트에 중첩으로 들어가있는 오브젝트의 경우에도 동일합니다.
위의 예시 코드에서는 animals 배열의 cat 오브젝트 안에 feeding 중첩 오브젝트 속성이 존재합니다.
모든 속성에 대해서 선언 후 호출하고자 할 때는 기존 처럼 {} 중괄호 속성 명을 지정해준 뒤, 불러올 오브젝트를 선언해주면 됩니다.
그리고 나서 해당 오브젝트 내에 존재하는 중첩 오브젝트를 호출하게 되면 중첩 오브젝트의 속성들이 불러오게 됩니다.

이 중첩 오브젝트 내에 존재하는 속성들을 사용하고자 할 때 해당 속성들까지 선언하지 않았다면 {중첩 오브젝트 명.속성명} 이런 식으로 길게 작성하여 사용해야 합니다.
이를 간편하게 사용하기 위해서 해당 속성명까지 명시(feeding: {food, water})하여 선언해주면 간단하게 속성명만으로 사용할 수 있습니다.