注: この質問は、ECMAScript バージョン 3 または 5 の観点から行われました。ECMAScript 6 のリリースでの新機能の導入により、回答が古くなっている可能性があります。
JavaScriptのキーワードの機能とは正確には何ですかvar。また、その違いは何ですか
var someNumber = 2;
var someFunction = function() { doSomething; }
var someObject = { }
var someObject.someProperty = 5;
と
someNumber = 2;
someFunction = function() { doSomething; }
someObject = { }
someObject.someProperty = 5;
?
いつどちらを使用しますか?なぜ/何をしますか?
グローバルスコープにいる場合、大きな違いはありません。説明についてはKangaxの回答を読んでください
関数内にいる場合はvar、ローカル変数を作成します。「no var」は、変数が見つかるかグローバル スコープに到達するまでスコープ チェーンを検索します (その時点で変数が作成されます)。
// These are both globals
var foo = 1;
bar = 2;
function()
{
var foo = 1; // Local
bar = 2; // Global
// Execute an anonymous function
(function()
{
var wibble = 1; // Local
foo = 2; // Inherits from scope above (creating a closure)
moo = 3; // Global
}())
}
割り当てを行っていない場合は、次を使用する必要がありますvar。
var x; // Declare x
違いがあります。
var x = 1 x現在のスコープ（別名実行コンテキスト）で変数を宣言します。宣言が関数に表示される場合-ローカル変数が宣言されます。グローバルスコープ内にある場合-グローバル変数が宣言されます。
x = 1一方、は単なるプロパティの割り当てです。x最初にスコープチェーンに対して解決を試みます。そのスコープチェーンのどこかで見つかった場合は、割り当てを実行します。が見つからない場合はx、グローバルオブジェクト（スコープチェーンの最上位オブジェクト）にプロパティを作成します。x
ここで、グローバル変数を宣言せず、グローバルプロパティを作成することに注意してください。
この2つの違いは微妙であり、変数宣言によってプロパティも作成され（変数オブジェクトのみ）、Javascriptのすべてのプロパティ（ECMAScript）には、プロパティを説明する特定のフラグ（ReadOnly、DontEnum、 DontDelete。
var x = 1変数宣言はDontDeleteフラグを使用してプロパティを作成するため、と（グローバルスコープで実行した場合）の違いはx = 1、前者（変数宣言）はDontDelete'ableプロパティを作成し、後者は作成しないことです。結果として、この暗黙の割り当てによって作成されたプロパティはグローバルオブジェクトから削除でき、前者（変数宣言によって作成されたもの）は削除できません。
しかし、これはもちろん単なる理論であり、実際には、実装のさまざまなバグ（IEからのものなど）のために、2つの間にさらに多くの違いがあります。
それがすべて理にかなっていることを願っています:)
[2010/12/16更新]
ES5（ECMAScript 5;最近標準化された言語の第5版）には、いわゆる「厳密モード」があります。これは、宣言されていない割り当ての動作をわずかに変更するオプトイン言語モードです。厳密モードでは、宣言されていない識別子への割り当てはReferenceErrorです。これの理論的根拠は、偶発的な割り当てをキャッチし、望ましくないグローバルプロパティの作成を防ぐことでした。新しいブラウザの中には、厳密モードのローリングサポートをすでに開始しているものがあります。たとえば、私の互換性のあるテーブルを参照してください。
「ローカルとグローバル」の違いだと言うのは完全に正確ではありません。
「ローカルとニアレスト」の違いと考えたほうがいいかもしれません。最も近いものは確かにグローバルになる可能性がありますが、常にそうとは限りません。
/* global scope */
var local = true;
var global = true;
function outer() {
/* local scope */
var local = true;
var global = false;
/* nearest scope = outer */
local = !global;
function inner() {
/* nearest scope = outer */
local = false;
global = false;
/* nearest scope = undefined */
/* defaults to defining a global */
public = global;
}
}
Javascript がブラウザーで実行されると、すべてのコードが次のように with ステートメントで囲まれます。
with (window) {
//Your code
}
詳細情報with- MDN
現在のスコープvarで変数を宣言するため、 window 内で宣言する場合と宣言しない場合の違いはありません。var
違いは、関数内やブロック内など、ウィンドウ内に直接いない場合に発生します。
を使用varすると、同じ名前の外部変数を非表示にできます。このようにして、「プライベート」変数をシミュレートできますが、それは別のトピックです。
経験則として、常に を使用しますvar。そうしないと、微妙なバグが発生するリスクがあります。
編集：私が受けた批評の後、私は次のことを強調したいと思います：
var現在のスコープで変数を宣言しますwindowvarグローバル スコープで暗黙的に宣言を使用しないvar(ウィンドウ)varは、それを省略することと同じです。var ことと同じではありませんvarvar良い習慣であるため、常に明示的に宣言してください変数を宣言するには、常にvarキーワードを使用してください。なんで？適切なコーディング プラクティスはそれ自体で十分な理由ですが、それを省略すると、グローバルスコープで宣言されていることになります (このような変数は "暗黙の" グローバルと呼ばれます)。Douglas Crockfordは、暗黙のグローバルを決して使用しないことを推奨しており、 Apple JavaScript Coding Guidelinesに従って:
キーワードなしで作成された変数はすべて
varグローバル スコープで作成され、関数が返されたときにガベージ コレクションが行われず (スコープ外に出ないため)、メモリ リークが発生する可能性があります。
varこれは、ローカル変数を次のように宣言しないことから抜け出す方法の非常に良い例です。
<script>
one();
function one()
{
for (i = 0;i < 10;i++)
{
two();
alert(i);
}
}
function two()
{
i = 1;
}
</script>
（iループ内でローカルに宣言されるのではなく、グローバルに宣言されるため、ループの反復ごとにリセットされますfor）最終的には無限ループになります
varほとんどの状況で使用する方が良いと思います。
ローカル変数は、グローバル スコープの変数より常に高速です。
を使用して変数を宣言しない場合var、変数はグローバル スコープになります。
詳細については、Google で「スコープ チェーン JavaScript」を検索してください。
別の違い例えば
var a = a || [] ; // works
その間
a = a || [] ; // a is undefined error.
なしvar- グローバル変数。
ローカルコンテキストでグローバル変数を初期化することは悪であるため、常にステートメントを使用することを強くお勧めします。varただし、この汚いトリックが必要な場合は、ページの最初にコメントを書く必要があります。
/* global: varname1, varname2... */
を使用varすることは、変数がグローバル スコープを乱雑にしたり、変数が互いに競合して不要な上書きを引き起こしたりするのを防ぐために常に良い考えです。
@Chris S は、varno と noの実際的な違い (および危険性) を示す良い例を示しましたvar。これは別のものです。違いは非同期環境でのみ表示されるため、テスト中に簡単にすり抜ける可能性があるため、これは特に危険です。
ご想像のとおり、次のスニペット出力が表示されます["text"]。
function var_fun() {
let array = []
array.push('text')
return array
}
console.log(var_fun())次のスニペットも同様です ( letbeforeがないことに注意してくださいarray)。
function var_fun() {
array = []
array.push('text')
return array
}
console.log(var_fun())データ操作を非同期で実行しても、単一のエグゼキューターで同じ結果が得られます。
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
var_fun().then(result => {console.log(result)})ただし、複数の場合は動作が異なります。
function var_fun() {
array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})ただし、let の使用:
function var_fun() {
let array = [];
return new Promise(resolve => resolve()).then(() => {
array.push('text')
return array
})
}
[1,2,3].forEach(i => {
var_fun().then(result => {console.log(result)})
})varの有無にかかわらず、関数の内外で変数を宣言するときに、人々が混乱しているように見えます。これらの手順を説明する詳細な例を次に示します。
jsfiddle で、以下のスクリプトの動作を参照してください。
a = 1;// Defined outside the function without var
var b = 1;// Defined outside the function with var
alert("Starting outside of all functions... \n \n a, b defined but c, d not defined yet: \n a:" + a + "\n b:" + b + "\n \n (If I try to show the value of the undefined c or d, console.log would throw 'Uncaught ReferenceError: c is not defined' error and script would stop running!)");
function testVar1(){
c = 1;// Defined inside the function without var
var d = 1;// Defined inside the function with var
alert("Now inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar1();
alert("Run the 1. function again...");
testVar1();
function testVar2(){
var d = 1;// Defined inside the function with var
alert("Now inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
a = a + 5;
b = b + 5;
c = c + 5;
d = d + 5;
alert("After added values inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};
testVar2();
alert("Now outside of all functions... \n \n Final Values: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n You will not be able to see d here because then the value is requested, console.log would throw error 'Uncaught ReferenceError: d is not defined' and script would stop. \n ");
alert("**************\n Conclusion \n ************** \n \n 1. No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.\n 2. If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2() \n 3. If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.");
alert("Now check console.log for the error when value d is requested next:");
alert(d);
結論
- 関数の外で値を取得する場合、var (a、b など) の有無に関係なく、それらは値を保持し、スクリプトを介してさまざまな関数内に追加されたその他の値も保持されます。
- 変数が関数内で var なしで宣言されている場合 (c など)、前のルールのように動作し、今後すべての関数でその値が保持されます。関数 testVar1() で最初の値を取得したか、値を保持し、関数 testVar2() で追加の値を取得します。
- 変数が関数内でのみ var で宣言されている場合 (testVar1 または testVar2 の d など)、関数が終了するたびに未定義になります。したがって、関数内の一時変数になります。
これを学ぼうとしている人として、これが私の見方です。上記の例は、初心者にとっては少し複雑すぎるかもしれません。
このコードを実行すると:
var local = true;
var global = true;
function test(){
var local = false;
var global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
出力は次のように読み取られます: false、false、true、true
関数内の変数は関数外の変数とは別のものとして認識されるため、ローカル変数という用語が使用されました。これは、代入で var を使用したためです。関数内の var を取り除くと、次のようになります。
var local = true;
var global = true;
function test(){
local = false;
global = false;
console.log(local)
console.log(global)
}
test();
console.log(local);
console.log(global);
出力は偽、偽、偽、偽です
これは、ローカル スコープまたは関数で新しい変数を作成するのではなく、単にグローバル変数を使用して false に再割り当てするためです。
コード内で var を使用せずに変数を使用すると、自動的に var var_name がグローバル スコープに配置されます。
someFunction() {
var a = some_value; /*a has local scope and it cannot be accessed when this
function is not active*/
b = a; /*here it places "var b" at top of script i.e. gives b global scope or
uses already defined global variable b */
}
スコープの問題に加えて、巻き上げについて言及する人もいますが、誰も例を挙げていません。グローバル スコープの場合は次のとおりです。
console.log(noErrorCase);
var noErrorCase = "you will reach that point";console.log(runTimeError);
runTimeError = "you won't reach that point";「var」変数を使用しないと、値を設定するときにのみ定義できます。例:
my_var;
グローバル スコープまたはその他のスコープでは動作しません。次のような値にする必要があります。
my_var = "value";
一方、次のような vaiable を定義できます。
var my_var;
その値はundefined( その値は ではなくnull、興味深いことに等しくありませんnull。)