ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [javascript] 38. 좋은 지침(Bset Practices) - 자바스크립트 강좌 JS / CSE
      Web/JavaScript 2015. 6. 13. 15:26
      JavaScript Best Practices

       



      1. Avoid Global Variables

       전역 변수 사용을 최소화 합니다.

       

       위 해당사항은 모든 데이터 타입, 객체, 함수를 포함합니다.


       전역 변수와 함수는 다른 스크립트에서 덮어쓰여 질 수 있습니다.


       


      2. Always Declare Local Variables

       함수에서 사용하는 모든 변수는 지역 변수로 선언되어 집니다.


       지역 변수는 var 키워드로 선언되어져야 합니다. 그렇지 않으면 전역 변수가 되버립니다.


       


      3. Declarations on Top

       모든 선언부를 각 스크립트의 상단에 위치시키는 것은 좋은 코딩 지침입니다.

       원하지 않는 전역 변수를 피할 수 있는 좋은 방법입니다.

       좀 더 깔끔한 코드를 만들고, 원하지 않는 재 선언을 줄일 수 있는 가능성을 제공합니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      var firstName, lastName;
      var price, discount, fullPrice;
       
      firstName = "John";
      lastName = "Doe";
       
      price = 19.90;
      discount = 0.10;
       
      fullPrice = price * 100 / discount;
      		cs

       


       



      4. Never Declare Numbers, Strings, or Booleans as Objects

       숫자, 문자열, 부울 값을 객체로 선언하면 실행속도를 느리게 하고, side effect를 내게 됩니다:



       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <!DOCTYPE html>
      <html>
          <body>
          <p id="demo"></p>
       
      <script>
      var x = "John";              // x is a string
      var y = new String("John");  // y is an object
      document.getElementById("demo").innerHTML = x===y;
      </script>
       
          </body>
      </html>
       
      		cs



       

       






      5. Don't Use new Object()

       - new Object()를 사용하는 대신 {}를 사용하세요.

       - new String()을 사용하는 대신 ""를 사용하세요.

       - new Number()을 사용하는 대신 0를 사용하세요.

       - new Boolean()을 사용하는 대신 false를 사용하세요.

       - new Array()을 사용하는 대신 []를 사용하세요.

       - new RegExp()을 사용하는 대신 /()/를 사용하세요.

       - new function()을 사용하는 대신 function() {}를 사용하세요.



       

      1
      2
      3
      4
      5
      6
      7
      8
       
      var x1 = {};           // new object
      var x2 = "";           // new primitive string
      var x3 = 0;            // new primitive number
      var x4 = false;        // new primitive boolean
      var x5 = [];           // new array object
      var    x6 = /()/;         // new regexp object
      var x7 = function(){}; // new function object
      		cs






      6. Beware of Automatic Type Conversions

       숫자가 우연적으로 문자열이나 NaN으로 변환되는 것을 주의합니다.


       변수는 다른 데이터 타입을 갖을 수 있고, 이 타입을 다른 데이터 타입으로 바꿀 수 있습니다:


       

      1
      2
      var x = "Hello";     // typeof x is a string
      x = 5;               // changes typeof x to a number
      		cs



       수학적 연산자를 사용하여, 자바스크립트는 숫자를 문자열로 변환 할 수 있습니다:


       

      1
      2
      3
      4
      5
      6
      7
      8
      var x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
      var x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
      var x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
      var x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
      var x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
      var x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
      var x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number
       
      		cs




       뺄셈을 문자열에 사용하면, 에러를 생성하진 않으나, NaN을 반환합니다.


       

      1
      2
       
      "Hello" - "Dolly"    // returns NaN
      		cs




      7. Use === Comparison

       == 비교 연산자는 항상 비교 전에 해당 타입에 맞게 변환합니다.


       === 연산자는 값과 타입의 비교를 강요합니다.


       

      1
      2
      3
      4
      5
      6
      7
      0 == "";        // true
      1 == "1";       // true
      1 == true;      // true
       
      0 === "";       // false
      1 === "1";      // false
      1 === true;     // false
      		cs





      8. Use Parameter Defaults

       함수에 인자값을 빼트리고 호출했다면, 빼트린 인자값은 undefined로 설정됩니다.


       Undefined 값은 코드를 빠져나오게 합니다. 기본(default) 값을 인자 값에 할당해주는 것은 좋은 습관입니다.


       

      1
      2
      3
      4
      5
      function myFunction(x, y) {
          if (y === undefined) {
              y = 0;
          }
      }
      		cs




      저작자표시

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

      [javascript] 41. 예약어(Reserved Keywords) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 40. 성능(Performance) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 39. 실수(Mistakes) - 자바스크립트 강좌 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
      [javascript] 35. 끌어올리기(Hoisting) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바