3 JavaScript의 객체 초기화 약식 표기법

저는 최근에 변수 할당을 구조화하기 위해 속기 표기법을 사용하려고 했던 프로젝트에서 작업하고 있었습니다. 특정 시나리오를 작동시키는 다양한 방법을 연구하고 있었습니다. 그리고 그 연구를 하는 동안 ES2015에는 존재하지 않는 3개의 새로운 객체 초기화 속기 표기법이 추가되었다는 것을 발견했습니다. 그래서 나는 이것을 모두와 공유하기로 결정했습니다.

**참고: **대부분의 좋은 기능과 마찬가지로 Internet Explorer에서는 작동하지 않습니다. 따라서 지원하는 경우 나중에 Microsoft가 IE에 대한 지원을 중단할 때 무기고에 보관하는 것이 좋습니다.

객체 초기화 속기 표기법은 무엇을 의미합니까?

기본적으로 객체 초기화는 Object.create(), new Object 또는 객체 이니셜라이저를 사용하여 리터럴 표기법을 사용하여 수행할 수 있습니다. 객체 이니셜라이저는 가장 일반적인 방법 중 하나입니다.

const foo= {
  bar: 1,
  baz: 2
}

특정 시나리오에서 이 초기화를 간결하게 만드는 방법이 있으며 이 게시물에서 해당 속기를 살펴볼 것입니다.

ES2015에 3개의 새로운 객체 초기화 속기 표기법이 추가되었습니다.

약식 속성 이름

약식 메서드 이름

계산된 속성 이름

약식 속성 이름

이것은 가장 널리 알려진 객체 초기화 속기 표기법입니다. 객체의 속성 이름 키가 범위의 변수 이름과 같을 때마다 객체를 구성하는 동안 속성 값을 생략할 수 있습니다.

이것은 다음과 같은 코드를 의미합니다.

const bar = 1;
const foo: {
  bar: bar ,
  baz: 2
}

이제 다음이 될 수 있습니다.

const bar = 1;
const foo: {
  bar,
  baz: 2
}

약식 메서드 이름

이것은 내가 항상 속기 속성 이름에 대해 알고 있다는 의미에서 처음 보았을 때 조금 놀랐습니다. 하지만 함수/메서드 이름에도 동일하게 적용될 수 있다고는 생각하지 못했습니다. 약식 메서드 이름을 사용하면 객체 내부에서 메서드를 생성할 때 function 키워드를 완전히 생략할 수 있습니다.

다음과 같은 코드가 있습니다.

const bar = 1;
const foo: {
  bar,
  baz: function() {
  // logic
  }
}

다음과 같이 약칭할 수 있습니다.

const bar = 1;
const foo: {
  bar,
  baz() {
  // logic
  }
}

우리는 수업의 형태로 이것에 익숙했고 큰 승리는 아니지만 이 게시물은 약식에 관한 것이고 나는 이러한 새로운 소개를 좋아합니다.

계산된 속성 이름

이것은 3가지 객체 초기화 속기 중 가장 흥미로운 속기였습니다. 이를 통해 객체의 속성 이름으로 계산할 표현식을 가질 수 있습니다. 따라서 이제 객체 이름에 동적 키를 가질 수 있습니다.

당신은 이것을 한 적이 있습니까?

const obj = {}, key = 'bar';
obj[key] = 'baz';

이것은 JavaScript 객체가 사전이고 동적 키를 추가할 수 있는 가능성을 제공하기 때문에 가능합니다. 그러나 이것은 항상 나에게 고통이었습니다. 더 이상은 안돼!

let key = 'bar';
let obj = {

}

그리고 그것은 작동합니다! 동적 키를 삽입할 수 있다는 아이디어는 사소해 보일 수 있지만 많은 가능성이 열립니다. 여기에 복잡한 표현식을 추가하거나 템플릿 리터럴을 사용할 수도 있습니다.

let key = 'bar';
const prefix = '_prefix'
let obj = {


}

그리고 그것들은 우리가 논의해야 했던 3개의 객체 초기화 속기 표기법입니다. 이것들은 기존 방법에 대한 구문 설탕이지만 객체를 생성하는 동안 수행하는 가장 일반적으로 사용되는 작업입니다. 그리고 작은 개선 사항이 추가됩니다. JavaScript의 속기법에 대해 좀 더 알고 싶다면 JavaScript rest and spread operator and destructuring 의 게시물을 읽어보세요.

이 중 하나를 사용하시겠습니까? 아래 의견에 알려주십시오!

2021년 2월 2일 https://www.wisdomgeek.com에 원래 게시되었습니다.