Javascript variable declaration in function
The var statement declares function-scoped or globally-scoped variables, optionally initializing each to a value.
Try it
Syntax
var name1; var name1 = value1; var name1 = value1, name2 = value2; var name1, name2 = value2; var name1 = value1, name2, /* …, */ nameN = valueN;
The name of the variable to declare. Each must be a legal JavaScript identifier.
Initial value of the variable. It can be any legal expression. Default value is undefined .
The destructuring syntax can also be used to declare variables.
var bar > = foo; // where foo = < bar: 10, baz: 12 >; // This creates a variable with the name 'bar', which has a value of 10 Description
The scope of a variable declared with var is one of the following curly-brace-enclosed syntaxes that most closely contains the var statement:
Or if none of the above applies:
- The current module, for code running in module mode
- The global scope, for code running in script mode.
function foo() var x = 1; function bar() var y = 2; console.log(x); // 1 (function `bar` closes over `x`) console.log(y); // 2 (`y` is in scope) > bar(); console.log(x); // 1 (`x` is in scope) console.log(y); // ReferenceError, `y` is scoped to `bar` > foo();
Importantly, other block constructs, including block statements, try. catch , switch , headers of one of the for statements, do not create scopes for var , and variables declared with var inside such a block can continue to be referenced outside the block.
for (var a of [1, 2, 3]); console.log(a); // 3
In a script, a variable declared using var is added as a non-configurable property of the global object. This means its property descriptor cannot be changed and it cannot be deleted using delete . JavaScript has automatic memory management, and it would make no sense to be able to use the delete operator on a global variable.
"use strict"; var x = 1; Object.hasOwn(globalThis, "x"); // true delete globalThis.x; // TypeError in strict mode. Fails silently otherwise. delete x; // SyntaxError in strict mode. Fails silently otherwise.
In both NodeJS CommonJS modules and native ECMAScript modules, top-level variable declarations are scoped to the module, and are not added as properties to the global object.
The list that follows the var keyword is called a binding list and is separated by commas, where the commas are not comma operators and the = signs are not assignment operators. Initializers of later variables can refer to earlier variables in the list and get the initialized value.
Hoisting
var declarations, wherever they occur in a script, are processed before any code within the script is executed. Declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it’s declared. This behavior is called hoisting, as it appears that the variable declaration is moved to the top of the function, static initialization block, or script source in which it occurs.
Note: var declarations are only hoisted to the top of the current script. If you have two elements within one HTML, the first script cannot access variables declared by the second before the second script has been processed and executed.
This is implicitly understood as:
For that reason, it is recommended to always declare variables at the top of their scope (the top of global code and the top of function code) so it’s clear which variables are scoped to the current function.
Only a variable’s declaration is hoisted, not its initialization. The initialization happens only when the assignment statement is reached. Until then the variable remains undefined (but declared):
function doSomething() console.log(bar); // undefined var bar = 111; console.log(bar); // 111 >
This is implicitly understood as:
function doSomething() var bar; console.log(bar); // undefined bar = 111; console.log(bar); // 111 >
Redeclarations
Duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value, unless the declaration has an initializer.
var a = 1; var a = 2; console.log(a); // 2 var a; console.log(a); // 2; not undefined
var declarations can also be in the same scope as a function declaration. In this case, the var declaration’s initializer always overrides the function’s value, regardless of their relative position. This is because function declarations are hoisted before any initializer gets evaluated, so the initializer comes later and overrides the value.
var a = 1; function a() > console.log(a); // 1
var declarations cannot be in the same scope as a let , const , class , or import declaration.
var a = 1; let a = 2; // SyntaxError: Identifier 'a' has already been declared
Because var declarations are not scoped to blocks, this also applies to the following case:
let a = 1; var a = 1; // SyntaxError: Identifier 'a' has already been declared >
It does not apply to the following case, where let is in a child scope of var , not the same scope:
A var declaration within a function’s body can have the same name as a parameter.
function foo(a) var a = 1; console.log(a); > foo(2); // Logs 1
A var declaration within a catch block can have the same name as the catch -bound identifier, but only if the catch binding is a simple identifier, not a destructuring pattern. This is a deprecated syntax and you should not rely on it. In this case, the declaration is hoisted to outside the catch block, but any value assigned within the catch block is not visible outside.
try throw 1; > catch (e) var e = 2; // Works > console.log(e); // undefined Quick Tip: How to Declare Variables in JavaScript
When learning JavaScript one of the basics is to understand how to use variables. Variables are containers for values of all possible types, e.g. number, string or array (see data types). Every variable gets a name that can later be used inside your application (e.g. to read its value).
In this quick tip you’ll learn how to use variables and the differences between the various declarations.
Difference between Declaration, Initialization and Assignment
Before we start learning the various declarations, lets look at the lifecycle of a variable.
- Declaration: The variable is registered using a given name within the corresponding scope (explained below – e.g. inside a function).
- Initialization: When you declare a variable it is automatically initialized, which means memory is allocated for the variable by the JavaScript engine.
- Assignment: This is when a specific value is assigned to the variable.
Declaration Types
Note: while var has been available in JavaScript since its initial releast, let and const are only available in ES6 (ES2015) and up. See this page for browser compatibility.
var
var x; // Declaration and initialization x = "Hello World"; // Assignment // Or all in one var y = "Hello World"; This declaration is probably the most popular, as there was no alternative until ECMAScript 6. Variables declared with var are available in the scope of the enclosing function. If there is no enclosing function, they are available globally.
function sayHello() var hello = "Hello World"; return hello; > console.log(hello); This will cause an error ReferenceError: hello is not defined , as the variable hello is only available within the function sayHello . But the following will work, as the variable will be declared globally – in the same scope console.log(hello) is located:
var hello = "Hello World"; function sayHello() return hello; > console.log(hello); let
let x; // Declaration and initialization x = "Hello World"; // Assignment // Or all in one let y = "Hello World"; let is the descendant of var in modern JavaScript. Its scope is not only limited to the enclosing function, but also to its enclosing block statement. A block statement is everything inside < and >, (e.g. an if condition or loop). The benefit of let is it reduces the possibility of errors, as variables are only available within a smaller scope.
var name = "Peter"; if(name === "Peter") let hello = "Hello Peter"; > else let hello = "Hi"; > console.log(hello); This will cause an error ReferenceError: hello is not defined as hello is only available inside the enclosing block – in this case the if condition. But the following will work:
var name = "Peter"; if(name === "Peter") let hello = "Hello Peter"; console.log(hello); > else let hello = "Hi"; console.log(hello); > const
Technically a constant isn’t a variable. The particularity of a constant is that you need to assign a value when declaring it and there is no way to reassign it. A const is limited to the scope of the enclosing block, like let .
Constants should be used whenever a value must not change during the applications running time, as you’ll be notified by an error when trying to overwrite them.
Accidental Global Creation
You can write all of above named declarations in the global context (i.e. outside of any function), but even within a function, if you forget to write var , let or const before an assignment, the variable will automatically be global.
function sayHello() hello = "Hello World"; return hello; > sayHello(); console.log(hello); The above will output Hello World to the console, as there is no declaration before the assignment hello = and therefore the variable is globally available.
Note: To avoid accidentally declaring global variables you can use strict mode.
Hoisting and the Temporal Dead Zone
Another difference between var and let / const relates to variable hoisting. A variable declaration will always internally be hoisted (moved) to the top of the current scope. This means the following:
console.log(hello); var hello; hello = "I'm a variable"; var hello; console.log(hello); hello = "I'm a variable"; An indication of this behavior is that both examples will log undefined to the console. If var hello; wouldn’t always be on the top it would throw a ReferenceError .
This behavior called hoisting applies to var and also to let / const . As mentioned above, accessing a var variable before its declaration will return undefined as this is the value JavaScript assigns when initializing it.
But accessing a let / const variable before its declaration will throw an error. This is due to the fact that they aren’t accessible before their declaration in the code. The period between entering the variable’s scope and reaching their declaration is called the Temporal Dead Zone – i.e. the period in which the variable isn’t accessible.
You can read more about hoisting in the article Demystifying JavaScript Variable Scope and Hoisting.
Conclusion
To reduce susceptibility to errors you should use const and let whenever possible. If you really need to use var then be sure to move declarations to the top of the scope, as this avoids unwanted behavior related to hoisting.
Share This Article
Julian is a passionate software developer currently focusing on frontend technologies and loves open source.