| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring | [Back] [Original] |
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
This feature is well established and works across many devices and browser versions. Its been available across browsers since 2016 8.
JavaScript .
let a, b, rest;
[a, b] = [10, 20];
console.log(a);
// Expected output: 10
console.log(b);
// Expected output: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// Expected output: Array [30, 40, 50]
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
// Stage 4(finished) proposal
({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
.
var x = [1, 2, 3, 4, 5];
, , .
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
Perl Python .
var foo = ["one", "two", "three"];
var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"
.
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
, undefined .
var a, b;
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7
.
. ( XOR )
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
. .
f() [1, 2] , .
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
.
function f() {
return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
.
[, ,] = f();
, .
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma
exec() , . .
function parseProtocol(url) {
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
if (!parsedURL) {
return false;
}
console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
var [, protocol, fullhost, fullpath] = parsedURL;
return protocol;
}
console.log(
parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript"),
); // "https"
var o = { p: 42, q: true };
var { p, q } = o;
console.log(p); // 42
console.log(q); // true
.
var a, b;
({ a, b } = { a: 1, b: 2 });
: ( .. ) (object literal) .
{a, b} = {a:1, b:2} . {a, b} .
, ({a, b} = {a:1, b:2}) , var {a, b} = {a:1, b:2} .
( .. ) . .
.
var o = { p: 42, q: true };
var { p: foo, q: bar } = o;
console.log(foo); // 42
console.log(bar); // true
undefined , .
var { a = 10, b = 5 } = { a: 3 };
console.log(a); // 3
console.log(b); // 5
.
var { a: aa = 10, b: bb = 5 } = { a: 3 };
console.log(aa); // 3
console.log(bb); // 5
function drawES5Chart(options) {
options = options === undefined ? {} : options;
var size = options.size === undefined ? "big" : options.size;
var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
var radius = options.radius === undefined ? 25 : options.radius;
console.log(size, cords, radius);
//
}
drawES5Chart({
cords: { x: 18, y: 30 },
radius: 30,
});
function drawES2015Chart({
size = "big",
cords = { x: 0, y: 0 },
radius = 25,
} = {}) {
console.log(size, cords, radius);
//
}
drawES2015Chart({
cords: { x: 18, y: 30 },
radius: 30,
});
drawES2015Chart {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}. . , drawES2015Chart() , . , .
var metadata = {
title: "Scratchpad",
translations: [
{
locale: "de",
localization_tags: [],
last_edit: "2014-04-14T08:43:37",
url: "/de/docs/Tools/Scratchpad",
title: "JavaScript-Umgebung",
},
],
url: "/ko/docs/Tools/Scratchpad",
};
var {
title: englishTitle,
translations: [{ title: localeTitle }],
} = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
var people = [
{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith",
},
age: 35,
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones",
},
age: 25,
},
];
for (var {
name: n,
family: { father: f },
} of people) {
console.log("Name: " + n + ", Father: " + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
function userId({ id }) {
return id;
}
function whois({ displayName: displayName, fullName: { firstName: name } }) {
console.log(displayName + " is " + name);
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe",
},
};
console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
user id, displayName firstName .
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"
Rest/Spread Properties for ECMAScript (stage 3) rest . rest .
let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 };
a; // 10
b; // 20
rest; // { c: 30, d: 40 }
const foo = { "fizz-buzz": true };
const { "fizz-buzz": fizzBuzz } = foo;
console.log(fizzBuzz); // "true"
| Specification |
|---|
| ECMAScript 2027 LanguageSpecification # sec-destructuring-assignment |
| ECMAScript 2027 LanguageSpecification # sec-destructuring-binding-patterns |
This page was last modified on 2025 5 7 by MDN contributors.
Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |