JavaScript에서 2+2가 22인 이유(버그를 유발하는 기타 문제)

JavaScript는 강력한 언어이지만 특히 초보자인 경우 개발자를 당황하게 할 수 있는 약간의 뉘앙스가 있습니다. 그리고 그들 중 일부는 찾기 어려울 수 있는 버그를 일으킬 수 있습니다. 다음은 가장 일반적인 몇 가지와 이를 피하는 방법입니다.

2+2가 22일 때

로컬 저장소에 숫자 2를 저장하고 몇 가지 계산을 위해 다시 검색한다고 가정해 보겠습니다.

const firstNumber = localStorage.getItem("number"); // "2"
const secondNumber = 2;
console.log(firstNumber + secondNumber); // Outputs "22"

예, 이제 합계는 22입니다! 왜 그런거야? 로컬 저장소에서 데이터를 얻었을 때 숫자 2...를 문자열로 얻었기 때문입니다.

연산자+를 사용하고 관련 문자열이 있는 경우 JavaScript는 두 문자열을 연결(즉, 결합)하려고 한다고 간주합니다. secondNumber를 문자열로 변환하고 두 문자열을 결합합니다.

이것을 피하려면 정수에 parseInt를 사용하거나 소수가 있는 숫자에 parseFloat를 사용하여 문자열을 실수로 변환해야 합니다.

const firstNumber = parseInt(localStorage.getItem("number")); // 2
const secondNumber = 2;
console.log(firstNumber + secondNumber); // Outputs 4

문자열도 포함할 수 있는 소스에서 숫자를 가져오려는 경우 이 작업을 수행해야 합니다. 예를 들어 localStorage , HTML 속성 값, HTML 요소의 텍스트 내용 또는 쿼리 문자열입니다.

(실수로) 변수를 선언하지 않고 생성하기

JavaScript에서는 변수를 선언하지 않고 생성할 수 있습니다. 즉, var , const 또는 let 를 사용하지 않고 :

const someNumber = 42; // I've created a variable declaring it
someOtherNumber = 547; // I've created a variable without declaring it

문제는 이전에 사용한 변수를 사용하려는 경우 이름의 철자를 잘못 입력하면 실수로 새 변수를 만들 수 있다는 것입니다.

function calculateAverage(...numbers) {
    let average = 0;

    for (let number of numbers) {
        average += number;
    }

    averag = average / numbers.length; // I misspelt "average"! 😱
    return average;
}
console.log(calculateAverage(8, 6, 10, 2, 54)); // Outputs 80

평균은 16이어야 하지만 대신 80을 반환합니다. 왜요? 루프 후에 "평균"의 철자를 잘못 입력하고 새로운 변수averag를 생성했기 때문입니다. 이제 실제 평균은 해당 변수에 있으며 실제average 값에는 루프를 통해 수행한 합계가 포함됩니다.

그것을 해결하는 방법? 해결책은 파일의 시작 부분이나 "use strict" 블록에 문자열<script>을 추가하는 것입니다. 선언하지 않고 변수를 생성하는 것을 허용하지 않으며 그렇게 하려고 하면 오류가 발생합니다.

"use strict";
function calculateAverage(...numbers) {
    let average = 0;

    for (let number of numbers) {
        average += number;
    }

    // It throws an error, "averag is not defined"
    averag = average / numbers.length;
    return average;
}
console.log(calculateAverage(8, 6, 10, 2, 54));

그러나 이미 존재하는 파일이나 스크립팅 블록에 추가하려면 먼저 모든 변수가 const , let 또는 적어도 var 를 사용하여 올바르게 선언되었는지 확인하십시오.

등호 연산자

모든 JavaScript 개발자는 == 연산자가 두 변수 또는 값이 같은지 확인한다는 것을 알고 있습니다.

const numberTen = 10;
const anotherNumberTen = 10;
console.log(numberTen == anotherNumberTen); // Outputs "true"

그러나 이 연산자를 객체나 배열과 함께 사용하려면 조금 더 까다로워집니다.

const someObject = { name: "Sonic", amimal: "Hedgehog" };
const someOtherObject = { name: "Sonic", amimal: "Hedgehog" };
console.log(someObject == someOtherObject); // Outputs "false"

왜요? JavaScript에서 연산자는 두 변수가 동일한 객체를 참조하는 경우 true를 반환합니다. 이 경우, 우리는 두 개의 다른 객체를 가지고 있는데, 그것들은 단지 같은 속성을 가지고 있습니다.

두 개체를 비교하려는 경우 가장 좋은 방법은 필요한 속성을 확인하는 것입니다. 이 경우 다음과 같이 할 것입니다.

const someObject = { name: "Sonic", amimal: "Hedgehog" };
const someOtherObject = { name: "Sonic", amimal: "Hedgehog" };
console.log(someObject.name == someOtherObject.name); // Outputs "true"

내가 가장 좋아하는 것: 바나나!

마지막 것은 누구에게도 버그를 일으키지 않지만 나는 그것을 좋아합니다.

console.log(("b" + "a" + + "a" + "a").toLowerCase());
// Outputs "banana"

대체 여기에서 무슨 일이 있었던 걸까요? 먼저 "b" 를 첫 번째 "a" 와 연결하므로 "ba" 를 얻습니다. 이제 두 개의+ 기호와 또 다른"a" 기호가 있습니다. 일단 첫 번째+를 건너뛰고+ "a" 부분으로 넘어가 보겠습니다.

""a" 양수로 변환"을 의미합니다. 그러나 그 문자는 분명히 유효한 숫자가 아니므로 표현식은 NaN 를 반환합니다. + 기호는 "ba"를 NaN와 연결하기 전에 건너뛰었고 "baNaN" 가 있습니다.

마지막으로 문자열"a"을 얻기 위해 마지막"baNaNa"과 연결하고 소문자로 변환합니다. 짜잔, 우리는 이 이상한 표현에서 바나나를 얻었습니다.


추신. 읽은 내용이 마음에 드셨나요? 매주 저는 더 나은 JavaScript 개발자가 되기 위한 무료 팁과 통찰력이 포함된 이메일을 보냅니다. 관심이 있으시면 click here to subscribe .