자바스크립트 모범 사례

이 글에서는 JavaScript 코딩 시 "좋은 습관"에 대해 안내하겠습니다.

1 — new Object() 사용을 피하세요
JavaScript에서 new Object를 사용하는 것은 약간 위험하지만 여러 가지 이유로 기본 요소를 사용하는 것이 항상 더 좋습니다. 이에 대해 좀 더 자세히 살펴보겠습니다.

일반 연설
예를 들어 ""는 우리 모두가 알고 있듯이 기본 문자열을 생성하는 반면, new String()은 문자열 객체를 생성합니다. 더 복잡하고 메소드가 있기 때문에 문자열 객체는 비교 및 ​​유형 강제와 관련하여 예상치 못한 동작을 가져올 수 있습니다.

간단함
프리미티브는 사용법이 불필요한 복잡성을 방지하고 코드를 읽고 유지 관리하기 쉽게 하므로 사용법이 더 간단하고 더 간단합니다.

공연
기본 형식은 메모리와 성능 측면에서 더 효율적입니다. 객체를 생성하는 동안 추가 오버헤드가 발생합니다.

혼란 가능성
JavaScript는 객체와 프리미티브를 다르게 처리하므로 new Object()를 사용하면 의도치 않게 프리미티브 대신 객체를 처리하여 버그가 발생할 수 있는 혼란스러운 상황이 발생할 수 있습니다.

대부분의 경우 기본 요소를 대신 사용하는 것이 좋습니다.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

2 — 배열 및 객체에 let 사용을 피하세요
우선 명확하게 해두자면… 배열과 객체에 let을 사용하는 것은 본질적으로 전혀 문제가 되지 않습니다. 그러나 특정한 경우에는 이를 피하도록 유도할 수 있는 몇 가지 구체적인 고려 사항이 있습니다.

재할당 vs. 돌연변이
우리 모두 알고 있듯이 let을 사용하면 변수 자체를 재할당할 수 있으므로 혼란이나 데이터 손실이 발생할 수 있습니다. 객체/배열은 실수로 완전히 새로운 데이터 세트(새 객체/새 배열)로 재할당될 수 있습니다.

대신 const를 사용하면 객체/배열에 대한 참조가 변경되지 않지만 여전히 내용을 수정할 수 있다는 점을 더 안전하고 명확하게 알 수 있습니다.

불변성 의도
const를 사용하면 함께 작업하는 다른 개발자에게 변수를 다시 할당해서는 안 된다는 신호를 보내 코드 가독성과 유지 관리성이 향상됩니다.

범위
let에는 블록 범위가 있지만 루프나 조건문에서 예기치 않은 동작이 발생할 수 있습니다. const를 사용하면 의도하지 않은 재할당의 위험 없이 변수가 범위 내에 유지됩니다.

모범 사례
많은 코딩 표준과 모범 사례에서는 재할당이 필요하지 않은 변수에 const를 사용하여 더욱 깔끔하고 예측 가능한 코드를 장려합니다.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

3 — 자동 유형 변환에 주의하세요
유형 강제라고도 하는 JavaScript에서는 언어가 값을 한 유형에서 다른 유형으로 자동 변환할 때 발생합니다. 이는 다양한 상황, 특히 다양한 데이터 유형과 관련된 작업 중에 발생할 수 있습니다.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

숫자에 주의하세요. 실수로 문자열이나 NaN으로 변환될 수 있습니다. 따라서 민감한 작업 전에 유형 테스트를 구현하거나 안전한 입력을 위해 TypeScript를 사용하는 것을 고려하세요.

4 — 이중 동일 비교 사용을 피하세요
== 및 ===는 값을 비교하는 데 사용되는 비교 연산자이지만 동작이 다릅니다.

추상적 평등
==를 사용하면 JavaScript는 비교를 하기 전에 값을 일반 유형으로 변환합니다

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

언제 사용하나요?
값과 유형이 모두 동일한지 확인하려면 ===를 사용하세요. 이는 일반적으로 예상치 못한 결과를 방지하는 좋은 방법입니다.

유형을 고려하지 않고 값을 구체적으로 비교해야 하는 경우 ==를 사용하세요. 하지만 이렇게 하면 버그가 발생할 수 있으므로 일반적으로 사용하지 않는 것이 좋습니다.

일반적으로 더 예측 가능하고 명확한 비교를 위해=== 사용을 고려하세요.

참고: !== 및 !=

에도 마찬가지입니다.

