[JS] 비구조화 / 구조분해할당 / 스프레드연산자

[JS] 비구조화 / 구조분해할당 / 스프레드연산자
/category/Backend/Javascript%20%26%20Typescript

2023. 1. 15. 07:20

구조화와 비구조화

쉽게 말해서 배열이나 객체를 선언하는 과정을 구조화라고 하며,

배열이나 객체의 프로퍼티 값을 가져오는 과정을 비구조화라고 한다.

우리는 일반적으로 다음과 같은 형태로 객체를 선언하고 값을 얻어오는 방식을 많이 사용한다.

const obj = {
    title : 'this is title',
    value : 'this is value',
    info : {
      name : 'this is name',
      age : 'this is age'
    }
}
  
 const title2 = obj.title;
 const value2 = obj.value;
 const name2 = obj.info.name;
 console.log(title2, value2, name2);

obj를 선언하는 과정은 구조화, obj에서 프로퍼티 값을 얻어 title2, value2, name2에 복사하는 것은 비구조화이다.

그런데 과정이 너무 귀찮다. 그래서 ES6에서 구조 분해 할당 문법을 지원한다.

ES6 구조 분해 할당

const obj = {
    title : 'this is title',
    value : 'this is value',
    info : {
      name : 'this is name',
      age : 'this is age'
    },
    props : {
      p1 : 1,
      p2 : 2
    }
}
//ES6 객체 비구조화
//객체의 멤버변수 이름과 {} 안의 변수명이 일치해야 한다.
const {title, value, props, info : {name}} = obj;
console.log(title, value, props, name);

위의 코드와 같이 obj의 프로퍼티 key의 값과 같은 형태로 {} 안에 구조분해 할당 문법을 사용하면 된다.

반드시 Key의 이름을 일치시켜 주어야 할당이 성공적으로 되며,

만약 객체 안의 객체의 프로퍼티 값을 얻어오고 싶다면 info와 같이 해당 객체 안에서 구조분해 할당을 하면 된다.

배열의 구조분해 할당

//배열의 비구조화
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a,b,c); //1 2 3

const arr2 = [1, 2, 3, 4];
const [, , a, b] = arr2;
console.log(a,b);	//3 4

배열에서도 구조분해 할당을 사용할 수 있다.

하단의 코드처럼 값의 일부를 할당하려면 ,로 구분하여 해당 자리의 값에 할당시켜주면 된다.

함수에서의 구조분해 할당

//객체의 구조분해할당
function getWelcomeTemplate({name, age, school, createdAt}){
    //const {name, age, schhol, createAt } = Object 의 형태로 구조분해할당됨
    const result = `
        <html>
            <body>
                <h1>${name}님 가입을 환영합니다.</h1>
                <hr/>
                <div>이름 : ${name}</div>
                <div>나이 : ${age}</div>
                <div>학교 : ${school}</div>
                <div>가입일 : ${createdAt}</div>
            </body>
        </html>
    `
    console.log(result);
}

const obj = {
    name: "재휘",
    age: "26",
    school: "상명대학교",
    createdAt: "2023-01-01"
}
getWelcomeTemplate(obj);

const name = "철수";
const age = 15;
const school = "대신고등학교";
const date = "2022-01-02"

getWelcomeTemplate({name, age, school, createdAt : date})  //프로퍼티 이름이 같아야 구조분해할당이됨.

다음과 같이 함수의 인자값을 받는 부분에서도 구조분해 할당 문법을 사용할 수 있다.

마찬가지로 프로퍼티 이름이 같아야 한다는 점을 인지하자.

스프레드 연산자

let info = {
    name: "재휘",
    age: 26
};

let detailInfo = {
    ...info,
    school: "상명대학교"
};

console.log(detailInfo);
//
//{
//	name : "재휘"
//	age : 26
//	school: "상명대학교
//}

스프레드 연산자는 객체, 배열 등의 연결 및 복사에서 활용되기 좋다. ...info와 같이 ...의 형태의 문법을 사용하며

뒤의 school 프로퍼티를 info 객체와 연결하여 새로운 객체를 만든다.

나같이 귀찮은 사람들에게는 매우 좋은 연산자이다.

스프레드 연산을 이용한 구조분해 할당과 REST 파라미터

  const obj = {
    title : 'this is title',
    value : 'this is value',
    info : {
      name : 'this is name',
      age : 'this is age'
    }
  }
  const {title, value, ...obj2} = obj;
  console.log(obj2)
  
  /*
  Result :
  {
  	info: { name: 'this is name', age: 'this is age' },
  	props: { p1: 1, p2: 2 }
  }
  */

다음과 같이 스프레드 연산자를 이용하여 구조분해할당을 할 수도 있다.

title과 value를 분해 할당하며, 나머지 프로퍼티들을 obj2로 할당하여 저장한다.

여기서 obj2를 REST 파라미터라고 하며 주로 ...rest의 형태로 많이 표현한다.

구조분해 할당과 스프레드 연산은 주로 객체나 배열의 연결, 복사 등에서 많이 사용되는데 복사할 때 고려해야 할 점이 몇 가지 있다.

이는 다음 포스팅에서 다루도록 하겠다.

'Backend > Javascript & Typescript' 카테고리의 다른 글

[JS] Async-Await 비동기 처리하기 (0)	2023.01.22
[JS] Promise, 비동기 처리하기 (1)	2023.01.21
[JS] 콜백함수(Callback Function) (0)	2023.01.21
[JS] 함수 (Closure, Arrow Function) (0)	2023.01.21
[JS] Javascript에서의 값의 복사 (얕은 복사, 깊은 복사) (0)	2023.01.15

데굴데굴 개발자의 기록

CATEGORIES