[자바스크립트] 구조 분해 할당

구조 분해 할당 ( Destructuring assingment )

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 프로그래밍을 하다 보면 객체의 속성과 배열의 요소들이 일부분만 필요한 경우가 있다. 

 

예를 들어, 아래와 같이 객체의 일부 속성만 넘겨받아서 출력하는 함수가 있다고 하였을 때, 객체의 속성값에 접근하여 넘겨주어야 하는 번거러움이 있다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.country = 'korea';
    this.printinfo = function() {}
}

const person1 = new Person('Kim', 25);
const person2 = new Person('Lee', 23);

//Person 객체에 이름과 함수를 출력하는 함수
function printSimpleInfo(name, age) {
    console.log(`이름 : ${name} 나이 : ${age}`);
}


//매번 객체의 프로퍼티에 접근하여 넘겨줌...
//성가심...
printSimpleInfo(person1.name, person1.age); //이름 : Kim 나이 : 25
printSimpleInfo(person2.name, person2.age); //이름 : Lee 나이 : 23

 

 

이런 상황에서 구조 분해 할당을 사용하면, 코드도 간결해지고 객체의 프로퍼티와 배열의 요소를 더욱 자유롭게 사용할 수 있게 된다. 이 포스팅의 마지막에는 위의 예제를 어떻게 사용하기 쉽게 만들 수 있는 것인지 알게 될 것이다.

 

 

 

배열의 구조 분해 할당

배열 분해에 대한 구문은 다음과 같다.

const/let/var [ variable1, variable2, ... ] = [] <= (배열)

 

변수명에 해당하는 부분에 배열의 값들을 받을 변수들을 배열([])안에 담아 한까번에 선언하고 초기화 하는 값으로 배열을 사용한다. 배열은 순서(인덱싱)가 정해져 있는 값의 집합이기 때문에 분해 구조 할당 시 배열의 첫번째 요소부터 차례대로 할당이 된다.

 

이 때에, 배열의 요소의 수보다 많은 할당 받고자 하는 변수의 개수가 더 많더라도 에러가 발생하지는 않고 초과된 변수에 대해서는 undefined를 할당받는다.

// 배열 분해
const arr = [1, 2, 3]

let [num1, num2, num3] = arr;
console.log(num1); // 1
console.log(num2); // 2
console.log(num3); // 3


// 배열의 수보다 적게 할당?
// 배열의 첫번째 요소부터 차례대로 할당
let [num1, num2, num3] = arr;
console.log(num1); // 1
console.log(num2); // 2


// 배열의 수보다 많게 할당?
// 초과한 변수 => undefined
let [num1, num2, num3, num4] = arr;
console.log(num4); // undefined

 

배열의 수보다 많게 할당이 되었을 때, undefined로 취급을 받는다. 이 때에 기본값을 할당해주게 된다면, 할당 받지 못하였을 때 undefined가 아닌 설정한 기본값을 할당받게 된다. 기본값은 = 를 통해 설정한다.

// 배열 분해
// 기본값 설정 : = defualt value
const arr = [1, 2, 3]

let [num1, num2, num3 = 1, num4 = 4] = arr;
console.log(num3); // 3 <= 값을 할당 받으면 기본값은 사용X
console.log(num4); // 4

 

 

 

객체의 분해 구조 할당

객체의 구조 분해 할당은 배열과는 다르다. 그 차이점을 이해하기 위해서는 객체와 배열의 차이점을 알아야 한다.

 

• 객체는 배열과는 달리 순서가 없다.
• 객체는 배열과 달리 프로퍼티명과 프로퍼티 값으로 이루어져 있다.
• 이 때에 프로퍼티명은 유일한 특성을 지닌다. (중복 선언해도 덮어씌워짐!!)

 

즉, 객체는 순서가 정해져 있지 않기 때문에 배열과 같이 어떤 값이 들어올지 정확히 알 수 가 없다. 하지만 배열과는 달리 프로퍼티 값에 따른 unique한 특성을 가지는 프로퍼티명이 있기 때문에 객체의 분해 구조 할당은 프로퍼티명을 이용하여 값을 할당하게 된다.

 

