성능 향상을 위한 자바스크립트 코딩 패턴

|
1. Ternary Conditional (삼항 연산자)
// 기본 형태
var weapon = isArthur ? "Excalibur" : "Longsword";

// 두개 이상의 변수를 이용하여 값을 받는 경우
isArthur && isKing ? (weapon = "Ex", helmet = "Goose")
                     :
                     (weapon = "ln", helmet = "Iron")

// 즉시 실행함수로 값을 받는 경우
isArthur && isKing ? function () {
                        // ...
                     }();
                     :
                     function () {
                        // ...
                     }();
                     
2. String Concatenation
문자열의 길이에 따라 += 연산자와 join() 메서드의 성능차이가 발생한다.
문자열이 짧을 떄 : += 연산자가 성능이 더 빠르다.
문자열이 길고, 문자열이 배열안에 리스트 형태로 저장되어 있을 때 : join("\n") 메서드가 성능이 우월하다.
var page = "";
for (var i = 0, x =  newPageBuild.length ; i < x ; i++) {
  page += newPageBuild[i];
}

// join() 메서드 활용
page = newPageBuild.join("\n");

3. Switch Blocks
반복되는 if else 문과 switch 문의 차이점은, 순차적으로 모든 if 문을 도느냐.
아니면 해당하는 case 로 바로 가서 불필요한 연산을 줄이느냐의 차이이다.
var regimnet = 3;

if (regiment == 1) {
  ...
} else if (regiment == 2) {
  ...
} else if (regiment == 3) { // 앞 1,2 를 거쳐 3으로 온다.
  ...
}

switch (regiment) {
  case 1:
    ...
  case 2:
    ...
  case 3: // 3으로 바로 온다.
    ...
}

4. Logical Assignment 1 (OR)
OR 연산자 : “falsy” 하지 않은 가장 첫번째 마주친 값을 갖는다.
// 잘못된 OR 연산자 사용 예
var result1 = 42 || undefined; // undefined 를 절대로 마주치지 않는다.
var result2 = ["Sweet", "array"] || 0; // 0을 절대로 마주치지 않는다.
var result3 = {type: "ring", stone: "diamond"} || ""; // "" 를 절대로 맞추지지 않는다.

// 위를 고쳐보면,
var result1 = undefined || 42;
var result2 = 0 || ["Sweet", "array"]; // 0을 절대로 마주치지 않는다.
var result3 = "" || {type: "ring", stone: "diamond"}; // "" 를 절대로 맞추지지 않는다.

5. Logical Assignment 1 (AND)
OR 연산자와는 다르게 두개의 “truthy” 값이 있으면, 마지막으로 확인한 truthy 값이 리턴된다.
“falsy” 값의 경우에는 OR 연산자와 동일하게 동작한다.
var result1 = "King" && "Arthur";
console.log(result1); //Arthur
var result2 = "Arthur" && "King";
console.log(result2); // King

'JavaScript' 카테고리의 다른 글

난독화  (0) 2021.04.05
Coding Convention  (0) 2021.04.02
favicon.ico 404 Not found 에러  (0) 2020.08.25
Map vs. Array  (0) 2020.07.31
formData, XMLHttpRequset, HTTP Content-Disposition  (0) 2020.06.01
And