[ECMAScript]구조 분해(destructuring)의 활용

자바스크립트뿐만 아니라 대부분의 프로그래밍 언어에서 객체 및 배열에 접근은 빈번하게 작업됩니다. 자바스크립트의 구조 분해(destructuring)는 객체 및 배열에 접근하는 방법을 쉽고 코드를 간결하게 해줍니다.

 

이번 포스팅에서는 구조 분해를 활용하는 방법에 대해 작성합니다.

---

값 교환(Swap)

두 개의 변수의 값을 교환하기 위해서는 임시 변수가 필요합니다.

var a = 10;
var b = 20;
var temp;

temp = a;
a = b;
b = temp;

구조 분해는 임시 변수가 없어도 값을 교환할 수 있습니다.

var a = 10;
var b = 20;

[a, b] = [b, a];

console.log(`a : ${a} / b : ${b}`); // "a : 20 / b : 10"

3개 이상의 값도 교환이 가능합니다.

var a = 10;
var b = 20;
var c = 30;
  
[a, b, c] = [c, b, a];
  
console.log(`a : ${a} / b : ${b} / c: ${c}`); // "a : 30 / b : 20 / c: 10"

---

배열의 요소 접근

배열의 특정 인덱스의 요소에 접근하기 위해서는 대부분 아래와 같이 배열의 길이를 체크 후 접근합니다.

const numbers = [];

var one = 1;
  
if (numbers.length > 0) {
 one = numbers[0];
}

console.log(one); // 1

구조 분해를 사용하여 코드를 간결하게 작성할 수 있습니다.

const numbers = [];

var [one = 1] = numbers;

console.log(one); // 1

리스트 매칭(list matching)을 사용하여 아래와 같이 첫 번째 요소는 무시하고 두 번째 요소부터 접근할 수도 있습니다.

const numbers = [];

var [ , two = 2] = numbers;

console.log(two); // 2

---

동적 처리

namePrint 함수에서 첫 번째 매개변수인 obj에서 속성을 동적으로 추출합니다. 변수의 이름은 objName으로 선언하였으며, 속성이 존재하지 않을 경우 기본 값을 'Unknown'으로 설정합니다.

var person = {
  name : {
    firstName : 'Kang',
    middleName : 'Jae',
    lastName : 'Seong'
  }
};

function namePrint(obj, location) {
  var { [location] : objName = 'Unknown' } = obj;
  console.log(`${objName}`);
};
  
namePrint(person.name, 'firstName'); // "Kang"
namePrint(person.name, ' '); // "Unknown"

 

---

함수의 다중 값 반환

자바스크립트는 함수에서 객체 또는 배열 형식으로 return이 가능합니다.

아래 코드는 return 받은 객체 또는 배열을 속성 또는 인덱스를 통해 접근하여 변수에 값을 할당합니다.

function personInfoFunc() {
  return {
    fullName : 'Kang JaeSeong',
    age : 29
  };
}

var data = personInfoFunc();
var name = data['fullName'];
var age = data['age'];
  
console.log(`name : ${name} / age : ${age}`); // "name : Kang JaeSeong / age : 29"

 

구조 분해를 사용하여 코드 한 줄로 처리합니다.

function personInfoFunc() {
  return {
    fullName : 'Kang JaeSeong',
    age : 29
  };
}

var { name, age } = personInfoFunc();
  
console.log(`name : ${name} / age : ${age}`); // "name : Kang JaeSeong / age : 29"

---

함수 호출 시 매개변수 순서

printFunc 함수는 객체의 age와 fullName 속성의 값을 전달받아서 파라미터를 console.log에 출력하는 함수입니다. printFunc 함수 호출시 전달하는 매개변수의 순서가 잘못되어서 출력 결과가 원하는 값이 나오지 않았습니다.

function printFunc(name, age) {
  console.log(`name : ${name} / age : ${age}`); // "name : 29 / age : Kang JaeSeong"
};
  
var personInfo = {
  fullName : 'Kang JaeSeong',
  age : 29
};

printFunc(personInfo.age, personInfo.fullName); 

 

함수 호출시 객체의 속성이 아닌 객체를 전달하였으며, 함수의 정의에서 매개변수는 구조 분해를 사용하였습니다.

function printFunc({fullName : name, age}) {
  console.log(`name : ${name} / age : ${age}`); // "name : Kang JaeSeong / age : 29"
};
  
var personInfo = {
  fullName : 'Kang JaeSeong',
  age : 29
};

printFunc(personInfo);