var 키워드의 목적은 무엇이며 언제 사용(또는 생략)해야 합니까?

질문자 :Community Wiki

참고 : 이 질문은 ECMAScript 버전 3 또는 5의 관점에서 질문되었습니다. ECMAScript 6 릴리스에 새로운 기능이 도입되면서 답변이 구식이 될 수 있습니다.

전역 범위에 있다면 큰 차이가 없습니다. 설명을 위해 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

Greg

차이가 있습니다.

var x = 1 은 현재 범위(실행 컨텍스트라고도 함)에서 x 를 선언합니다. 선언이 함수에 나타나는 경우 - 지역 변수가 선언됩니다. 전역 범위에 있는 경우 전역 변수가 선언됩니다.

x = 1 은 단지 속성 할당입니다. 먼저 범위 체인에 대해 x 를 해결하려고 시도합니다. 해당 범위 체인의 아무 곳에서나 찾으면 할당을 수행합니다. x 찾지 못한 경우에만 전역 개체 (범위 체인의 최상위 개체)에 x 속성을 만듭니다.

이제 전역 변수를 선언하지 않고 전역 속성을 만듭니다.

변수 선언이 속성을 생성 한다는 점(변수 객체에서만)과 Javascript의 모든 속성(예: ECMAScript)에는 해당 속성을 설명하는 특정 플래그(ReadOnly, DontEnum 및 삭제하지 마세요.

변수 선언은 DontDelete 플래그를 사용하여 속성을 생성하기 때문에 var x = 1 과 x = 1 (전역 범위에서 실행될 때)의 차이점은 전자(변수 선언)가 DontDelete'able 속성을 생성하고 후자는 DontDelete'able 속성을 생성하지 않는다는 것입니다. . 결과적으로 이 암시적 할당을 통해 생성된 속성은 전역 개체에서 삭제할 수 있으며 이전 속성(변수 선언을 통해 생성된 속성)은 삭제할 수 없습니다.

그러나 이것은 물론 이론일 뿐이며 실제로는 구현의 다양한 버그(예: IE의 버그)로 인해 둘 사이에 훨씬 더 많은 차이점이 있습니다.

모든 것이 의미가 있기를 바랍니다. :)

---

[업데이트 2010/12/16]

ES5(ECMAScript 5; 최근에 표준화된 언어의 5판)에는 선언되지 않은 할당의 동작을 약간 변경하는 옵트인 언어 모드인 소위 "엄격한 모드"가 있습니다. 엄격 모드에서 선언되지 않은 식별자에 대한 할당은 ReferenceError 입니다. 이에 대한 근거는 우발적인 할당을 잡아 원하지 않는 전역 속성이 생성되는 것을 방지하기 위한 것입니다. 일부 최신 브라우저는 이미 엄격 모드에 대한 롤링 지원을 시작했습니다. 예를 들어 내 compat 테이블 을 참조하십시오.

kangax

"로컬 과 글로벌 "의 차이라고 말하는 것은 완전히 정확하지 않습니다.

