ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [javascript] 39. 실수(Mistakes) - 자바스크립트 강좌 JS / CSE
    Web/JavaScript 2015. 6. 13. 15:27
    JavaScript Common Mistakes




    1. Accidentally Using the Assignment Operator

     자바스크립트 프로그램은 프로그래머가 비교 연산자(==) 대신에 할당 연산자(=)를 실수로 사용하는여서 예상치 못한 결과를 만들기도 합니다.

     아래 구문은 false를 반환합니다:

    1
    2
    var x = 0;
    if (x == 10)
    cs
     


     다음 아래 구문은 true를 반환합니다:


     

    1
    2
    var x = 0;
    if (x = 10)
    cs



     다음 아래 구문은 false를 반환합니다:


     

    1
    2
    var x = 0;
    if (x = 0)
    cs





    2. Expecting Loosely Comparison

     일반적인 비교에서 데이터 타입은 문제가 되지 않습니다. 아래 구문은 true를 반환합니다:

    1
    2
    3
    var x = 10;
    var y = "10";
    if (x == y)
    cs

     


     엄격한 비교에서 데이터 타입은 문제가 됩니다. 아래 구문은 false를 반환합니다:


     

    1
    2
    3
    var x = 10;
    var y = "10";
    if (x === y)
    cs

     


     switch 구문에서 엄격한 비교를 사용하는데서 빼먹 일반적 실수입니다:

      아래 switch 구문은 알림창을 보입니다:



     

    1
    2
    3
    4
    var x = 10;
    switch(x) {
        case 10alert("Hello");
    }
    cs



      아래 switch 구문은 알림창을 보이지 않습니다:


     

    1
    2
    3
    4
    var x = 10;
    switch(x) {
        case "10"alert("Hello");
    }
    cs




    3. Confusing Addition & Concatenation

     추가(Addition)은 숫자를 추가하는데 관련된 것입니다.

     연결(Concatenation)은 문자열을 추가하는데 관련된 것입니다.

     자바스크립트에서 두 연산자는 + 연산자와 동일합니다.

     이러한 성질 때문에, 숫자에 숫자를 더할 때, 숫자를 문자와 더할 때와 다른 결과를 가져옵니다:

    1
    2
    var x = 10 + 5;          // the result in x is 15
    var x = 10 + "5";        // the result in x is "105"
    cs

     



     두 변수를 더할 때, 결과를 예상하기 힘듭니다:


     

    1
    2
    3
    4
    5
    6
    7
    var x = 10;
    var y = 5;
    var z = x + y;           // the result in z is 15
     
    var x = 10;
    var y = "5";
    var z = x + y;           // the result in z is "105"
    cs



     

    4. Misunderstanding Floats

     모든 숫자는 64-bits 부동 소수점으로 저장됩니다.

     모든 프로그래밍 언어는 정확한 부동소수점 값의 차이를 갖습니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html>
        <body>
     
        <p id="demo"></p>
     
    <script>
    var x = 0.1;
    var y = 0.2;
    var z = x + y;
    document.getElementById("demo").innerHTML = z;
    </script>
     
        </body>
    </html>
     
     
    cs
     



     

     










    5. Breaking a JavaScript String

     자바스크립트는 구문을 두 라인으로 분리하는 것을 허용합니다:

    1
    2
    3
     
    var x =
    "Hello World!";
    cs
     
     

    6. Misplacing Semicolon

     세미콜론을 빼트린다면, 아래 코드 블럭은 x 값에 상관없이 실행 될 것입니다:

    1
    2
    3
    4
    if (x == 19);
    {
        // code block  
    }
    cs



    7. Breaking a Return Statement

     아래 두 예제는 같은 결과를 반환합니다:
    1
    2
    3
    4
    function myFunction(a) {
        var power = 10  
        return a * power
    }
    cs
     
    1
    2
    3
    4
    function myFunction(a) {
        var power = 10  
        return a * power;
    }
    cs
     
     
     자바스크립트는 구문을 두 라인으로 분리하는 것을 허용합니다.

     아래 예제 또한, 위의 두 예제와 같은 결과를 반환합니다:

    1
    2
    3
    4
    5
    function myFunction(a) {
        var 
    power = 10  
        return a * power
    }
    cs
     
      그러나, 아래 예제처럼 리턴 구문을 두 라인으로 나누면 다른 결과를 초래합니다:


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html>
        <body>
     
        <p id="demo"></p>
     
    <script>
    document.getElementById("demo").innerHTML = myFunction(55);
    function myFunction(a) {
    var
    power = 10;
    return
    a * power;
    }
    </script>
     
        </body>
    </html>
     
     
    cs

     











     위 예제는 아래처럼 인식을 하기 때문입니다:


     

    1
    2
    3
    4
    5
    6
    7
     
    function myFunction(a) {
        var
        power = 10;  
        return;
        a * power;
    }
    cs



     

    8. Accessing Arrays with Named Indexes

     많은 프로그래밍 언어는 이름 index 배열을 제공합니다.

     이름 index 배열은 associative 배열(또는 hash)라고 부릅니다.

     자바스크립트는 이름 index된 배열을 제공하지 않습니다.

     자바스크립트에서는 숫자 index된 배열을 사용합니다.

    1
    2
    3
    4
    5
    6
    var person = [];
    person[0] = "John";
    person[1] = "Doe";
    person[2] = 46;
    var x = person.length;         // person.length will return 3
    var y = person[0];             // person[0] will return "John"
    cs
     


     객체는 이름 index를 사용합니다.


     배열에 접근할 때, 이름 index를 사용하면, 자바스크립트는 배열을 표준 객체로 재정의합니다.


     자동적으로 재정의 한 후, 배열 메소드와 속성은 undefined나 부정확한 결과를 낳습니다:



     

    1
    2
    3
    4
    5
    6
    var person = [];
    person["firstName"] = "John";
    person["lastName"] = "Doe";
    person["age"] = 46;
    var x = person.length;         // person.length will return 0
    var y = person[0];             // person[0] will return undefined
    cs





    9. Ending an Array Definition with a Comma

     마지막 원소에 콤마를 넣지 않습니다.


     

    1
    2
    3
    points = [40100152510]; // Incorrect
     
    points = [40100152510]; // Correct
    cs




    10. Ending an Object Definition with a Comma

     마지막 원소에 콤마를 넣지 않습니다.



    1
    2
    3
    person = {firstName:"John", lastName:"Doe", age:46,} // Incorrect
     
    person = {firstName:"John", lastName:"Doe", age:46// Correct
    cs




    11. Undefined is Not Null

     자바스크립트에서, null은 객체를 위한 것이고, undefined는 변수, 속성, 메소드를 위한 것입니다.


     

     

    1
    2
    3
    if (myObj !== null && typeof myObj !== "undefined")  // incorrect
     
    if (typeof myObj !== "undefined" && myObj !== null)  // correct
    cs

     


     




    12. Expecting Block Level Scope

     자바스크립트는 각 코드 블럭의 새 범위를 만들지 않습니다.

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html>
        <body>
     
        <p id="demo"></p>
     
    <script>
    for (var i = 0; i < 10; i++) {
    // some code
    }
    document.getElementById("demo").innerHTML = i;
    </script>
     
        </body>
    </html>
     
     
    cs


     




    댓글

Designed by Tistory.