配列の中から一番長い名前を取得する

Question

プログラミング初学者です。
console.logに入力された配列の中の一番長いインストラクターの名前を取得する問題です。
答えは以下のコードだったのですが、なぜ let longestNameIndex = 0;が必要なのかわかりません。でもこれがないと答えが違ってきます。どなたか教えていただけますでしょうか。
よろしくお願いします。

const instructorWithLongestName = function (instructors) {
  let longestName = 0;
  let longestNameIndex = 0;
  
  for (let i = 0; i < instructors.length; i++) {
    if (longestName < instructors[i].name.length) {
      longestName = instructors[i].name.length;
      longestNameIndex = i;
    }

  }
  return instructors[longestNameIndex];
};

console.log(instructorWithLongestName([
  { name: "Samuel", course: "iOS" },
  { name: "Jeremiah", course: "Web" },
  { name: "Ophilia", course: "Web" },
  { name: "Donald", course: "Web" }
]));
console.log(instructorWithLongestName([
  { name: "Matthew", course: "Web" },
  { name: "David", course: "iOS" },
  { name: "Domascus", course: "Web" }
]));

let longestNameIndex = 0; がある場合コンソールには、
{ name: "Jeremiah", course: "Web" }
{ name: "Domascus", course: "Web" }
が返ってきます。

でも、let longestNameIndex = 0;がない下記のコードの場合コンソールには、
{ name: "Donald", course: "Web" }
{ name: "Domascus", course: "Web" }
が返ってきます。
どうして下記のコードでは、
{ name: "Jeremiah", course: "Web" }
{ name: "Domascus", course: "Web" }
が返ってこないのでしょうか？

const instructorWithLongestName = function (instructors) {
  let longestName = "";
  
  for (let i = 0; i < instructors.length; i++) {
    if (longestName.length < instructors[i].name.length) {
    longestName = instructors[i];
    }
  }
 
return longestName;
};

Comments

[otn]

> もこれがないと答えが違ってきます。
どういうコードですか？

Answer 1

「let longestNameIndex = 0;」を削除しただけじゃ無くて、全然違うプログラムじゃないですか。
全然違うプログラムだと言うことがわからなかったのでしょうか？

結果が違うのは、2つめのプログラムにバグがあるからです。
longestName.name.lengthを見るべきなのに、longestName.lengthを見ています。

const instructorWithLongestName = function (instructors) {
  let longestName = {name:""};

  for (let i = 0; i < instructors.length; i++) {
    if (longestName.name.length < instructors[i].name.length) {
    longestName = instructors[i];
    }
  }

return longestName;
};

あるいは、名前だけ返すのなら、

const instructorWithLongestName = function (instructors) {
  let longestName = "";

  for (let i = 0; i < instructors.length; i++) {
    if (longestName.length < instructors[i].name.length) {
    longestName = instructors[i].name;
    }
  }

return longestName;
};

Comments

[tomato]

説明がうまくできず、すみませんでした。教えていただきありがとうございます。

Answer 2

とりあえず、プログラミングというのは『こう書けばいい』というものではありません。
『現実世界のシミュレーション』です。

まずはコードを読みましょう。デバッガを使ってもいいですが。
コードを読むコツは『一行レベルで、その行が何をしているのかを考えながら読む』です。

// 単純に配列を作ってそれをinstructorWithLongestName関数に渡して、その結果を出力する
console.log(instructorWithLongestName([
  { name: "Samuel", course: "iOS" },
  { name: "Jeremiah", course: "Web" },
  { name: "Ophilia", course: "Web" },
  { name: "Donald", course: "Web" }
]));

次に、その呼ばれた関数、instructorWithLongestName関数の内部も同じようにやる。

