JavaScript 최상의 관행
- 이전 페이지 JS 스타일 가이드
- 다음 페이지 JS 오류
전역 변수를 피하세요new
、===
、eval()
전역 변수를 피하세요
전역 변수를 최소화하도록 하세요
모든 데이터 타입, 객체, 함수를 포함합니다.
전역 변수와 함수는 다른 스크립트에 의해 덮어쓸 수 있습니다.
지역 변수를 사용하도록 하고, 그 사용법을 배우세요closure。
항상 지역 변수를 선언하세요
함수에서 사용하는 모든 변수는 선언되어야 합니다localvariables
local variablesmustvia var 키워드로 선언하지 않으면 전역 변수가 됩니다.
strict 모드에서는 미선언 변수를 허용하지 않습니다.
상단 선언
좋은编码 표준은 모든 선언을 각 스크립트나 함수의 상단에 두는 것입니다.
이렇게 하면 이익이 있습니다:
- 정리된 코드를 얻습니다
- 지역 변수를 찾는 좋은 위치를 제공합니다
- 필요하지 않은 전역 변수를 피하기 쉽습니다
- 필요하지 않은 재선언 가능성을 줄입니다
// 상단 선언 var firstName, lastName, price, discount, fullPrice; // 나중에 사용 firstName = "Bill"; lastName = "Gates"; price = 19.90; discount = 0.10; fullPrice = price * 100 / discount;
반복 변수로도 사용할 수 있습니다:
// 상단 선언 var i; // 나중에 사용 for (i = 0; i < 5; i++) {
기본적으로 JavaScript는 모든 선언을 상단으로 이동시킵니다(JavaScript hoisting).
변수 초기화
변수를 선언할 때 초기화하는 것이 좋은 습관입니다。
이렇게 하면 이익이 있습니다:
- 더 깔끔한 코드
- 변수를 초기화할 때는 별도의 위치에서 초기화하세요
- 미정의 값을 피하세요
// 첫 번째 위치에서 선언 및 초기화 var firstName = "", lastName = "", price = 0, discount = 0, fullPrice = 0, myArray = [], myObject = {};
변수 초기화는 예상 용도와 예상 데이터 타입을 이해하는 데 도움이 됩니다.
숫자, 문자열, 또는 boolean 객체를 선언하지 마세요
숫자, 문자열, 또는 boolean 값을 항상 원시 값으로, 아닌 객체로 생각해야 합니다.
이러한 타입을 객체로 선언하면 실행 속도가 느려지고, 원치 않는 부작용이 발생할 수 있습니다:
예제
var x = "Bill"; var y = new String("Bill"); (x === y) // 결과는 false입니다.因为 x는 문자열이고 y는 객체입니다。
또는 심지어 더 나쁜 경우:
예제
var x = new String("Bill"); var y = new String("Bill"); (x == y) // 결과는 false입니다.因为你无法比较对象。
new Object()를 사용하지 마세요
- {}를 사용하여 new Object()를 대체하세요
- ""를 사용하여 new String()를 대체하세요
- 0을 사용하여 new Number()를 대체하세요
- false를 사용하여 new Boolean()를 대체하세요
- []를 사용하여 new Array()를 대체하세요
- /()/를 사용하여 new RegExp()를 대체하세요
- function (){}를 사용하여 new Function()를 대체하세요
예제
var x1 = {}; // 새로운 객체 var x2 = ""; // 새로운 원시 문자열 값 var x3 = 0; // 새로운 원시 숫자 값 var x4 = false; // 새로운 원시 boolean 값 var x5 = []; // 새로운 배열 객체 var x6 = /()/; // 새로운 정규 표현식 var x7 = function(){}; // 새로운 함수 객체
자동 타입 변환을 인식해야 합니다
数值이 예기치 않게 문자열로 변환되거나 NaN
(Not a Number)。
JavaScript 는 느슨한 타입입니다. 변수는 다양한 데이터 타입을 포함할 수 있으며, 변수는 자신의 데이터 타입을 변경할 수 있습니다:
예제
var x = "Hello"; // typeof x는 문자입니다 x = 5; // typeof x를 숫자로 변경
수학 연산을 수행할 때, JavaScript는 숫자를 문자열로 변환할 수 있습니다:
예제
var x = 5 + 7; // x.valueOf()는 12, typeof x는 숫자입니다 var x = 5 + "7"; // x.valueOf()는 57, typeof x는 문자입니다 var x = "5" + 7; // x.valueOf()는 57, typeof x는 문자입니다 var x = 5 - 7; // x.valueOf()는 -2, typeof x는 숫자입니다 var x = 5 - "7"; // x.valueOf()는 -2, typeof x는 숫자입니다 var x = "5" - 7; // x.valueOf()는 -2, typeof x는 숫자입니다 var x = 5 - "x"; // x.valueOf()는 NaN, typeof x는 숫자입니다
문자열을 뺄 때는 오류를 발생시키지 않고 반환합니다 NaN
(Not a Number):
예제
"Hello" - "Dolly" // NaN을 반환
===를 사용하여 비교합니다
==
비교 연산자는 비교 전에 타입 변환을 수행합니다(타입을 일치시키기 위해).
===
연산자는 값과 타입을 강제로 비교합니다:
예제
0 == ""; // true 1 == "1"; // true 1 == true; // true 0 === ""; // false 1 === "1"; // false 1 === true; // false
Parameter Defaults
함수를 호출할 때 매개변수가 부족하다면, 그 부족한 매개변수의 값은 설정됩니다 undefined
。
undefined
값이 코드를 깨뜨릴 수 있습니다. 매개변수에 기본값을 설정하는 것은 좋은 습관입니다.
예제
function myFunction(x, y) { if (y === undefined) { y = 0; } }
다음에함수 매개변수이 장에서 함수 매개변수에 대해 더 많이 알아보세요.
default을 사용하여 switch를 끝내세요
사용하세요 default
을 사용하여 끝내세요 switch
문장. 이 필요가 없다고 생각하더라도.
예제
switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; break; default: day = "Unknown"; }
eval()의 사용을 피하십시오
eval()
텍스트를 코드로 허용하는 함수입니다. 거의 모든 경우에 사용할 필요가 없습니다.
원시 코드가 실행되도록 허용되기 때문에, 동시에 보안 문제도 의미합니다.
- 이전 페이지 JS 스타일 가이드
- 다음 페이지 JS 오류