[JS] [번역] 40가지의 유용한 JavaScript팁, 트릭과 모범사례
이 글에서는 브라우저 / 엔진 또는 SSJS (Server Side JavaScript) 인터프리터에 관계없이 모든 JavaScript 개발자가 알아야 할 JavaScript 팁, 트릭 및 모범 사례를 제공합니다.
이 글의 코드 스니펫은 V8 JavaScript 엔진 (V8 3.20.17.15)을 사용하는 최신 Chrome 버전 30에서 테스트되었습니다.
1. 변수를 처음으로 선언 할 때마다 var
를 붙인다
선언되지 않은 변수는 자동으로 전역 변수로 정의된다. 전역변수를 피하자!
2. ==
대신에 ===
사용
== 및 != 연산자는 필요한 경우 자동 유형 변환을 수행한다
=== 및 !== 연산자는 변환을 수행하지 않고, 값과 유형을 비교한다. (그래서 ==보다 빠르다, == 및 != 연산자는 되도록 사용하지 않도록하자! )
1 | [10] === 10 // is false |
3. undefined
, null
, 0
, false
, NaN
, ''
(empty string) 는 논리 값에 False
4. 세미콜론을 사용하여 행 구분
세미콜론을 사용하여 라인종료하는 것이 좋다. 대부분의 경우 JavaScript 파서에 의해 삽입되기 때문에 잊어 버리면 경고하지 않는다. 세미콜론을 왜 사용해야하는지에 대한 자세한 내용은… 참조
5. 객체 생성자 (object constructor) 생성
1 | function Person(firstName, lastName) { |
6. typeof
, instanceof
, constructor
를 사용할 때 주의
- typeof : JavaScript 단항 연산자는 변수의 기본 유형을 나타내는 문자열을 반환하는 데 사용되며
typeof null
“객체”를 반환 한다는 사실을 잊지 말고 대부분의 객체 유형 (Array, Date 등)에서도 “객체”를 반환한다. - constructor : 내부 프로토 타입 속성의 속성으로 코드에 의해 재정의 될 수 있습니다.
- instanceof : 모든 프로토 타입 체인을 검사하는 또 다른 JavaScript 연산자입니다. 생성자가 발견되면 true를 반환하고 그렇지 않으면 false를 반환합니다.
1 | var arr = ["a", "b", "c"]; |
7. 자신을 실행하는 Function (자체 호출) 만들기
이를 종종 자체 호출 익명 함수, 즉시 실행 함수 또는 IIFE (Immediately Invoked Function Expression)라고합니다. 이 함수는 함수를 작성할 때 자동으로 실행되며 다음과 같은 형식을 갖습니다.
1 | (function () { |
8. 배열에서 임의의 항목 가져오기
1 | var items = [12, 548, "a", 2, 5478, "foo", 8852, , "Doe", 2145, 119]; |
9. 특정 범위의 난수 가져오기
이 코드 조각은 테스트를 위해 더미 데이터를 생성하는 예를 들어 월급의 하한과 상한을 지정하고 그 범위에서 임의의 값을 얻고 싶은 경우에 유용합니다.
10. 0부터 최대값을 갖는 배열 생성
1 | var numbersArray = [], |
11. 알파벳중에서 무작위 문자열 생성
1 | function generateRandomAlphaNum(len) { |
12. 숫자 배열 섞기
1 | var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411]; |
더 나은 옵션은 기본 정렬 JavaScript 함수를 사용하는 것보다 코드에 의해 임의의 정렬순서를 구현하는 것일 수 있다. 참조
13. 문자열 trim 함수
문자열에서 공백을 제외하는 trim 함수는 Java, C#, PHP 등 다양한 언어로 구현되어 있지만, JavaScript에는 존재하지 않는다. 그래서 String
개체에 추가할 수 있다.
14. 배열을 다른 배열에 추가
1 | var array1 = [12 , "foo" , {name "Joe"} , -2458]; |
15. arguments
객체를 배열로 반환
16. 주어진 argument
가 숫자인지 확인
17. 주어진 argument가 배열인지 확인
위 코드에서 toString() 메소드가 재정의되면, 예상한 결과를 얻지 못할 수 있다.
그래서…
18. 배열 안의 숫자의 최대 값과 최소값 얻기
1 | var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411]; |
19. 배열 비우기
20. 배열에서 item을 제거할 때 delete
사용하지 말것
배열의 item를 제거 할 때는 delete
대신 split
을 사용하자.delete
는 배열에서 item을 제외하는 것이 아니라, undefined
으로 바꾼다.
1 | var items = [12, 548, "a", 2, 5478, "foo", 8852, , "Doe", 2154, 119]; |
위 대신에 다음과 같이 사용
1 | var items = [12, 548, "a", 2, 5478, "foo", 8852, , "Doe", 2154, 119]; |
21. 배열의 length 속성을 사용하여 자르기
위의 배열을 비우기 예와 같이 length
속성을 사용하여 자를 수 있다.
1 | var myArray = [12, 222, 1000, 124, 98, 10]; |
또한 배열의 length보다 큰 값을 넣으면 배열의 길이가 변경되고, 새로운 item이 undefined
값으로 추가 된다.
배열 길이는 읽기 전용 속성이 아니다.
22. 조건 판정에 논리적 AND / OR 사용
1 | var foo = 10; |
논리적 OR은 함수 argument에 기본 값을 설정하는데 사용할 수 있다.
1 | function doSomething(arg1) { |
23. Use the map() function method to loop through an array’s items
1 | var squares = [1, 2, 3, 4].map(function (val) { |
24. 소수점 이하 N자리수 반올림
25. 부동 소수점 문제
1 | 0.1 + 0.2 === 0.3; // is false |
0.1 + 0.2 는 0.30000000000000004과 같다. IEEE 754 표준에 따라 JavaScript의 숫자는 모두 내부적으로 64bit 부동 소수점 형으로 다루어지는 것을 알 필요가 있다. 자세한 설명은 블로그 게시물 참조
toFixed()
및 버튼 toPrecision()
을 사용하면이 문제를 해결할 수 있습니다.
26. for-in 루프를 사용할 때 객체의 속성확인
이 코드 조각은 객체의 프로토타입의 속성을 열거하고 싶지 않은 경우에 편리하다.
27. 쉼표 연산자
1 | var a = 0 ; |
28. 요소의 쿼리와 계산을 필요로 하는 Cache 변수
jQuery 셀렉터의 경우는 DOM 요소를 캐시 할 수 있다.
1 | var navright = document.querySelector("#right"); |
29. isFinite()
를 지나기 전에 인수 확인하기
1 | isFinite(0 / 0); // false |
30. 배열에서 음수 인덱스 사용하지 않기
1 | var numbersArray = [1, 2, 3, 4, 5]; |
splice
에 전달 된 인수가 음수가 아닌지 확인해야 함
31. 직렬화와 역직렬화 (JSON 작업)
1 | var person = { name: "Saad", age: 26, department: { ID: 15, name: "R&D" } }; |
32. eval()
, Function
생성자 사용하지 말기
eval
이나 Function
생성자의 사용은 JavaScript 엔진이 실행가능한 소스코드로 변환해야하기 때문에 cost가 높다.
33. with()
사용하지 말기 (The Good Part)
with()
를 사용하면 전역 범위에 변수가 삽입된다. 따라서 다른 변수와 이름이 같으면 혼동을 일으켜 값을 덮어 쓸 수 있다.
34. 배열에 for-in 루프 사용하지 말기
위 대신에 다음과 같이 사용
또한, i
와 len
의 인스턴스화는 for 루프의 첫번 째 명령문에 있기 때문에 한번 실행된다. 이렇게 하는 것이 아래처럼 하는 것보다 빠르다
그 이유는 arrayNumbers
의 length를 루프마다 다시 계산하기 때문이다.
35. setTimeout()
와 setInterval()
는 문자열이 아닌 함수를 전달
setTimeOut()
또는 setInterval()
로 문자열을 전달하면 실행속도가 느린 eval
과 같은 방식으로 평가된다.
위 대신에…
를 사용
36. 일련의 if / else 대신 switch / case 문 사용
2개 이상의 case가 있을 경우, switch / case를 사용하는 편이 빠르고 우아하다. 10개 이상의 case가 있는 경우는 특히 피해야한다.
37. 숫자 범위 판정에 switch / case 사용
숫자 범위의 판정은 아래와 같이 실형 가능하다.
1 | function getCategory(age) { |
38. 주어진 객체를 프로토 타입 객체로 생성하기
줘진 객체를 프로토 타입 객체로 생성하는 함수는 다음과 같이 설명 할 수 있다.
1 | function clone(object) { |
39. HTML 이스케이프 함수
1 | function escapeHTML(text) { |
40. 반복문 내에서 try-catch-finally 절은 사용하기 말기
try-catch-finally 절은 현재 범위에 매번 새로운 변수를 생성한다.
이것은 catch 절에서 포착되는 예외를 할당하기 때문이다.
1 | var object = ["foo", "bar"], |
위 대신에 다음과 깉이 사용
1 | var object = ["foo", "bar"], |
정리
이 밖에도 팁 및 우용한 모범사례가 많이 있습니다. 만약 다른 것을 추가하는 것을 바라고, 의견이나 지적이 있으면 댓글을주세요.