JavaScript 일반적인 오류

이 장에서는 일반적인 JavaScript 오류를 몇 가지 지적합니다.

실수로 대입 연산자를 사용하는 경우:

프로그래머가 if 문구에서 실수로 대입 연산자를 사용하는 경우:=）이 비교 연산자가 아니라 대입 연산자====），JavaScript 프로그램은 예상치 못한 결과를 생성할 수 있습니다.

이 문구 if 문구는 반환합니다: false예상했던 것처럼, x는 10과 다르기 때문에:

var x = 0;
if (x == 10)

직접 시도해 보세요

이 문구 if 문구는 반환합니다: true예상하지 않았던 것처럼, 10은 true이기 때문에:

var x = 0;
if (x = 10)

직접 시도해 보세요

이 문구 if 문구는 반환합니다: false예상하지 않았던 것처럼, 0은 false이기 때문에:

var x = 0;
if (x = 0)

직접 시도해 보세요

할당은 항상 할당된 값을 반환합니다.

대략적인 비교를 기대합니다

일반적인 비교에서 데이터 타입은 중요하지 않습니다. 이 문구 if 문구는 반환합니다: true：

var x = 10;
var y = "10";
if (x == y)

직접 시도해 보세요

정확한 비교에서 데이터 타입은 실제로 중요합니다. 이 문구 if 문구는 반환합니다: false：

var x = 10;
var y = "10";
if (x === y)

직접 시도해 보세요

일반적인 오류는 switch 문구에서 정확한 비교를 사용합니다:

이 문구 switch 문구는 표시됩니다:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

직접 시도해 보세요

이 문구 switch 문구는 표시되지 않습니다:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

직접 시도해 보세요

혼란스러운 덧셈과 쇄결

덧셈를 더하는 데 사용합니다.숫자。

쇄결(Cascade)를 더하는 데 사용합니다.문자열。

JavaScript에서는 이 두 연산 모두 같은 + 연산자.

따라서 숫자를 숫자로 더하는 것과 숫자를 문자열로 더하는 것은 다른 결과를 산출합니다:

var x = 10 + 5;          // x의 결과는 15
var x = 10 + "5";         // x의 결과는 "105"

직접 시도해 보세요

두 변수를 더하는 경우 결과를 예측하기 어렵습니다:

var x = 10;
var y = 5;
var z = x + y;            // z의 결과는 15
var x = 10;
var y = "5";
var z = x + y;            // z의 결과는 "105"

직접 시도해 보세요

혼란스러운 부동소수점

JavaScript에서의 숫자는 모두 64비트로 저장됩니다.부동소수점 (Floats)。

모든 프로그래밍 언어, JavaScript를 포함하여, 부동소수점 값을 처리하는 어려움이 있습니다:

var x = 0.1;
var y = 0.2;
var z = x + y             // z의 결과는 0.3이 아닙니다

직접 시도해 보세요

위의 문제를 해결하기 위해 곱셈과 나눗셈을 사용하세요:

예제

var z = (x * 10 + y * 10) / 10;       // z의 결과는 0.3입니다

직접 시도해 보세요

JavaScript 문자열 줄바꿈

JavaScript는 문장을 줄바꿈하여 두 줄로 작성할 수 있습니다:

예제 1

var x =
"Hello World!";

직접 시도해 보세요

하지만, 문자열 중간에서 줄바꿈은 올바르지 않습니다:

예제 2

var x = "Hello
World!";

직접 시도해 보세요

예제 3

var x = "Hello \",
World!";

직접 시도해 보세요

잘못된 세미콜론 위치

잘못된 세미콜론 때문에 이 코드 블록은 x의 값이 무엇이든 실행됩니다:

if (x == 19);
{
     // 코드 블록
}

직접 시도해 보세요

return 문장을 줄바꿈하다

줄 끝에 자동으로 문장을 닫는 것은 기본적인 JavaScript 행동입니다.

따라서 다음 두 예제는 동일한 결과를 반환합니다:

예제 1

function myFunction(a) {
    var power = 10  
    return a * power
}

직접 시도해 보세요

예제 2

function myFunction(a) {
    var power = 10;
    return a * power;
}

직접 시도해 보세요

JavaScript는 문장을 줄바꿈하여 두 줄로 작성할 수도 있습니다.

따라서 예제 3도 동일한 결과를 반환합니다:

