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 조건은 이를 거짓으로 처리합니다. 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) 



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


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





  
  
  참고자료

• MDN: 번호.EPSILON
• 부동소수점 산술 문제

결론

JavaScript는 특이성과 숨겨진 위험으로 가득 찬 언어이지만 가장 자주 발생하는 결함과 이를 방지하는 방법을 알면 더욱 깔끔하고 신뢰할 수 있는 코드를 개발할 수 있습니다. 원치 않는 전역 변수부터 부동 소수점 정확도 문제까지, 이러한 각 결함은 해결되지 않으면 큰 어려움을 초래할 수 있습니다. 그러나 적절한 코딩 방법과 올바른 도구를 사용하면 이러한 우려를 줄이고 JavaScript 코드를 더욱 탄력적으로 만들 수 있습니다.

Chatgpt가 작성한 이 블로그 ??