그렇기 때문에 객체의 분해 구조 할당 구문은 다음과 같다.

const/let/var { property1, property2, ... } = {} <= 객체

 

할당받고자 하는 프로퍼티 값에 프로퍼티명으로 선언된 변수에 값을 할당받게 되는 것이다. 만약 할당 받는 변수명에 해당하는 프로퍼티가 없으면 undefined로 취급된다.

// 객체 분해
// 프로퍼티명을 이용하여 할당
const obj = {
    name : 'kim',
    age : 26,
    gender : 'male',
    printInfo : function() {},
}


// 객체는 중괄호를 사용하여 할당 변수 나열
// 변수명 === 프로퍼티명
const { name, gender } = obj;
console.log(name);    // kim
console.log(gender);  // male


// 할당받는 변수명에 해당하는 프로퍼티가 없으면?
// => undefined
const { country } = obj;
console.log(country); //undefined

 

객체의 분해 구조 할당 또한 배열의 분해처럼 기본값을 설정할 수 있다. 

// 객체 분해
// 기본값 = defualt value
const obj = {
    name : 'kim',
    age : 26,
    gender : 'male',
    printInfo : function() {},
}

const { country = 'Seoul' } = obj;
console.log(country); //Seoul

 

객체의 구조 분해 할당은 객체의 프로퍼티명을 사용한다. 그렇다면 배열의 구조 분해 할당처럼 원하는 변수명에 할당 받을 수는 없을까? 

 

원하는 변수명에 할당받고 싶을 때에는 콜론(:) 기호를 사용하여 원하는 변수명을 지정할 수 있다. 이 때에 원래의 프로퍼티명을 가지는 변수는 사용할 수 없다.

// 객체 분해
// 원하는 변수명에 할당받기!!
// [propertyName] : [variableName]
const obj = {
    name : 'kim',
    age : 26,
    gender : 'male',
    printInfo : function() {},
}

const { name : personName } = obj;
console.log(name); // error <= name은 이제 사용X
console.log(personName); //kim

//기본값도 사용 가능
const { country : personCountry = 'Seoul' } = obj;
console.log(personCountry); //Seoul

 

 

 

중첩 구조 분해

객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있다. 이를 중첩 구조 분해라고 한다.

// 중첩 구조 분해
const arrObj = {
    name : 'kim',
    bodyInfo : {
        weight : 80,
        height : 180,
    },
    friends : ['lee', 'kang']
}

// 키와 무게, 친구 1명만 추출해보자
let { 
    bodyInfo : { weight, height },
    friends : [ friend ]
} = arrObj;

console.log(weight); // 80
console.log(height); // 180
console.log(friend); // lee

얼핏 복잡해 보이지만, 분해하려는 중첩 구조의 구조를 따라서 분해하는 것일 뿐이다!!

 

 

 

마무리

다시 처음의 코드를 살펴보면서, 포스팅을 마무리 하겠다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.country = 'korea';
    this.printinfo = function() {}
}

const person1 = new Person('Kim', 25);
const person2 = new Person('Lee', 23);

//Person 객체에 이름과 함수를 출력하는 함수
function printSimpleInfo(name, age) {
    console.log(`이름 : ${name} 나이 : ${age}`);
}


//매번 객체의 프로퍼티에 접근하여 넘겨줌...
//성가심...
printSimpleInfo(person1.name, person1.age); //이름 : Kim 나이 : 25
printSimpleInfo(person2.name, person2.age); //이름 : Lee 나이 : 23

 

배운 것을 토대로 위의 함수를 간단하게 바꾸면 다음과 같이 코딩 할 수 있다.

function printSimpleInfo({ name, age }) {
    console.log(`이름 : ${name} 나이 : ${age}`);
}


printSimpleInfo(person1); //이름 : Kim 나이 : 25
printSimpleInfo(person2); //이름 : Lee 나이 : 23