usar - this javascript medium

¿Cuál es el propósito de la palabra clave var y cuándo debo usarla(u omitirla)?

Question

NOTA : Esta pregunta se hizo desde el punto de vista de ECMAScript versión 3 o 5. Las respuestas pueden quedar obsoletas con la introducción de nuevas características en el lanzamiento de ECMAScript 6

¿Cuál es exactamente la función de la palabra clave var en JavaScript, y cuál es la diferencia entre

var someNumber = 2;
var someFunction = function() { doSomething; }
var someObject = { }
var someObject.someProperty = 5;

y

someNumber = 2;
someFunction = function() { doSomething; }
someObject = { }
someObject.someProperty = 5;

?

¿Cuándo usarías uno de ellos y por qué / qué hace?

Answer 1

¡No uses var !

var era la forma pre-ES6 de declarar una variable. Ahora estamos en el futuro , y usted debería estar codificando como tal.

Usa const y let

const debe utilizarse para el 95% de los casos. Esto hace que la referencia de la variable no pueda cambiar, por lo que las propiedades de la matriz, el objeto y el nodo DOM pueden cambiar y probablemente deberían ser const .

let debe ser utilizado para cualquier variable que espera ser reasignada. Esto incluye dentro de un bucle for. Si alguna vez escribe varName = más allá de la inicialización, use let .

Ambos tienen un alcance de nivel de bloque, como se espera en la mayoría de los otros idiomas.

Answer 2

@Chris S dio un buen ejemplo que muestra la diferencia práctica (y el peligro) entre var y no var . Aquí hay otro, lo encuentro particularmente peligroso porque la diferencia solo es visible en un entorno asíncrono por lo que puede deslizarse fácilmente durante la prueba.

Como era de esperar, el siguiente fragmento de código ["text"] :

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

console.log(var_fun())

Lo mismo ocurre con el siguiente fragmento de código (tenga en cuenta la ausencia antes de la array ):

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

console.log(var_fun())

La ejecución de la manipulación de datos de forma asíncrona todavía produce el mismo resultado con un solo ejecutor:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push(''text'')
    return array
  })
}

var_fun().then(result => {console.log(result)})

Pero se comporta de manera diferente con los múltiples:

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

Usando let sin embargo:

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

Answer 3

Como alguien que intenta aprender esto, así es como lo veo. Los ejemplos anteriores fueron quizás un poco demasiado complicados para un principiante.

Si ejecuta este código:

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

La salida se leerá como: falso, falso, verdadero, verdadero

Debido a que ve las variables en la función como separadas de aquellas que están fuera de ella, de ahí el término variable local y esto fue porque usamos var en la asignación. Si quitas la var en la función, ahora se lee así:

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

El resultado es falso, falso, falso, falso.

Esto se debe a que, en lugar de crear una nueva variable en el ámbito o función local, simplemente utiliza las variables globales y las reasigna a falso.

Answer 4

Cuando se ejecuta Javascript en un navegador, todo su código está rodeado por una declaración with, de este modo:

with (window) {
    //Your code
}

Más información sobre with - MDN

Como var declara una variable en el alcance actual , no hay diferencia entre declarar var dentro de la ventana y no declararla en absoluto.

La diferencia se produce cuando no está directamente dentro de la ventana, por ejemplo, dentro de una función o dentro de un bloque.

Usar var te permite ocultar variables externas que tienen el mismo nombre. De esta manera puedes simular una variable "privada", pero ese es otro tema.

Una regla de oro es usar siempre var , porque de lo contrario corre el riesgo de introducir errores sutiles.

EDITAR: Después de las críticas que recibí, me gustaría enfatizar lo siguiente:

• var declara una variable en el alcance actual
• El ámbito global es la window
• No usar var declara implícitamente var en el ámbito global (ventana)
• Declarar una variable en el alcance global (ventana) usando var es lo mismo que omitirla.
• Declarar una variable en ámbitos diferentes de la ventana usando var no es lo mismo que declarar una variable sin var
• Siempre declare var explícitamente porque es una buena práctica.

Answer 5

Debe usar la palabra clave var a menos que tenga la intención de tener la variable adjunta al objeto de la ventana en el navegador. Aquí hay un enlace que explica el alcance y la diferencia entre el alcance glocal y el alcance local con y sin la palabra clave var.

Cuando las variables se definen sin el uso de la palabra clave var, su aspecto es una simple operación de "asignación".

Cuando el valor se asigna a una variable en javascript, el intérprete primero intenta encontrar la "declaración de variable" en el mismo contexto / alcance que el de asignación. Cuando el intérprete ejecuta dummyVariable = 20 , busca la declaración de dummyVariable al comienzo de la función. (Dado que todas las declaraciones de variables se mueven al principio del contexto mediante un intérprete de javascript y esto se llama elevación)

También es posible que desee ver el levantamiento en javascript

Answer 6

Decir que es la diferencia entre " local y global " no es del todo exacto.

Podría ser mejor pensar en ello como la diferencia entre " local y más cercano ". El más cercano seguramente puede ser global, pero no siempre será así.

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

Answer 7

Dentro de un código, si usa una variable sin usar var, lo que sucede es que var var_name se coloca automáticamente en el ámbito global, por ejemplo:

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

Answer 8

Este es un buen ejemplo de cómo puede salir atrapado al no declarar variables locales con var :

<script>
one();

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

function two()
{
    i = 1;
}
</script>

