JavaScript의 주요 iggest 버그(및 이를 방지하는 방법)

JavaScript는 매우 강력하고 적응성이 뛰어난 언어이지만 감지하기 어려운 문제가 발생할 가능성도 있습니다. 이 블로그 기사에서는 개발자가 JavaScript를 사용하면서 발견하는 가장 일반적인 결함 5가지와 이러한 문제에 대한 이유와 해결책을 살펴보겠습니다. 숙련된 개발자이든 이제 막 시작하는 개발자이든 이러한 일반적인 위험을 알면 문제 해결에 소요되는 시간을 절약할 수 있습니다.

이 블로그 기사는 @hackyrupesh라고도 알려진 Rupesh Sharma가 작성했습니다.

1. 의도하지 않은 전역 변수

문제

자바스크립트에서는 변수를 명시적으로 선언하지 않고도 정의할 수 있으므로 의도하지 않은 전역 변수가 발생할 수 있습니다. 이는 대규모 코드베이스에서나 여러 개발자와 함께 작업할 때 특히 문제가 됩니다. 충돌이 발생하고 디버깅하기 어려운 오류가 발생할 수 있기 때문입니다.

예

function setUserName() {
    userName = "Alice"; // userName is now a global variable
}

setUserName();
console.log(userName); // Outputs: "Alice"

위 예에서는 userName이 var, let, const 없이 선언되었으므로 자동으로 전역 변수가 됩니다. 이로 인해 특히 userName이 나중에 코드의 다른 곳에서 사용되는 경우 예상치 못한 동작이 발생할 수 있습니다.

해결책

항상 let, const 또는 var를 사용하여 변수를 선언하세요. 이를 통해 변수가 로컬인지 전역인지 명확하게 하고 실수로 인한 전역 변수를 방지할 수 있습니다.

function setUserName() {
    let userName = "Alice"; // userName is now a local variable
}

setUserName();
console.log(userName); // ReferenceError: userName is not defined

참고자료

• MDN(Mozilla 개발자 네트워크): JavaScript 변수

2. 이 키워드를 오용하는 행위

문제

JavaScript에서 this의 값은 함수가 호출되는 상황에 따라 변경될 수 있습니다. 이로 인해 특히 콜백이나 이벤트 핸들러를 사용할 때 예상치 못한 동작이 발생할 수 있습니다.

예

const user = {
    name: "Alice",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

setTimeout(user.greet, 1000); // Outputs: "Hello, my name is undefined"

이 예에서 Greeting 내부의 this 키워드는 setTimeout에 대한 콜백으로 전달될 때 사용자 개체가 아닌 전역 개체(또는 엄격 모드에서는 정의되지 않음)를 참조합니다.

해결책

화살표 함수나 바인딩()을 사용하여 이것이 올바른 객체에 바인딩된 상태로 유지되는지 확인하세요.

setTimeout(user.greet.bind(user), 1000); // Outputs: "Hello, my name is Alice"

또는 화살표 기능을 사용하면 자체 this 컨텍스트가 없기 때문에 문제를 해결할 수도 있습니다.

const user = {
    name: "Alice",
    greet: function() {
        setTimeout(() => console.log(`Hello, my name is ${this.name}`), 1000);
    }
};

user.greet(); // Outputs: "Hello, my name is Alice"

참고자료

• MDN: JavaScript로

3. 정의되지 않고 Null의 혼란

문제

JavaScript에는 정의되지 않음과 null이 모두 포함되어 있어 혼용되거나 제대로 확인되지 않으면 혼란과 버그가 발생할 수 있습니다.

예

let user = {
    name: "Alice",
    age: null
};

if (user.age) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}
// Outputs: "Age is not provided"

여기서 user.age는 null이지만 if 조건은 이를 falsy로 처리합니다. null이 유효한 상태가 되도록 의도된 경우 문제가 발생할 수 있습니다.

해결책

애플리케이션에서 둘 다 유효한 값인 경우 항상 정의되지 않음과 null을 명시적으로 확인하세요.

if (user.age !== null && user.age !== undefined) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}

엄격한 같음(===)을 사용하면 정의되지 않음과 null을 구별하는 데 도움이 될 수도 있습니다.

참고자료

• MDN: Null
• MDN: 정의되지 않음

4. 콜백 지옥

문제

콜백 함수는 JavaScript에서 비동기 작업을 처리하는 일반적인 방법입니다. 그러나 서로 중첩되면 종종 "콜백 지옥"이라고 하는 깊이 중첩된 구조를 만들 수 있습니다. 이로 인해 코드를 읽고 유지 관리하고 디버그하기가 어려워집니다.

예

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            doFinalThing(result3, function(finalResult) {
                console.log(finalResult);
            });
        });
    });
});

이 깊이 중첩된 구조는 따라가기도 어렵고 디버그하기도 더 어렵습니다.

해결책

프라미스 또는 async/await를 사용하여 구조를 평면화하고 코드를 더 읽기 쉽게 만듭니다.

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => doFinalThing(result3))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

또는 async/await 사용:

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        const finalResult = await doFinalThing(result3);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

참고자료

• MDN: 약속
• MDN: 비동기/대기

5. 부동 소수점 정밀도 문제

문제

JavaScript는 숫자 표현에 IEEE 754 표준을 사용하므로 특히 부동 소수점 산술에서 정밀도 문제가 발생할 수 있습니다. 이로 인해 계산 시 예상치 못한 결과가 발생할 수 있습니다.

예

console.log(0.1 + 0.2); // Outputs: 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // Outputs: false

0.1 + 0.2의 결과는 부동 소수점 정밀도 오류로 인해 정확히 0.3이 아닙니다.

해결책

이를 방지하려면 결과를 고정된 소수 자릿수로 반올림하면 됩니다.

function isEqual(a, b) {
    return Math.abs(a - b) < Number.EPSILON;
}

console.log(isEqual(0.1 + 0.2, 0.3)); // Outputs: true

또는 작업을 수행하기 전에 숫자를 확장한 다음 다시 축소하여 정수로 작업합니다.

console.log((0.1 * 10 + 0.2 * 10) / 10); // Outputs: 0.3

References

• MDN: Number.EPSILON
• The Problem with Floating Point Arithmetic

Conclusion

JavaScript is a language full of idiosyncrasies and hidden risks, but knowing the most frequent flaws and how to avoid them allows you to develop cleaner, more dependable code. From unwanted global variables to floating-point accuracy concerns, each of these flaws can create major difficulties if not addressed. However, with proper coding methods and the correct tools, you can reduce these concerns and make your JavaScript code more resilient.

this blog written by Chatgpt ??

위 내용은 JavaScript의 주요 iggest 버그(및 이를 방지하는 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!