Skip to main content Accessibility Feedback

Defining and updating JavaScript variables in different scopes

Yesterday, we learned about scope in JavaScript. Today, let’s learn how to update variables across different types of scopes.

Prefixing a variable with var defines a new variable. Omitting var updates an existing variable.

There are two caveats to this:

  1. If a variable is already defined in the current scope, prefixing it with var will throw an error.
  2. If a variable isn’t currently defined, omitting var creates a new variable (you should always use var to define a new variable, though).

You can define a variable in a function that has the same name as a global or lexical variable without modifying that variable.

var sandwich = 'tuna';

var logSandwich = function () {
    // logs "turkey"
    // Does NOT update the global `sandwich` variable
    var sandwich = 'turkey';
    console.log(sandwich);

};
logSandwich();

// logs "tuna"
console.log(sandwich);

If you omit the leading var, you can update a variable in the global or lexical scope from within a function.

var sandwich = 'tuna';

// logs "tuna"
console.log(sandwich);

var logSandwich = function () {
    // logs "tuna"
    console.log(sandwich);

    // Updates `sandwich` in the global scope
    sandwich = 'turkey';

    // logs "turkey"
    console.log(sandwich);

};
logSandwich();

// logs "turkey"
console.log(sandwich);

Tomorrow, we’ll learn a few approaches to keeping code out of the global scope (and why you want to).


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips