[JS] Airbnb 스타일 가이드 12 - 15.

참고

airbnb/javascript

 

• 더 사용이 잦을 것으로 보이는 항목부터 실습하였음.
• 아래의 내용은 '모든 JS 개발자가 이렇게 한다!'가 아닌 Airbnb의 작성 가이드를 repl.it에서 따라한 결과(다 해보진 않음)
  • 적절히 참고할 것 :D

 

12. Properties

• Use dot notation when accessing properties.
  • property에 접근할 때는 온점(.)을 사용합니다.

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

• Use subscript notation [] when accessing properties with a variable.
  • 변수를 사용하여 property에 접근하는 경우, 대괄호[]를 사용합니다.

const luke = {
  jedi: true,
  age: 28,
};

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp('jedi');

 

13. Variables

• Always use const to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.
  • 변수 선언시에는 항상 const를 사용합니다. 그렇지 않을 경우 전역 변수로 선언됩니다.
  • 우리는 전역(Global) 네임스페이스를 오염(polluting)시키지 않기를 원합니다. 캡틴 플래닛은 우리에게 이를 경고한 바 있습니다.
    • (Global pollution = 지구 오염을 이용한 말장난이 아닐까 함.)

// bad
superPower = new SuperPower();

// good
const superPower = new SuperPower();

I warned you!

• Use one const declaration per variable.
  • 변수당 각각의 const 선언을 사용합니다.
  • 이는 간단히 새 변수를 추가하도록 하며, 쉼표를 다른 글자(; 등)로 바꾸어버리는 것을 걱정할 필요가 없습니다.

// bad
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

• Group all your consts and then group all your lets.
  • 우선 const를 모아 작성하고 let을 모아 작성합니다.
  • const, let, const, const, let ... 보다 const, const, const, let, let ... 식으로 선언 하라는 의미로 보입니다.
  • 이전에 할당한 변수에 대해 나중에 새 변수를 추가하는 경우 헷갈리지 않기 때문입니다.

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

• Assign variables where you need them, but place them in a reasonable place.
  • 변수는 필요한 장소에서 선언합니다.
  • let과 const는 함수 스코프가 아닌 블록 스코프이기 때문입니다.

// good
function() {
  test();
  console.log('doing stuff..');

  //..other stuff..

  const name = getName();

  if (name === 'test') {
    return false;
  }

  return name;
}

// bad - unnecessary function call
function(hasName) {
  const name = getName(); 
  // hasName의 값에 따라 사용하지 않을 수도 있는 값을 위해 함수를 너무 일찍 호출합니다.

  if (!hasName) {
    return false;
  }

  this.setFirstName(name);

  return true;
}

// good
function(hasName) {
  if (!hasName) {
    return false;
  }

  const name = getName();
  this.setFirstName(name);

  return true;
}

 

14. Hoisting

• var declarations get hoisted to the top of their scope, their assignment does not.
  • var 선언은 scope 최상단으로 호이스팅되나, 변수에 할당된 값은 그렇지 않습니다.

console.log(var1);
var var1 = 123;

/* 실행 결과
undefined
// var로 선언된 var1 변수 자체는 최상단으로 hoisting되었으나, 할당된 값인 123은 그렇지 않습니다.
// 즉, 위의 코드는 실제로는 다음과 같이 실행됩니다.
var var1;
console.log(var1);
var1 = 123;
// let 또는 const로 선언한 변수는 ReferenceError를 발생시킵니다.
*/

• Anonymous function expressions hoist their variable name, but not the function assignment.
• Named function expressions hoist the variable name, not the function name or the function body.
  • 함수 또한 함수식이 할당되기 전의 변수만이 호이스팅됩니다.

function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function() {
    console.log('anonymous function expression');
  };
}

• Function declarations hoist their name and the function body.
  • 함수 선언식은 전체가 호이스팅됩니다.

function example() {
  superPower(); // => Flying

  function superPower() {
    console.log('Flying');
  }
}

 

15. Comparison Operators & Equality

• Use === and !== over == and !=.
  • ==이나 != 보다 === / !==을 사용합니다.
  • 느슨한 비교보다 엄격한 비교의 사용을 권장하는 것으로 보입니다.
• Conditional statements such as the if statement evaluate their expression using coercion with the ToBoolean abstract method and always follow these simple rules:
  • if 문과 같은 조건식은 다음과 같이 판정합니다.
  • Object : true
  • undefined : false
  • null : false
  • Boolean : true / false(값에 따름)
  • Numbers : 0 / NaN일 경우 false, 그 이외에는 true
  • Strings : ''일 경우 false, 그 이외에는 true

if ([0]) {
  // true로 평가됨
  // An array is an object, objects evaluate to true
}

if([0]) {
  console.log('hello!');
}

/* 실행 결과
hello!
*/

• Use shortcuts.
  • 단축하여 작성합니다.

// bad
if (name !== '') {
  // ...stuff...
}

// good
if (name) {
  // ...stuff...
}

// bad
if (collection.length > 0) {
  // ...stuff...
}

// good
if (collection.length) {
  // ...stuff...
}