"로컬 과 가장 가까운 "의 차이로 생각하는 것이 더 나을 것입니다. 가장 가까운 것은 확실히 전역적일 수 있지만 항상 그런 것은 아닙니다.

 /* 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; } }

Jonathan Lonowski

Javascript가 브라우저에서 실행될 때 모든 코드는 다음과 같이 with 문으로 둘러싸여 있습니다.

 with (window) { //Your code }

with - MDN 에 대한 추가 정보

var 는 현재 범위에서 변수를 선언하므로 window 내부에서 var 선언하는 것과 전혀 선언하지 않는 것의 차이는 없습니다.

차이점은 함수 내부 또는 블록 내부와 같이 창 내부에 직접 있지 않을 때 발생합니다.

var 사용하면 같은 이름을 가진 외부 변수를 숨길 수 있습니다. 이런 식으로 "비공개" 변수를 시뮬레이션할 수 있지만 이는 다른 주제입니다.

var 사용하는 것입니다. 그렇지 않으면 미묘한 버그가 발생할 위험이 있기 때문입니다.

편집: 내가 받은 비판 후에 다음을 강조하고 싶습니다.

• var 는 현재 범위에서 변수를 선언합니다.
• 전역 범위는 window
• var 사용하지 않으면 암시적으로 var 를 선언합니다(창).
• var 사용하여 전역 범위(창)에서 변수를 선언하는 것은 생략하는 것과 같습니다.
• 사용 창에서 다른 범위에서 변수 선언 var 하지 않고 변수를 선언 같은 것이 아니다 var
• 좋은 습관이기 때문에 var 명시적으로 선언하십시오.

kentaromiura

var 키워드를 사용하여 변수를 선언하십시오. 왜요? 좋은 코딩 방법은 그 자체로 충분한 이유가 되지만 생략하면 전역 범위에서 선언된다는 의미입니다(이와 같은 변수를 "암시적" 전역이라고 함). Douglas Crockford 는 Apple JavaScript 코딩 지침 에 따라 묵시적 전역을 사용하지 않을 것을 권장합니다 .

var 키워드 없이 생성된 모든 변수는 전역 범위에서 생성되고 함수가 반환될 때 가비지 수집되지 않으므로(범위를 벗어나지 않기 때문에) 메모리 누수 가능성이 있습니다.

Steve Harrison

var 하여 지역 변수를 선언하지 않음으로써 어떻게 벗어날 수 있는지에 대한 좋은 예입니다.

 <script> one(); function one() { for (i = 0;i < 10;i++) { two(); alert(i); } } function two() { i = 1; } </script>

( i for 루프에서 로컬로 선언되지 않고 전역적으로 선언되기 때문에 루프가 반복될 때마다 재설정됩니다.) 결국 무한 루프가 발생합니다.

Chris S

나는 대부분의 상황에서 var 를 사용하는 것이 더 낫다고 말하고 싶습니다.

지역 변수는 항상 전역 범위의 변수보다 빠릅니다.

var 를 사용하여 변수를 선언하지 않으면 변수는 전역 범위에 있습니다.

자세한 내용은 Google에서 "스코프 체인 JavaScript"를 검색할 수 있습니다.

Billy

var 사용하지 마십시오!

var 는 ES6 이전에 변수를 선언하는 방법이었습니다. 우리는 지금 미래 에 있고 당신은 그렇게 코딩해야 합니다.

const 사용하고 let

const 는 ~95%의 경우에 사용해야 합니다. 변수 참조가 변경될 수 없도록 하므로 배열, 객체 및 DOM 노드 속성이 변경될 수 있으며 아마도 const 여야 합니다.

let 은 재할당될 것으로 예상되는 모든 변수에 사용해야 합니다. 여기에는 for 루프 내도 포함됩니다. 초기화 이후에 varName = 을 작성했다면 let 사용하십시오.

둘 다 대부분의 다른 언어에서 예상되는 대로 블록 수준 범위 지정이 있습니다.

Gibolt

다른 차이점 예

 var a = a || [] ; // works

동안

 a = a || [] ; // a is undefined error.

Pranay Warke

var 사용하는 것은 변수가 전역 범위를 복잡하게 만들고 변수가 서로 충돌하여 원치 않는 덮어쓰기를 일으키는 것을 방지하는 데 항상 좋은 생각입니다.

kevinji

var 없이 - 전역 변수.

로컬 컨텍스트의 init 전역 변수가 나쁘기 때문에 항상 var 문을 사용하는 것이 좋습니다. 그러나 이 더러운 트릭이 필요한 경우 페이지 시작 부분에 주석을 작성해야 합니다.

 /* global: varname1, varname2... */

Anatoliy

이것은 이 개념을 이해하기 위해 작성한 예제 코드입니다.

 var foo = 5; bar = 2; fooba = 3; // Execute an anonymous function (function() { bar = 100; //overwrites global scope bar var foo = 4; //a new foo variable is created in this' function's scope var fooba = 900; //same as above document.write(foo); //prints 4 document.write(bar); //prints 100 document.write(fooba); //prints 900 })(); document.write('<br/>'); document.write('<br/>'); document.write(foo); //prints 5 document.write(bar); //prints 100 document.write(fooba); //prints 3

Community Wiki

var 와 no var 사이의 실질적인 차이점(및 위험)을 보여주는 좋은 예를 제공했습니다. 여기에 또 다른 것이 있습니다. 차이점은 비동기 환경에서만 볼 수 있으므로 테스트 중에 쉽게 지나칠 수 있기 때문에 이것이 특히 위험합니다.

