{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/es6-디스트럭처링-destructuring/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"17078556-8982-5763-ac9c-218bf34a345b","excerpt":"ES6 디스트럭처링(Destructuring) 디스트럭처링(Destructuring)은 Object 객체를 개별 변수에 할당하는 것을 말한다. 이를 이용하면, JSON…","html":"

$\"ES6$

\n

디스트럭처링(Destructuring)은 Object 객체를 개별 변수에 할당하는 것을 말한다. 이를 이용하면, JSON 형태의 객체를 쉽게 매핑하여 변수에 할당할 수 있고, 반환값도 여러 개를 설정할 수 있다.

\n

let arr = [10, 20, 30, 40, 50]\nlet [a, b, c, d, e] = arr

\n

위와 같은 형태로 변수를 차례로 할당된다. 만약, 할달한 값이 없으면, undefined가 설정된다.

\n

let arr = [10, 20, 30]\nlet [a, b, c, d, e] = arr // 10,20,30 undefined

\n

아래와 같이 값을 건너 뛸 수도 있다.

\n

let [a, , c] = [10, 20, 30]\nconsole.log(a, c) // 1 3

\n

object의 경우, 아래와 같은 형태로 대입할 수 있다. 오른쪽이 오브젝트이면, 왼쪽도 오브젝트여야 한다. name, job 은 각각의 값을 할당하게 된다. 해당하는 키가 없으면, 초기값인 undefined가 유지된다.

\n

const obj = {\n   name: \"bottlehs\"\n   job: \"Software Engineer\"\n}\nlet {name, job} = obj;\nconsole.log(name, job); // \"bottlehs\",\"Software Engineer\"

\n

또한, 다음과 같이 기본값을 설정할 수 있다.

\n

let arr = [10, 20, 30]\nlet [a = 40, c = 50, b] = arr // a = 40, c = 50, b = 30

\n

끝.

","tableOfContents":"","wordCount":{"words":83},"fields":{"slug":"/javascript/es6-디스트럭처링-destructuring/","image":"/assets/es6.png","faq":[]},"frontmatter":{"title":"ES6 디스트럭처링(Destructuring)","date":"2020년 11월 18일","dateISO":"2020-11-18T18:51:30.185Z","updatedISO":null,"category":"javascript","description":"디스트럭처링(Destructuring)은 Object 객체를 개별 변수에 할당하는 것을 말한다. 이를 이용하면, JSON 형태의 객체를 쉽게 매핑하여 변수에 할당할 수 있고, 반환값도 여러 개를 설정할 수 있다.","tags":["ES6","디스트럭처링","Destructuring","JavaScript","ECMAScript6"]}}},"pageContext":{"slug":"/javascript/es6-디스트럭처링-destructuring/","previous":{"fields":{"slug":"/javascript/es6-템플릿-문자열-template-string/"},"frontmatter":{"title":"ES6 템플릿 문자열 (template string)","tags":["ES6","ECMAScript","템플릿 문자열","JavaScript"]}},"next":{"fields":{"slug":"/javascript/es6-spread-rest-연산자/"},"frontmatter":{"title":"ES6 Spread & Rest 연산자","tags":["ES6","Spread","Rest","JavaScript","ECMAScript6"]}}}},"staticQueryHashes":["213619243","3262363727"]}