5 — 객체/배열 분해 사용
JavaScript에서 객체 및 배열과 함께 구조 분해 기술을 사용하면 여러 가지 이점을 얻을 수 있습니다.

구조 분해 할당 구문은 배열의 값이나 객체의 속성을 고유한 변수로 풀 수 있게 해주는 JavaScript 표현식입니다. MDN 웹 문서에 나와 있듯이

간결함
단일 명령문으로 객체에서 여러 속성을 추출하거나 배열에서 요소를 추출할 수 있어 작성해야 하는 코드의 양이 줄어듭니다.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

명확성
구조 분해를 하면 작업 중인 속성이나 요소를 명확하게 표시하여 코드를 더 읽기 쉽게 만들 수 있습니다.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

기본값
속성이나 요소가 존재하지 않는 경우 쉽게 기본값을 지정할 수 있습니다.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

중첩 해체
중첩된 개체나 배열을 구조 해제하여 깊이 중첩된 데이터에 대한 액세스를 단순화할 수 있습니다.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

함수 매개변수
함수 매개변수에 유용할 수 있으므로 값을 직접 압축해제할 수 있습니다.

const { height = 180 } = person; // uses default value if height is undefined

디스트럭처링은 코드를 간소화하여 코드를 더 깔끔하고 유지 관리하기 쉽게 만드는 데 도움이 됩니다.

6 — 기본 매개변수
기본 매개변수는 코드를 더 명확하고 읽기 쉽게 유지하기 위해 채택할 수 있는 좋은 기술입니다.

기본 함수 매개변수를 사용하면 값이 없거나 정의되지 않은 경우 명명된 매개변수가 기본값으로 초기화될 수 있습니다. MDN 웹 문서에 나와 있듯이

단일 매개변수

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

다중 매개변수
여러 매개변수에 대한 기본값을 설정할 수 있습니다.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

배수를 전달할 때 매개변수가 지정되지 않았음을 주의하세요. 정의되지 않았을 수도 있고 전달되지 않았을 수도 있는 매개변수를 첫 번째 매개변수로 전달하거나 다른 전달된 매개변수보다 먼저 전달하지 마세요.

매개변수 값이 제공되지 않거나 정의되지 않은 것으로 전달될 수 있다고 의심되는 경우 해당 값을 마지막 값으로 전달하고 지정되지 않은 여러 매개변수에 대해서도 전달하십시오.

표현식을 기본값으로 사용
표현식을 사용하여 기본값을 계산할 수 있습니다.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

기본값을 사용한 나머지 매개변수
기본 매개변수와 나머지 매개변수를 결합할 수 있습니다.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

혜택
가독성 향상: 인수가 생략되면 어떤 기본값이 사용되는지 명확해집니다.
상용구 감소: 함수 본문 내에서 기본값을 확인하고 할당할 필요성이 줄어듭니다.
향상된 유연성: 함수는 더 넓은 범위의 입력을 더 우아하게 처리할 수 있습니다.
기본 매개변수는 함수 유용성을 향상하고 코드를 더욱 깔끔하게 만드는 강력한 기능입니다!

7 —스위치에서 기본값 사용
기본 케이스로 스위치 문을 끝내는 것은 JavaScript에서 좋은 습관입니다. 기본 사례는 지정된 사례 중 입력과 일치하는 사례가 없을 때 대체 역할을 합니다.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

포괄
예상치 못한 값을 처리하는 방법을 제공하여 코드가 자동으로 실패하지 않도록 보장합니다.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

가독성 향상
기본 사례를 포함하면 모든 가능성을 고려했음을 다른 개발자(또는 자신)에게 분명히 알 수 있습니다.

오류 처리
예상치 못한 값이 발견될 때 오류를 기록하거나 발생시키는 데 사용할 수 있습니다.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

예기치 않은 입력을 받을 가능성이 있는 경우 항상 기본 사례를 포함하세요.
특히 디버깅 시나리오에서 유용한 피드백이나 로깅을 제공하려면 기본 사례를 사용하세요.
해당하는 경우 대체 값을 설정하려면 기본 사례를 사용하는 것이 좋습니다.
스위치 문에 기본 사례를 추가하면 코드 견고성과 유지 관리성이 향상됩니다.

8 — eval() 사용을 피하세요
eval()은 문자열을 인수로 가져와 이를 JavaScript 코드로 평가하는 내장 JavaScript 함수입니다. 이는 런타임 시 생성된 코드를 동적으로 실행할 수 있음을 의미합니다.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

