함수(Functions)

함수(Functions)

• Use function declarations instead of function expressions.

• 함수식 보다 함수선언을 이용해 주십시오.

  Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use Arrow Functions in place of function expressions.

  왜? 이름이 부여된 함수선언은 콜스택에서 간단하게 확인하는 것이 가능합니다. 또한 함수선언은 함수의 본체가 hoist 되어집니다. 그에 반해 함수식은 참조만이 hoist 되어집니다. 이 룰에 의해 함수식의 부분을 항상 Arrow함수에서 이용하는것이 가능합니다.

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

•  Function expressions:

• 함수식

  // immediately-invoked function expression (IIFE)
  // 즉시 실행 함수식(IIFE)
  (() => {
    console.log('Welcome to the Internet. Please follow me.');
  })();

• Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears.

• 함수이외의 블록 (if나 while같은) 안에서 함수를 선언하지 마십시오. 변수에 함수를 대입하는 대신 브라우저들은 그것을 허용하지만 모두가 다르게 해석합니다.

• Note: ECMA-262 defines a block as a list of statements. A function declaration is not a statement. Read ECMA-262's note on this issue.

• 주의: ECMA-262 사양에서는 block 은 statements의 일람으로 정의되어 있지만 함수선언은 statements 가 아닙니다. Read ECMA-262's note on this issue.

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

•  Never name a parameter arguments. This will take precedence over the arguments object that is given to every function scope.

• 절대 파라메터에 arguments 를 지정하지 마십시오. 이것은 함수스코프에 전해지는 arguments 오브젝트의 참조를 덮어써 버립니다.

  // bad
  function nope(name, options, arguments) {
    // ...stuff...
  }
  
  // good
  function yup(name, options, args) {
    // ...stuff...
  }

•  Never use arguments, opt to use rest syntax ... instead.

• 절대 arguments 를 이용하지 마십시오. 대신에 rest syntax ... 를 이용해 주십시오.

  Why? ... is explicit about which arguments you want pulled. Plus rest arguments are a real Array and not Array-like like arguments.

  왜? ... 을 이용하는것으로 몇개의 파라메터를 이용하고 싶은가를 확실하게 할 수 있습니다. 더해서 rest 파라메터는 arguments 와 같은 Array-like 오브젝트가 아닌 진짜 Array 입니다.

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

• Use default parameter syntax rather than mutating function arguments.

• 함수의 파라메터를 변이시키는 것보다 default 파라메터를 이용해 주십시오.

  // 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가 falsy 하다면 바라는데로 오브젝트가 설정됩니다.
    // 하지만 미묘한 버그를 일으킬지도 모릅니다.
    opts = opts || {};
    // ...
  }
  
  // still bad
  function handleThings(opts) {
    if (opts === void 0) {
      opts = {};
    }
    // ...
  }
  
  // good
  function handleThings(opts = {}) {
    // ...
  }

• Avoid side effects with default parameters.

• side effect가 있을 default 파라메터의 이용은 피해 주십시오.

  Why? They are confusing to reason about.

  왜? 혼란을 야기하기 때문입니다.

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

•  Always put default parameters last.

• 항상 default 파라메터는 뒤쪽에 두십시오.

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

• Never use the Function constructor to create a new function.

• 절대 새 함수를 작성하기 위해 Function constructor를 이용하지 마십시오.

  Why? Creating a function in this way evaluates a string similarly to eval(), which opens vulnerabilities.

  왜? 이 방법으로 문자열을 평가시켜 새 함수를 작성하는것은 eval() 과 같은 수준의 취약점을 일으킬 수 있습니다.

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