나의 베스트 프랙티스 – JavaScript

1. 캐시 끄기

Firefox:
개발자 도구 열기 -> 설정 열기 (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
개발자 도구 열기 -> 설정 열기 (F1) -> "Disable cache (while DevTools is open)"

2. JS 콘솔 열어 두기

DevTools에서 콘솔 탭을 열고 그대로 열어 두세요. 그래야 1단계 설정이 계속 적용되고, 네트워크와 JS 오류도 바로 알아챌 수 있습니다.

깜빡하고 놓쳤을 때를 대비해, JS 오류를 더 잘 보여 주는 다음 플러그인도 추천합니다:

3. JavaScript: 필독서 『You Don't Know JS』

• You Don't Know JS (1st Edition)
• this를 피해야 하는 이유를 설명합니다
• JS에서 가끔 이상해 보이는 일이 왜 일어나는지 설명합니다(키워드: 렉시컬 스코프, 클로저)

4. 세미콜론

• 항상 붙이세요
• 필수는 아니지만, 예를 들어 이런 함정을 피하는 데 도움이 됩니다: Stack Overflow
• JavaScript는 자동으로 세미콜론을 넣습니다:

// you want to return 5 and have ugly formatting:
return
5

// JavaScript Interpretation:
return;
5;

5. 논리 연산자 &&와 ||

• Java에서는 a && b와 a || b가 불 대수에 따라 평가됩니다. a와 b는 불리언이어야 합니다.
• JavaScript에서는:
  • a && b는 a가 true이면 b를 반환합니다
  • a || b는 a가 false이면 b를 반환합니다

표현식도 이렇게 연결할 수 있어서, 세상에서 가장 짧은 if 문을 쓸 수 있습니다. 이른바 문법 설탕(syntactic sugar)입니다:

• isAdmin && showDeleteButton();
• (엄밀히 말하면 이건 더 이상 문(statement)이 아닙니다)

기본값을 지정할 때도 자주 쓰입니다:

• let sendNewsletter = form.getNewsletterOptIn() || false;

6. JavaScript는 참조에 의한 전달일까, 값에 의한 전달일까?

JavaScript에서는 이 부분이 흥미롭습니다. 예:

function changeStuff(a, b, c) {
    a = a * 10;
    b.item = "changed";
    c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

출력 결과는 다음과 같습니다:

10
changed
unchanged

만약 obj1이 전혀 참조가 아니라면, obj1.item을 바꿔도 함수 밖의 obj1에는 아무런 영향이 없어야 합니다.

반대로 인자가 진짜 참조라면 모든 것이 바뀌어야 합니다. num은 100이 되고, obj2.item에는 “changed”가 들어 있어야 합니다. 하지만 실제로는 num은 10 그대로이고, obj2.item도 “unchanged” 그대로입니다.

사실 전달된 요소는 값으로 전달됩니다. 다만 값으로 전달되는 그것 자체가 참조입니다. 기술적으로는 이를 공유에 의한 호출(call by sharing)이라고 합니다.

실제로 이것이 의미하는 바는 이렇습니다. 매개변수 자체를 바꾸면(num과 obj2처럼) 함수에 전달된 원래 객체에는 영향이 없습니다. 반면 매개변수의 내부 값을 바꾸면 그 변경 사항은 반영됩니다(obj1처럼).