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 10: alert("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 = [40, 100, 1, 5, 25, 10]; // Incorrect
       
      points = [40, 100, 1, 5, 25, 10]; // 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


       




      저작자표시

      'Web > JavaScript' 카테고리의 다른 글

      [javascript] 42. JSON - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 41. 예약어(Reserved Keywords) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 40. 성능(Performance) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 38. 좋은 지침(Bset Practices) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 37. Style Guide - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 36. Strict Mode - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바