몇 가지 중요한 이유로 JavaScript에서는 eval() 사용을 피하는 것이 널리 권장됩니다.

보안 위험
코드 주입: eval()은 임의의 코드를 실행할 수 있으므로 응용 프로그램이 코드 주입 공격에 취약해집니다. 사용자 입력을 평가하면 공격자가 악성 코드를 삽입할 수 있습니다.

const { height = 180 } = person; // uses default value if height is undefined

성능 문제
느린 실행: eval()로 실행된 코드는 JavaScript 엔진의 특정 최적화를 우회하여 런타임에 해석되어야 하기 때문에 일반 코드보다 느리게 실행됩니다.
디버깅 과제
디버깅이 더 어려워짐: eval()을 사용하면 디버깅이 어려워집니다. eval() 내부에서 발생하는 오류는 원래 소스를 추적하기 어려울 수 있습니다.
대안
eval() 대신 다음과 같은 더 안전한 대안을 고려하세요.

JSON 구문 분석: JSON 데이터를 처리하는 경우 eval() 대신 JSON.parse()를 사용하세요.
const jsonString = '{"name": "앨리스"}';
const obj = JSON.parse(jsonString); // JSON 문자열을 객체로 변환하는 안전한 방법
함수 생성자: 함수를 동적으로 생성해야 하는 경우 함수 생성자를 대신 사용하는 것이 좋습니다.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

요약하자면, 보안 위험, 성능 문제, 디버깅 어려움으로 인해 eval() 사용을 피하세요. 코드의 무결성과 성능을 저하시키지 않고 목표를 달성하려면 더 안전한 대안을 선택하세요.

9 — 엄격 모드 사용
JavaScript에서 "엄격 모드"는 제한된 언어 변형을 선택하는 방법으로, 일반적인 코딩 실수와 "안전하지 않은" 동작을 포착하는 데 도움이 됩니다. 이를 통해 코드를 더욱 예측 가능하게 만들고 디버그하기 쉽게 만들 수 있습니다.

엄격 모드 활성화
전역적으로: "use strict"를 배치하여; 스크립트 파일 상단에 있습니다.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

엄격 모드 사용의 이점
선언되지 않은 변수 사용 방지: 선언되지 않은 변수에 값을 할당하면 오류가 발생합니다.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

이 강제를 제거합니다. 엄격 모드에서는 명시적 컨텍스트 없이 호출되는 함수에서 이는 정의되지 않습니다.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

특정 구문 금지: 문제가 있거나 혼란스럽다고 판단되는 일부 구문은 허용되지 않습니다.
일반적인 함정
화살표 함수: 화살표 함수에는 자체 this가 없으므로 Strict 모드는 같은 방식으로 적용되지 않습니다.
eval: eval 문 내에서 실행되는 코드는 전역 범위가 아닌 로컬 범위에서 실행됩니다.
엄격 모드를 사용하는 것은 일반적으로 더 깨끗하고 안전한 코드를 작성하는 데 도움이 되므로 특히 대규모 애플리케이션의 경우 모범 사례로 간주됩니다.

10 — 코드를 건조하게 유지하세요(반복하지 마세요)
DRY(Don’t Repeat Yourself) 원칙은 코드의 반복을 줄이기 위한 소프트웨어 개발의 핵심 개념입니다. 모든 지식이나 논리가 한 곳에 표시되도록 하면 코드를 더 쉽게 유지 관리, 이해 및 리팩토링할 수 있습니다.

기능
반복적인 논리를 함수에 캡슐화합니다. 이렇게 하면 동일한 코드를 중복 없이 재사용할 수 있습니다.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

모듈
모듈을 사용하여 코드를 구성하세요. 이렇게 하면 관련 함수와 변수를 함께 유지하여 애플리케이션의 여러 부분에서 재사용할 수 있습니다.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

클래스와 객체
클래스나 개체를 활용하여 관련 데이터와 동작을 그룹화합니다. 이 캡슐화는 유사한 데이터 구조로 작업할 때 반복을 방지하는 데 도움이 됩니다.

const { height = 180 } = person; // uses default value if height is undefined

참고: 일상적인 코딩에서 "함수형 프로그래밍" 패러다임을 채택하는 경우 이 "클래스 및 개체" 이외의 다른 팁을 사용하는 것이 좋습니다.

