[JavaScript] 구조 분해 할당

2025. 6. 18. 15:20· 프로그래밍언어/JavaScript
목차
  1. 배열의 구조 분해 할당
  2. 객체의 구조 분해 할당
  3. 매개변수를 구조 분해 할당으로 받는 법

배열이나 객체에 저장된 여러 개의 값들을 분해해서 각각 다른 변수에 할당하는 문법

 

배열의 구조 분해 할당

  • let [변수명1, 변수명2, 변수명3] = 배열명;
  • 배열에 담긴 순서대로 앞에 변수에 값을 할당
  • 배열의 길이보다 변수가 적은 경우 차례대로 저장 후 짤림
  • 배열의 길이보다 변수가 많은 경우 모두 할당 한 후 나머지는 undefined, 단 undefined 일 경우 초기값 설정 가능
let arr = [1, 2, 3];

let [one, two, three=2, four, five=5] = arr;
console.log(one, two, three, four, five); // 1 2 3 undefined 5

 

객체의 구조 분해 할당

  • let {키명1, 키명2, 키명3} = 객체명;
  • 순서 상관없이 해당 키명에 객체안에 속성의 키명의 값이 할당 됨
  • 해당 속성이 없을 경우 undefined 반환, 단 undefined일 경우 초기값 설정 가능
  • 변수명을 키명가 다른 이름으로 사용하고 싶은 경우 {키명:변수명}으로 작성 가능
let person = {
  name: "luna",
  age: 27,
  hobby: "테니스",
};

let { age: myAge = 40, hobby, extra, name: myName, sayHi="hello"} = person;
console.log(myName, myAge, hobby, extra); // luna 27 테니스 undefined hello

 

매개변수를 구조 분해 할당으로 받는 법

함수에 인자로 배열, 객체를 받을 경우 구조 분해 할당으로 받을 수 있다

let person = {
    name: "luna",
    age: 27,
    hobby: "테니스",
  };
  
const func = ({ name:myName, age, hobby, extra=123 }) => {
  console.log(myName, age, hobby, extra); // luna 27 테니스 123
};

func(person);

 

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

[JavaScript] 배열의 메서드  (4) 2025.06.19
[JavaScript] Spread 연산자, Rest 매개변수  (1) 2025.06.18
[JavaScript] Truthy&Falsy  (0) 2025.06.18
[JavaScript] AJAX(Asynchronous Javascript And XML)  (0) 2025.03.11
[JavaScript] JSON(JavaScript Object Notation)  (0) 2025.03.11
  1. 배열의 구조 분해 할당
  2. 객체의 구조 분해 할당
  3. 매개변수를 구조 분해 할당으로 받는 법
'프로그래밍언어/JavaScript' 카테고리의 다른 글
  • [JavaScript] 배열의 메서드
  • [JavaScript] Spread 연산자, Rest 매개변수
  • [JavaScript] Truthy&Falsy
  • [JavaScript] AJAX(Asynchronous Javascript And XML)
개발원슝이
개발원슝이
꾸준히 개발공부를 합니다.
개발원슝이
꾸준히 개발슝이
개발원슝이
전체
오늘
어제
  • ALL (242)
    • 프로젝트 (34)
      • clone coding (19)
      • mini project (5)
      • Team project(with KIC) (10)
    • 문제 (37)
      • 백준 (7)
      • 프로그래머스 (14)
      • 정보처리기사실기 (16)
    • 설치 (9)
    • 개발 기초 (13)
    • 프로그래밍언어 (124)
      • HTML (16)
      • CSS (17)
      • JavaScript (22)
      • JAVA (13)
      • JSP (10)
      • Python (22)
      • C언어 (24)
    • 프레임워크 (6)
      • Spring (3)
      • Django (3)
    • DB (2)
      • MySQL (2)
    • AWS (1)
    • 오류 (2)
    • 이것저것 (6)
    • 전공자 개발 (3)
    • 비전공자 개발 (5)

블로그 메뉴

  • 네이버블로그(강의노트)
  • GitHub
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 점프 투 파이썬
  • 코딩테스트
  • 백준
  • 인프런
  • javascript
  • 홍정모의 따라하며 배우는 C언어
  • 파이썬공부
  • 홍정모교수님
  • 따배씨
  • 생활코딩

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발원슝이
[JavaScript] 구조 분해 할당
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.