一問一答コーディング問題「破壊的操作と非破壊的操作」【JavaScript】

こんにちは、@codeship_techです。

今日のQ&Aは第2回目の一問一答コーディング問題です!

前回の問題は皆さん回答を見ることなく解くことはできたでしょうか?
もし、前回の問題が見たいという方はこちらからどうぞ!

前回の問題はこちら↓

さて、今回のテーマは「破壊的操作と非破壊的操作」についてです!

次のコードは、意図した通りの動きをしてくれません。
機能要件に従って、意図した動きになるように修正してください。
(難易度:★★★☆☆)

機能要件
  • 2つの異なる配列を作る…①
  • ①を結合し新たな配列を作る…②
  • ②を出力する

javascript
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
array1.concat(array2);
console.log(array1);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

出力結果

["a", "b", "c"]

問題点
array1とarray2が結合されていない























正解

javascript
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var array3 =  array1.concat(array2);
console.log(array3);

  •  破壊的メソッドと非破壊的メソッドについて

concatとは、concatnate:結合の意味で、array1.concat(array2) 関数はarray1にarray2を結合し、「新たな配列を生成」します。

新たな配列を生成する」ところがミソで、内部ではarray1とarray2のコピーから新しい配列オブジェクトを作成しています。

つまりarray1やarray2には特に変更が加えられた訳ではなく、その結果を別の変数に代入しなくてはせっかく生成した新しい配列は保持できないのですね。

このような「元の素材に影響を与えず新しいオブジェクトを返り値として返す」関数のことを「非破壊的関数(メソッド)」、逆に「元の素材そのものに変更を加える」関数を「破壊的関数(メソッド)」と言います。

上の例では、concatで出来上がった結合のコピーを、array3に収めることで解決しています。
ちなみに別解として、元のarray1を書き換えてやる方法もあります。

// array1.concat(array2);
array1.push.apply(array1,array2)

他の一問一答コーディング問題はこちら

授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。