[javascript] - 비구조화 할당 (구조 분해)

월요일 아침이 밝았다.

비구조화 할당

ES6부터 추가된 문법이며 구조 분해 할당(Destructuring Assignment) 라고도 하며, 배열이나 객체의 값을 새로운 변수에 쉽게 할당한다.

1. 객체 비구조화 할당

const object = { a: 1, b:2, c:3 };

const { a, b } = object;
console.log(a);
console.log(b);

function print({ a, b }) {
  console.log(a);
  console.log(b);
}
print(object);

// 1
// 2

비구조화 할당은 객체나 배열 값중에 일부만 꺼내서 사용하고 싶을 때 사용할 수 있다.
위 코드에서 object 변수 안에 a,b,c중에 a와 b만 비구조화 할당을 통해 가져오는걸 볼 수 있다.
비구조화 할당을 하는 방법은 중괄호를 쓰고 비구조화 할당하고자 하는 객체의 프로퍼티명을 써주면 해당 프로퍼티값이 변수에 할당이 된다.

비구조화 할당에서 이름 바꾸기

const animal = {
  name: "멍멍이",
  type: "개"
};
const {name : nickname} = animal;

console.log(nickname);

// 멍멍이 

원래 대로 라면 nickname을 변수로 지정하고 거기에서 animal.name을 호출해서 가져오는 방법이 있지만 비구조화 할당을 사용하면 좀 더 편하게 변경이 가능하다.
animal의 name에 있는 "멍멍이"라는 값을 꺼내와서 nickname 변수에 할당하면 console.log에서 "멍멍이" 값을 받아올 수 있다.

2. 배열 비구조화 할당

const array = [1, 2];

const one = array[0];
const two = array[1];

console.log(one);
console.log(two);

// 1
// 2

비구조화 할당을 사용하기전에 배열의 값을 확인하려면 하나하나 변수에 지정하고 그 변수를 콘솔에 찍어봄으로써 확인을 하는 번거로움이 있었다.

하지만 배열 비구조화 할당을 사용하면 아래 코드처럼 간단하게 표현이 가능하다.

const array = [1, 2];

const [one, two] = array;

console.log(one);
console.log(two);

// 1
// 2

사용법은 객체와 비슷한데 {} 대신 배열에서 쓰이는 []를 사용하면 첫번째부터 배열의 0번째를 가리킨다.

좀 더 깊은 곳에 있는 값 꺼내기

const deepObject = {
  state: {
    information: {
      name: "javascript",
      version: ["es5", "es6", "es7"]
    }
  },
  value: 5
};

const { name, version } = deepObject.state.information;

const { value } = deepObject;

const extracted = {
  name,
  version,
  value
};

console.log(extracted);

// {name: "javascript", version: Array(3), value: 5}

value 값을 안적어 주고 생략했는데 특정 객체를 만들때 특정 key이름으로 선언된 어떤 값이 이미 있다면 value 값 설정해주는걸 생략 해줄 수 있다.
위 코드에선 deepObject에 name, version, value가 이미 선언이 되어있기 때문에 extracted에서 value 값을 생략해줬다.

비구조화 할당 한번으로 값 전부 꺼내기

const deepObject = {
  state: {
    information: {
      name: "javascript",
      version: ["es5", "es6", "es7"]
    }
  },
  value: 5
};


// ================= 추가 
const {
  state: {
    information: {
      name,
      version: [firstVer, secondVer]
    }
  },
  value
} = deepObject;
// =================


const extracted = {
  name,
  firstVer,
  secondVer,
  value
};

console.log(extracted);
// {name: "javascript", firstVer: "es5", secondVer: "es6", value: 5}

기존에 썼던 코드보다는 좀 더 난잡한 느낌이 나긴한다. 개인적인 생각으로는 가독성만 보면 기존에 썼던 코드가 좀 더 보기 편한 느낌이지만 한번에 다 써보는 것도 때에 따라 사용만 잘하면 꽤 도움이 될 것 같다.