JavaScript에서 객체 파괴의 실제 사용

이러한 파괴 패턴을 사용하여보다 깔끔한 코드 작성

지금까지는 JavaScript의 구조화에 대해 잘 알고있을 것입니다. ES6 사양에서 2015 년에 다시 돌아 왔지만 솔직히 설명 해야하는 경우 Mozilla는 작동 방식에 대한 심층적 인 기사를 가지고 있습니다.

그러나 어떻게 파괴가 작동하는지 아는 것은 그것을 사용하는 방법을 아는 것과 다릅니다. 다음은 코드를 더 깨끗하고 강력하며 읽기 쉽게 만드는 데 사용할 수있는 세 가지 파괴 패턴입니다.

1. 명명 된 함수 인수

명명 된 인수는 위치가 아닌 함수 매개 변수를 처리하는 대체 방법입니다. 함수 시그니처와 동일한 순서로 인수를 정렬하는 대신 이름으로 인수를 지정하기 만하면됩니다. 예를 들어, 파이썬에서 :

보다시피, 인수의 순서는 중요하지 않습니다. 이름으로 만 지정하면됩니다. 명명 된 인수와 위치의 장점은 다음과 같습니다.

  1. 함수를 호출 할 때 하나 이상의 매개 변수를 생략 할 수 있습니다
  2. 인수를 전달할 때 순서는 중요하지 않습니다.
  3. 다른 곳에 존재할 수있는 함수를 호출 할 때 더 읽기 쉬운 코드

JavaScript에는 진정한 명명 된 인수가 존재하지 않지만, 구조적 패턴을 사용하여 3 가지 동일한 이점을 모두 얻을 수 있습니다. 위와 동일한 코드이지만 JavaScript는 다음과 같습니다.

이 패턴은 명명 된 논증에 대한 우리의 모든 목표를 달성합니다. 우리는 인수 c를 생략 할 수 있었고 순서는 중요하지 않으며 이름으로 참조하여 인수를 할당합니다. 이것은 모두 객체 파괴로 가능합니다.

2. 서버 응답을 정확하게 분석

종종 우리는 서버 응답의 데이터 블록 또는 데이터 블록의 특정 값에 대해서만 신경을 씁니다. 이 경우, 서버가 일반적으로 보내는 다른 많은 것을 무시하면서 그 값만 가져 오기 위해 구조화를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

이 패턴을 사용하면 인수를 구문 분석 할 때 객체에서 값을 가져올 수 있습니다. 또한 무료로 기본값을 설정할 수 있습니다! 세 번째 패턴으로 우리를 안내합니다…

3. 할당 중 기본값 설정

변수 나 상수를 할당 할 때 일반적으로 스코프에 다른 값이없는 경우 기본값을 사용합니다.

해체하기 전에 원하는 동작을 달성하기 위해 다음과 같은 작업을 수행 할 수 있습니다.

// 기본 설정 방법
var nightMode = userSettings.nightMode || 그릇된

그러나 각 과제마다 개별 코드 줄이 필요합니다. 구조를 정리하면 모든 과제와 기본값을 한 번에 처리 할 수 ​​있습니다.

이 파괴 패턴은 React 컴포넌트의 상태 설정에 적용 할 수 있습니다!

이러한 패턴 중 일부를 코드에 적용 할 수 있기를 바랍니다. 구조 해제에 대한 자세한 내용은 아래 링크를 확인하십시오.

더 알아보세요!