Arrow함수(Arrow Functions)

Arrow함수(Arrow Functions)

• When you must use function expressions (as when passing an anonymous function), use arrow function notation.

• (무명함수를 전달하는 듯한)함수식을 이용하는 경우 arrow함수 표기를 이용해 주십시오.

  Why? It creates a version of the function that executes in the context of this, which is usually what you want, and is a more concise syntax.

  왜? arrow함수는 그 context의 this 에서 실행하는 버전의 함수를 작성합니다. 이것은 통상 기대대로의 동작을 하고, 보다 간결한 구문이기 때문입니다.

  Why not? If you have a fairly complicated function, you might move that logic out into its own function declaration.

  이용해야만 하지 않나？ 복잡한 함수에서 로직을 정의한 함수의 바깥으로 이동하고 싶을때.

  // bad
  [1, 2, 3].map(function (x) {
    const y = x + 1;
    return x * y;
  });
  
  // good
  [1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
  });

• If the function body consists of a single expression, feel free to omit the braces and use the implicit return. Otherwise use a return statement.

• 함수의 본체가 하나의 식으로 구성된 경우에는 중괄호({})를 생략하고 암시적 return을 이용하는것이 가능합니다. 그 외에는 return 문을 이용해 주십시오.

  Why? Syntactic sugar. It reads well when multiple functions are chained together.

  왜? 문법 설탕이니까요. 복수의 함수가 연결된 경우에 읽기 쉬워집니다.

  Why not? If you plan on returning an object.

  사용해야만 하지 않아? 오브젝트를 반환할때.

  // good
  [1, 2, 3].map(number => `A string containing the ${number}.`);
  
  // bad
  [1, 2, 3].map(number => {
    const nextNumber = number + 1;
    `A string containing the ${nextNumber}.`;
  });
  
  // good
  [1, 2, 3].map(number => {
    const nextNumber = number + 1;
    return `A string containing the ${nextNumber}.`;
  });

• In case the expression spans over multiple lines, wrap it in parentheses for better readability.

• 식이 복수행에 걸쳐있을 경우는 가독성을 더욱 좋게하기 위해 소괄호()로 감싸 주십시오.

  Why? It shows clearly where the function starts and ends.

  왜? 함수의 개시와 종료부분이 알기쉽게 보이기 때문입니다.

  // bad
  [1, 2, 3].map(number => 'As time went by, the string containing the ' +
    `${number} became much longer. So we needed to break it over multiple ` +
    'lines.'
  );
  
  // good
  [1, 2, 3].map(number => (
    `As time went by, the string containing the ${number} became much ` +
    'longer. So we needed to break it over multiple lines.'
  ));

• If your function only takes a single argument, feel free to omit the parentheses.

• 함수의 인수가 하나인 경우 소괄호()를 생략하는게 가능합니다.

  Why? Less visual clutter.

  왜? 별로 보기 어렵지 않기 때문입니다.

  // good
  [1, 2, 3].map(x => x * x);
  
  // good
  [1, 2, 3].reduce((y, x) => x + y);