<div id="readability-page-1" class="page"><div><div><h2 id="1e3e">구조분해를 이용한 보다 쉬운 데이터 접근</h2><div aria-hidden="false"><a rel="noopener ugc nofollow" href="/?source=post_page---byline--3a8d39485e66---------------------------------------"><div><img alt="Jeong Woo Ahn" src="https://miro.medium.com/v2/resize:fill:64:64/2*5-DkBQYvxo0TLldXjX88Og.png" width="32" height="32" loading="lazy" data-testid="authorPhoto"></div></a></div></div>책 <a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=122260559" rel="noopener ugc nofollow" target="_blank">모던 자바스크립트</a>의 스터디 장 준비하면서 정리한 글을 공유한다.<ul><li id="6384">1장 정리글 — <a rel="noopener ugc nofollow" href="/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94-1%EC%9E%A5-40a98d6d9b0d" target="_blank">모던 자바스크립트 1장 — 블록바인딩</a></li><li id="47fb">2장 정리글 — <a href="https://medium.com/@jeongwooahn/%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94-2%EC%9E%A5-6e32c2756dfb" rel="noopener">모던 자바스크립트 2장 — 문자열과 정규표현식</a></li><li id="d281">3장(1) 정리글 — <a rel="noopener ugc nofollow" href="/%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94-3%EC%9E%A5-1174b71cdb3d" target="_blank">모던자바스크립트 스터디 3장(1) — 함수</a></li><li id="bf3c">3장(2) 정리글 — <a href="https://medium.com/@jeongwooahn/%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94-3%EC%9E%A5-2-103e10334e6b" rel="noopener">모던자바스크립트 스터디 3장(2) — 함수</a></li><li id="8187">4장 정리글 — <a href="https://medium.com/@jeongwooahn/%EB%AA%A8%EB%8D%98%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%84%B0%EB%94%94-4%EC%9E%A5-2b21b48c7ef7" rel="noopener">모던자바스크립트 스터디 4장 — 객체</a></li></ul><figure><figcaption>generated from <a href="https://openart.ai/" rel="noopener ugc nofollow" target="_blank">openart.ai</a></figcaption></figure>ES6에서는 구조분해(destructuring)을 도입하여, 데이터 구조를 더 작게 쪼개는 작업을 단순화했다.<h2 id="3275">5.1 구조분해는 왜 유용한가</h2>ES5까지는 객체와 배열로부터 정보를 가져와 지역 변수에 특정 데이터를 가져오는 경우 번거로운 작업이 필요했다.<pre>let options = { repeat: true, save: false }let repeat = options.repeat, save = option.save;</pre>ES6에서는 자료구조를 작은 부분으로 나누어서 원하는 정보를 더 쉽게 가져올 수있게 되었다.<pre>let { repeat, save } = options;</pre><h2 id="ff0c">5.2 객체 구조분해</h2>할당 연산자의 객체 리터럴을 사용한다.<pre>let node = { type: "Identifier", name: "foo" };let { type, name } = node;// 구조분해는 초기자가 필요하다 let { type, name }// 구조분해 할당 표현식(= 다음에 요는 표현식)의 오른쪽이 // null 이나 undefined로 평가된다면 에러가 발생한다. // null 이나 undefined의 프로퍼티를 읽으려하면 런타임 에러가 발생하기 때문.// 재 할당도 가능하다 // 괄호 다음에 오는 중괄호가 블록문이 아님을 알림 ({type, name} = node);// 어디서든 사용 가능하다 function outputInfo(value){ console.log(value === node); } outputInfo({type, name} = node); // true// 존재하지 않은 프로퍼티 이름으로 지역 변수를 명시하면 undefined 값이 할당 let { value } = node; console.log(value); // undefined// 이럴 때 기본값 명시 가능 let { value = true } = node; console.log(value); // true// 다른 이름으로 할당하기 let { type: localType } = node; console.log(localType); // "Identifier"// 다른 이름으로 할당하면서 기본값도 같이 설정하면 let { value: localValue = true } = node;</pre>중첩된 객체 구조분해<pre>let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } };// node.loc.start 추출 let { loc: { start: localStart }} = node; console.log(localStart.line); // 1 console.log(localStart.column); // 1</pre><h2 id="c8e4">5.3 배열 구조분해</h2>배열의 구조분해는 배열의 위치를 기반으로 동작한다.역시 초기자가 반드시 필요하다.<pre>let colors = [ "red", "green", "blue" ]; let [ firstColor, secondColor ] = colors; // red, green// 세 번째 요소만 원한다면 let [ , , thirdColor ] = colors; // blue// 재할당을 할때 배열의 경우 괄호가 필요없다 firstColor = "black"; secondColor = "purple"; [ firstColor, secondColor ] = colors; // red, green// 이 특징은 두 변수의 값 교환을 더 쉽게 만들어준다. // 값 교환은 정렬 알고리즘에서 일반적인 동작이다. let a = 1; let b = 2; [a, b] = [b, a]; // a -&gt; 2, b -&gt; 1// 배열 구조분해도 기본값 명시 가능 let [ , , , fourthColor = "purple" ] = colors; // fourthColor -&gt; purple</pre>중첩된 배열 구조분해<pre>// 중첩된 배열 구조분해 let colors2 = [ "red", [ "green", "lightgreen" ], "blue" ]; let [ firstColor, [ secondColor ] ] = colors; // firstColor -&gt; red secondColor -&gt; green</pre>나머지 요소<pre>let colors = [ "red", "green", "blue" ]; let [ firstColor, ...restColors ] = colors; // firstColor -&gt; red, restColors -&gt; ["green", "blue"]// 이 기능으로 쉽게 배열을 복제할 수 있다. let [ ...clonedColors ] = colors; // clonedColors -&gt; [ "red", "green", "blue" ]</pre>나머지 요소는 구조분해된 배열에서 항상 마지막 요소여야 한다.<h2 id="cb39">5.4 혼합된 구조분해</h2><pre>let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } }, range: [0, 3] };let { loc: { start }, range: [ startIndex ] } = node; console.log(localStart.line); // 1 console.log(startIndex); // 0</pre><h2 id="43cc">5.5 구조분해된 매개변수</h2>기존의 매개변수 활용은 아래와 같이 했다면,<pre>// 부가적인 매개변수 표현하는 options의 프로퍼티 function setCookie(name, value, options){ options = options || {}; let secure = options.secure; let path = options.path; // cookie 설정 }setCookie('type', 'js', { secure: true, expires: 60000 })</pre>구조분해를 활용하면어떤 options 이 가능한지 매우 명확하게 알 수 있다.<pre>function setCookie(name, value, { secure, path }){ // cookie 설정 }setCookie('type', 'js', { secure: true, expires: 60000 })</pre>하지만 세 번째 인자가 전달되지 않으면 에러가 발생한다. 필수값이 아니라면 매개변수 기본값을 화용하면 된다.<pre>function setCookie2(name, value, { secure, path } = {}){ // cookie 설정 }</pre>구조분해된 매개변수에도 기본값을 설정할 수 있다.<pre>function setCookie(name, value, { secure = false, path: "/" } = {} ){ // cookie 설정 }</pre></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

구조분해를 이용한 보다 쉬운 데이터 접근
책 모던 자바스크립트의 스터디 장 준비하면서 정리한 글을 공유한다.
1장 정리글 — 모던 자바스크립트 1장 — 블록바인딩
2장 정리글 — 모던 자바스크립트 2장 — 문자열과 정규표현식
3장(1) 정리글 — 모던자바스크립트 스터디 3장(1) — 함수
3장(2) 정리글 — 모던자바스크립트 스터디 3장(2) — 함수
4장 정리글 — 모던자바스크립트 스터디 4장 — 객체
ES6에서는 구조분해(destructuring)을 도입하여, 데이터 구조를 더 작게 쪼개는 작업을 단순화했다.
5.1 구조분해는 왜 유용한가
ES5까지는 객체와 배열로부터 정보를 가져와 지역 변수에 특정 데이터를 가져오는 경우 번거로운 작업이 필요했다.
let options = {
 repeat: true,
 save: false
}
let repeat = options.repeat,
 save = option.save;
ES6에서는 자료구조를 작은 부분으로 나누어서 원하는 정보를 더 쉽게 가져올 수있게 되었다.
let { repeat, save } = options;
5.2 객체 구조분해
할당 연산자의 객체 리터럴을 사용한다.
let node = {
 type: "Identifier",
 name: "foo"
};
let { type, name } = node;
// 구조분해는 초기자가 필요하다
let { type, name }
// 구조분해 할당 표현식(= 다음에 요는 표현식)의 오른쪽이 
// null 이나 undefined로 평가된다면 에러가 발생한다.
// null 이나 undefined의 프로퍼티를 읽으려하면 런타임 에러가 발생하기 때문.
// 재 할당도 가능하다
// 괄호 다음에 오는 중괄호가 블록문이 아님을 알림
({type, name} = node);
// 어디서든 사용 가능하다
function outputInfo(value){
 console.log(value === node);
}outputInfo({type, name} = node); // true
// 존재하지 않은 프로퍼티 이름으로 지역 변수를 명시하면 undefined 값이 할당
let { value } = node;
console.log(value); // undefined
// 이럴 때 기본값 명시 가능
let { value = true } = node;
console.log(value); // true
// 다른 이름으로 할당하기
let { type: localType } = node;
console.log(localType); // "Identifier"
// 다른 이름으로 할당하면서 기본값도 같이 설정하면
let { value: localValue = true } = node;
중첩된 객체 구조분해
let node = {
 type: "Identifier",
 name: "foo",
 loc: {
  start: {
   line: 1,
   column: 1
  },
  end: {
   line: 1,
   column: 4
  }
 }
};
// node.loc.start 추출
let { loc: { start: localStart }} = node;
console.log(localStart.line); // 1
console.log(localStart.column); // 1
5.3 배열 구조분해
배열의 구조분해는 배열의 위치를 기반으로 동작한다.
역시 초기자가 반드시 필요하다.
let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
// red, green
// 세 번째 요소만 원한다면
let [ , , thirdColor ] = colors;
// blue
// 재할당을 할때 배열의 경우 괄호가 필요없다
firstColor = "black";
secondColor = "purple";
[ firstColor, secondColor ] = colors;
// red, green
// 이 특징은 두 변수의 값 교환을 더 쉽게 만들어준다.
// 값 교환은 정렬 알고리즘에서 일반적인 동작이다.
let a = 1;
let b = 2;
[a, b] = [b, a];
// a -> 2, b -> 1
// 배열 구조분해도 기본값 명시 가능
let [ , , , fourthColor = "purple" ] = colors;
// fourthColor -> purple
중첩된 배열 구조분해
// 중첩된 배열 구조분해
let colors2 = [ "red", [ "green", "lightgreen" ], "blue" ];
let [ firstColor, [ secondColor ] ] = colors;
// firstColor -> red secondColor -> green
나머지 요소
let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
// firstColor -> red, restColors -> ["green", "blue"]
// 이 기능으로 쉽게 배열을 복제할 수 있다.
let [ ...clonedColors ] = colors;
// clonedColors -> [ "red", "green", "blue" ]
나머지 요소는 구조분해된 배열에서 항상 마지막 요소여야 한다.
5.4 혼합된 구조분해
let node = {
 type: "Identifier",
 name: "foo",
 loc: {
  start: {
   line: 1,
   column: 1
  },
  end: {
   line: 1,
   column: 4
  }
 },
 range: [0, 3]
};
let {
 loc: { start },
 range: [ startIndex ]
} = node;
console.log(localStart.line); // 1
console.log(startIndex); // 0
5.5 구조분해된 매개변수
기존의 매개변수 활용은 아래와 같이 했다면,
// 부가적인 매개변수 표현하는 options의 프로퍼티
function setCookie(name, value, options){
 options = options || {};
 let secure = options.secure;
 let path = options.path;
 // cookie 설정
}
setCookie('type', 'js', {
 secure: true,
 expires: 60000
})
구조분해를 활용하면
어떤 options 이 가능한지 매우 명확하게 알 수 있다.
function setCookie(name, value, { secure, path }){
 // cookie 설정
}
setCookie('type', 'js', {
 secure: true,
 expires: 60000
})
하지만 세 번째 인자가 전달되지 않으면 에러가 발생한다. 필수값이 아니라면 매개변수 기본값을 화용하면 된다.
function setCookie2(name, value, { secure, path } = {}){
 // cookie 설정
}
구조분해된 매개변수에도 기본값을 설정할 수 있다.
function setCookie(name, value, 
 { 
  secure = false, 
  path: "/" 
 } = {}
){
 // cookie 설정
}
1장 정리글 — 모던 자바스크립트 1장 — 블록바인딩
2장 정리글 — 모던 자바스크립트 2장 — 문자열과 정규표현식
3장(1) 정리글 — 모던자바스크립트 스터디 3장(1) — 함수
3장(2) 정리글 — 모던자바스크립트 스터디 3장(2) — 함수
4장 정리글 — 모던자바스크립트 스터디 4장 — 객체

모던자바스크립트 스터디 5장

댓글