JS 코딩의 5가지 나쁜 습관, 어떻게 피할 수 있나요?

JavaScript 코드를 읽을 때

• 코드가 무엇을 하는지 거의 이해하지 못한다는 느낌을 받은 적이 있나요?

• 코드에 JavaScript 기술이 많이 사용되었나요?

• 이름과 코딩 스타일이 너무 캐쥬얼한가요?

• 이것들은 모두 잘못된 코딩 습관의 징후입니다.

이 글에서는 JavaScript에서 흔히 발생하는 잘못된 코딩 습관 5가지를 설명합니다. 중요한 점은, 이 기사에서는 이러한 습관을 없애는 방법에 대한 실용적인 조언을 제공한다는 것입니다.

1. 암시적 유형 변환을 사용하지 마세요

JavaScript는 느슨한 유형의 언어입니다. 유연성을 제공하므로 올바르게 사용하면 이점이 있습니다.

대부분의 연산자 + - * / ==(=== 제외)는 다양한 유형의 피연산자를 처리할 때 암시적 변환을 수행합니다.

if(condition){...}, while(condition){...} 문은 암시적으로 조건을 부울 값으로 변환합니다.

다음 예는 암시적 유형 변환에 의존하며 때로는 혼란스러울 수 있습니다.

console.log("2" + "1");  // => "21"
console.log("2" - "1");  // => 1
console.log('' == 0);    // => true
console.log(true == []); // -> false
console.log(true == ![]); // -> false

암시적 유형 변환에 지나치게 의존하는 것은 나쁜 습관입니다. 첫째, 극단적인 경우에는 코드의 안정성이 떨어집니다. 둘째, 재현 및 수정이 어려운 버그가 발생할 가능성이 높아집니다.

이제 객체의 속성을 가져오는 함수를 구현합니다. 해당 속성이 없으면 함수는 기본값을 반환합니다.

function getProp(object, propertyName, defaultValue) {
  if (!object[propertyName]) {
    return defaultValue;
  }
  return object[propertyName];
}
const hero = {
  name: 'Batman',
  isVillian: false
};
console.log(getProp(hero, 'name', 'Unknown'));     // => 'Batman'

getProp()는 'Batman'이라는 이름 속성의 값을 읽습니다.

그런 다음 isVillian 속성에 액세스하려고 하면

console.log(getProp(hero, 'isVillian', true)); // => true

오류입니다. Hero의 속성 isVillian이 false인 경우에도 getProp() 함수는 false true를 반환합니다.

이것은 속성 존재 확인이 if(!object[propertyName]){...}에 의해 암시적으로 변환된 부울에 의존하기 때문입니다.

이러한 오류는 찾기 어렵습니다. 함수를 수정하려면 값의 유형을 명시적으로 확인하세요.

function getPropFixed(object, propertyName, defaultValue) {
   if (object[propertyName] === undefined) {
     return defaultValue;
   }
   return object[propertyName];
}
const hero = {
  name: 'Batman',
  isVillian: false
};
console.log(getPropFixed(hero, 'isVillian', true)); // => false

object[propertyName] === 정의되지 않음 속성이 정의되지 않았는지 정확하게 확인하세요.

undefine을 직접 사용하는 것은 피하는 것이 좋습니다. 따라서 위의 솔루션은 더욱 향상될 수 있습니다.

function getPropFixedBetter(object, propertyName, defaultValue) {
  if (!(propertyName in object)) {
    return defaultValue;
  }
  return object[propertyName]
}

작성자의 제안을 용서하십시오. 가능하면 암시적 유형 변환을 사용하지 마십시오. 대신, 필요한 경우 명시적인 유형 변환을 사용하여 변수와 함수 매개변수가 항상 동일한 유형인지 확인하세요.

모범 사례 목록:

• 비교를 위해 항상 엄격한 항등 연산자 ===를 사용하세요.

• 느슨한 항등 연산자를 사용하지 마세요 ==

• 덧셈 연산자 피연산자 1 + 피연산자 2: 두 가지 연산 숫자는 숫자 또는 문자열이어야 합니다.

• 산술 연산자 - */%**: 두 피연산자는 모두 숫자여야 합니다.

• if(조건) {...}, while(조건) {.. .} 및 기타 문: 조건은 부울이어야 합니다. value

• 이렇게 하려면 더 많은 코드를 작성해야 한다고 말할 수도 있습니다... 맞습니다! 그러나 명시적 메서드를 사용하면 코드 동작을 제어할 수 있습니다. 또한 명시성은 가독성을 향상시킵니다.

2. 초기 JavaScript 트릭을 사용하지 마세요

JavaScript의 흥미로운 점은 JavaScript 제작자가 언어가 그렇게 대중화될 것이라고 기대하지 않았다는 것입니다.

JavaScript를 기반으로 구축된 애플리케이션의 복잡성은 언어보다 빠르게 진화하고 있습니다. 이러한 상황으로 인해 개발자는 일이 제대로 작동하도록 하기 위해 JavaScript 트릭과 해결 방법을 사용해야 합니다.

일반적인 예는 배열에 특정 요소가 포함되어 있는지 확인하는 것입니다. 나는 array.indexOf(item)을 사용하는 것을 결코 좋아하지 않습니다! == -1로 확인하세요.

ES6 이상은 훨씬 더 강력하며 새로운 언어 기능을 사용하여 많은 트릭을 안전하게 리팩토링할 수 있습니다.

