JavaScript 자주하는 실수들

1. 대입 연산자와 비교 연산자 혼동

실수 설명
대입 연산자(=)와 비교 연산자(==)의 차이를 혼동할 경우 예기치 않은 결과가 발생합니다.

예시

잘못된 경우:
let x = 0;
if (x = 10) {
// 이 코드 블록이 실행됩니다.
}

올바른 경우:
javascript
Copy code
let x = 0;
if (x == 10) {
// 이 코드 블록은 실행되지 않습니다.
}

2. 느슨한 비교와 엄격한 비교 혼동

실수 설명
== (느슨한 비교)는 값만 비교하고, === (엄격한 비교)는 값과 데이터 유형을 함께 비교합니다.

예시

잘못된 경우:
let x = 10;
let y = "10";
if (x == y) {
// 이 코드 블록이 실행됩니다.
}

올바른 경우:
let x = 10;
let y = "10";
if (x === y) {
// 이 코드 블록은 실행되지 않습니다.
}

3. switch 문에서 엄격한 비교 미사용

실수 설명
switch 문은 항상 엄격한 비교를 사용하므로, 값을 비교할 때 형식도 일치해야 합니다.

예시

잘못된 경우:
let x = 10;
switch(x) {
case "10": alert("Hello"); // 출력되지 않음
}

올바른 경우:
let x = 10;
switch(x) {
case 10: alert("Hello"); // 출력됨
}

4. 숫자와 문자열의 덧셈 혼동

실수 설명
JavaScript에서는 숫자와 문자열을 더하면 문자열 연결이 발생합니다.

예시

let x = 10;
let y = "5";
let z = x + y; // "105"가 됩니다.

5. 부동소수점 숫자의 정확성

실수 설명
부동소수점 숫자의 연산은 때때로 정확하지 않을 수 있습니다.

예시

문제:
let x = 0.1;
let y = 0.2;
let z = x + y; // 0.3이 아닌 값이 됩니다.

해결책:
let z = (x * 10 + y * 10) / 10; // z는 0.3이 됩니다.

6. 세미콜론과 return 문의 오해

실수 설명
세미콜론의 잘못된 배치와 return 문을 두 줄로 나누는 것은 예상치 못한 동작을 일으킬 수 있습니다.

예시

잘못된 경우:
function myFunction(a) {
let power = 10;
return
a * power; // undefined를 반환합니다.
}

올바른 경우:
function myFunction(a) {
let power = 10;
return a * power; // 제대로된 값을 반환합니다.
}

7. 객체와 배열의 사용 혼동

실수 설명
JavaScript에서 명명된 인덱스를 사용하려고 하면 배열이 아니라 일반 객체로 간주됩니다.

예시

잘못된 경우:
const person = [];
person["firstName"] = "John";
person.length; // 0을 반환합니다.

올바른 경우:
const person = {};
person["firstName"] = "John";

8. 정의되지 않음과 Null 혼동

실수 설명
JavaScript에서 undefined와 null은 다릅니다. 둘 사이의 차이를 이해하지 못하면 오류가 발생할 수 있습니다.

예시

올바른 테스트:
if (typeof myObj !== "undefined" && myObj !== null) {
// myObj는 정의되었으며 null이 아닙니다.
}

9. 전역 변수와 지역 변수의 혼동

실수 설명
지역 변수와 전역 변수 사이의 차이점을 이해하지 못하면 예상치 못한 동작이 발생할 수 있습니다.

예시

잘못된 경우:
var x = 10;
function myFunction() {
var x = 20; // 전역 변수 x를 덮어쓰지 않습니다.
}
myFunction();
console.log(x); // 여전히 10을 출력합니다.

올바른 경우:
var x = 10;
function myFunction() {
x = 20; // 전역 변수 x를 덮어쓰기 위해 var를 생략합니다.
}
myFunction();
console.log(x); // 20을 출력합니다.

10. 순회할 때의 배열 범위 오류

실수 설명
배열의 범위를 넘어서 접근하려고 하면 undefined가 반환됩니다.

예시

잘못된 경우:
const arr = [10, 20, 30];
console.log(arr[5]); // undefined를 출력합니다.

11. 비동기 작업의 순서 오류

실수 설명
JavaScript의 비동기 작업은 순차적으로 처리되지 않을 수 있으므로 순서를 보장하려면 콜백, 프로미스, async/await와 같은 구조를 사용해야 합니다.

예시

잘못된 경우:
setTimeout(() => {
console.log("Later");
}, 1000);
console.log("Now");
// "Now"가 먼저 출력되고, "Later"가 나중에 출력됩니다.

올바른 경우:
async function myFunction() {
await new Promise((resolve) => setTimeout(resolve, 1000));
console.log("Later");
}
console.log("Now");
myFunction();
// "Now"가 먼저 출력되고, "Later"가 나중에 출력됩니다.

12. this 키워드의 혼동

실수 설명
this 키워드는 실행 컨텍스트에 따라 다르게 동작할 수 있으며, 이를 제대로 이해하지 못하면 오류가 발생할 수 있습니다.

예시

잘못된 경우:
const obj = {
name: "John",
sayHi: () => {
console.log("Hi, " + this.name);
}
};
obj.sayHi(); // "Hi, undefined"를 출력합니다.

올바른 경우:
const obj = {
name: "John",
sayHi() {
console.log("Hi, " + this.name);
}
};
obj.sayHi(); // "Hi, John"을 출력합니다.

13. 객체 속성의 접근 오류

실수 설명
존재하지 않는 객체의 속성에 접근하려고 하면 오류가 발생합니다.

예시

잘못된 경우:
const person = {};
console.log(person.name.firstName); // TypeError를 발생시킵니다.

올바른 경우:
const person = { name: { firstName: "John" }};
console.log(person.name.firstName); // "John"을 출력합니다.

14. 코드 중복

실수 설명
코드의 중복은 유지보수를 어렵게 하고 실수를 유발할 수 있습니다.a