// 定義する
const instructorWithLongestName = function (instructors) {
  // 変数 longestName を用意し、0で初期化する
  let longestName = 0;
  // 変数 longestNameIndex を用意し、0で初期化する
  let longestNameIndex = 0;

  // 変数iの初期値: 0, iがinstructorsの長さ未満の間, ループしながら+1する
  // ---> ( instructorsの長さ分、ループする)
  for (let i = 0; i < instructors.length; i++) {
    // 現在のlongestNameよりもinstructorsのi番目にあるデータのnameの長さが大きいなら
    if (longestName < instructors[i].name.length) {
      // longestName を 長い方(instructors[i]の方)の名前の長さにする
      longestName = instructors[i].name.length;
      // longestNameIndex を 現在の場所( i番目 ) に更新する
      longestNameIndex = i;
    }

  }
  // 一番長い方の場所のデータを返す
  return instructors[longestNameIndex];
};

これを疑似コードとして書きだしてみましょう。

[疑似コード]
1. 引数instructorsを引き受けて処理するinstructorWithLongestNameを定義
    1.1. 変数 longestNameを用意し、0で初期化する
    1.2. 変数 longestNameIndex を用意し、0で初期化する
    1.3. instructorsの長さ分、以下をループする
        1.3.1. longestNameよりもinstructorsのi番目のnameの長さが大きいなら
            1.3.1.1. longestNameをinstructors[i]のnameの長さに更新する
            1.3.1.2. longestNameIndexを現在の場所(i番目)に更新する
    1.4. 一番長い方の場所のデータを返す

更に、現実世界でシミュレーションしてみましょう。つまり、上記の疑似コードを料理のレシピなりととらえて手作業でやってみましょう。

仮に (1.2)を削除すると、longestNameIndexの初期値はわからないため、場合によっては結果が変わってきそうですね。JavaScriptではPaiza IOで試すとReferenceError: n is not definedとなります。これは『宣言していない事が原因』です。
var n; Console.log(n);のように変数宣言を前に置けば、0で初期化はされるようですが。

で、(1.2)と(1.3.1.2)を同時に削除したとしても、結果は違ってきます。(ちなみに(1.4)も書き換えているとする)

実際に試してみればわかりますよ。

(1.1)で longestName = 0 という定義。(1.2)は削除済みなのでスルー。
(1.3)で最初の"Samuel" のやつでやる。(1.3.1)で条件に一致するため、longestName = 6 ("Samuel"の長さ)となる。

longestName = 0
↓
longestName = 6

で、(1.3.1.2)は無視。よって(1.3)に戻る。forの条件式を満たすので、(1.3.1)に。
……とやっていく。

でも、(1.4)では一番長い方の場所にあるデータを返すので、longestNameIndexのようなものが必要。

単純に現実世界で考えてみましょう。

  { name: "Samuel", course: "iOS" },
  { name: "Jeremiah", course: "Web" },
  { name: "Ophilia", course: "Web" },
  { name: "Donald", course: "Web" }

に相当するデータがあって、nameに割り振られているデータの長さが一番長い方のデータを取りたいとする場合、どうしますか?

私なら、まず "Sumuel"の長さを調べる。6ですね。よって長さ6の"Sumuel"を暫定一位とする。
この暫定一位をノートかなんかに記録しておく。
ただ、その場所も欲しいので、『暫定一位の長さ』と『暫定一位の場所』の二つが欲しいですね。
なので 『長さ』と『場所』をそれぞれノートに記録する。

そして二番目にある "Jeremiah"を調べる。長さは8。
暫定一位の長さは6なので、現在のものが長いですね。よって暫定一位を6から8に書き換える。
それと暫定一位の場所も。

さらに三番目の"Ophilia"も同様に。
そうすると、最終的に『暫定一位の長さ』が『一番長い方の長さ』、『暫定一位の場所』が『一番長い方の場所』となりますね。

そして、その『暫定一位の場所』を見れば『一番長い方のデータ』となりますよね。

これを実装しているだけです。

Comments

[tomato]

とても丁寧に説明していただきありがとうございました。すごくわかりやすかったです。コードをただ書くだけではなく、もっと読む訓練もしないといけないと気づけました。

Answer 3

でもこれがないと答えが違ってきます。

JavaScriptで宣言していない変数を使った場合、非strictな環境では自動でグローバル変数となってしまいます。

グローバル変数なので、関数を2回実行したときには前の値が残ってしまいます。