javascriptのブロック文のブラウザ間での動作の違い(IOS)

Question

お世話になります。

  $(function(){
    testHoge();
  });
  {
    let test = 99999;
    function testHoge() {
      alert(test);
    };
  }

上記のjsがあるhtmlロード時に、android,pcではアラートが出力されるのですが、IOS13のipadではアラートが出力されません。
alert内の変数testを文字リテラルに変更すると動作する為、恐らくiosでのletの扱いが他のOSと違うのではないと予想しているのですが、参考になる文献が見つかりません。

letをvarに変更するしかないのでしょうか。
それともiosでは特別な実装が必要なのでしょうか。ご教示のほど、よろしくお願いいたします

以下追記

  {
    let test = 99999;
    function testHoge() {
      alert(test);
    };
  }
  $(function(){
    testHoge();
  });

上記としましても同じくiosで動作しませんでした
また、

"use strict"; /* 追記 */
{
let test = 99999;
function testHoge() {
  alert(test);
}
$(function(){
  testHoge();
});
}

も動作しませんでした。
"use strict";を追加すると上記でipadでも正常に動作するようになりました。
しかし、MDNに下記とある通り、

ブラウザはまだ strict モードを確実に実装していないため、無条件に依存しないでください。strict モードは意味を変えます。それら変更点を当てにすると、strict モードを実装していないブラウザでミスやエラーが発生する可能性があります。

この実装にするのは抵抗があります。
何かヒントになればと思い追記しました。

以下19/12/04 12:45追記
実装はmaisumakunさん、yambejpさんのような実装でよいと理解しました。回答ありがとうございます。
しかしMDNにある

strict モードは意味を変えます。

というのが引っ掛かります。iosではどのように意味が変わって正常に動作するようになったのでしょう?
上記の動作するコードで"use strict"; がない場合でもエラーにはなりませんでした。
そもそもstrictモードはMDNを読んだ私の理解では、生コードより文法を厳しくチェックするものという理解であり、上記の"use strict";がある状態、ない状態で処理が分かれるということ自体にかなり疑問が残っています。

身勝手ではございますが、後学の為、ご教示願えますでしょうか。

以下追記
Eggpanさんの指摘が根本的な記載を見つける手掛かりになったということでそちらをベストアンサー致します。
詳しくはそちらのコメントをご覧ください。
回答ありがとうございました。

Comments

[maisumakun]

$(function)の部分をtestHogeのブロックより後に回したら、どうなりますでしょうか。

[makosankibu]

追記しました。ご確認ください。

[maisumakun]

「alert内の変数testを文字リテラルに変更すると動作する為」とありますが、もしかして「alert(数値)」が動作しない、ということはないでしょうか。

[makosankibu]

alert(999)として実行しましたが、ipadでもpcでも正常に動作します...

[eytyet]

MDNにstrict modeの説明もあるようです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode

[makosankibu]

MDNは読んでいます。そのうえで質問しているのですが...
質問文にMDNに記載されていることを引用していて、MDNを読んでいることは明白ではないかと思うのですが...?

[eytyet]

読み間違えました。大変失礼致しました。

Answer 1

この実装にするのは抵抗があります。

では、影響する箇所だけstrict modeにしましょう。

(function(){
  "use strict"; /* 追記 */
  let test = 99999;
  function testHoge() {
    alert(test);
  }
  $(function(){
    testHoge();
  });
})();

なお、class記法などこれから入ってくる新記法ではデフォルトでstrict modeとなっているものも多いですので、JavaScriptをこれからも書いていく以上は知っておく必要があります。

Comments

[makosankibu]

回答ありがとうございます
正常に動作しました。
> なお、class記法などこれから入ってくる新記法ではデフォルトでstrict modeとなっているものも多い
> ですので、JavaScriptをこれからも書いていく以上は知っておく必要があります。
→大変勉強になります。ありがとうございます。

質問文に追記しましたが、strict modeの動作についてまだ疑問が残っているので、よろしければそちらについてもご教示いただけますでしょうか。

Answer 2

質問にかかれている内容だと、testHoge()がブロックの中に定義されているので呼べなさそうな気もしますが・・。

Stack Overflow に似たような質問がありました。function xxx()をxxx = function()にすることで回避はできるようです。
手元のiPhone(iOS13.3)だと挙動が変わることを確認できました。

{
  let test = 99999;
  //function testHoge() {
  let testHoge = function() {
    alert(test);
  }

  $(function(){
    testHoge();
  });
}

Comments

[Eggpan]

非strictモードでletやブロックスコープを使う、というのがあまり良い選択肢では無いような気もします。
文献などはちょっと検索してみましたが見つかりませんでした。

[makosankibu]

> 質問にかかれている内容だと、testHoge()がブロックの中に定義されているので呼べなさそうな気もしますが・・。
→確かにと思い、調べたところ、下記の関数のMDNに記載がありました
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions
上の`非 strict コードにおけるブロックレベル関数`の記載によると、非strictモードでのブロック内での関数宣言ははっきり`使わないでください`と記載してありました笑
コードも正常に動作することを確認しました
回答ありがとうございました。

Answer 3

解釈がわかれる曖昧な記述をしているからじゃないですか？
(まぁ極端な解釈の違いはバグといわれても仕方ないのでしょうけど)
スコープを外して記述を前にもってきて試してみるとか

let test = 99999;
function testHoge() {
  console.log(test);
}
$(function(){
  testHoge();
});

即時関数内で宣言するとか

(function(){
  let test = 99999;
  function testHoge() {
    console.log(test);
  };
  $(function(){
    testHoge();
  });
})();
console.log(typeof test);

Comments

[makosankibu]

letをそこで定義するとグローバル変数になってしまうのではないのですか?(varと一緒)
{
let test = 99999;
function testHoge() {
alert(test);
}
$(function(){
testHoge();;
});
}

と全体を囲ってみましたが、結果は一緒でした...

[makosankibu]

何か認識が間違っていたらご指摘ください

[yambejp]

追記しましたが、即時関数内で処理するとかでなんとかなりませんか？
もしくは思い切ってクラスをつくるとか・・・

[makosankibu]

回答ありがとうございます
正常に動作しました。
また、`"use strict";`とすることで上記の私の実装でも動かすことができました。

質問文に追記しましたが、strict modeの動作についてまだ疑問が残っているので、よろしければそちらについてもご教示いただけますでしょうか。

Answer 4

おそらくですがStrictモードをつける/つけないで内部的には
JavaScriptを変換するインタプリタ自体が異なるのだと思います。

つまりStrictモードでない場合にブラウザ内で使われるインタプリタで
該当ソースコードを解釈すると何かしら意図しないバグを生んでしまうが、
Strictモードであればちゃんと意図した動作をするように解釈してくれる...ということかなと。

具体的にソースコードのどの箇所がバグの原因になるのかはちょっとわからないです、すみません。
ただ変数に入る値の型の違いで動作が変わったり、そもそもalertが出なくなるというのは
本来のJavaScriptの仕様とは異なるはずなので、こういった状況を回避するためにstrictモードが
追加されたということでもあるのかなと思います。

Comments

[makosankibu]

なるほど。同じブラウザであればiosとandroidでは同じインタプリタでないのかと考えていたのですがstrictモード自体でインタプリタが変わると考えるとつじつまが合いますね。
strictモードがjQueryみたいにブラウザ間の差異をなくしてくれるとは考えつきませんでした。
回答ありがとうございます。