JavaScript가 지저분하지 않은 이유는 무엇입니까?-JS 튜토리얼-php.cn

JavaScript가 지저분하지 않은 이유는 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2025-01-21 04:29:08

원래의

422명이 탐색했습니다.

Por que JavaScript não é bagunça?

프런트엔드 개발이 지저분하다는 말, 특히 여러 접근 방식이 동일한 결과를 가져오기 때문에 JavaScript가 "무엇이든 허용"하고 정리되지 않은 코드를 허용한다는 주장을 들으면 매우 짜증이 납니다.

사실 이러한 비판은 근거가 충분합니다. 동일한 목적을 달성하면서 JavaScript를 다른 방식으로 작성하는 것이 가능합니다.

프런트엔드(자바스크립트)와 백엔드의 주요 차이점은 디자인 패턴의 정의에 있습니다. 백엔드에서는 프레임워크와 규칙이 널리 채택됩니다. 프런트엔드에서는 모범 사례와 표준이 분산되어 있어 차이가 발생하고 특히 초보자의 경우 이해가 어려워집니다. ~~저도 저만의 의견이 있습니다.~~

핵심

이렇게 명백한 구조 부족에도 불구하고 이것이 패턴이 존재하지 않는다거나 패턴을 찾아서는 안 된다는 의미는 아닙니다. JavaScript에는 다양한 웹사이트와 문서(예: Mozilla Docs JS)에서 사용할 수 있는 잘 정의된 수많은 리소스와 표준이 있습니다. 중요한 것은 이러한 개념을 배우고 올바르게 적용하는 데 시간을 투자하는 것입니다.

실용예

프로덕션 프로젝트에서 가져온 아래 코드는 작동하지만 더 나은 가독성과 성능을 위해 접근 방식을 최적화할 수 있습니다. 개선 사항을 설명하기 위해 기본 JavaScript 기능(배열 및 개체)을 사용하여 리팩토링해 보겠습니다.

API에서 받은 데이터를 나타내는 아래 개체에는 새로운 "라벨" 필드(접두사 "개점" 매장 이름)가 필요합니다.

<code>const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]</code>

로그인 후 복사

reduce, forEach 및 push을 사용하는 첫 번째 구현은 효율성이 떨어집니다.

<code>storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// resultado:
[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

로그인 후 복사

불필요한 복잡성에 주목하세요. flatMap 및 map을 사용하는 아래 솔루션은 더 간결하고 효율적입니다.

<code>storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})</code>

로그인 후 복사

flatMap 배열을 "평면화"하고 map 각 항목에 "레이블" 필드를 추가합니다.

<code>[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

로그인 후 복사