(Se restablece en cada iteración del bucle, ya que no se declara localmente en el bucle for sino globalmente) y, finalmente, se obtiene un bucle infinito.

Answer 9

Este es un código de ejemplo que he escrito para que entiendas este concepto:

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

Answer 10

Si estás en el ámbito global, entonces no hay mucha diferencia. Lee Kangax''s respuesta Kangax''s para explicación

Si está en una función, var creará una variable local, "no var" buscará la cadena de alcance hasta que encuentre la variable o alcance el alcance global (en qué punto la creará):

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

Si no estás haciendo una tarea, necesitas usar var :

var x; // Declare x

Answer 11

Siempre debe utilizar la palabra clave var para declarar variables. ¿Por qué? Una buena práctica de codificación debería ser una razón suficiente en sí misma, pero declarar una variable sin la palabra clave var significa que se declara en el ámbito global (una variable como esta se denomina global "implícita"). Douglas Crockford recomienda nunca usar globales implícitos , y de acuerdo con las Pautas de codificación de JavaScript de Apple :

Cualquier variable creada sin la palabra clave var se crea en el ámbito global y no se recolecta cuando la función regresa (porque no sale del ámbito), lo que presenta la oportunidad de una pérdida de memoria.

Entonces, en resumen, siempre declare variables usando la palabra clave var .

Answer 12

Sin var - variable global.

Se recomienda encarecidamente utilizar SIEMPRE la instrucción var , porque la variable global de inicio en el contexto local es mala. Pero, si necesita este truco sucio, debe escribir un comentario al comienzo de la página:

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

Answer 13

Sin usar "var" las variables solo se pueden definir cuando se establece un valor. Por ejemplo:

my_var;

No se puede trabajar en ámbito global o en cualquier otro ámbito . Debe ser con valor como:

my_var = "value";

Por otro lado puedes definir una variable similar;

var my_var;

Su valor undefined está undefined (su valor no es null y no es igual a null interesante).

Answer 14

Usar var es siempre una buena idea para evitar que las variables abarroten el alcance global y que las variables entren en conflicto entre sí, lo que provoca una sobrescritura no deseada.

Answer 15

Veo que la gente está confundida cuando declara variables con o sin var y dentro o fuera de la función. Aquí hay un ejemplo profundo que lo guiará a través de estos pasos:

Vea el script a continuación en acción aquí en 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);

Conclusión

1. No importa lo declarado con o sin var (como a, b) si obtienen su valor fuera de la función, conservarán su valor y también se conservarán todos los demás valores que se agreguen dentro de varias funciones a través del script.
2. Si la variable se declara sin var dentro de una función (como c), actuará como la regla anterior, a partir de ahora conservará su valor en todas las funciones. O bien obtuvo su primer valor en la función testVar1 () aún conserva el valor y obtiene un valor adicional en la función testVar2 ()
3. Si la variable se declara con var solo dentro de una función (como d en testVar1 o testVar2), quedará indefinida cada vez que la función finalice. Entonces será variable temporal en una función.

Answer 16

Yo diría que es mejor usar var en la mayoría de las situaciones.

Las variables locales son siempre más rápidas que las variables en el ámbito global.

Si no utiliza var para declarar una variable, la variable estará en el ámbito global.

Para obtener más información, puede buscar "JavaScript de la cadena de alcance" en Google.

Answer 17

otra diferencia por ejemplo

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

mientras

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

Answer 18

Hay una diferencia .

var x = 1 declara la variable x en el alcance actual (también conocido como contexto de ejecución). Si la declaración aparece en una función, se declara una variable local; Si está en el ámbito global, se declara una variable global.

x = 1 , por otro lado, es simplemente una asignación de propiedades. Primero intenta resolver x contra la cadena de alcance. Si lo encuentra en cualquier parte de esa cadena de alcance, realiza una tarea; si no encuentra x , solo entonces crea la propiedad x en un objeto global (que es un objeto de nivel superior en una cadena de alcance).

Ahora, observe que no declara una variable global, crea una propiedad global.

La diferencia entre los dos es sutil y puede ser confusa a menos que entienda que las declaraciones de variables también crean propiedades (solo en un Objeto de Variable) y que cada propiedad en Javascript (bueno, ECMAScript) tiene ciertos indicadores que describen sus propiedades: ReadOnly, DontEnum y DontDelete.

Dado que la declaración de variable crea una propiedad con el indicador DontDelete, la diferencia entre var x = 1 y x = 1 (cuando se ejecuta en el ámbito global) es que la primera declaración de una variable crea la propiedad DontDelete''able, y la última no. . Como consecuencia, la propiedad creada a través de esta asignación implícita se puede eliminar del objeto global, y la anterior, la creada a través de la declaración de variable, no se puede eliminar.

Pero esto es solo una teoría, por supuesto, y en la práctica hay incluso más diferencias entre los dos , debido a varios errores en las implementaciones (como las de IE).

Espero que todo tenga sentido:)

[Actualización 2010/12/16]

En ES5 (ECMAScript 5; recientemente estandarizada, quinta edición del lenguaje) hay un llamado "modo estricto", un modo de idioma de inclusión, que cambia ligeramente el comportamiento de las asignaciones no declaradas. En modo estricto, la asignación a un identificador no declarado es un error de referencia . La razón de esto fue capturar asignaciones accidentales, impidiendo la creación de propiedades globales no deseadas. Algunos de los navegadores más nuevos ya han comenzado a utilizar el modo estricto. Ver, por ejemplo, mi tabla de compat .