JS(ES6+) 개발자가 알아야 할 50가지 이상의 힌트(9부)

안녕하세요 여러분. 여기 StormyTalent가 다시 있습니다!
그리고 오늘 우리는 JS 개발자가 알아야 할 몇 가지 힌트를 더 볼 것입니다.

1. 명명 규칙
단일 문자 이름을 피하십시오. 당신의 이름을 설명하십시오.

// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}

개체, 함수 및 인스턴스의 이름을 지정할 때 camelCase를 사용하십시오.

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

생성자나 클래스의 이름을 지정할 때만 PascalCase를 사용하십시오.

// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

후행 또는 선행 밑줄을 사용하지 마십시오.

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';

// good, in environments where WeakMaps are available
// see https://kangax.github.io/compat-table/es6/#test-WeakMap
const firstNames = new WeakMap();
firstNames.set(this, 'Panda');

이에 대한 참조를 저장하지 마십시오. 화살표 기능 또는 Function#bind를 사용하십시오.

// bad
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}

// bad
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}

// good
function foo() {
  return () => {
    console.log(this);
  };
}

기본 파일 이름은 기본 내보내기 이름과 정확히 일치해야 합니다.

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;

// file 2 contents
export default function fortyTwo() { return 42; }

// file 3 contents
export default function insideDirectory() {}

// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export

// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly

// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js

함수를 내보낼 때 camelCase를 사용하십시오. 파일 이름은 함수 이름과 동일해야 합니다.

function makeStyleGuide() {
  // ...
}

export default makeStyleGuide;

생성자/클래스/싱글톤/함수 라이브러리/베어 객체를 내보낼 때 PascalCase를 사용하십시오.

const AirbnbStyleGuide = {
  es6: {
  },
};

export default AirbnbStyleGuide;

약어와 이니셜은 항상 모두 대문자이거나 모두 소문자여야 합니다.

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// also good
const httpRequests = [
  // ...
];

// best
import TextMessageContainer from './containers/TextMessageContainer';

// best
const requests = [
  // ...
];

선택적으로 상수는 (1) 내보내고, (2) const이고(재할당할 수 없음), (3) 프로그래머가 상수(및 중첩 속성)를 절대 변경하지 않을 것이라고 신뢰할 수 있는 경우에만 선택적으로 대문자로 지정할 수 있습니다.

// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// ---

// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';

// better in most cases
export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
  KEY: 'value'
};

// good
export const MAPPING = {
  key: 'value'
};

이 자료를 읽고 약간의 영감을 얻으면 기쁠 것입니다.