value値から合致するkeyを取得する際のreturnの使い方について

Question

作りたいもの

シンプルな翻訳フォームのようなものを作っています。
日本語を入力→それに対応した英語が出力される。
return文を今回for文の外に記載すると予期した結果が出力されますが、
return文をelse文の中に記載すると予期しない結果になってしまう。
理解できずになんとなく完成してしまっているのでその理由を知りたい。

html

  <form action="" id="form" name="formName">
      <label for="lang">日本語：<input type="text" id="lang" value="" name="lang"></label>
      <button id="btn" type="submit">検索</button>
      <div>英訳<div id="outputArea"></div></div>
  </form>

javascript

const outputArea = document.getElementById('outputArea');
const btn = document.getElementById('btn');
const form = document.getElementById('form');
const lang = document.getElementById('lang');
const list = {
  apple: 'りんご',
  banana:'バナナ',
  park:'公園',
  sweet:'甘い' 
}

const arr = Object.keys(list);//key取得

const search = (inputValue) => {
  for(let i = 0;i < arr.length; i++) {
    if(list[arr[i]] === inputValue) {
      return arr[i];
    } //ここにelse文で「return 'わかりません';」を書くと全ての結果が「わかりません」になる
  }
  return 'わかりません';//ここにreturn文を書くときちんと動く
}

const output = () => {
  const inputValue = lang.value;
  const result = search(inputValue);
  outputArea.innerHTML = result;
  return false;
}

form.onsubmit = output;

何がわからないのか

javascript文をご覧ください。
return文をなぜfor文の外に記載しないときちんと動かない(※1)のかの理由が知りたい。

私の考えとしては：
例：inputValueが「公園」だった場合
①if(list[arr[i]] === inputValue) {
→list[arr[i]]でvalueが取得できる。だから[i]番目のvalueが「公園」だった場合、
②return arr[i];
→その[i]番目のkeyを返す
③else
→「公園」というvalueが存在しない場合
④return 'わからない';
→わからないという結果を返す

なのでこちらで動くと思っていました。
return文云々の前に、そもそもこの考え方が間違っているのでしょうか？

※1きちんと動かないとは？
→return文をelse以下に記載すると、合致するkeyがあったとしても
全て「わからない」という結果が返って来てしまう。
念の為動かない例を下記のリンク先にて紹介します↓
https://jsfiddle.net/0njshfpo/3/

ご回答いただけたら嬉しいです。
お手数ですがよろしくお願いします。

Answer 1

iが0のときを想定してみてください。return された時点で関数は終了します。

    if(list[arr[0]] === '公園') { // list[arr[0]] は list['apple'] で 'りんご'。
      return arr[0];
    } else { //'りんご' === '公園'ではないから'わかりません'が返り、関数が終了する。
      return 'わかりません';
    }

Comments

[kitty]

ご回答ありがとうございます。即理解できました。また機会がありましたらよろしくお願いします。