JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

投稿日：2016年4月26日更新日：2020年5月17日

日頃業務で使っているJavaScriptについて。自分的なメモです。

Contents

1 変数定義
2 配列の定義
- 2.1 展開
3 オブジェクトの定義
- 3.1 展開
4 関数

変数定義

var hoge;
var つけないと一気にグローバル変数になるので注意。逆にそれを意図して定数としてつかうのもあり。

配列の定義

var arr=[];
var arr = new Array();

1 2	var arr=[]; var arr = new Array();

[]でくくります。
各要素の定義は通常通りarr[1]=”hoge”といった定義の仕方・アクセスでOK

展開

var arr=["hoge","foo","bar"];
for( var i=0;i<arr.length;i++){
    //ここに処理を書く
}

var arr=["hoge","foo","bar"];

for( var i=0;i<arr.length;i++){

//ここに処理を書く

}

が一般的

オブジェクトの定義

いわゆるハッシュ的なデータの格納はこれです。

var obj ={};
var obj = new Object();

obj={
    "name":"tarou",
    "age":30
};
Obj["name"] = "tarou";
obj.name ="tarou";

var obj ={};

var obj = new Object();

obj={

"name":"tarou",

"age":30

};

Obj["name"] = "tarou";

obj.name ="tarou";

展開

for(var key in obj){

}

for(var key in obj){

}

が一般的です。

※JavaScriptの場合、オブジェクトの値はリテラルや配列、オブジェクトはもちんのこと。関数が入ります。これがなかなかムズイ・・・
JavaScript基礎文法最速マスター

関数

function func(){
//ここに何らかの処理
}

function func(){

//ここに何らかの処理

}

JavaScriptで何といっても難しいのは関数の扱いでしょう。

まあ定義は上記の通り普通なのですが、JavaScriptの面白いところとして、変数に代入したり、オプジェクトのプロパティとして扱うことができます。

var say = function(){
   console.log("say hello");
}

var say = function(){

console.log("say hello");

}

上記のように変数に代入し、関数名がないものを無名関数と呼びます。

スコープ

スコープは関数と関連が深いのでここであつかいます。まずJavaScriptのスコープは宣言した関数内全体になります。

関数の外で定義すれば関数の中からも呼び出せます。逆に中で定義したら外からは呼べません。

var a="hoge";

hoge2();
function hoge2(){
    console.log(a); //呼べる hoge;
}
--------------------------------
function hoge2(){
    var a ="hoge";
}
console.log(a);//呼べない undefined

var a="hoge";

hoge2();

function hoge2(){

console.log(a); //呼べる hoge;

}

--------------------------------

function hoge2(){

var a ="hoge";

}

console.log(a);//呼べない undefined

即時関数

JavaScriptでは定義と実行を同時に行える記述法があります。
関数の定義と呼び出しは通常

function say(){
    console.log("say hello");
}
say();

function say(){

console.log("say hello");

}

say();

のように書きますが、
↓とかいても同じ結果になります。

(function(){
    console.log("say hello");
})();

(function(){

console.log("say hello");

})();

定義と同時によんでおり、即実行されます。このような使い方を即時関数といいます。

どんな時に使うかというと本来の関数の定義→即実行というよりはスコープの制限のために使うことが多いです。

単純なサンプルを見てもわからないことが多く、初心者殺しのネタだと思われます。

無名関数、即時関数について
【JavaScript】無名関数と即時関数？関数パターンを理解してメンテナブルなソースに！
[JavaScript]　猿でもわかるクロージャ超入門　３　無名関数

jQuery

JavaSciprtというと一般的にはHTMLやCSSの装飾を動的に行うときに使われることが多いでしょう。

その場合、ほとんどの人がjQueryから使うことになると思います。

jQueryの構文では

$(function(){    
    $("#sample").val();
});

$(function(){

$("#sample").val();

});

みたいな書き方をします。

また$マークにはjQueryのオブジェクトという意味が入っています。詳しくは下記リンクを参照してみましょう。

【jQuery】$(ドルマーク)の意味