`var {…} =…`문에서 중괄호는 무엇을합니까?


117

이것이 Mozilla 특정 JS 구문인지 확실하지 않지만 예를 들어 애드온 SDK 문서 에서와 같이 이러한 방식으로 선언되는 변수를 종종 발견했습니다 .

var { Hotkey } = require("sdk/hotkeys");

다양한 크롬 Javascript에서 (대신 let문이 사용됩니다 var),

let { classes: Cc, interfaces: Ci, results: Cr, utils: Cu }  = Components;

매우 혼란 스럽지만 MDN 에서도 두 구문에 대한 문서를 찾을 수 없습니다 .


@Blender symbolhound.com에서이 구조를 어떻게 검색 하시겠습니까?
trusktr 2013 년

1
@trusktr : 조금 늦었습니다 : symbolhound.com/…
Blender

짧은 대답은 다음과 같습니다. stackoverflow.com/a/45909752/203704
Cliff Hall

기본적인 해체는 괜찮습니다. 그러나이 예제에서는 값을 다른 속성 이름에 할당하고 있으며 해당 구문은 매우 혼란 스럽습니다. 이는 객체 생성 구문과 반대이며 더 많은 혼란을 더합니다.

답변:


72

둘 다 JavaScript 1.7 기능입니다. 첫 번째는 블록 수준 변수입니다 .

let변수를 선언하고 변수가 사용되는 블록, 문 또는 표현식으로 범위를 제한 할 수 있습니다. 이것은 var변수를 전역 적으로 정의하거나 블록 범위에 관계없이 전체 함수에 대해 로컬로 정의하는 키워드 와는 다릅니다 .

두 번째는 Destructuring 이라고합니다 .

Destructuring 할당을 사용하면 배열 및 개체 리터럴의 구성을 미러링하는 구문을 사용하여 배열 또는 개체에서 데이터를 추출 할 수 있습니다.
...
디스트 럭처링 할당으로 할 수있는 특히 유용한 작업 중 하나는 다음 예제로 가득 찬 섹션에서 볼 수 있듯이 여러 가지 흥미로운 작업을 수행 할 수 있지만 단일 문에서 전체 구조를 읽는 것입니다.

Python에 익숙한 사용자에게는 다음 구문과 유사합니다.

>>> a, (b, c) = (1, (2, 3))
>>> a, b, c
(1, 2, 3)

첫 번째 코드 청크는 다음의 약칭입니다.

var {Hotkey: Hotkey} = require("sdk/hotkeys");
// Or
var Hotkey = require("sdk/hotkeys").Hotkey;

두 번째 코드 청크를 다음과 같이 다시 작성할 수 있습니다.

let Cc = Components.classes;
let Ci = Components.interfaces;
let Cr = Components.results;
let Cu = Components.utils;

2
내 실험에서, 외모 좋아 var { Hotkey }하는 것과 같습니다 var { Hotkey: Hotkey }. 문서를 찾아 주셔서 감사합니다!
timdream 2013 년

@timdream : 그런 느낌이 들었는데 어떻게 다른 var Hotkey = require(...).Hotkey가요? 아니면 그냥 키 입력을 저장합니까?
Blender 2013 년

이렇게 생겼습니다 :-/ (헤 헤헤,이 게으른 프로그래머들 ...)
timdream

2
또한 이러한 흔하지 않은 구문을 사용하는 것은 모든 것을 더 복잡하게 만듭니다.
trusktr

두 번째는 "Object Destructuring"이며 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…를
IcyBrk

80

당신이보고있는 것은 비 구조화 과제입니다. Haskell과 같은 패턴 매칭 의 한 형태입니다 .

비 구조화 할당을 사용하면 객체 및 배열에서 값을 추출하고 객체 및 배열 리터럴 구문을 사용하여 새로 선언 된 변수에 할당 할 수 있습니다. 이것은 코드를 훨씬 더 간결하게 만듭니다.

예를 들면 :

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a, b, c} = ascii;

위의 코드는 다음과 같습니다.

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var a = ascii.a;
var b = ascii.b;
var c = ascii.c;

배열의 경우 :

var ascii = [97, 98, 99];

var [a, b, c] = ascii;

이것은 다음과 동일합니다.

var ascii = [97, 98, 99];

var a = ascii[0];
var b = ascii[1];
var c = ascii[2];

다음과 같이 객체 속성을 추출하고 이름을 바꿀 수도 있습니다.

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a: A, b: B, c: C} = ascii;

이것은 다음과 동일합니다.

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var A = ascii.a;
var B = ascii.b;
var C = ascii.c;

그게 전부입니다.


12
객체 분해 예제의 경우 +1, 정말 유용합니다. MDN 예는 단지 배열 destructuring를 나타낸다.
Blender 2013 년

@Blender-객체 분해 예제를 제공합니다. 객체 배열에서 값반복하는 방법을 살펴보십시오 .
Aadit M Shah 2013

나는 var {a, b, c} = ascii;구문을 의미했습니다 .
Blender 2013 년

마지막 예는 일반적으로 콜론 왼쪽에있는 것이 할당 된 것이기 때문에 정말 이상합니다.
Curtis

1

이것은 Javascript의 파괴적인 할당이며 ES2015 표준의 일부입니다. 객체의 배열 또는 속성에서 고유 한 변수로 값을 압축 해제하거나 추출합니다. 예 : 배열 분해

var foo = ["one", "two", "three"];
//without destructuring
var one = foo[0];
var two = foo[1];
var three = foo[2];

// 비 구조화 var [one, two, three] = foo

예 : 객체 분해

var o = {p : 42, q : true}; var {p, q} = o;

console.log (p); // 42 console.log (q); // 진실

// 새 변수 이름 할당 var {p : foo, q : bar} = o;

console.log (foo); // 42 console.log (bar); // 진실


0

letMDN에 대한 문서가 있습니다 : https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let

letvar선언 된 변수의 범위를 제한한다는 점에서 유사 합니다. if(){}블록 (또는 다른 블록) 내에서 변수를 선언하고 해당 블록 내에서만 "표시"할 수 있습니다 (지금까지 자바 스크립트는 대부분의 다른 언어처럼 블록 범위가 아닌 함수 범위를 가짐). 그래서let 기본적으로 많은 사람들이 문제를 가지고있는 것에 대한 "수정"입니다. tihs는 JavaScript 1.7 기능입니다.

에서 아무것도 찾지 못했습니다 {Foo}.


죄송합니다, 나는 그것이 올 때 내 구글 - Fu는 나를 실패 ... 당신은 모두에 대해 물어 도자기 생각 {Foo}/ :
월 Hančič

나 너무 : - / 구글하지 않습니다 인덱스 {}.
timdream 2013 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.