Share
Sign In
Destructuring 문법
MDN의 구조 분해 할당에서 필요한 부분을 발췌 한 문서입니다.
한글로 구조 분해 할당이라고 하는 Destructuring 문법에 대해 알아보자.
객체 및 리터럴 표현식으로 쉽게 선언할 수 있다.
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 [y, z] = x;
console.log(y); // 1
console.log(z); // 2일부 값 무시하기
var [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3변수에 배열의 나머지 할당하기
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]객체 구조 분해 할당
기본 변수 구조 분해 선언
var {p, q} = {p: 42, q: true};
console.log(p); // 42
console.log(q); // true
//함수에서 선언하는 방법
function distructing({a, b} = {a: 1, b: 2}){
console.log(a); // 1
console.log(b); // 2
}
distructing();위에서 한 것과 같이 함수에서 선언하면 매개변수로 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); // 5json 객체 구조 분해 할당
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: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"for of 반복문과 구조 분해
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"[코드 출처]
JavaScript 돌아가기
메인으로 돌아가기
MDN의 구조 분해 할당에서 필요한 부분을 발췌 한 문서입니다.
한글로 구조 분해 할당이라고 하는 Destructuring 문법에 대해 알아보자.
객체 및 리터럴 표현식으로 쉽게 선언할 수 있다.
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 [y, z] = x;
console.log(y); // 1
console.log(z); // 2일부 값 무시하기
var [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3변수에 배열의 나머지 할당하기
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]객체 구조 분해 할당
기본 변수 구조 분해 선언
var {p, q} = {p: 42, q: true};
console.log(p); // 42
console.log(q); // true
//함수에서 선언하는 방법
function distructing({a, b} = {a: 1, b: 2}){
console.log(a); // 1
console.log(b); // 2
}
distructing();위에서 한 것과 같이 함수에서 선언하면 매개변수로 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); // 5json 객체 구조 분해 할당
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: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"for of 반복문과 구조 분해
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"[코드 출처]
JavaScript 돌아가기
메인으로 돌아가기
MDN의 구조 분해 할당에서 필요한 부분을 발췌 한 문서입니다.
한글로 구조 분해 할당이라고 하는 Destructuring 문법에 대해 알아보자.
객체 및 리터럴 표현식으로 쉽게 선언할 수 있다.
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 [y, z] = x;
console.log(y); // 1
console.log(z); // 2일부 값 무시하기
var [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3변수에 배열의 나머지 할당하기
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]객체 구조 분해 할당
기본 변수 구조 분해 선언
var {p, q} = {p: 42, q: true};
console.log(p); // 42
console.log(q); // true
//함수에서 선언하는 방법
function distructing({a, b} = {a: 1, b: 2}){
console.log(a); // 1
console.log(b); // 2
}
distructing();위에서 한 것과 같이 함수에서 선언하면 매개변수로 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); // 5json 객체 구조 분해 할당
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: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"for of 반복문과 구조 분해
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"[코드 출처]
JavaScript 돌아가기
메인으로 돌아가기
MDN의 구조 분해 할당에서 필요한 부분을 발췌 한 문서입니다.
한글로 구조 분해 할당이라고 하는 Destructuring 문법에 대해 알아보자.
객체 및 리터럴 표현식으로 쉽게 선언할 수 있다.
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 [y, z] = x;
console.log(y); // 1
console.log(z); // 2일부 값 무시하기
var [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3변수에 배열의 나머지 할당하기
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]객체 구조 분해 할당
기본 변수 구조 분해 선언
var {p, q} = {p: 42, q: true};
console.log(p); // 42
console.log(q); // true
//함수에서 선언하는 방법
function distructing({a, b} = {a: 1, b: 2}){
console.log(a); // 1
console.log(b); // 2
}
distructing();위에서 한 것과 같이 함수에서 선언하면 매개변수로 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); // 5json 객체 구조 분해 할당
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: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"for of 반복문과 구조 분해
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"[코드 출처]
JavaScript 돌아가기
메인으로 돌아가기
MDN의 구조 분해 할당에서 필요한 부분을 발췌 한 문서입니다.
한글로 구조 분해 할당이라고 하는 Destructuring 문법에 대해 알아보자.
객체 및 리터럴 표현식으로 쉽게 선언할 수 있다.
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 [y, z] = x;
console.log(y); // 1
console.log(z); // 2일부 값 무시하기
var [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3변수에 배열의 나머지 할당하기
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]객체 구조 분해 할당
기본 변수 구조 분해 선언
var {p, q} = {p: 42, q: true};
console.log(p); // 42
console.log(q); // true
//함수에서 선언하는 방법
function distructing({a, b} = {a: 1, b: 2}){
console.log(a); // 1
console.log(b); // 2
}
distructing();위에서 한 것과 같이 함수에서 선언하면 매개변수로 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); // 5json 객체 구조 분해 할당
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: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"for of 반복문과 구조 분해
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"[코드 출처]
JavaScript 돌아가기
메인으로 돌아가기
MDN의 구조 분해 할당에서 필요한 부분을 발췌 한 문서입니다.
한글로 구조 분해 할당이라고 하는 Destructuring 문법에 대해 알아보자.
객체 및 리터럴 표현식으로 쉽게 선언할 수 있다.
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 [y, z] = x;
console.log(y); // 1
console.log(z); // 2일부 값 무시하기
var [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3변수에 배열의 나머지 할당하기
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]객체 구조 분해 할당
기본 변수 구조 분해 선언
var {p, q} = {p: 42, q: true};
console.log(p); // 42
console.log(q); // true
//함수에서 선언하는 방법
function distructing({a, b} = {a: 1, b: 2}){
console.log(a); // 1
console.log(b); // 2
}
distructing();위에서 한 것과 같이 함수에서 선언하면 매개변수로 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); // 5json 객체 구조 분해 할당
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: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"for of 반복문과 구조 분해
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"[코드 출처]
JavaScript 돌아가기
메인으로 돌아가기
MDN의 구조 분해 할당에서 필요한 부분을 발췌 한 문서입니다.
한글로 구조 분해 할당이라고 하는 Destructuring 문법에 대해 알아보자.
객체 및 리터럴 표현식으로 쉽게 선언할 수 있다.
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 [y, z] = x;
console.log(y); // 1
console.log(z); // 2일부 값 무시하기
var [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3변수에 배열의 나머지 할당하기
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]객체 구조 분해 할당
기본 변수 구조 분해 선언
var {p, q} = {p: 42, q: true};
console.log(p); // 42
console.log(q); // true
//함수에서 선언하는 방법
function distructing({a, b} = {a: 1, b: 2}){
console.log(a); // 1
console.log(b); // 2
}
distructing();위에서 한 것과 같이 함수에서 선언하면 매개변수로 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); // 5json 객체 구조 분해 할당
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: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"for of 반복문과 구조 분해
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"[코드 출처]
JavaScript 돌아가기
메인으로 돌아가기
MDN의 구조 분해 할당에서 필요한 부분을 발췌 한 문서입니다.
한글로 구조 분해 할당이라고 하는 Destructuring 문법에 대해 알아보자.
객체 및 리터럴 표현식으로 쉽게 선언할 수 있다.
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 [y, z] = x;
console.log(y); // 1
console.log(z); // 2일부 값 무시하기
var [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3변수에 배열의 나머지 할당하기
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]객체 구조 분해 할당
기본 변수 구조 분해 선언
var {p, q} = {p: 42, q: true};
console.log(p); // 42
console.log(q); // true
//함수에서 선언하는 방법
function distructing({a, b} = {a: 1, b: 2}){
console.log(a); // 1
console.log(b); // 2
}
distructing();위에서 한 것과 같이 함수에서 선언하면 매개변수로 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); // 5json 객체 구조 분해 할당
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: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"for of 반복문과 구조 분해
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"[코드 출처]
JavaScript 돌아가기