제이스크립트 구조

구조 대입 문법

구조 대입 문법은 객체 속성을 변수에 해제합니다:

let {firstName, lastName} = person;

그리고 배열과 다른 이터러블 객체를 해제할 수도 있습니다:

let [firstName, lastName] = person;

객체 구조

예제

// 객체 생성
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// 구조
let {firstName, lastName} = person;

직접 테스트해 보세요

속성의 순서는 중요하지 않습니다:

예제

// 객체 생성
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// 구조
let {lastName, firstName} = person;

직접 테스트해 보세요

객체 기본 값

부족할 수 있는 속성에 대해 기본 값을 설정할 수 있습니다:

예제

// 객체 생성
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// 구조
let {firstName, lastName, country = "US"} = person;

직접 테스트해 보세요

객체 속성 별명

예제

// 객체 생성
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// 구조
let {lastName: name} = person;

직접 테스트해 보세요

문자열 구조

구조의 한 가지 사용 사례는 문자열 문자를 해제하는 것입니다.

예제

// 문자열 생성
let name = "W3Schools";
// 구조
let [a1, a2, a3, a4, a5] = name;

직접 테스트해 보세요

배열 구조

배열 변수를 자신의 변수에 추출할 수 있습니다:

예제

// 배열 생성
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 구조
let [fruit1, fruit2] = fruits;

직접 테스트해 보세요

배열 값 건너뛰기

두 개나 더 많은 쉼표를 사용하여 배열 값을 건너뛰biliriz:

예제

// 배열 생성
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 구조
let [fruit1,,,fruit2] = fruits;

직접 테스트해 보세요

배열 위치 값

특정 인덱스 위치에서 배열 값을 추출할 수 있습니다:

예제

// 배열 생성
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// 구조
let {[0]: fruit1, [1]: fruit2} = fruits;

직접 테스트해 보세요

잔여 속성

구조 문법의 끝에서 잔여 속성을 사용할 수 있습니다.

이 문법은 모든 남은 값을 새로운 배열에 저장합니다:

예제

// 배열 생성
const numbers = [10, 20, 30, 40, 50, 60, 70];
// 구조
const [a, b, ...rest] = numbers;

직접 테스트해 보세요

Map 구조

예제

// Map 생성
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);
// 구조
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

직접 테스트해 보세요

JavaScript 변수 교환

변수의 값을 교환할 수 있는 구조 할당을 사용할 수 있습니다:

예제

let firstName = "Bill";
let lastName = "Gates";
// 구조
[firstName, lastName] = [lastName, firstName];

직접 테스트해 보세요