JavaScript 의 일반적인 실수
이 장에서는 몇 가지 일반적인 JavaScript 실수를 지적합니다.
할당 연산자를 실수로 사용
JavaScript 프로그램은 프로그래머가 실수 로 if 문에서 =비교 연산자( ) 대신 할당 연산자( )를 사용하는 경우 예기치 않은 결과를 생성할 수 있습니다 .==
이 if문은 falsex가 10이 아니기 때문에 (예상대로) 반환합니다.
let x = 0;
if (x == 10)
이 if문은 true10이 true이기 때문에 (예상한 것과 다를 수 있음) 반환합니다.
let x = 0;
if (x = 10)
이 if문은 false0이 거짓이기 때문에 (예상과 다를 수 있음) 반환합니다.
let x = 0;
if (x = 0)
할당은 항상 할당 값을 반환합니다.
느슨한 비교 기대
일반 비교에서 데이터 유형은 중요하지 않습니다. 이 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경고가 표시됩니다 .
let x = 10;
switch(x) {
case 10: alert("Hello");
}
경고가 표시 case switch되지 않습니다.
let x = 10;
switch(x) {
case "10": alert("Hello");
}
혼란스러운 덧셈과 연결
더하기 는 숫자 를 더하는 것입니다 .
연결 은 문자열 을 추가 하는 것 입니다.
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"
부동 소수점에 대한 오해
JavaScript의 모든 숫자는 64비트 부동 소수점 숫자 (Floats)로 저장됩니다.
JavaScript를 포함한 모든 프로그래밍 언어는 정확한 부동 소수점 값에 어려움이 있습니다.
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
위의 문제를 해결하려면 곱하고 나누면 도움이 됩니다.
예시
let z = (x * 10 + y * 10) / 10; // z will be 0.3
자바스크립트 문자열 깨기
JavaScript를 사용하면 명령문을 두 줄로 나눌 수 있습니다.
실시예 1
let x =
"Hello World!";
그러나 문자열 중간에서 명령문을 깨는 것은 작동하지 않습니다.
실시예 2
let x = "Hello
World!";
문자열에서 명령문을 분리해야 하는 경우 "백슬래시"를 사용해야 합니다.
실시예 3
let x = "Hello \
World!";
세미콜론을 잘못 배치
잘못 배치된 세미콜론 때문에 이 코드 블록은 x 값에 관계없이 실행됩니다.
if (x == 19);
{
// code block
}
반품 명세서 위반
줄 끝에서 자동으로 문을 닫는 것은 기본 JavaScript 동작입니다.
이 때문에 다음 두 예제는 동일한 결과를 반환합니다.
실시예 1
function myFunction(a) {
let power = 10
return a * power
}
실시예 2
function myFunction(a) {
let power = 10;
return a * power;
}
JavaScript를 사용하면 명령문을 두 줄로 나눌 수도 있습니다.
이 때문에 예제 3도 동일한 결과를 반환합니다.
실시예 3
function myFunction(a) {
let
power = 10;
return a * power;
}
그러나 return 문을 다음과 같이 두 줄로 나누면 어떻게 될까요?
실시예 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
함수가 반환됩니다 undefined!
왜요? JavaScript는 다음을 의미한다고 생각했기 때문에
실시예 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
설명
문이 다음과 같이 불완전한 경우:
let
JavaScript는 다음 줄을 읽어 문장을 완성하려고 시도합니다.
power = 10;
그러나 이 진술이 완료되었기 때문에:
return
JavaScript는 다음과 같이 자동으로 닫습니다.
return;
이것은 JavaScript에서 세미콜론으로 문을 닫는(종료) 선택 사항이기 때문에 발생합니다.
JavaScript는 완전한 문이기 때문에 줄 끝에서 return 문을 닫습니다.
return 문을 절대 깨뜨리지 마십시오.
명명된 인덱스가 있는 배열 액세스
많은 프로그래밍 언어는 명명된 인덱스가 있는 배열을 지원합니다.
명명된 인덱스가 있는 배열을 연관 배열(또는 해시)이라고 합니다.
JavaScript는 명명된 인덱스가 있는 배열을 지원 하지 않습니다 .
JavaScript에서 배열 은 번호가 매겨진 인덱스 를 사용 합니다 .
예시
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는 배열을 표준 개체로 재정의합니다.
자동 재정의 후 배열 메서드와 속성은 정의되지 않거나 잘못된 결과를 생성합니다.
예시:
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
쉼표로 정의 끝내기
객체 및 배열 정의의 후행 쉼표는 ECMAScript 5에서 유효합니다.
개체 예:
person = {firstName:"John", lastName:"Doe", age:46,}
배열 예:
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];
정의되지 않음은 Null이 아닙니다.
JavaScript 개체, 변수, 속성 및 메서드는 undefined.
또한 빈 JavaScript 객체는 값을 가질 수 있습니다 null.
이렇게 하면 개체가 비어 있는지 테스트하기가 약간 어려울 수 있습니다.
You can test if an object exists by testing if the type is undefined:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null, because this will throw an error if the
object is undefined:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null,
and not undefined.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
Because of this, you must test for not undefined before you can
test for not null:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)