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

오늘은 JS 사용법에 대한 팁을 좀 더 알아보도록 하겠습니다.
끈
문자열에는 작은따옴표 ''를 사용하십시오.

// bad
const name = "Capt. Janeway";

// bad - template literals should contain interpolation or newlines
const name = `Capt. Janeway`;

// good
const name = 'Capt. Janeway';

줄이 100자를 초과하는 문자열은 문자열 연결을 사용하여 여러 줄에 걸쳐 작성하면 안 됩니다.

// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// bad
const errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

// good
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

프로그래밍 방식으로 문자열을 작성할 때 연결 대신 템플릿 문자열을 사용하십시오.

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

문자열에서 불필요하게 문자를 이스케이프하지 마십시오.

// bad
const foo = '\'this\' \i\s \"quoted\"';

// good
const foo = '\'this\' is "quoted"';
const foo = `my name is '${name}'`;

기능
함수 선언 대신 명명된 함수 표현식을 사용하십시오.

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

// bad
const foo = function () {
  // ...
};

// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

즉시 호출된 함수 표현식을 괄호로 묶습니다.

// immediately-invoked function expression (IIFE)
(function () {
  console.log('Welcome to the Internet. Please follow me.');
}());

참고: ECMA-262는 블록을 명령문 목록으로 정의합니다. 함수 선언은 명령문이 아닙니다.

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

매개변수 인수에 이름을 지정하지 마십시오. 이것은 모든 함수 범위에 지정된 인수 객체보다 우선합니다.

// bad
function foo(name, options, arguments) {
  // ...
}

// good
function foo(name, options, args) {
  // ...
}

인수를 사용하지 말고 대신 나머지 구문을 사용하도록 선택하십시오.

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}

함수 인수를 변경하는 대신 기본 매개변수 구문을 사용하십시오.

// really bad
function handleThings(opts) {
  // No! We shouldn’t mutate function arguments.
  // Double bad: if opts is falsy it'll be set to an object which may
  // be what you want but it can introduce subtle bugs.
  opts = opts || {};
  // ...
}

// still bad
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
}

// good
function handleThings(opts = {}) {
  // ...
}

기본 매개변수로 부작용을 피하십시오.

var b = 1;
// bad
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3

항상 기본 매개변수를 마지막에 두십시오.

// bad
function handleThings(opts = {}, name) {
  // ...
}

// good
function handleThings(name, opts = {}) {
  // ...
}

Function 생성자를 사용하여 새 함수를 만들지 마십시오.

// bad
var add = new Function('a', 'b', 'return a + b');

// still bad
var subtract = Function('a', 'b', 'return a - b');

함수 서명의 간격.

// bad
const f = function(){};
const g = function (){};
const h = function() {};

// good
const x = function () {};
const y = function a() {};

매개변수를 변경하지 마십시오.

// bad
function f1(obj) {
  obj.key = 1;
}

// good
function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}

매개변수를 재할당하지 마십시오.

// bad
function f1(a) {
  a = 1;
  // ...
}

function f2(a) {
  if (!a) { a = 1; }
  // ...
}

// good
function f3(a) {
  const b = a || 1;
  // ...
}

function f4(a = 1) {
  // ...
}

가변 함수를 호출하려면 확산 구문 ...을 사용하는 것이 좋습니다.

// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);

// good
const x = [1, 2, 3, 4, 5];
console.log(...x);

// bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));

// good
new Date(...[2016, 8, 5]);

여러 줄 서명 또는 호출이 있는 함수는 이 가이드의 다른 모든 여러 줄 목록과 마찬가지로 들여쓰기해야 합니다. 각 항목은 한 줄에 하나씩, 마지막 항목에는 후행 쉼표가 있습니다.

// bad
function foo(bar,
             baz,
             quux) {
  // ...
}

// good
function foo(
  bar,
  baz,
  quux,
) {
  // ...
}

// bad
console.log(foo,
  bar,
  baz);

// good
console.log(
  foo,
  bar,
  baz,
);

시간 내 줘서 고마워.
이 블로그가 귀하의 개발에 강력한 영감을 줄 수 있기를 바랍니다.
다음 시간에는 JS의 Arrow Functions에 대해 전개하겠습니다.