자바스크립트 모범 사례
전역 변수를 피하고 new, 피하고, 피하고 ==, 피 하십시오.eval()
전역 변수 피하기
전역 변수의 사용을 최소화합니다.
여기에는 모든 데이터 유형, 개체 및 함수가 포함됩니다.
전역 변수와 함수는 다른 스크립트로 덮어쓸 수 있습니다.
대신 지역 변수를 사용하고 클로저 사용 방법을 배우십시오 .
항상 지역 변수 선언
함수에서 사용되는 모든 변수는 지역 변수 로 선언되어야 합니다 .
지역 변수 는 키워드,
키워드 또는 키워드 로 선언 해야 합니다 . 그렇지 않으면 전역 변수가 됩니다.varletconst
Strict 모드는 선언되지 않은 변수를 허용하지 않습니다.
상단에 선언
모든 선언을 각 스크립트나 함수의 맨 위에 두는 것은 좋은 코딩 방법입니다.
이렇게 하면:
- 더 깔끔한 코드 제공
- 지역 변수를 찾을 수 있는 단일 장소 제공
- 원치 않는(암시된) 전역 변수를 더 쉽게 피할 수 있습니다.
- 원치 않는 재선언의 가능성 감소
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
이것은 루프 변수에도 적용됩니다.
for (let i = 0; i < 5; i++)
{
변수 초기화
변수를 선언할 때 변수를 초기화하는 것은 좋은 코딩 방법입니다.
이렇게 하면:
- 더 깔끔한 코드 제공
- 변수를 초기화할 단일 장소 제공
- 정의되지 않은 값 피하기
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};
변수를 초기화하면 의도된 용도(및 의도된 데이터 유형)에 대한 아이디어를 얻을 수 있습니다.
const 로 객체 선언하기
const로 객체를 선언하면 실수로 유형이 변경되는 것을 방지할 수 있습니다.
예시
let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Changes object to string
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Not possible
const 로 배열 선언
const로 배열을 선언하면 실수로 유형이 변경되는 것을 방지할 수 있습니다.
예시
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible
new Object()를 사용하지 마십시오
""대신 사용new String()0대신 사용new Number()false대신 사용new Boolean(){}대신 사용new Object()[]대신 사용new Array()/()/대신 사용new RegExp()function (){}대신 사용new Function()
예시
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new object
const x5 = []; // new array object
const x6 = /()/; // new regexp object
const x7 = function(){}; // new function object
자동 유형 변환에 주의
JavaScript는 느슨하게 입력됩니다.
변수는 모든 데이터 유형을 포함할 수 있습니다.
변수는 데이터 유형을 변경할 수 있습니다.
예시
let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
숫자는 실수로 문자열 또는 NaN(숫자가 아님)으로 변환될 수 있습니다.
수학 연산을 수행할 때 JavaScript는 숫자를 문자열로 변환할 수 있습니다.
예시
let x = 5 + 7; // x.valueOf() is 12, typeof x is a number
let x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
let x = "5" + 7; // x.valueOf() is 57, typeof x is a string
let x = 5 - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
let x = "5" - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
문자열에서 문자열을 빼면 오류가 발생하지 않지만 NaN(숫자가 아님)이 반환됩니다.
예시
"Hello" - "Dolly" // returns NaN
사용 === 비교
==비교 연산자는 비교 전에 항상 (일치하는 유형으로) 변환합니다 .
연산자 는 ===값과 유형을 강제로 비교합니다.
예시
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
매개변수 기본값 사용
누락된 인수로 함수를 호출하면 누락된 인수의 값이 로 설정됩니다
undefined.
정의되지 않은 값은 코드를 손상시킬 수 있습니다. 인수에 기본값을 할당하는 것은 좋은 습관입니다.
예시
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
ECMAScript 2015 는 함수 정의에서 기본 매개변수를 허용합니다.
function (a=1, b=1) { /*function code*/ }
함수 매개변수에서 함수 매개 변수 및 인수에 대해 자세히 알아보십시오.
기본값으로 스위치 종료
항상 switch진술을 끝내십시오 default. 필요없다고 생각해도.
예시
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";
}
숫자, 문자열 및 부울을 객체로 사용하지 마십시오.
항상 숫자, 문자열 또는 부울을 기본 값으로 취급하십시오. 물건이 아닙니다.
이러한 유형을 객체로 선언하면 실행 속도가 느려지고 불쾌한 부작용이 발생합니다.
예시
let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.
또는 더 나쁜:
예시
let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.
eval() 사용을 피하십시오
이 eval()함수는 텍스트를 코드로 실행하는 데 사용됩니다. 거의 모든 경우에 사용할 필요가 없습니다.
임의의 코드를 실행할 수 있기 때문에 보안 문제도 나타납니다.