함수 매개 변수 목록 내의 중괄호는 es6에서 무엇을합니까?

120

작업중인 코드베이스에서 다음과 같은 기능이 계속 표시됩니다.

const func = ({ param1, param2 }) => {
  //do stuff
}

이것이 정확히 무엇을하고 있는가? 나는 이것이 무엇이라고 부르는지 또는 Google 검색에서 그것을 설명하는 방법을 모르기 때문에 Google에서 찾는 데 어려움을 겪고 있습니다.

javascript ecmascript-6

— 나단
소스

— Bergi

116

그것은됩니다 destructuring 하지만, 매개 변수에 포함. 구조화가없는 동등한 것은 다음과 같습니다.

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}

— 제임스 소프
소스

11

내가 올바르게 이해하고 있는지 확인하기 위해 기본적으로 이러한 속성을 포함하는 개체가 함수에 전달 된 다음 함수 내에서 해당 이름을 사용하여 속성에 자동으로 액세스 할 수 있다는 의미입니까?

— Nathan

7

@Nathan 예, 특히 Object destructuring 섹션을 참조하십시오 . 그러나 변수를 업데이트해도 원래 객체 속성이 업데이트되지는 않습니다. 원래 값에 대한 참조를 만드는 것과는 다릅니다.

— James Thorpe

— lsborg

11

이것은 객체를 속성으로 전달하는 것입니다.

기본적으로

let param1 = someObject.param1
let param2 = someObject.param2

매개 변수없이이 기술을 사용하는 또 다른 방법은 다음과 같습니다. someObject에 이러한 속성이 포함되어 있는지 잠시 살펴 보겠습니다.

let {param1, param2} = someObject;

— 오즈 로드리게스
소스

3

객체 분해 할당입니다. 나처럼 ES6 객체 구조화 구문이 비슷해 보이지만 객체 리터럴 구성처럼 동작하지 않기 때문에 놀라운 사실을 발견했을 수 있습니다.

필드 및 기본 인수의 이름을 바꿀뿐만 아니라 접한 매우 간결한 형식을 지원합니다.

기본적으로 {oldkeyname : newkeyname = defaultvalue, ...}입니다. ':'는 키 / 값 구분자가 아닙니다. '='입니다.

이 언어 디자인 결정의 일부 결과는 다음과 같은 작업을 수행해야한다는 것입니다.

; ({a, b} = some_object);

추가 괄호는 왼쪽 중괄호가 블록으로 구문 분석되는 것을 방지하고 선행 세미콜론은 괄호가 이전 줄의 함수에 대한 함수 호출로 구문 분석되는 것을 방지합니다.

객체 구조화 할당 중 주요 오류는 발생하지 않습니다. 키 오류 든 '정의되지 않음'으로 자동 전파 된 다른 오류 든간에 "정의되지 않은"값으로 끝납니다.

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>

— 앤드류 와그너
소스