it공부 (개념)/javascript

변수선언식의 왼쪽에도 중괄호{}가 온다! : 구조 분해할당

cantor 2023. 3. 31. 00:00

구조분해 할당: destructuring assignment?

 

오브젝트의 속성값으로 여러 변수를 초기화 할 때 

해당 객체의 구조를 보여주면서, 변수들을 한 번에 선언하는 문법이다.

 

말로 하면 이해가 안간다. 바로 코드를 보자.

const {
	sockets: {
            adapter: { sids, rooms},
        },
    } = wsServer;

위의 코드는 wsServer 객체의 속성인 sockets,

그리고 그 객체의 속성인 adapter의 성분을  sids, rooms 두 변수에 저장하고있다.

 

아래의 코드와 정확히 같은 기능을 한다.

const sids = wsServer.sockets.adapter.sids;
const rooms = wsServer.sockets.adapter.rooms;

 

 

bing gpt에 따르면 두 코드의 성능에는 큰 차이가 없다고 한다.

 

같이 개발하는 사람들이 어떤 형태의 코드에 익숙하냐를 선택의 지표로 사용하자.

 

 

 

예제코드: 배열
const numArray = [1, 2, 3];

const [first, second, third] = numArray;

위의 코드는 아래의 코드와 정확히 일치한다.

const numArray = [1, 2, 3];


const first = numArray[0];
const second = numArray[1];
const third = numArray[2];

 

 

 

읽어주셔서 감사합니다.

오류나 오탈자를 발견하신분은 댓글로 알려주세요.