letとvarの変数を定義する位置について。

Question

javascriptについてN予備校で学んでいます。
始めたばかりの初心者です。

いま、名前を入力すると、性格診断結果が表示されるというものを作っていて
jsのコードは下記になっています。

'use strict';
const answers= [
    '{userName}のいいところは声です。{userName}の特徴的な声は皆を惹きつけ、心に残ります。',
    '{userName}のいいところはまなざしです。{userName}に見つめられた人は、気になって仕方がないでしょう。',
    '{userName}のいいところは情熱です。{userName}の情熱に周りの人は感化されます。',
    '{userName}のいいところは厳しさです。{userName}の厳しさがものごとをいつも成功に導きます。',
    '{userName}のいいところは知識です。博識な{userName}を多くの人が頼りにしています。',
    '{userName}のいいところはユニークさです。{userName}だけのその特徴が皆を楽しくさせます。',
    '{userName}のいいところは用心深さです。{userName}の洞察に、多くの人が助けられます。',
    '{userName}のいいところは見た目です。内側から溢れ出る{userName}の良さに皆が気を惹かれます。',
    '{userName}のいいところは決断力です。{userName}がする決断にいつも助けられる人がいます。',
    '{userName}のいいところは思いやりです。{userName}に気をかけてもらった多くの人が感謝しています。',
    '{userName}のいいところは感受性です。{userName}が感じたことに皆が共感し、わかりあうことができます。',
    '{userName}のいいところは節度です。強引すぎない{userName}の考えに皆が感謝しています。',
    '{userName}のいいところは好奇心です。新しいことに向かっていく{userName}の心構えが多くの人に魅力的に映ります。',
    '{userName}のいいところは気配りです。{userName}の配慮が多くの人を救っています。',
    '{userName}のいいところはその全てです。ありのままの{userName}自身がいいところなのです。',
    '{userName}のいいところは自制心です。やばいと思ったときにしっかりと衝動を抑えられる{userName}が皆から評価されています。'
]
/**
 * 
 * @param {string} userName ユーザーの名前
 * @return {string} 診断結果
 */
function assessment(userName){
    let sumOfcarCode= 0;
    //全文字のコード番号を取得して足し合わせる
    for (let i=0; i<userName.length; i++){
        sumOfcarCode= sumOfcarCode+ userName.charCodeAt(i);
    }
    //文字コード番号を回答の数で割って添え字の数値を求める
    const index= sumOfcarCode% answers.length;
    let result= answers[index];
    result= result.replace(/\{userName\}/g, userName);
    return result.replace(/\{userName\}/g, userName);
}
//テストコード
console.assert(
    assessment('太郎')===
    '太郎のいいところは決断力です。太郎がする決断にいつも助けられる人がいます。',
    '診断結果の文言の特定の部分を名前に書き換える処理が正しくありません'
);
console.assert(
    assessment('太郎')===
    assessment('太郎'),
    '入力が同じ名前なら同じ診断結果を出力する処理が正しくありません。'
);

この時、質問なのですが

function assessment(userName){
    let sumOfcarCode= 0;
    //全文字のコード番号を取得して足し合わせる
    for (let i=0; i<userName.length; i++){
        sumOfcarCode= sumOfcarCode+ userName.charCodeAt(i);
    }
    //文字コード番号を回答の数で割って添え字の数値を求める
    const index= sumOfcarCode% answers.length;
    let result= answers[index];
    result= result.replace(/\{userName\}/g, userName);
    return result.replace(/\{userName\}/g, userName);
}

assessment関数内で定義されてる、sumOfcarCodeを関数外に出して、
下記のように定義すると、エラーが起こってしまうようです。

var sumOfcarCode= 0;
function assessment(userName){
    //全文字のコード番号を取得して足し合わせる
    for (let i=0; i<userName.length; i++){
        sumOfcarCode= sumOfcarCode+ userName.charCodeAt(i);
    }
    //文字コード番号を回答の数で割って添え字の数値を求める
    const index= sumOfcarCode% answers.length;
    let result= answers[index];
    result= result.replace(/\{userName\}/g, userName);
    return result.replace(/\{userName\}/g, userName);
}

letとvarのスコープが関係ありそうな気がするのですが、
なぜエラーになるのでしょうか。。。

エラー内容は下記です。

Assertion failed: 入力が同じ名前なら同じ診断結果を出力する処理が正しくありません。
(anonymous) @ assesment.js:44

初心者なので右も左もわかりませんが、
よろしくお願いします。

Answer 1

以下のテストコードで同じ名前の時に同じ出力が行われているか？というチェックを行っています。

console.assert(
    assessment('太郎')===
    assessment('太郎'),
    '入力が同じ名前なら同じ診断結果を出力する処理が正しくありません。'
);

関数内にあった初期化用の記述var sumOfcarCode= 0;
こちらを関数の外に出してしまったので初期化が行われず、同じ名前なのに同じ結果にならない、
つまり「テスト失敗、バグがあります」という注意書きが表示されるということになります。

varやletのスコープが原因ではなくて、デバッグ用のテストコードが正常に働いているという証拠です。

Comments

[hiroro0820]

回答していただいて、ありがとうございます。
すっきり解決しました！！

Answer 2

関数の外に出すと、sumOfcarCodeに0を代入するのが関数実行前に１度だけなので、関数を呼ぶ度に累積していきますよ。
関数呼び出しの都度、0を代入する必要があるかと。

スコープとはまた別の話です。

Comments

[hiroro0820]

回答していただき、ありがとうございます。
関数を呼び出す都度、０を代入しなきゃならなかったんですね！
なるほど、、すっきりしました。。。
また、わからないことがでてきたら、教えていただけると嬉しいです！！

[otn]

> 関数を呼び出す都度、０を代入しなきゃならなかったんですね！
理解がずれている気がします。
「正しいタイミングで、0を代入しないといけない」です。

[hiroro0820]

1度だけ関数を呼び出した時は、どちらも結果は同じだけど

０を代入する処理が外にある場合
二度目に、関数を呼び出した時は、0を代入する処理が行われないため

１度目で使われたsumOfcarCodeを元に、
sumOfcarCode= sumOfcarCode+ userName.charCodeAt(i);
を行うから、sumOfcarCodeが累積していく

っていう理解であってますか？？

[otn]

はい。そうです。

Answer 3

//全文字のコード番号を取得して足し合わせる

ためにsumOfcarCode変数をおいています。
その目的のためにはassessmentが呼ばれるたびにsumOfcarCodeの初期値が0である必要があります。

うまく行かない方のコードは2回めのassessmentを呼び出して、forループ開始時にsumOfcarCodeの値が1回目の呼び出し時の結果のままになっています。そこに更に足し合わせるので結果が合わなくなっています。

つまりうまく行かない方のコードは、定義を外に出したからうまく行かないというよりは、
forループの前に初期化されていないのが原因です。