ES6에서는 array.indexOf(item) 대신 array.includes(item)을 사용할 수 있습니다 !== -1

3. 함수 범위를 오염시키지 마세요

ES2015 이전에는 이것을 개발할 수 있습니다. 습관 함수 범위의 모든 변수를 선언하십시오.

예를 살펴보겠습니다.

function someFunc(array) {
  var index, item, length = array.length;
  /*
   * Lots of code
   */
  for (index = 0; index < length; index++) {
    item = array[index];
    // Use `item`
  }
  return someResult;
}

변수 index, item 및 length는 함수 범위에 있습니다. 그러나 이러한 변수는 for() 블록 범위 내에서만 필요하기 때문에 함수 범위에 영향을 미칩니다.

블록 범위에 let과 const를 도입하여 변수의 수명 주기를 최대한 제한해야 합니다.

function someFunc(array) {
  /*
   * Lots of code
   */
  const length = array.length;
  for (let index = 0; index < length; index++) {
    const item = array[index];
    // Use `item`
  }
  return someResult;
}

index 및 item 변수는 for() 루프 블록 범위로 제한됩니다. 길이가 사용되는 위치에 더 가깝게 이동되었습니다.

리팩터링된 코드는 변수가 함수 범위 전체에 흩어지지 않고 사용되는 위치 가까이에 존재하기 때문에 이해하기 쉽습니다.

사용된 블록 범위에 변수를 정의하세요

if 블록 범위

// 不好
let message;
// ...
if (notFound) {
  message = 'Item not found';
  // Use `message`
}
// 好
if (notFound) {
  const message = 'Item not found';
  // Use `message`
}
for 块作用域
// 不好
let item;
for (item of array) {
  // Use `item`
}
// 好
for (const item of array) {
  // Use `item`
}

4. 정의되지 않은 변수를 피하고 null

할당되지 않은 변수는 기본적으로 정의되지 않은 상태로 할당됩니다. 예를 들어

let count;
console.log(count); // => undefined
const hero = {
  name: 'Batman'
};
console.log(hero.city); // => undefined

count 변수가 정의되었지만 값으로 초기화되지 않았습니다. JavaScript는 이를 암시적으로 정의되지 않은 상태로 할당합니다.

존재하지 않는 속성인 Hero.city에 액세스하면 정의되지 않은 속성도 반환됩니다.

undefine을 직접 사용하는 것이 왜 나쁜 습관인가요? 정의되지 않은 것과 비교할 때 초기화되지 않은 상태의 변수를 처리하기 때문입니다.

변수, 객체 속성 및 배열은 사용하기 전에 값으로 초기화되어야 합니다

JS 提供了很多避免与undefined进行比较方式。

判断属性是否存在

// 不好
const object = {
  prop: 'value'
};
if (object.nonExistingProp === undefined) {
  // ...
}
// 好
const object = {
  prop: 'value'
};
if ('nonExistingProp' in object) {
  // ...
}

对象的默认属性

// 不好
function foo(options) {
  if (object.optionalProp1 === undefined) {
    object.optionalProp1 = 'Default value 1';
  }
  // ...
}
// 好
function foo(options) {
  const defaultProps = {
    optionalProp1: 'Default value 1'
  };
  options = {
    ...defaultProps,
    ...options
  }
}

默认函数参数

// 不好
function foo(param1, param2) {
  if (param2 === undefined) {
    param2 = 'Some default value';
  }
  // ...
}
// 好
function foo(param1, param2 = 'Some default value') {
  // ...
}

null是一个缺失对象的指示符。应该尽量避免从函数返回 null，特别是使用null作为参数调用函数。

一旦null出现在调用堆栈中，就必须在每个可能访问null的函数中检查它的存在，这很容易出错。

function bar(something) {
  if (something) {
    return foo({ value: 'Some value' });
  } else {
    return foo(null);
  }
}
function foo(options) {
  let value = null;
  if (options !== null) {
    value = options.value;
    // ...
  }
  return value;
}

尝试编写不涉及null的代码。 可替代方法是try /catch机制，默认对象的使用。

5. 不要使用随意的编码风格，执行一个标准

有什么比阅读具有随机编码风格的代码更令人生畏的事情？ 你永远不知道会发生什么！

如果代码库包含许多开发人员的不同编码风格，该怎么办?，这种就像各色人物涂鸦墙。

整个团队和应用程序代码库都需要相同的编码风格，它提高了代码的可读性。

一些有用的编码风格的例子：

Airbnb JS 风格指南

谷歌 JS 风格指南

老实说，当我在回家前准备提交时，我可能会忘记设计代码的样式。

我自己总说:保持代码不变，以后再更新它，但是“以后”意味着永远不会。

这里建议使用 eslint 来规范编码风格。

安装eslint

使用最适合自己的编码风格配置 eslint

设置一个预提交钩子，在提交之前运行eslint验证。

总结

编写高质量和干净的代码需要纪律，克服不好的编码习惯。

JavaScript是一种宽容的语言，具有很大的灵活性。但是你必须注意你所使用的特性。这里建议是避免使用隐式类型转换，undefined 和 null 。

现在这种语言发展得相当快。找出复杂的代码，并使用最新 JS 特性来重构。

整个代码库的一致编码风格有益于可读性。良好的编程技能总是一个双赢的解决方案。

推荐教程：《JS教程》

위 내용은 JS 코딩의 5가지 나쁜 습관, 어떻게 피할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!