[javascript] es6 Arrow Functions에서 언제`return`을 사용해야합니까?

Program / 글쓴이

새로운 es6 화살표 기능 은 return일부 상황에서는 암시 적이 라고 말합니다 .

또한 표현식은 해당 함수의 내재 된 반환 값입니다.

returnes6 화살표 기능과 함께 사용해야하는 경우는 무엇 입니까?

답변

Jackson은 이와 비슷한 질문에 부분적으로 답변했습니다 .

암시 적 반환 (블록이없는 경우에만).

  • 한 줄짜리가 여러 줄로 확장되고 프로그래머가을 추가하는 것을 잊었을 때 오류가 발생합니다 return.
  • 암시 적 반환은 구문 상 모호합니다. (name) => {id: name}객체를 반환합니다 {id: name}… 맞습니까? 잘못된. 를 반환합니다 undefined. 이 중괄호는 명시 적 블록입니다. id:라벨입니다.

여기에 블록 정의를 추가합니다 .

블록 문 (또는 다른 언어의 복합 문)은 0 개 이상의 문을 그룹화하는 데 사용됩니다. 블록은 한 쌍의 중괄호로 구분됩니다.

예 : 

// returns: undefined
// explanation: an empty block with an implicit return
((name) => {})()

// returns: 'Hi Jess'
// explanation: no block means implicit return
((name) => 'Hi ' + name)('Jess')

// returns: undefined
// explanation: explicit return required inside block, but is missing.
((name) => {'Hi ' + name})('Jess')

// returns: 'Hi Jess'
// explanation: explicit return in block exists
((name) => {return 'Hi ' + name})('Jess')

// returns: undefined
// explanation: a block containing a single label. No explicit return.
// more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label
((name) => {id: name})('Jess')

// returns: {id: 'Jess'}
// explanation: implicit return of expression ( ) which evaluates to an object
((name) => ({id: name}))('Jess')

// returns: {id: 'Jess'}
// explanation: explicit return inside block returns object
((name) => {return {id: name}})('Jess')

답변

이 엄지 손가락 규칙을 이해합니다 …

효과적으로 변형되는 함수 (한 줄의 인수 조작)의 경우 반환이 암시 적입니다.

후보자는 다음과 같습니다.

// square-root 
value => Math.sqrt(value)

// sum
(a,b) => a+b

다른 작업 (블록이 필요한 라이너가 두 개 이상인 경우 반환은 명시 적이어야 함)

답변

또 다른 경우가 있습니다.

React에서 기능 컴포넌트를 작성할 때 괄호를 사용하여 내재적으로 리턴 된 JSX를 랩핑 할 수 있습니다.

const FunctionalComponent = () => (
  <div>
    <OtherComponent />
  </div>
);

답변

나에게 약간의 문제가 발생한 또 다른 사례가 있습니다. 

// the "tricky" way
const wrap = (foo) => (bar) => {
  if (foo === 'foo') return foo + ' ' + bar;
  return 'nofoo ' + bar;
}

여기서 “tricky”비트는 외부 함수 ((bar) => …로 시작하는 부분)의 함수 본문이 시각적으로 “block”처럼 보이지만 그렇지 않다는 것입니다. 그것이 아니기 때문에, 암시 적 귀환은 시작됩니다.

다음은 랩이 실행되는 방법입니다.

// use wrap() to create a function withfoo()
const withfoo = wrap('foo');
// returns: foo bar
console.log(withfoo('bar'));

// use wrap() to create a function withoutfoo()
const withoutfoo = wrap('bar');
// returns: nofoo bar
console.log(withoutfoo('bar'));

내가 이것을 풀고 그 방법을 기능화하기 위해 이해했다.

다음은 첫 번째 코드 블록과 의미가 동일하며 wrap () 본문을 명시 적으로 반환하도록합니다. 이 정의는 위와 동일한 결과를 생성합니다. 이것은 점들이 연결되는 곳입니다. 위의 첫 번째 코드 블록을 아래의 코드 블록과 비교하면 화살표 함수 자체가 블록이 아닌 표현식으로 취급되며 암시적인 return이 있음이 분명합니다 .

// the explicit return way
const wrap = (foo) => {
  return (bar) => {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  }
}

완전 화살표 화되지 않은 랩 버전은 다음과 같으며, 지방 화살표 버전만큼 컴팩트하지는 않지만 이해하기가 훨씬 쉽습니다.

// the "no arrow functions" way
const wrap = function(foo) {
  return function(bar) {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  };
};

결국, 내 코드를 읽어야 할 미래의 사람들을 위해, 나는 화살표가 아닌 화살표 버전이 아닌 언뜻보기에 시각적으로 이해할 수있는 비 화살표 버전을 선호한다고 생각합니다. 생각 (그리고 내 경우 실험) grok.

답변

화살표 함수를 사용하면 암시 적 반환을 할 수 있습니다. return키워드 를 사용하지 않고도 값이 반환됩니다 .

함수 본문에 온라인 문장이있을 때 작동합니다.

const myFunction = () => 'test'

console.log(myFunction()) //'test'

스 니펫 확장

또 다른 예는 객체를 반환하는 것입니다 (래핑 괄호 본문 괄호로 간주되지 않도록 중괄호를 괄호로 묶어야합니다).

const myFunction = () => ({value: 'test'})

console.log(myFunction()) //{value: 'test'}

스 니펫 확장

답변