ES6 화살표 기능에서 반환문을 사용해야 하는 경우

ES6 화살표 기능에서 반환문을 사용해야 하는 경우

새로운 ES6 화살표 기능은 다음과 같습니다.return일부 상황에서는 암시적입니다.

식은 해당 함수의 암시적 반환 값이기도 합니다.

어떤 경우에 사용해야 합니까?returnES6 화살표 기능 포함?

잭슨은 비슷한 질문에 부분적으로 답변했습니다.

암묵적인 반환이지만, 블록이 없는 경우에만 반환됩니다.

• 이는 한 줄이 여러 줄로 확장되고 프로그래머가 추가하는 것을 잊어버릴 때 오류가 발생합니다.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;
}

여기서 우리는 익명 함수를 반환하는 함수를 정의합니다."이상적인" 비트는 외부 함수에 대한 함수 본체(((bar) => ...로 시작하는 부분)가 시각적으로 "블록"처럼 보이지만 실제로는 그렇지 않다는 것입니다.그렇지 않기 때문에 암묵적인 반환이 시작됩니다.

랩의 실행 방법은 다음과 같습니다.

// 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'));

제가 이해했는지 확인하기 위해 이것을 푸는 방법은 기능을 "축소 해제"하는 것이었습니다.

여기 첫 번째 코드 블록의 의미론적 등가물이 있습니다. 단순히 랩 본문()을 명시적으로 반환하게 합니다.이 정의는 위와 동일한 결과를 생성합니다.여기서 점들이 연결됩니다.위의 첫 번째 코드 블록과 아래의 코드 블록을 비교하면 화살표 함수 자체가 블록이 아닌 식으로 처리되며 암시적인 반환이 있음이 분명합니다.

// 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;
  };
};

결국, 제 코드를 읽어야 할 다른 사람들과 미래의 저를 위해, 저는 꽤 많은 생각(그리고 저의 경우 실험)이 필요한 화살표 버전보다, 언뜻 보기에 시각적으로 이해할 수 있는 비화살표 버전을 선호한다고 생각합니다.

화살표 함수를 사용하면 암묵적인 반환이 가능합니다. 값은 다음을 사용하지 않고 반환됩니다.return 키워드

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

const myFunction = () => 'test'

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

개체를 반환하는 또 다른 예(괄호 안에 있는 괄호를 괄호 안에 감아서 래핑 함수 본문 괄호로 간주되지 않도록 해야 함):

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

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

화살표 함수에서 괄호 {} 및 반환 키워드를 생략해도 됩니다. (1) 반환 전에 코드(예: 할당 문)가 없고 (2) 단일 엔티티를 반환하는 경우 [참고:단일 도면요소는 여러 줄일 수 있습니다.그렇다면 아래 예제와 같은 정규 괄호()만 있으면 됩니다.

posts.map(post => (
  <li key={post.id}>
    {post.title}
  </li>
))

언급URL : https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions