chromeのconsoleを用いて即時関数(パターン)を実行したい

Question

###前提・実現したいこと
Googleのchromeブラウザ(*1)上で使えるconsoleにて即時関数の挙動を確認したいです。

###発生している問題・エラーメッセージ
xが定義されていないと出てきます。

VM167:1 Uncaught ReferenceError: x is not defined
    at <anonymous>:1:3

###該当のソースコード

(function(){
    var x = 5;
})();
function f(y){return x+y;}
f(x);

###質問
私の考え方自体が間違っているのかもしれないのですが、上記コードの最初の部分にて
無名関数及びその即時実行を定義しているため、
f(x);
が実行される時にはxに5が入っているのではないのでしょうか。

これがうまく動かない原因を教えていただきたいです。
よろしくお願いいたします。

(*1) Chromeのコンソールを使っているのは、手軽かつ迅速にJavaScriptの挙動を確認できるためです。何か実行ファイルを作りたいわけではなく、JavaScriptの挙動を確認したいだけです。

Answer 1

他回答者の通りスコープの問題なのですが、コンソールで汚染したくないというだけならletを使えばいいのではないでしょうか？
ちょっとだけ打鍵が少なくなります。

{
  let x = 5;
  function f(y){return x+y;}
  f(x);
}

Comments

[x_x]

と言いつつfが残ってました。良しなに

[omiteratail]

x_xさん
ご回答ありがとうございます。
今回は即時関数による挙動を把握したかったので、あえて即時関数を使用いたしました。
ただletの方が良いということが改めて認識できました。ありがとうございました。

Answer 2

即時関数にかぎらず、関数内部で定義した変数はローカルスコープになります。
即時関数の中で定義した変数xは、その外では参照できません。

もともと即時関数は、一度しか使わない処理を、グローバルスコープを汚染しないように書くために使われることが多いものです。
関数内での処理結果を別の関数でまた使いたい場合、通常の関数にして、何か値を返すようにする方がよいと思います。

Comments

[omiteratail]

Udomomoさん
ご回答ありがとうございます。
わかりやすい説明ありがとうございました！

Answer 3

これがうまく動かない原因を教えていただきたいです。

即時関数の中で作った変数のスコープはその関数の中に限られますので、実行のあとだったとしても、即時関数の外側からアクセスすることはできません。

Comments

[omiteratail]

maisumakunさん
ご回答ありがとうございます。
おかげさまですごくスッキリいたしました！