javascript container




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

참고 :이 질문은 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;

?

언제 어느 것을 사용 하시겠습니까? 그리고 왜 / 무엇을합니까?


var 사용하지 마십시오!

var 은 변수를 선언하기 이전의 ES6 방식이었습니다. 우리는 현재 미래 에 있으며 코딩을해야합니다.

const 사용하고 let

const 는 95 %의 경우에 사용되어야합니다. 변수 참조가 변경되지 않도록 배열, 객체 및 DOM 노드 속성이 변경 될 수 있고 const 이어야합니다.

let 은 재 할당을 기대하는 변수에 사용해야합니다. 여기에는 for 루프가 포함됩니다. 초기화 이후에 varName = 을 쓰는 경우 let 사용 let .

두 언어 모두 대부분의 다른 언어에서 예상대로 블록 수준 범위 지정을 사용합니다.


" 지역글로벌 "의 차이점은 전적으로 정확하지는 않습니다.

" 로컬가장 가까운 "차이점으로 생각하는 것이 좋습니다. 가장 가까운 것이 확실 할 수는 있지만 항상 그런 것은 아닙니다.

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

@Chris S는 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)})
})


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

with (window) {
    //Your code
}

with - MDN 에 대한 추가 정보

var현재 스코프에서 변수 선언하기 때문에 윈도우 내부에서 var 를 선언하고 전혀 선언하지 않는 것과는 차이가 없습니다.

차이점은 창 내부에 직접 있지 않은 경우입니다 (예 : 함수 내부 또는 블록 내부).

var 사용하면 같은 이름을 가진 외부 변수를 숨길 수 있습니다. 이 방법으로 "개인"변수를 시뮬레이션 할 수 있지만 그 또 다른 주제입니다.

엄지 손가락 규칙은 var 를 항상 사용하는 것입니다. 그렇지 않으면 미묘한 버그가 발생할 위험이 있기 때문입니다.

편집 : 내가받은 critiques 후, 나는 다음과 같은 강조하고 싶습니다 :

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

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

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

변수를 선언 할 때 var 를 사용하지 않으면 변수는 전역 범위에있게됩니다.

자세한 내용은 Google의 '스코프 체인 자바 스크립트'를 검색하십시오.


나는 사람들이 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);

결론

  1. 함수가 바깥에서 값을 얻으면 var가 있든 없든 (a, b와 같이) 선언 된 것과 상관없이 스크립트는 값을 보존하며 스크립트를 통해 다양한 함수 내에서 추가 된 다른 값은 보존됩니다.
  2. 변수가 c와 같은 함수 내에서 var없이 선언되면 이전 규칙처럼 작동 할 것이고 이후부터 모든 함수에서 그 값을 유지할 것입니다. 함수 testVar1 ()에서 첫 번째 값을 얻었거나 값을 유지하고 testVar2 () 함수에서 추가 값을 얻습니다.
  3. 변수가 함수 내에서만 var로 선언되면 (예 : testVar1 또는 testVar2의 d) 함수가 끝날 때마다 정의되지 않습니다. 따라서 함수에서 임시 변수가됩니다.

다음은이 개념을 이해할 수 있도록 작성한 예제 코드입니다.

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

또 다른 차이점

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

동안

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

변수를 선언하려면 항상 var 키워드를 사용해야합니다. 왜? 좋은 코딩 방법은 그 자체만으로는 충분하지만, var 키워드없이 변수를 선언하면 전역 범위에서 선언됩니다 (이 같은 변수를 "묵시적"전역이라고 함). Douglas Crockford 는 암시 적 전역을 절대 사용하지 말 것을 권장 하며 Apple JavaScript Coding Guidelines 에 따라 다음을 수행합니다.

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

즉, 항상 var 키워드를 사용하여 변수를 선언하십시오.


이것을 배우려고 노력하는 누군가가 내가 그것을 보는 방법입니다. 위의 예는 초보자에게 약간 지나치게 복잡 할 수도 있습니다.

이 코드를 실행하면 :

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로 재 지정하기 때문입니다.


var - global 변수가 없으면.

로컬 컨텍스트에서의 init 전역 변수는 악의이기 때문에 항상 var 문을 사용하도록 강력히 권장됩니다. 그러나이 더러운 속임수가 필요한 경우 페이지 시작 부분에 주석을 작성해야합니다.

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

var 사용하면 전역 변수와 변수가 서로 충돌하여 변수가 서로 충돌하여 원치 않는 덮어 쓰기가 발생하는 것을 방지하는 것이 좋습니다.





ecmascript-5