예상대로 다음 스니펫은 ["text"] 출력합니다.

 function var_fun() { let array = [] array.push('text') return array } console.log(var_fun())

다음 스니펫도 마찬가지입니다( array 전에 let 주의).

 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)}) })

thisismydesign

이것을 배우려고하는 사람으로서 이것이 내가 보는 방법입니다. 위의 예는 초보자에게 다소 복잡할 수 있습니다.

이 코드를 실행하면:

 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, false, false, false입니다.

이는 지역 범위나 함수에서 새 변수를 생성하는 대신 단순히 전역 변수를 사용하고 이를 false로 재할당하기 때문입니다.

Danrex

나는 사람들이 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 \na, b defined but c, d not defined yet: \na:" + a + "\nb:" + 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: \na:" + a + "\nb:" + b + "\nc:" + c + "\nd:" + d); a = a + 5; b = b + 5; c = c + 5; d = d + 5; alert("After added values inside the 1. function: \na:" + a + "\nb:" + b + "\nc:" + c + "\nd:" + 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: \na:" + a + "\nb:" + b + "\nc:" + c + "\nd:" + d); a = a + 5; b = b + 5; c = c + 5; d = d + 5; alert("After added values inside the 2. function: \na:" + a + "\nb:" + b + "\nc:" + c + "\nd:" + d); }; testVar2(); alert("Now outside of all functions... \n \n Final Values: \na:" + a + "\nb:" + b + "\nc:" + 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);

결론

1. var(예:, b)를 사용하거나 사용하지 않고 선언하더라도 함수 외부에서 값을 가져오면 해당 값을 유지하고 스크립트를 통해 다양한 함수 내부에 추가된 다른 값도 유지됩니다.
2. 변수가 함수 내에서 var 없이 선언되면(c와 같이) 이전 규칙처럼 작동하며 이제부터 모든 함수에서 값을 유지합니다. testVar1() 함수에서 첫 번째 값을 얻었거나 여전히 값을 유지하고 testVar2() 함수에서 추가 값을 얻습니다.
3. 변수가 함수 내에서만 var로 선언된 경우(예: testVar1 또는 testVar2의 d) 함수가 끝날 때마다 정의되지 않습니다. 따라서 함수의 임시 변수가 됩니다.

Tarik

코드 내에서 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 ie gives b global scope or uses already defined global variable b */ }

Akash Arora

범위 문제 외에도 일부 사람들은 호이스팅에 대해서도 언급했지만 아무도 예를 들어주지 않았습니다. 다음은 전역 범위에 대한 것입니다.

 console.log(noErrorCase); var noErrorCase = "you will reach that point";

 console.log(runTimeError); runTimeError = "you won't reach that point";

deathangel908

"var"를 사용하지 않고 변수는 값을 설정할 때만 정의할 수 있습니다. 예:

 my_var;

전역 범위 또는 다른 범위 에서 작동할 수 없습니다. 다음과 같은 값을 가져야 합니다.

 my_var = "value";

반면에 다음과 같이 vaiable을 정의할 수 있습니다.

 var my_var;

그 값은 undefined (그 값은 null null 과 같지 않습니다.).

umut

브라우저에서 창 개체에 변수를 첨부하지 않으려면 var 키워드를 사용해야 합니다. 다음은 var 키워드를 사용하여 glocal 범위 지정과 로컬 범위 지정 사이의 범위 지정 및 차이점을 설명하는 링크입니다.

var 키워드를 사용하지 않고 변수가 정의되면 간단한 "할당" 작업처럼 보입니다.

자바스크립트에서 값이 변수에 할당되면 인터프리터는 먼저 할당과 동일한 컨텍스트/범위에서 "변수 선언"을 찾으려고 시도합니다. 인터프리터가 dummyVariable = 20 실행할 때 함수 시작 부분에서 dummyVariable 선언을 찾습니다. (모든 Variable 선언은 자바스크립트 인터프리터에 의해 컨텍스트의 시작 부분으로 이동되고 이것을 호이스팅이라고 하기 때문에)

자바 스크립트 에서 호이스팅을보고 싶을 수도 있습니다.

S Khurana

출처 : http:www.stackoverflow.com/questions/1470488/what-is-the-purpose-of-the-var-keyword-and-when-should-i-use-it-or-omit-it