📟 Variable Declaration

Useful resources:

• Var, Let, and Const – What's the Difference?
• Variables and scoping

var

Scope of var

var declarations are global or function scope.

Global Scope

The scope is global when var variable is declared outside of a function.

Global Scope

var myVar = "Global Variable";
console.log(myVar); // Global Variable
console.log(window.myVar); // Global Variable

Function Scope

The scope is function scope when var variable is declared inside a function. This means that it is only available within that function.

Function Scope

function sayAge() { var age = 666; console.log(age); } sayAge(); console.log(age);

1function sayAge() {
2  var age = 666;
3  console.log(age);
4}
5sayAge();
6console.log(age);

Re-declared and Updated

Re-declaration?

var variable can be re-declared and updated

var age = 10; var age = 20; // re-declare 'age' console.log(age); // update 'age' age = 30; console.log(age);

1var age = 10;
2var age = 20; // re-declare 'age'
3console.log(age);
4
5// update 'age'
6age = 30;
7console.log(age);

note

A repeated var declaration of the same identifier name in a scope is effectively a do-nothing operation.

repeated var

var studentName = "Frank"; console.log(studentName); // Frank var studentName; console.log(studentName); // ???

1var studentName = "Frank";
2console.log(studentName);
3// Frank
4
5var studentName;
6console.log(studentName); // ???

After 'pre-process' repeated var

var studentName;
var studentName; // pointless, no-op

studentName = "Frank";
console.log(studentName);
// Frank

console.log(studentName); // Frank

Hoisting of var

Hoisting: Yet Another Metaphor

It is useful to think of hoisting as a series of actions JS takes in setting up the program before execution.

1. The identifier is hoisted to the top of the scope
2. It's automatically initialized to the value undefined. So that the variable can be used throughout the entire scope.

Before 'pre-process'

age = 20;
console.log(age);
// 20
var age = 30;

After 'pre-process'

var age; // hoisted declaration

age = 20;
console.log(age);
age = 30;

info

However, function declarations are entirely hoisted to the top of each scope. And they are hoisted first, then variables are hoisted immediately after all the functions.

Before 'pre-process'

age = 20;
sayAge(); // age is 20

function sayAge() {
  console.log(`age is ${age}`);
}
var age;

After 'pre-process'

function sayAge() {
  console.log(`age is ${age}`);
}
var age;

age = 20;
sayAge(); // age is 20

Questions

Functions are hoisted entirely

console.log(a); if (a) { var a = 1; console.log(a); } function a() { console.log(this); } console.log(a); a();

1console.log(a);
2if (a) {
3  var a = 1;
4  console.log(a);
5}
6
7function a() {
8  console.log(this);
9}
10
11console.log(a);
12
13a();

---

hoisting

"use strict"; var b = 2; if (true) { let a = 2; var b = 3; var c = 4; const d = 5; } // console.log(a); ReferenceError: a is not defined console.log(b); console.log(c); console.log(d); var d = 6;

1"use strict";
2var b = 2;
3if (true) {
4  let a = 2;
5  var b = 3;
6  var c = 4;
7  const d = 5;
8}
9
10// console.log(a); ReferenceError: a is not defined
11console.log(b);
12console.log(c);
13console.log(d);
14var d = 6;