JavaScript가 왜 엉망이 아닌가?

프런트엔드 개발에 대한 좌절감: JavaScript 관점

프런트엔드 개발, 특히 JavaScript가 혼란스럽다는 일반적인 불만은 종종 유연성 때문에 발생합니다. 여러 접근 방식을 통해 동일한 결과를 달성하는 능력은 강력하지만 일관되지 않은 코드 품질로 이어질 수 있습니다.

완전히 틀린 말은 아닙니다. 확립된 프레임워크와 규칙을 활용하는 경우가 많은 백엔드 개발과 달리 프런트엔드 모범 사례는 더 광범위합니다. 최적의 패턴에 대한 리소스가 분산되어 있어 다양한 코딩 스타일을 육성하고 신규 이민자가 최적의 접근 방식을 파악하기 어렵게 만듭니다.

오해 바로잡기

쉽게 눈에 띄는 구조가 없다고 해서 모범 사례가 없다는 의미는 아닙니다. 효과적인 JavaScript 개발은 확립된 패턴과 효율적인 방법을 활용하는 데 달려 있습니다. MDN(Mozilla Developer Network) JavaScript 문서와 같은 풍부한 리소스는 최적의 구현에 대한 지침을 제공합니다. 핵심은 헌신적으로 학습하고 이 지식을 적용하는 것입니다.

실용적인 코드 예시

이 실제 프로덕션 코드 조각을 고려해보세요(명확성을 위해 단순화됨). 올바르게 작동하지만 가독성과 성능을 위해 구조가 크게 개선될 수 있습니다. 이 예에서는 기본 배열 및 객체 조작에 중점을 둡니다.

초기 코드(덜 이상적):

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

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

  return previous
}, [])

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

.reduce 및 .forEach을 사용하는 이 접근 방식은 불필요하게 장황합니다. JavaScript는 더욱 효율적인 도구를 제공합니다.

개선된 코드:

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

이 개정 버전에서는 .flatMap을 활용하여 배열을 평면화하고 .map을 활용하여 "레이블" 속성을 추가하여 더욱 깔끔하고 간결한 코드를 만들었습니다.

결론

JavaScript는 고품질 코드를 작성하기 위한 다양한 도구 세트를 제공합니다. 단순히 기능만을 위해 코드를 작성하는 것이 아닌, 헌신적인 학습과 적절한 기술의 적용이 핵심입니다.

추천 도서:

• [PT-BR] - https://www.php.cn/link/729404b28f3bd32761c667a668453f4c
• [EN] - https://www.php.cn/link/f5c80b20fdee4e645ff315a56f12a716

위 내용은 JavaScript가 왜 엉망이 아닌가?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!