자바스크립트 일반적인 실수 (Common Mistakes)

이 장에서는 일반적인 자바스크립트 오류를 알아봅니다.


실수로 할당 연산자(Assignment Operator) 사용

프로그래머가 if 문안에 비교 연산자 (==) 대신, 실수로 할당 연산자 (=)을 사용하면, 자바스크립트 프로그램에서 예기치 않은 결과가 발생할 수 있습니다.

if 문은 x가 10과 같지 않으므로 (예상대로) false를 반환합니다:

false

if 문은 10이 참(true)이므로 true(예상과 다를 수 있음)를 반환 합니다.:

true

if 문은 0이 거짓(false)(예상과 다를 수 있음)이므로 false를 반환합니다:

not equal to 10:

false


예상되는 느슨한 비교Expecting Loose Comparison

일반적인 비교(regular comparison)에서 데이터 유형(data type)은 중요하지 않습니다. 이 if 문은 true를 반환합니다:

true

엄격한 비교(strict comparison)에서는 데이터 유형(type does)을 비교합니다. 이 if 문은 false를 반환합니다:

false

switch 문은 엄격한 비교(strict comparison)를 사용합니다. 이것을 모르는 경우가 매우 많습니다:

이 case switch는 경고(alert)를 표시합니다:

이 예제는 직접 테스트해 보십시오.

이 case switch는 경고(alert)를 표시하지 않습니다:


혼란스러운 더하기(Addition )와 연결(Concatenation)

Addition숫자(numbers)를 더합니다.

Concatenation문자열(strings)을 연결(adding)합니다.

자바스크립트는 이 두 가지 연산을 같은 + 연산자를 사용합니다.

그러므로 숫자에 숫자(number)로 더하는(adding) 것과, 숫자에 문자열(string)을 연결(adding)하는 것은, 다른 결과를 산출합니다:

두 개의 변수를 더할(adding) 때, 결과를 예측하는 것이 어려울 수 있습니다:


부동소수점(Floats)의 오해(Misunderstanding)

자바스크립트의 모든 숫자는 64 비트 부동 소수점 숫자(Floating point numbers) (Floats)로 저장됩니다.

자바스크립트를 포함한 모든 프로그래밍 언어는 정확한 부동 소수점 값을 처리하는데 어려움이 있습니다:

0.30000000000000004

위의 문제를 해결하기 위해, 다음과 같이 곱셈 및 나눗셈을 수행합니다:

Example

0.3


자바스크립트 문자열 줄바꿈(Breaking)

자바스크립트는 문(statement)을 줄바꿈하여 두 행으로 작성하는 것을 허용합니다:

Example 1

Hello World!

그러나 문자열의 중간에서 줄바꿈하면 작동하지 않습니다:

Example 2

문자열에서 문(statement )을 줄바꿈하는 경우 “백 슬래시”를 사용해야 합니다:

Example 3

Hello World!


세미콜론(Semicolon)을 잘못 배치(Misplacing)

세미콜론을 잘못 배치했기 때문에, x의 값과 상관없이, 이 코드 블록은 실행됩니다:

Hello


Return 문(Statement)의 종료(Breaking)

마지막 행(line)에서 자동으로 문(statement )을 닫는 것은, 기본(default) 자바스크립트 작동방법(behavior)입니다.

이 때문에, 두 예제는 같은 결과를 반환합니다:

Example 1

550

Example 2

550

자바스크립트는 하나의 문(a statement)을 두 행(lines)으로 줄바꿈할 수 있습니다.

이 때문에, 예재 3도 같은 결과를 반환합니다:

Example 3

550

그러나 다음과 같이 return 문(statement)을 두 행(lines)로 줄바꿈하면 어떤 결과가 나올까요:

Example 4

undefined

이 함수는 undefined를 반환합니다!

왜? 자바스크립트는 문(statement)을 이해하지 못하기 때문입니다:

Example 5

undefined


설명Explanation

문(statement )이 다음과 같이 불완전한 경우:

JavaScript는 다음 행을 읽어서 문(statement )을 완성하려고 합니다:

그러나 이 문(statement) 완성됩니다(complete):

자바스크립트는 다음과 같이 자동으로 닫습니다:

JavaScript에서는 세미콜론을 사용하는 문을 닫는 것이 선택 사항이므로이 문제가 발생합니다.
This happens because closing (ending) statements with semicolon is optional in
JavaScript.

자바 스크립트는 행(line)의 끝에서 닫습니다(close ). 이것은 완전한 문(complete statement)이기 때문입니다.


명명된 인덱스(Named Indexes)를 사용하여 배열(Arrays)에 액세스

많은 프로그래밍 언어는 명명된 인덱스(named indexes)를 사용하여 배열을 지원합니다.

명명된 인덱스가 있는 배열을 연관 배열(associative arrays)(또는 해시(hashes))이라고합니다.

자바스크립트는 명명된 인덱스가 있는 배열을 지원하지 않습니다.

자바스크립트에서 배열(arrays)숫자 인덱스(numbered indexes)글 사용합니다.

Example

John 3

자바스크립트에서 객체(objects)명명된 인덱스(named indexes)를 사용합니다.

명명된 인덱스를 사용하면, 배열에 액세스할 때, 자바스크립트는 배열을 표준 객체(standard object)로 다시 정의합니다(redefine).

자동 재정의(automatic redefine) 이후에, 배열 메소드와 속성(array methods and properties)은 undefined 또는 잘못된 결과를 반환합니다(produce):

Example:

undefined 0


쉼표(Comma)로 정의(Definitions) 끝내기

ECMAScript 5에서, 객체 및 배열 정의(object and array definition)는 후행 쉼표(Trailing commas)가 적합합니다.

Object Example:

Array Example:

JSON:

JSON:


Undefined는 Null이 아닙니다

자바 스크립트의 경우 null은 객체(objects)를 위한 것이고, undefined는 변수, 속성 및 메소드(variables, properties, and methods)를 위한 것입니다.

null이 되려면, 객체가 정의되어야하며, 그렇지 않으면 defined가 됩니다.

객체가 있는지 테스트하는 경우, 객체(object)가 undefined이면, 다음은 오류가 발생합니다:

Incorrect:

이것 때문에, typeof()를 먼저 테스트해야 합니다:

Correct:


블록 레벨 범위 예상 (Expecting Block Level Scope)

자바스크립트는 각 코드 블록(each code block)에 대해 새 범위(new scope)를 만들지 않습니다.

많은 프로그래밍 언어에서는 사실 이지만 JavaScript 에서는 사실 이 아닙니다 .It is true in many programming languages, but not true
in JavaScript.

이 코드는, for 루프 블록(for loop block) 외부(OUTSIDE)에 있지만, i (10)의 값을 표시합니다:

Example

10

출처: JavaScript Common Mistakes

댓글 남기기