템플릿 및 구성요소
웹 개발에서는 템플릿이나 구성 요소(React, Vue 등의 프레임워크)를 사용하여 재사용되는 UI 로직과 스타일을 캡슐화합니다.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

데이터 구조
각 데이터에 대해 별도의 변수를 만드는 대신 배열이나 객체를 사용하여 관련 데이터를 저장하세요.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

DRY 원칙을 적용하면 더 깔끔하고 유지 관리하기 쉬운 코드가 만들어집니다. 한 곳에서만 변경이 필요하므로 버그 위험을 최소화하는 데 도움이 되며 복잡함을 줄여 가독성을 향상시킵니다. 반복을 피하는 것도 중요하지만 균형을 유지해야 한다는 점을 기억하세요. 지나치게 추상화하면 복잡성이 발생할 수 있으므로 이러한 원칙을 적용할 때는 판단을 내리십시오.

11 — 의미 있는 변수 및 함수 이름을 사용하세요
명확하고 유지 관리 가능하며 이해하기 쉬운 코드를 작성하려면 의미 있는 변수 및 함수 이름을 사용하는 것이 중요합니다.

설명
변수나 함수의 목적이나 값을 명확하게 설명하는 이름을 선택하세요.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

기능에 액션 워드 사용
수행되는 동작을 설명하는 동사로 함수를 시작하세요.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

약어 사용을 피하세요
짧은 이름은 편리해 보일 수도 있지만 혼란을 초래할 수 있습니다. 널리 이해되지 않는 한 약어를 사용하지 마십시오.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

일관적인 명명 규칙 사용
변수 및 함수의 경우 camelCase, 클래스의 경우 PascalCase와 같이 코드베이스 전체에서 일관된 명명 규칙을 따르세요.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

이름에 데이터 유형이나 목적 표시
변수가 특정 유형의 데이터를 보유하거나 특정 목적을 수행하는 경우 해당 내용을 이름에 포함하세요.

const { height = 180 } = person; // uses default value if height is undefined

상황별 정보 사용
이름을 더욱 의미있게 만들기 위해 변수나 함수가 사용되는 상황을 고려하세요.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

간결하되 명확하게 유지하세요
이름은 설명적이어야 하지만 너무 길어서는 안 됩니다. 명확성과 간결함 사이의 균형을 목표로 하세요.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

도메인별 언어 사용
특정 분야(예: 금융, 의료 등)에서 일하는 경우 해당 분야에 익숙한 용어를 사용하세요.

interestRate = 5.5; // 재정적 맥락에서는 명확합니다.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

필요할 때 리팩터링
코드가 발전함에 따라 이름이 더 이상 적합하지 않다고 판단되면 더 명확하게 하기 위해 주저하지 말고 리팩토링하세요.

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

의미 있는 변수와 함수 이름은 코드 가독성과 유지 관리성을 크게 향상시킵니다. 다른 사람(그리고 자신)이 코드의 목적과 기능을 한눈에 이해할 수 있도록 도와주므로 협업과 디버깅이 훨씬 쉬워집니다. 명명 규칙을 명확하게 하기 위해 항상 노력하십시오.

12 — 전역 변수를 피하세요
전역 변수를 피하는 것은 JavaScript(및 일반적인 프로그래밍)에서 깨끗하고 모듈적이며 유지 관리 가능한 코드를 유지하는 핵심 방법입니다. 전역 변수는 예상치 못한 동작, 이름 충돌, 디버깅의 어려움을 초래할 수 있습니다.

함수 범위 사용
함수 내에서 변수를 선언하여 범위를 제한하고 전역적으로 액세스할 수 없도록 합니다.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

let 및 const와 함께 블록 범위 사용
let 및 const를 활용하여 블록 내에서 변수(예: 루프 또는 조건문)를 선언하고 해당 블록 외부에서 변수에 액세스할 수 없도록 합니다.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

코드 모듈화
코드를 모듈로 구성하세요. 변수를 캡슐화하려면 ES6 모듈 또는 IIFE(즉시 호출 함수 표현식)를 사용하세요.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

객체로 캡슐화:
전역 범위를 오염시키지 않도록 관련 변수 및 함수를 개체 내에서 그룹화하세요.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

로컬 저장소를 현명하게 사용하세요
데이터를 유지해야 하는 경우 전역 변수 대신 로컬 저장소, 세션 저장소 또는 indexedDB 사용을 고려해보세요.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

