JS Common Mistakes
본 장에서는 몇 가지 일반적인 JavaScript 실수에 대해 알아볼 것이다.
Accidentally Using the Assignment Operator
JavaScript 프로그램은 프로그래머가 실수로 if 문에서 비교 연산자(==) 대신 할당 연산자(=)를 사용하는 경우 예기치 않은 결과를 생성할 수 있다.
- 이
if문은 x가 10이 아니기 때문에 (예상대로)false를 반환한다.
let x = 0;
if (x == 10)- 이
if문은 10이 true이기 때문에true(예상한 것과 다를 수 있음)를 반환한다.
let x = 0;
if (x = 10)- 이
if문은 0이 거짓이기 때문에false을 반환한다(예상한 것과 다를 수 있음).
let x = 0;
if (x = 0)할당은 항상 할당 값을 반환한다.
Expecting Loose Comparison
일반 비교에서 데이터 유형은 중요하지 않다. 이 if 문은 true를 반환한다.
let x = 10;
let y = "10";
if (x == y)엄밀히 비교하면 데이터 유형은 중요하다. 이 if 문은 false를 반환한다.
let x = 10;
let y = "10";
if (x === y)switch 문에서 엄격한 비교를 사용한다는 사실을 잊는 것은 일반적인 실수다.
이 case switch는 경고를 표시한다:
<!DOCTYPE html>
<html>
<body>
<h2>Common JavaScript Mistakes</h2>
<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will work:</p>
<p id="demo"></p>
<script>
let x = 10;
switch(x) {
case 10: document.getElementById("demo").innerHTML = "Hello";
}
</script>
</body>
</html>
이 case switch는 경고를 표시하지 않는다.
let x = 10;
switch(x) {
case "10": alert("Hello");
}Confusing Addition & Concatenation
더하기는 숫자를 더하는 것이다.
연결은 문자열을 추가하는 것이다.
JavaScript에서는 두 연산 모두 동일한 + 연산자를 사용한다.
이 때문에 숫자를 숫자로 추가하면 숫자를 문자열로 추가하는 것과 다른 결과가 생성된다.
let x = 10;
x = 10 + 5; // Now x is 15
let y = 10;
y += "5"; // Now y is "105"두 개의 변수를 추가할 때 결과를 예상하기 어려울 수 있다.
let x = 10;
let y = 5;
let z = x + y; // Now z is 15
let x = 10;
let y = "5";
let z = x + y; // Now z is "105"Misunderstanding Floats
JavaScript의 모든 숫자는 64비트 부동 소수점 숫자(Floats)로 저장된다.
JavaScript를 포함한 모든 프로그래밍 언어는 정확한 부동 소수점 값에 어려움이 있다.
위의 문제를 해결하려면 곱셈과 나눗셈이 도움이 필요하다.
Breaking a JavaScript String
JavaScript를 사용하면 명령문을 두 줄로 나눌 수 있다.
Example 1
let x = "Hello World!";
그러나 문자열 중간에서 명령문을 깨는 것은 작동하지 않는다.
Example 2
let x = "Hello World!";
문자열에서 명령문을 분리해야 하는 경우 "백슬래시"를 사용해야 한다.
Example 3
let x = "Hello \ World!";
※ Misplacing Semicolon
잘못 배치된 세미콜론 때문에 이 코드 블록은 x 값에 관계없이 실행된다.
if (x == 19);
{
// code block
}Breaking a Return Statement
줄 끝에서 자동으로 문을 닫는 것은 기본적인 JavaScript의 동작이다.
이 때문에 아래 두 예시는 동일한 결과를 반환한다.
Example 1
function myFunction(a) { let power = 10 return a * power }
Example 2
function myFunction(a) { let power = 10; return a * power; }
JavaScript를 사용하면 명령문을 두 줄로 나눌 수도 있다.
이 때문에 예시 3도 동일한 결과를 반환한다.
Example 3
function myFunction(a) { let power = 10; return a * power; }
그러나 return 문을 다음과 같이 두 줄로 나누면 어떻게 될까?
Example 4
function myFunction(a) { let power = 10; return a * power; }
함수는 undefined를 반환한다!
왜지? 왜냐하면 JavaScript는 개발자가 예시5와 같은 의미로 작성했다고 여기기 때문이다:
Example 5
function myFunction(a) { let power = 10; return; a * power; }
Explanation
문이 다음과 같이 불완전한 경우:
letJavaScript는 다음 줄을 읽어 문장을 완성하려고 시도한다.
power = 10;그러나 아래 문이 완료되었기 때문에:
returnJavaScript는 다음과 같이 자동으로 닫게된다.
return;이것은 JavaScript에서 세미콜론으로 문을 닫는(종료) 선택 사항이기 때문에 발생한다.
JavaScript는 완전한 문이기 때문에 줄 끝에서 return 문을 닫는다.
return 문을 절대 깨뜨리지 말자.
Accessing Arrays with Named Indexes
많은 프로그래밍 언어는 명명된 인덱스(named indexes)가 있는 배열을 지원한다.
명명된 인덱스가 있는 배열을 연관 배열(associative arrays)(또는 hashes)이라고 한다.
JavaScript는 명명된 인덱스가 있는 배열을 지원하지 않는다.
JavaScript에서 배열은 번호가 매겨진 인덱스를 사용한다.
Example
const person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; person.length; // person.length will return 3 person[0]; // person[0] will return "John"
JavaScript에서 객체는 명명된 인덱스를 사용한다.
명명된 인덱스를 사용하는 경우 배열에 액세스할 때 JavaScript는 배열을 표준 개체로 재정의한다.
자동 재정의 후 배열 메서드 및 속성은 정의되지 않거나 잘못된 결과를 생성한다.
Example:
const person = []; person["firstName"] = "John"; person["lastName"] = "Doe"; person["age"] = 46; person.length; // person.length will return 0 person[0]; // person[0] will return undefined
Ending Definitions with a Comma
객체 및 배열 정의의 후행 쉼표는 ECMAScript 5에서 유효하다.
Object Example:
person = {firstName:"John", lastName:"Doe", age:46,}
Array Example:
points = [40, 100, 1, 5, 25, 10,];
경고 !!
Internet Explorer 8은 충돌할 것이다.
JSON은 후행 쉼표를 허용하지 않는다.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Undefined is Not Null
JavaScript 객체, 변수, 속성 및 메서드는 undefined가 될 수 있다.
또한 빈 JavaScript 개체는 null 값을 가질 수 있다.
이렇게 하면 객체가 비어 있는지 테스트하기가 약간 어려울 수 있다.
유형이 undefined인 경우, 객체가 존재하는지 테스트할 수 있다.
Example:
if (typeof myObj === "undefined")그러나 객체가
null인지 테스트할 수는 없다. 객체가undefined인 경우 오류가 발생하기 때문이다.
Incorrect:if (myObj === null)
이 문제를 해결하려면 객체가 null이 아니고 undefined가 아닌지 테스트해야 한다.
그러나 여전히 오류가 발생할 수 있다.
Incorrect:
if (myObj !== null && typeof myObj !== "undefined")
이 때문에 not null을 테스트하려면 먼저 not undefined를 테스트해야 한다.
Correct:
if (typeof myObj !== "undefined" && myObj !== null)
