three.js에 프로젝트가 있고 일부 도형이 필요하다고 가정해 보겠습니다. x, y, z 값과 너비, 높이 및 깊이 값이지만 이 배열은 서버 또는 타사 API에서 올 수 있습니다. =>

const geometriesRaw = [
    {
      color: 0x44aa88,
      x: 0,
      y: 1,
      z: 0,
      width: 1,
      height: 1,
      depth: 1
    },
    {
      color: 0x8844aa,
      x: -2,
      y: 1,
      z: 0,
      width: 1.5,
      height: 1.5,
      depth: 1.5
    }

  ];

그런 다음 배열을 사용하여 렌더링하겠습니다. 지도 기능 =>

  const cubes = geometriesRaw.map((cube)=>{
    
  }) 

매번 인수 큐브를 반복하는 이 코드의 장황함을 한눈에 알 수 있습니다.
또 다른 위험 신호는 배열에서 어떤 속성을 사용하고 있는지 명확하지 않다는 것입니다. 예를 들어 z는 두 경우 모두 0이고 대부분의 경우 아마도 0일 것입니다.
일반적인 사용 사례에서는 이 속성을 함수에 노출하면 안 됩니다. 이는 깊이 속성에서도 자주 발생할 수 있습니다.

이러한 이유로 가장 좋은 옵션은 다음과 같이 객체 배열에서 오는 속성을 분해하는 것입니다. =>

 const cubes = geometriesRaw.map(({x,y, width, color})=>{
    
  }) 

이제 x,y, 너비, 색상만 사용하고 있습니다. 이런 식으로 우리는 z, 높이 및 깊이가 함수 내부의 기본 속성이며 서버나 타사에서 오는 데이터에서 필요하지 않음을 암시합니다

이 방법으로 우리는 큐브의 상수와 상호 작용할 향후 개발자를 위해 속성을 숨기고 외부 소스에서 필요한 속성과 더 나은 연습을 위해 기본값으로 설정하는 속성을 표시할 뿐입니다.
const z = 0
...
더 명확하게 만들기 위해 함수 내부에서