albatrosary's blog

UI/UXとエンタープライズシステム

ブログ「JavaScriptの関数 - console.blog(self);」を読んで試してみた

JavaScriptの関数に関するブログ JavaScriptの関数 - console.blog(self); が書かれてましたので実際に色々試してみました。ちなみにコンソールはchromeなら「ツール」-「デベロッパツール」で開くことが出来ます。コンソール無いでの改行は「shift+enter」キーで入力可能ですので試してみると良いかと思います。

 

関数の作り方

function doSomething(){}はどこで定義してもすぐに使える。

var doSomething = function(){}は、定義したあとじゃないと使えない。

ですがコンソールで実際に動かしてみます。

> a1();
function a1() {
    console.log("A1");
}
> A1
>
> function a2() {
    console.log("A2");
}
a2();
> A2
>
> a3();
var a3 = function () {
    console.log("A3");
}
> TypeError: undefined is not a function
>
>var a4 = function () {
    console.log("A4");
}
a4();
> A4

f:id:albatrosary:20140717151923p:plain

function doSomething()のように宣言した場合はその前後でも問題ないです。普通に実行できました。var doSomething = function() の場合は、その前で実行しようとするとエラーになったのが分かると思います。

宣言の巻き上げ

「巻き上げ」ですが知りませんでした。「var b」のサンプルでは一見グローバル宣言されているようですが、その後関数内宣言にしています。

> $(function(){
  a = 1;
});
console.log(a);
> 1

> $(function(){
  b = 1;
  var b;
});
console.log(b);
> ReferenceError: b is not defined

> $(function(){
  var c;
  c = 1;
});
console.log(c);
> ReferenceError: c is not defined

f:id:albatrosary:20140717153751p:plain

関数スコープ

JavaScriptのスコープは関数スコープ。JavaScriptブロックスコープはない。」ということなので実際に試してみます。

> function f(){
  for(var i = 0; i < 10; i++){
    var x = i * i;
  }
  console.log("x=" + x);
  console.log("i=" + i);
}
f();
console.log("x'=" + x);
> x=81
> i=10
> ReferenceError: x is not defined

f:id:albatrosary:20140717153614p:plain

最後に

プログラミングは実際に手を動かして理解できるものだなと再確認。