예제 3

function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

직접 시도해 보세요

하지만, 다음과 같이: return 문장을 줄바꿈하면 무엇이 일어날까요:

예제 4

function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

직접 시도해 보세요

이 함수는 다음을 반환합니다 undefined!

왜 그런가요? JavaScript는 당신의 의도를 다음과 같이 생각합니다:

예제 5

function myFunction(a) {
     var
    power = 10;  
    return;
    a * power;
}

직접 시도해 보세요

설명

만약 문장이 불완전하다면:

var

JavaScript는 다음 줄을 읽어 이 문장을 완료합니다:

power = 10;

하지만 이 문장은 완전합니다:

return

JavaScript는 이 문장을 자동으로 닫습니다:

return;

이런 일이 발생하는 이유는 JavaScript에서 문장을 종료하는 세미콜론을 사용하는 것은 선택 사항이기 때문입니다.

JavaScript는 줄 끝에 자동으로 문장을 닫습니다 return 문장을 줄바꿈하지 마세요. 그것은 본인이 완전한 문장입니다.

따라서 결코 return 문장을 줄바꿈합니다。

배열에 접근하기 위해 이름으로 인덱싱을 사용합니다

많은 프로그래밍 언어가 이름 지정된 인덱스를 포함한 배열을 지원합니다。

이름 지정된 인덱스를 포함한 배열은 연결 배열(또는 해시)라고 합니다.

JavaScript 지원하지 않습니다이름 지정된 인덱스를 포함한 배열

JavaScript에서는배열사용숫자 인덱스：

예제

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length은 3을 반환합니다
var y = person[0];              // person[0]은 "Bill"을 반환합니다

직접 시도해 보세요

JavaScript에서는객체사용이름 지정된 인덱스。

이름 지정된 인덱스를 사용하면, 배열에 접근할 때 JavaScript가 배열을 표준 객체로 재정의할 수 있습니다。

자동 재정의 후, 배열 메서드나 속성은 undefined이나 비정확한 결과를 생성할 수 있습니다：

예제

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length은 0을 반환합니다
var y = person[0];              // person[0]은 undefined을 반환합니다

직접 시도해 보세요

정의를 끝내기 위해 컴마를 사용하십시오

객체 및 배열 정의에서의 트레일링 컴마는 ECMAScript 5에서 합법적입니다。

객체 인스턴스：

person = {firstName:"Bill", lastName:"Gates", age:62,}

배열 인스턴스：

points = [35, 450, 2, 7, 30, 16,];

경고！！

Internet Explorer 8은 충돌할 수 있습니다。

JSON은 트레일링 컴마를 허용하지 않습니다。

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62}

JSON:

points = [35, 450, 2, 7, 30, 16];

Undefined은 Null이 아닙니다

JavaScript 객체, 변수, 속성 및 메서드는 정의되지 않을 수 있습니다.

또한, 비어 있는 JavaScript 객체의 값은 null。

이는 테스트 대상이 비어 있는지 확인하는 것이 어려워질 수 있습니다。

테스트 타입이 undefined대상이 존재하는지 테스트할 수 있습니다：

예제

if (typeof myObj === "undefined")

직접 시도해 보세요

그러나 객체가 undefined인지 테스트할 수는 없습니다 null이유는 객체가 undefined이면 오류가 발생할 수 있기 때문입니다:

불정확한:

if (myObj === null)

이 문제를 해결하려면, 객체가 null인지 테스트해야 합니다 null이렇게 하지 않고 undefined으로 테스트해야 합니다。

하지만 이는 여전히 오류를 일으킬 것입니다:

불정확한:

if (myObj !== null && typeof myObj !== "undefined")

따라서, null이 아닌 것을 테스트하기 전에 먼저 undefined을 테스트해야 합니다:

정확한:

if (typeof myObj !== "undefined" && myObj !== null)

직접 시도해 보세요

블록 스코프를 기대하지 않습니다

JavaScript 하지 않습니다각 코드 블록에 새로운 스코프를 생성합니다

많은 프로그래밍 언어가 이렇게 하지만 JavaScript 그렇지 않습니다。

이 코드가 반환할 것이라고 생각합니다 undefined，는 새로운 JavaScript 개발자의 일반적인 오류입니다：

예제

for (var i = 0; i < 10; i++) {
  // 코드 블록
}
return i;

직접 시도해 보세요