return キーワード

return を使用して、関数が最終版として生成する値を指定します。表示されます。インタープリタが return ステートメントに到達すると、そのステートメントが直ちに終了し、指定された値が関数が呼び出されたコンテキスト:

const myFunction = function() {
   return 2 + 2;
}

myFunction();
> 4

値を返す関数は、変数と同様に、その関数に含まれるデータとして効果的に扱うことができます。

const myFunction = function() {
   return 2 + 2;
}

myFunction() + myFunction();
> 8

式のない return ステートメントは、関数を終了して undefined を返します。

const myFunction = function() {
   return;
}

myFunction();
> undefined

return キーワードは関数の終了を通知するため、検出された return の後に続くコードは実行されません。

const myFunction = function() {
   return true;
   console.log( "This is a string." );
}

myFunction();
> true

また、検出された return ステートメントに続くコードでは、警告が表示される（エラーではない）開発コンソール:

const myFunction = function() {
   return true;
   console.log( "This is a string." );
}
> unreachable code after return statement

myFunction();
> true

繰り返しになりますが、これは return return ステートメントに連続して続くコードではなく、関数の実行のみに適用されます。

const myFunction = function( myParameter ) {
   if( myParameter === undefined ) {
    return "This is the result.";
   }
   return "This is the alternate result.";
}

myFunction();
> "This is the result."

myFunction( true );
> "This is the alternate result."

「ショート回路」早期の return を使用する関数では、より簡潔に単一の return ステートメントよりも多くのコードを使用できます。たとえば、次の関数は、渡された値が 5 文字以上の文字列かどうかを判断します。渡された値が文字列リテラルでない場合は、文字数をカウントするコードは不要であり、関数はすぐに false 結果を返すことができます。

function myFunction( myString ) {
   if( typeof myString !== "string" ) {
    return false;
   }
   if( myString.length >= 5 ) {
    return true;
   } else {
    return false;
   }
}

myFunction( 100 );
> false

myFunction( "St" );
> false

myFunction( "String." );
> true

矢印関数式は、矢印関数本体に 1 つの式しか含まれず、ブロック構文が含まれていない場合に、return キーワードが暗黙的に指定されるという点で独特です。

const myFunction = () => 2 + 2;

myFunction();
> 4

ブロック構文を使用して矢印関数の本体を定義する場合は、関数の本体に式が 1 つしか含まれていない場合でも、明示的な return が必要です。

const myFunction = () => { 2 + 2 };

myFunction();
> undefined

const myFunction = () => { return 2 + 2 };

myFunction();
> 4

理解度をチェックする

return の用途

関数の先頭にコードを返す。

関数の最終結果を指定する。