최신 JavaScript의 모범 사례 - 1부

JavaScript는 의심할 여지 없이 전 세계에서 가장 많이 사용되는 프로그래밍 언어이며 우리 일상 생활에서 가장 중요한 기술 중 하나인 인터넷에 엄청난 영향을 미칩니다. 이 힘에는 막중한 책임이 따르며, JavaScript 생태계는 빠르게 발전하여 모범 사례를 따라가기가 어렵습니다.

이 기사에서는 더 깔끔하고 유지 관리가 가능하며 효율적인 코드를 작성하기 위한 최신 JavaScript의 몇 가지 최고의 모범 사례를 살펴보겠습니다.

1. 프로젝트 규칙이 가장 중요하다

각 프로젝트에는 코드 일관성을 유지하기 위한 특정 규칙이 있을 수 있습니다. 이러한 규칙은 이 문서에 포함된 모든 외부 권장 사항보다 항상 우선 적용됩니다. 프로젝트에서 관행을 구현하기 전에 확립된 규칙에 부합하고 모든 팀원이 동의하는지 확인하세요.

2. 업데이트된 JavaScript를 사용하세요

JavaScript는 1995년에 탄생한 이후 엄청난 발전을 이루었습니다. 인터넷에서 찾아볼 수 있는 많은 오래된 관행은 시대에 뒤떨어진 것일 수 있습니다. 기술을 구현하기 전에 해당 기술이 현재 버전의 언어와 호환되는지 확인하세요.

3. var 대신 let과 const를 사용하세요

var는 여전히 유효하지만 더 이상 사용되지 않는 것으로 간주되며 많은 경우 기능 범위로 인해 추적하기 어려운 버그가 발생할 수 있습니다. 반면, let과 const는 선언된 블록으로 제한되어 보다 예측 가능하고 안전한 범위를 제공합니다.

언제 let을 사용하고 언제 const를 사용합니까?

• 변수가 참조나 값을 변경하지 않을 때마다 const를 사용하세요. 이렇게 하면 불변 값을 보호하여 코드를 더 쉽게 이해하고 오류를 줄일 수 있습니다.
• 나중에 변수 값을 다시 할당해야 하는 경우 let을 사용하세요. 단, 필요한 경우에만 사용하세요.

황금률: 기본적으로 const를 사용하세요. 나중에 값을 변경해야 하는 경우 let으로 전환하세요.

실제 사례

1. 상수 값에 대한 const:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

1. 값 변경 허용:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

1. 범위 비교(let vs var):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

1. 루프 및 콜백 문제 방지:

var를 사용하면 루프, 특히 비동기 함수에서 예기치 않은 동작이 발생할 수 있습니다.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

let에서 이 문제를 해결하는 동안:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

var를 let 및 const로 바꾸는 것은 좋은 습관일 뿐만 아니라 코드를 더 안전하고, 읽기 쉽고, 디버그하기 쉽게 만드는 데도 도움이 됩니다. 감사함으로 미래를 만들어 보세요.

4. 클래스 선택: JavaScript의 단순성

JavaScript에서 객체 지향 프로그래밍을 위해 Function.prototype을 사용하는 것은 오래되고 오류가 발생하기 쉬운 접근 방식입니다. 이에 비해 ES6에 도입된 클래스는 다른 객체지향 언어에 가까운 보다 직관적인 구문을 제공하여 코드의 가독성과 유지 관리를 용이하게 합니다.

클래스 예시(현대적이고 명확함):

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

Function.prototype과의 비교(복잡하고 덜 직관적임):

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

보시다시피 프로토타입 기반 접근 방식은 메서드를 정의하는 데 더 많은 단계가 필요하며 경험이 부족한 개발자에게는 더 혼란스러울 수 있습니다. 클래스는 읽기 쉬울 뿐만 아니라 더 깔끔하고 모듈화된 코드를 촉진합니다.

클래스를 왜 사용하나요?

• 더 읽기 쉽고 오류가 발생할 가능성이 적습니다.
• extend와 super를 사용하여 상속을 용이하게 합니다.
• 최신 도구 및 ES6 표준과 더 잘 호환됩니다.

5. JavaScript에서 실제 비공개 필드 사용

오랫동안 JavaScript 개발자는 클래스의 비공개 필드를 시뮬레이션하기 위해 밑줄(_)과 같은 규칙을 사용했습니다. 그러나 속성은 여전히 ​​클래스 외부에서 액세스할 수 있으므로 이는 시각적 규칙일 뿐입니다. 이제 실제 비공개 필드 덕분에 특정 속성에 외부에서 완전히 접근할 수 없도록 보장할 수 있습니다.

⚠️ 주의: 일부 브라우저의 콘솔에서는 이 기능을 사용하지 못할 수도 있습니다.

실제 비공개 필드를 사용하는 이유는 무엇입니까?

1. 진정한 캡슐화: 데이터를 보호하고 클래스 컨텍스트 외부에서 해당 데이터에 액세스하거나 수정할 수 없도록 합니다.
2. 가독성: # 접두사를 사용하면 어떤 속성이 비공개인지 명확히 알 수 있어 코드 이해가 향상됩니다.
3. 데이터 보안: 우발적인 오류나 내부 속성에 대한 의도하지 않은 액세스를 방지합니다.

기본 예:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

고급 예: 보호된 카운터

페이지 방문 횟수를 기록하는 클래스를 만들고 싶지만 누구도 해당 카운터를 직접 조작할 수 없도록 하고 싶다고 상상해 보세요.

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

이 경우 #visits 카운터는 외부 액세스로부터 완벽하게 보호되므로 해당 값이 부적절하게 조작되지 않습니다.

고려사항

• 프라이빗 필드는 서브클래스에서도 접근할 수 없습니다.
• 상속에서 비공개 데이터와 상호작용해야 하는 경우 비공개 필드 대신 보호된 메서드를 사용하는 것이 좋습니다.

6. 화살표 기능을 활용해보세요

화살표 함수는 JavaScript로 함수를 작성하는 현대적이고 우아한 방법입니다. 이는 더 짧은 구문을 제공하며 기존 함수와 달리 자동으로 이 컨텍스트를 상속하여 객체 지향 프로그래밍에서 일반적인 문제를 방지합니다.

함수를 인수로 전달해야 하는 맵, 필터, 축소와 같은 고차 함수에 특히 유용합니다.

화살표 기능을 사용하는 이유는 무엇입니까?

1. 더 짧고 깔끔한 구문: 코드 가독성을 높이는 데 적합합니다.
2. 이 자동 컨텍스트: 콜백이나 메소드의 오류를 피하는 데 적합합니다.
3. 인라인 함수에서의 이상적인 사용: 지도, 필터 또는 이벤트에서 사용하는 것과 같습니다.

실제 사례

1. 맵을 사용하여 배열 변환

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

2. 필터 요소를 필터링하는 필터 포함

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

3. 가치를 추가하기 위해 감소

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

4. DOM 이벤트에서(컨텍스트에 주의하세요!)

이벤트에서 화살표 기능을 사용할 때 this 컨텍스트는 변경되지 않으므로 유용할 수 있습니다.

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

팁: 사용하지 않는 시기

화살표 기능은 훌륭하지만 모든 것에 이상적인 것은 아닙니다. 동적 this를 사용하는 함수나 프로토타입에 메서드를 작성해야 하는 경우와 같이 함수 컨텍스트 자체에 액세스해야 하는 경우에는 이를 피하세요.

일반 기능이 더 나은 예:

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  obtenerNombre() {
    return this.nombre;
  }
}

const persona = new Persona('Juan');
console.log(persona.obtenerNombre()); // 'Juan'

인쇄를 화살표 기능으로 변경하면 이에 대한 맥락을 잃게 됩니다.

해당 부분을 개선해 보겠습니다! 좀 더 완전하고 유용하게 만들기 위해 몇 가지 맥락, 더 명확한 설명, 몇 가지 추가 예를 추가했습니다.

7. 널 합체 연산자(??)

널 병합 연산자(??)는 논리 연산자 ||보다 더 정확한 대안입니다. 기본값을 할당합니다. 동안 || "falsy"를 0, false 또는 ""와 같은 값으로 간주하고 연산자 ?? null 또는 정의되지 않음은 "누락된" 값으로만 ​​평가됩니다. 이를 통해 많은 경우에 더 안전하고 구체적인 옵션이 됩니다.

주요 차이점은 무엇입니까?

||를 사용하면 "falsy" 값이 기본값으로 대체됩니다.

??를 사용하면 만 null 또는 정의되지 않은 값을 대체합니다. 이를 통해 컨텍스트에서 유효한 경우 0 또는 ""와 같은 "거짓" 값을 유지할 수 있습니다.

기본 예:

const PI = 3.14159;
console.log(PI); // 3.14159

PI = 3; // TypeError: Assignment to constant variable.

반면에 ||:

let count = 0;

for (let i = 1; i <= 3; i++) {
  count += i; 
}
console.log(count); // 6

실제 사례 ??

• 유효한 값을 덮어쓰지 않고 기본값 설정:

if (true) {
  let blockScoped = "Solo dentro del bloque";
  var functionScoped = "Disponible fuera también";
}

console.log(functionScoped); // "Disponible fuera también"
console.log(blockScoped); // ReferenceError: blockScoped is not defined

• 선택적 구성 확인:

옵션을 맞춤 설정할 수 있는 시스템이 있다고 가정해 보겠습니다.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

• 선택적 속성 작업 시 오류 방지:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 0, 1, 2
}

위 내용은 최신 JavaScript의 모범 사례 - 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!