🐨CoalaCoding
Docs▾
JavaScriptReactHTML & CSSBackendAI & LLMDev ToolsCreative
B반1
👾숏츠
🙉B반2
게시판
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • React
  • HTML & CSS
  • Backend
  • AI & LLM
  • Dev Tools
  • Creative

커뮤니티

  • 게시판
  • 예제 모음

기타

  • 관리자

정책

  • 소개
  • 개인정보처리방침
  • 이용약관
  • 연락처
© 2026 CoalaCoding. All rights reserved.
  • 1. 자바스크립트 기초
  • 2. class
  • 3. ai이미지-생성기-구현
  • 4. 자료형
  • 5. async--await
  • 6. 변수와자료형
  • 7. xmlhttprequest-부터axios-까지
  • 8. 1-자바스크립트와-ecma
  • 9. reduce
  • 10. 캘린더-만들기
  • 11. generator
  • 12. destructuring
  • 13. spread-operator
  • 14. module-export-import
  • 15. http-통신-이란
  • 16. 시작
  • 17. 2-자바스크립트-코드-실행-과정-및-용어정리
  • 18. map
  • 19. 동기와-비동기
  • 20. 연산자
  • 21. promise-thencatch
  • 22. 3-실행컨텍스트와-스코프
  • 23. 콜백-함수
  • 24. 제어문
  • 25. 4-클로저
  • 26. windowlocation
  • 27. 함수
  • 28. 5-객체
  • 29. 이벤트
  1. 홈
  2. 문서
  3. JavaScript
  4. JavaScript 기초
  5. 12. destructuring

12. destructuring

구조 분해 할당 (Destructuring Assignment)

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식입니다.

배열 해체 (Array Destructuring)

배열 해체는 배열의 각 요소를 변수에 할당하는 것입니다. 배열 해체는 기본값과 같은 다양한 변수 할당 방식을 사용하여 변수를 초기화 할 수 있습니다.

/**
 * array destructuring
 */
const arr = [1, 2, 3];

// 기존 할당 방식
const a = arr[0]; //1
const b = arr[1]; //2
const c = arr[2]; //3
console.log(`a=${a},b=${b},c=${c}`);

//구조분해할당
const [d, e, f] = arr;

var [n1,n2]=[1,2]
console.log(n1,n2);

객체 해체 (Object Destructuring)

객체 해체는 객체의 속성을 변수에 할당하는 것입니다.

/**
 * object destructuring
 */

var obj = { x: 1, y: 2, z: 3 };
// 기존 할당 방식
var x = obj.x;
var y = obj.y;
var z = obj.z;

//구조분해할당표현식
var { x, y, z } = obj;
var { x:nx, y:ny, z:nz } = obj;
console.log(`x=${x},y=${y},z=${z}`);
console.log(`x=${nx},y=${ny},z=${nz}\n ${x === nx}`);

목차

  • 구조 분해 할당 (Destructuring Assignment)