Scopes in JavaScript

JavaScript has three types of scopes.

1. Global Scope
2. Local Scope
3. Block Scope

1. Global Scope

Variables declared outside of functions have global scope. Global variables can be accessed from anywhere in the JavaScript program.

let name = 'Deepak';
console.log(name);          // Deepak

In this code, the variable name has global scope.

When a variable is declared without the keywords var, let, and const, it automatically becomes a global variable.

function greet() {
  name = 'Deepak';
}
greet();
console.log(`Welcome ${name}`); // Welcome Deepak

In this code, the variable name is a global variable.

Note: this implicit-global behavior only works in non-strict mode. In strict mode — and inside ES modules, which are strict by default — assigning to an undeclared variable throws ReferenceError instead of creating a global.

2. Local Scope (or function scope)

Variables declared within a JavaScript function have local scope. A local variable can only be used inside the function where it is defined, and it remains hidden from outside the function.

function greet() {
  let name = 'Deepak';
  console.log(`Welcome ${name}`); // Welcome Deepak
}
console.log(name); // ReferenceError: name is not defined

In the code of the greet function, the variable name has a local scope and can only be used inside the greet function. It is not accessible outside of the greet function.

3. Block Scope

Variables declared inside curly braces {} have block scope. The let and const keywords provide block scope in JavaScript.

{
  let name = 'deepak';
}

In this code, the variable name has block scope and cannot be accessed outside of the curly braces {}.

Variables declared with var do not have block scope and are accessible throughout the entire function or global scope, depending on where they are declared.

{
  var name = 'deepak';
}

In this code, the variable name is a global variable.

Lifetime of JavaScript variables

Local variables are created when a function is invoked (i.e., called), and they are stored in memory while the function is executing. Once the function's execution is completed, the local variables are automatically garbage collected, meaning their memory is freed up for reuse by the system.

Global variables persist throughout the lifetime of the web page or the script. They are only garbage collected when the page is closed or when the script is no longer needed, and its associated memory is released by the browser or JavaScript engine.

Questions

1. What will be the output of this program?

var x = 1;
let y = 1;
 
if (true) {
  var x = 2;
  let y = 2;
}
console.log(x);
console.log(y);

Answer — 2, 1

2. What will be the output of this program?

var a = 'abc';
var b = 'def';
 
function fn() {
  a = 123;
  var b = 456;
  console.log(a, b);
}
 
fn();

Answer — 123, 456

3. What will be the output of this program?

var text = 'outside';
function logIt() {
  console.log(text);
  var text = 'inside';
}
logIt();

Answer — undefined

4. What will be the output of this program?

function greet() {
  name = 'Deepak';
  console.log(`Welcome ${name}`);
}
 
greet();
console.log(name);

Answer — Welcome Deepak, then Deepak (in non-strict mode; throws ReferenceError in strict mode or ES modules).

5. What will be the output of this program?

function greet() {
  let name = 'Deepak';
  console.log(`Welcome ${name}`);
}
 
greet();
console.log(name);

Answer — Welcome Deepak, then ReferenceError: name is not defined

6. What will be the output of this program?

{
  const name = 'deepak';
}
console.log(name);

Answer — ReferenceError: name is not defined

7. What will be the output of this program?

{
  var name = 'deepak';
}
console.log(name);

Answer — deepak