전역 사용 제한
전역 변수를 사용해야 하는 경우 구성 상수 또는 애플리케이션 전체 설정으로 사용을 제한하세요. 글로벌 특성을 나타내기 위해 명확하게 이름을 지정하세요.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

부작용을 피하세요
함수를 디자인할 때 전역 변수를 수정하지 마세요. 이렇게 하면 기능을 예측 가능하고 테스트하기가 더 쉬워집니다.

const { height = 180 } = person; // uses default value if height is undefined

'이것'을 현명하게 사용하세요
객체 지향 프로그래밍에서는 전역 변수에 의존하는 대신 인스턴스 내에서 상태를 관리하는 데 이를 사용합니다.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

전역 변수를 사용하지 않으면 코드의 모듈성과 유지 관리 가능성이 향상됩니다. 이름 충돌과 의도하지 않은 부작용을 방지하여 코드를 더 예측 가능하고 작업하기 쉽게 만듭니다. 이러한 모범 사례를 따르면 더욱 깔끔하고 관리하기 쉬운 코드베이스를 얻을 수 있습니다.

13 — 비동기 코드에 Promise 및 Async/Await 사용
JavaScript에서 Promise와 async/await를 사용하면 비동기 작업을 보다 효과적으로 관리하여 코드를 더 깔끔하고 읽기 쉽게 만들 수 있습니다.

약속의 이해
Promise는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타내는 개체입니다.

Promise 생성자를 사용하여 Promise를 생성할 수 있습니다.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

약속의 소비
성공을 위해서는 .then()을 사용하고 오류 처리를 위해서는 .catch()를 사용하여 Promise의 결과를 처리할 수 있습니다.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

연쇄 약속
Promise를 사용하여 여러 비동기 작업을 연결할 수 있습니다.

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

비동기/대기 사용
async/await는 비동기 코드를 작성하는 보다 동기적인 방법을 제공하므로 읽고 유지 관리하기가 더 쉽습니다.

비동기 함수 선언:
비동기 함수로 정의하려면 함수 앞에 async 키워드를 사용하세요.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

비동기 함수 호출
일반 함수처럼 비동기 함수를 호출할 수 있습니다. 하지만 항상 Promise를 반환한다는 점에 유의하세요.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

여러 비동기 작업 처리
Promise.all을 사용하면 여러 Promise를 병렬로 실행하고 모든 Promise가 해결될 때까지 기다릴 수 있습니다.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

오류 처리
Promise와 async/await 모두 오류를 적절하게 처리하는 방법을 제공합니다.

Promise와 함께 .catch() 사용:

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Async/Await와 함께 try/catch 사용:

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Promise와 async/await를 사용하면 JavaScript에서 비동기 작업을 훨씬 더 관리하기 쉽게 처리할 수 있습니다. 콜백 지옥을 피하고 코드 가독성을 높이는 데 도움이 됩니다. 이러한 패턴을 수용하면 더 깔끔하고 유지 관리가 용이하며 오류 방지 코드가 만들어집니다.

14 — 코드를 문서화하세요
코드를 문서화하는 것은 명확성을 유지하고 공동 작업을 지원하며 장기적인 유지 관리 가능성을 보장하는 데 필수적입니다.

클리어 코멘트 사용
"무엇"이 아닌 "왜"를 설명하십시오. 코드가 수행하는 작업보다는 작업을 수행한 이유를 설명하는 데 집중하십시오. 코드 자체는 코드가 수행하는 작업을 전달할 수 있을 만큼 읽기 쉬워야 합니다.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Comment Complex Logic: 복잡하거나 명확하지 않은 코드 섹션의 경우 자세한 설명을 제공하세요.

const { height = 180 } = person; // uses default value if height is undefined

Docstring 스타일 주석 사용
JavaScript에서는 특히 JSDoc을 사용할 때 구조화된 주석을 사용하여 함수, 클래스 및 메서드를 문서화할 수 있습니다.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

README 파일 유지
프로젝트의 경우 개요, 설치 지침, 사용 예 및 기여 지침을 제공하는 README.md 파일을 유지관리하세요.

효과적인 문서화는 코드를 더욱 이해하기 쉽고 유지 관리하기 쉽게 만들어 현재와 미래의 개발자(본인 포함)가 효율적으로 작업하는 데 도움이 됩니다. 이러한 사례를 개발 워크플로에 통합하면 협업이 향상되고 코드와 상호 작용하는 모든 사람의 학습 곡선이 단축됩니다.

위 내용은 자바스크립트 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!