JavaScript 관련 글입니다.

• JS Event Loop, 자바스크립트 동작 원리
• 호이스팅이란 , var, let, const 차이
• Three.js에 대해
• script, script async, script defer의 차이
• AJAX가 무엇일까?
• 함수선언식과 함수표현식
• null과 undefined의 차이 간단정리
• setTimeout과 setInterval 요약
• this의 여러가지 의미
• Spread Operator(...)?
• JS class Constructor
• ES6 Destructuring Syntax
• default 파라미터 알아보기
• import / export 를 사용한 모듈식 개발방법
• Optional Chaining (?.)
• 프로미스(Promise)에 대해서
• ES8 - async / await
• Symbol 자료형?
• forEach, for in, for of 알아보기
• JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
• 자바스크립트 가비지 컬렉션
• 화살표 함수와 일반함수의 차이
• JavaScript Array.reduce() 간단히 알아보기

이번 글에서는 ES6의 Destructuring 에 대해서 정리해보겠습니다.

Destructuring

const arr = [1,2,3];

const a = arr[0];
const b = arr[1];
const c = arr[2];

arr라는 array가 있고 1,2,3 이라는 값을 가지고 있습니다. 이 값들을 각각 a, b, c에 저장하고 싶습니다.

그러면… 위 처럼 인덱스를 이용해서 값을 저장하면 됩니다. 그런데 이 방법이 귀찮을 수 있습니다. 그래서 추가된 것이 Destructuring입니다.

const arr = [1,2,3];

const [a, b, c] = [1,2,3];
// const [a, b, c] = arr;

우측에 array를 쓰고 좌측에 우측과 대응하여 위와 같이 작성하면 됩니다.
그러면 a, b, c는 각각 1, 2, 3이 됩니다. 더 편하지 않나요?

default값 지정하기

const [a,b,c] = [1,2];

위의 예시처럼 개수가 서로 맞지 않으면 어떻게 될까요? a와 b에는 각각 1, 2가 저장되지만 c는 undefined가 됩니다. 그래서 c에 기본값(default 값)을 지정해놓을 수 있습니다.

const [a,b,c = 10] = [1,2];

이렇게 ‘c = 10’ 으로 지정해두면 c에 대응되는 것이 없을 때 기본값으로 10이 됩니다.

Object에서도 가능하다.

const { name, age } = { name : 'Lee', age : 26 };

Object에서도 Destructuring 문법을 적용할 수 있습니다. name은 ‘Lee’가 되고, age는 26 이됩니다. 여기서는 각각의 key값으로 지정해야합니다.

const { name : 이름, age : 나이 } = { name : 'Lee', age : 26 };

key값으로 변수명을 지정해야하지만, 위와 같이 ‘이름’, ‘나이’ 처럼 다른 변수명을 써주면 변수명을 바꿀 수 있습니다. (이름 = Lee, 나이 = 26)

변수를 오브젝트에 넣기

const name = 'Lee';
const age = 26;

const obj = { name : name, age : age }

obj에 위의 name, age 변수를 각각 저장하려면 위와 같이 작성하면됩니다.

// const obj = { name : name, age : age } 처럼 key와 value가 동일한 이름이면 축약할 수 있다.
const obj = { name, age };

그런데 key와 value가 동일한 이름이면 축약하여 위처럼 작성할 수 있습니다.

함수의 parameter에도 적용가능하다.

function info( { name, age } ) {
    console.log(name, age);
}

const object = { name : 'Lee', age : 26 };
info(object);

함수의 파라미터 자리에도 위와 같이 적용할 수 있습니다. (Array형태도 가능)
함수를 실행했을 때 콘솔창에 name과 age값이 각각 ‘Lee’, 26이 출력될 것 입니다.

End.