JavaScript map の使い方 #3

株式会社リュディアです。JavaScript でサポートしている高階関数の1つである mapメソッド（以下、map） についてまとめてみます。第3回目です。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

JavaScript map の使い方 #3 では、JavaScript map の使い方 #2 のプログラム例を題材とし、アロー関数で記述してみます。過去の記事でアロー関数についても紹介していますので、先に以下の記事を読んでから本記事を読み進めてください。

JavaScript アロー関数
JavaScript map の使い方 #1
JavaScript map の使い方 #2

JavaScript map の使い方 #2 の記述とアロー関数で書き直した記述です。もちろん同じ結果となりますし、どちらが正しい、というわけでは無いです。状況により使い分ければと思います。

function myFunction1() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ];
 
 const returnArray = inputArray.map( function( currentValue ) {
                                       return currentValue * 2;
                                     }
                                   );
 console.log( returnArray );
}

// アロー関数版
function myFunction_arrow1() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ];
 
 const returnArray = inputArray.map( currentValue => currentValue * 2 );

 console.log( returnArray );
}

// 実行結果
// [ 2, 6, 20, 34, 40, 62 ]

function myFunction3() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ];
 
 const returnArray = inputArray.map( function( currentValue ) {
                                       if ( currentValue > 10 )
                                         return currentValue * 2 ;
                                       return currentValue ;
                                     }
                                   );
 console.log( returnArray );
}

// アロー関数版
function myFunction_arrow3() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ];
 
 const returnArray = inputArray.map( currentValue => {if (currentValue > 10 )
                                                        return currentValue * 2;
                                                      return currentValue ;} );

 console.log( returnArray );
}


// 実行結果
// [ 1, 3, 10, 34, 40, 62 ]

function myFunction4() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ];
 
 const returnArray = inputArray.map( function( currentValue, index ) {
                                       if ( index > 4 )
                                         return currentValue * 3 ;
                                       return currentValue ;
                                     }
                                   );
 console.log( returnArray );
}

// アロー関数版
function myFunction_arrow4() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ];
 
 const returnArray = inputArray.map( ( currentValue, index ) => {if ( index > 4 )
                                                                   return currentValue * 3;
                                                                 return currentValue ;} ) ;
                                      
 console.log( returnArray );
}

// 実行結果
// [ 1, 3, 10, 17, 20, 93 ]

function myFunction5() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ];
 
 const returnArray = inputArray.map( function( currentValue, index, array ) {
                                       if ( index < inputArray.length - 1 )
                                         return array[ index + 1 ];
                                       return array[ 0 ];
                                     }
                                   );
 console.log( returnArray );
}

// アロー関数版
function myFunction_arrow5() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ];
 
 const returnArray = inputArray.map( ( currentValue, index, array ) => { if ( index < inputArray.length - 1 )
                                                                           return array[ index + 1 ] ;
                                                                         return array[ 0 ] ;} );
 
 console.log( returnArray );
}
// 実行結果
// [ 3, 10, 17, 20, 31, 1 ]

では、ごきげんよう。