몰랐던 패턴을 위주로 작성했다
1. 배열과 객체는 리터럴로 표기한다
객체나 배열을 생성할 때 리터럴을 사용해야 속도가 증가한다.
생성자 함수를 사용했다면, 지역 유효범위에 동일한 이름의 생성자가 있을 수도 있고, 레거시 코드를 물려받을 수도 있기 때문이다.
// Not Good
const obj = new Object();
const arr = new Array();
// Good
const obj = {};
const arr = {};2. <script> 는 <body> 하단에 표기한다
CSS나 자바스크립트 같은 외부 파일을 <head> 태그 안에 모아놓는 경우가 많은데, 이는 좋은 방법이 아니다.
브라우저는 페이지를 렌더링하는 과정에서 CSS나 자바스크립트를 만나면, 렌더링을 멈추고 이 요소들을 1)다운로드하고 2)구문을 분석하고 3)컴파일한다. 자바스크립트를 많이 사용하는 페이지일수록 눈에 띌 정도로 렌더링이 지연된다.
3. inline javascript 작성을 지양한다
아래와 같이 이벤트를 추가하는 경우, 이벤트 함수가 전역에 있어야한다(전역으로 실행)
코드와 마크업이 혼용된다 (기능과 HTML이 분리되어야함)
// NOT GOOD
<body onload="init()">
// GOOD
document.body.addEventListener('load', init);4. 에러 객체
자바스크립트에는 Error(), SyntaxError(), TypeError() 등 여러 가지 에러 생성자가 내장되어 있으며 throw문과 함께 쓰인다
사실 throw문은 어떤 객체와도 함께 쓸 수 있다
어찌됐든.. 에러 생성자를 new 없이 일반 함수로 호출해도 (ex. new Error("error") -> Error("error")) 생성자로 호출한 것과 동일하게 동작하여 에러 객체가 반환된다
5. parseInt는 두 번째 파라미터인 기수를 생략하지 않는다
parseInt는 문자열을 정수로 바꿔주는 함수인데, 첫 번째 파라미터는 문자열이고 두 번째 파라미터는 기수이다
기수가 생략될 경우 브라우저는 변환될 숫자 형식을 자체적으로 판단하며, 브라우저에 따라 다르게 해석할 수 있다
// NOT GOOD
const month = parseInt("08");
const day = parseInt("09");
// GOOD
const month = parseInt("08", 10);
const day = parseInt("09", 10);
// GOOD: 속도 측면에선 아래 연산이 더 빠름
const month = Number("08");
const day = +"09";(추가 예정)
ref
Frontend Developer