자바스크립트 코딩 패턴

 

 

생각없이 코딩하지말고 효율적인 코딩 방법을 생각하면서 개발해야겠다.
스크립트 디자인 패턴 찾다가 곁다리로.
https://joshua1988.github.io/web-development/javascript/javascript-best-practices/
여기서 나한테 필요하다고 생각하는 것들만 선별해서 가져왔다.

1. 삼항연산자

변수나 실행함수로 값을 받은적이 없어서 기록해둔다.

//일반
var isArthur = true;
var weapon;

if(isArthur) {
  weapon = "Excalibur";
} else {
  weapon = "Longsword";
}

//삼항연산자
var weapon = isArthur ? "Excalibur" : "Longsword";

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

// 즉시 실행함수로 값을 받는 경우
isArthur && isKing ? function () {
                        // ...
                     }();
                     :
                     function () {
                        // ...
                     }();

2. Switch

if else와 switch의 차이점은 순차적으로 if문을 도느냐, 바로 case문에 해당하는 부분으로 가느냐 차이다. 순차적으로 if문을 돌 필요가 없을 때는 switch문을 사용하는게 효율적이다.

3. Loop

메모리 관점에서 일반적인 for문의 연산 순서

1. i 값 탐색
2. treasureChest 객체 탐색
3. necklaces 속성 탐색
4. necklaces 속성의 배열 인덱스 탐색
5. length 프로퍼티 검색

treasureChest = {
  necklaces: ["A", "B", "C", "D"];
};

for (var i = 0; i < treasureChest.necklaces.length; i++) {
  console.log(treasureChest.necklaces[i]);
}

//////////////////////////
//1. length property 를 한번만 접근 (기존 for 문은 반복시 마다 접근)
var x = treasureChest.necklaces.length;
for (var i = 0; i < x; i++) {
    console.log(treasureChest.necklaces[i]);
}

// 2. for 문의 초기 선언문 쪽에서 x 값을 선언하면, 전역 변수로 var x 를 선언하지 않아도 되어 메모리가 더 효율적이게 된다.
for (var i = 0, x = treasureChest.necklaces.length; i < x; i++) {
  console.log(treasureChest.necklaces[i]);
}

// 3. 각 반복 싸이클마다 treasureChest 객체의 속성에 접근을 할 필요가 없다.
var list = treasureChest.necklaces;
for (var i = 0, x = treasureChest.necklaces.length; i < x; i++) {
  console.log(list[i]);
}

4. list 배열 DOM 요소 append

list를 배열로 갖는 DOM 요소에 append 를 이용하여 DOM을 추가하면 전체 리스트가 reflow된다. 성능에 악영향.

성능 향상을 위해 Fragment를 사용한다.

var fragment = document.createDocumentFragment();
fragment.appendChild(element);
list.appendChild(fragment);

5. var

var a = 1;
var b = "hello";
var c = ["a","b","c"];

// 코드의 가독성이 높아지고, 간결하다.

var a = 1,
    b = "hello",
    c = ["a","b","c"];

6. Sttring 합치기

문자열 길이에 따라 짧을 때는 += 성능이 좋고, 길고, 문자열이 배열안에 리스트 형태로 저장되어있을 때는 join 메서드가 성능이 우월하다.

var page = "";
for (var i = 0, x =  newPageBuild.length ; i < x ; i++) {
  page += newPageBuild[i];
}

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

7. 자바스크립트 잘 까먹는 것들 정리

1. delete & splice 연산자 in 배열

배열에서 delete 를 사용하면 요소의 값만 undefined 로 변경하고, 해당 요소 index 를 지우지는 않는다.

var arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, undefined, 3]

//해당 요소를 아예 잘라내서 없앤다.
var arr = [1, 2, 3];
arr.splice(1, 1);
console.log(arr); // [1, 3]

2. 함수 호이스팅

자바스크립트 엔진 관점에서 호이스팅을 적용해 실행되는 코드 순서가 바뀔 수 있다.

add(2, 3); // add is not a function
var add = function (a, b) {
  return a + b;
};
add(4, 5);

// 이와 같이 실행순서가 바뀐다.
var add;
add(2, 3);
add = function (a, b) {
  return a + b;
};
add(4, 5);

// 그래서 add is not a function 결과가 나온다.

3. 생성자 함수 구분법

대부분의 오픈소스 라이브러리에서 사용하는 패턴

function Func(arg) {
  // instanceof 로 생성자 함수임을 확인
  if (!(this instanceof arguments.callee)) // 'this instanceof 함수명' 도 가능
    return new Func(arg);
  this.value = arg || 0;
}

var a = new Func(100);
var b = Func(200);
console.log(a.value);
console.log(b.value);