JavaScript가 왜 엉망이 아닌가?-JS 튜토리얼-php.cn

JavaScript가 왜 엉망이 아닌가?

Patricia Arquette

풀어 주다： 2025-01-21 04:28:13

원래의

505명이 탐색했습니다.

Por qué JavaScript no es un desorden?

항상 낙담하게 만드네요...

프런트엔드 개발이 엉망이라는 말, 특히 JavaScript가 "무엇이든 허용"하고 최종 결과에 영향을 주지 않고 어떤 방식으로든 작성할 수 있다는 말을 들으면 정말 화가 납니다.

사실 완전히 틀린 말은 아닙니다. JavaScript가 동일한 목표를 달성하기 위해 여러 가지 접근 방식을 허용한다는 것은 사실입니다.

문제는 백엔드처럼 잘 정의된 디자인 패턴이 부족하다는 것입니다. 프런트엔드에서는 모범 사례가 분산되어 의견의 다양성과 일관성 부족이 발생합니다. 이러한 분산은 특히 초보자의 경우 개발과 이해를 어렵게 만듭니다. ~~이 글을 쓰는 사람도 각자의 의견이 있습니다.~~

핵심은…

좌절감을 넘어, 모범 사례에 대한 증거가 부족하다고 해서 그것이 존재하지 않는다는 의미는 아니라는 점을 강조하고 싶습니다. 지식을 찾고 최소한 디자인 패턴의 기본을 적용하는 것이 중요합니다. JavaScript에는 구현과 패턴이 확립된 리소스가 많이 있습니다. 그 목적과 올바른 사용법을 읽고 이해하는 데는 시간이 걸립니다. 예: JavaScript용 Mozilla 문서

실용적인 예…

다음 코드는 실제 프로덕션 프로젝트에서 가져온 것입니다. 올바르게 작동하지만 구현 시 가독성과 성능이 향상될 수 있습니다.

보다 효율적인 방법과 기능을 사용하여 JavaScript 문서의 권장 사항에 맞게 일부 부분을 조정할 것입니다. 우리는 배열과 객체의 조작이라는 기본 개념에 중점을 둘 것입니다. 교육 목적으로 코드가 단순화되었습니다.

백엔드 API에서 수신된 데이터를 나타내는 객체부터 시작해 보겠습니다.

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

로그인 후 복사

접두사 '개점' 뒤에 매장 이름이 오는 '라벨' 필드를 추가해야 합니다.

먼저 최고의 JavaScript 도구를 사용하지 않는 "덜 이상적인" 구현을 살펴보겠습니다.

<code class="language-javascript">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>

로그인 후 복사

목록을 재구성하기 위해 .reduce, .forEach, .push만 살펴봅니다. .flatMap과 .map의 사용 부족이 분명합니다. 구문이 혼란스럽고 장황합니다.

향상된 구현을 살펴보겠습니다.

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

로그인 후 복사

더 간단하죠?

.flatMap 객체 배열을 단일 수준으로 "평면화":

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]</code>

로그인 후 복사

그런 다음 .map은 "레이블" 속성을 추가하여 배열을 "다시 매핑"합니다.

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

로그인 후 복사