What is the reason for allowing var to declare duplicates, while const and let restrict duplicate declarations?

Question

What is the reason for allowing var to declare duplicates, while const and let restrict duplicate declarations?

What is the reason behind var allowing duplicate declaration while const and let do not?

var allows for duplicate declarations:

xx=1;
xx=2;
console.log(xx+xx);//4

var xx=1;
var xx=2;
console.log(xx+xx);//4

However, let and const do not allow for duplicate declarations:

const yy=1;
const yy=2;
console.log(yy+yy);//Uncaught SyntaxError: Identifier 'yy' has already been declared",

let zz=1;
let zz=2;
console.log(zz+zz);//Uncaught SyntaxError: Identifier 'zz' has already been declared",

I came across an explanation on this page which states,

Assuming strict mode, var will let you re-declare the same variable in the same scope. On the other hand, let will not.

But why exactly do let and const not allow re-declaration? And why does var behave differently? How does JavaScript manage these three types of declarations?

javascript angular typescript variables var

Answer 1

Answer №1

Understanding Variable Declaration

Prior to 2016, the var keyword was used exclusively for defining variables.

When you use var x, the variable x is treated as if it were declared at the top of the enclosing scope (which is typically a function).

All declarations of the same variable within the same scope refer to the same variable due to hoisting.

An example illustrates this concept: within a function, declaring an inner variable with the same name as an outer variable does not affect the outer variable.

var name = 'Ramesh';

function myFunc() {
    var name;

    name = 'fenton';

    name = 'Fenton';

    alert(name);

}

myFunc();

alert(name);

Implicit declaration without using the var keyword adds variables to the global scope, leading to potential bugs.

The Introduction of let and const

The let and const keywords introduce block-scoped variables, offering clarity similar to other C-like languages.

These keywords promote disciplined programming by encouraging single declarations within blocks.

const prevents re-assignment after initialization, although the value itself can still mutate.

const x = [];

// Even though re-assignment is disallowed, mutation is possible
x.push('Fenton');

// x now contains ['Fenton']

Why Use let and const?

To avoid confusion with var's hoisted behavior and function-scope, embrace the advantages of const and let.

By default, prioritize const and only switch to let when re-assignment is necessary.

Answer 2

Understanding Variable Declaration

Prior to 2016, the var keyword was used exclusively for defining variables.

When you use var x, the variable x is treated as if it were declared at the top of the enclosing scope (which is typically a function).

All declarations of the same variable within the same scope refer to the same variable due to hoisting.

An example illustrates this concept: within a function, declaring an inner variable with the same name as an outer variable does not affect the outer variable.

var name = 'Ramesh';

function myFunc() {
    var name;

    name = 'fenton';

    name = 'Fenton';

    alert(name);

}

myFunc();

alert(name);

Implicit declaration without using the var keyword adds variables to the global scope, leading to potential bugs.

The Introduction of let and const

The let and const keywords introduce block-scoped variables, offering clarity similar to other C-like languages.

These keywords promote disciplined programming by encouraging single declarations within blocks.

const prevents re-assignment after initialization, although the value itself can still mutate.

const x = [];

// Even though re-assignment is disallowed, mutation is possible
x.push('Fenton');

// x now contains ['Fenton']

Why Use let and const?

To avoid confusion with var's hoisted behavior and function-scope, embrace the advantages of const and let.

By default, prioritize const and only switch to let when re-assignment is necessary.

Answer 3

Answer №2

Contrary to var, the introduction of let was part of the ES2015 specification. According to the details outlined in the documentation:

If you attempt to redeclare the same variable within the same function or block scope, a SyntaxError will be thrown.

This change was implemented to enhance scoping compared to traditional var.

Answer 4

Contrary to var, the introduction of let was part of the ES2015 specification. According to the details outlined in the documentation:

If you attempt to redeclare the same variable within the same function or block scope, a SyntaxError will be thrown.

This change was implemented to enhance scoping compared to traditional var.

Answer 5

Answer №3

What is the reason behind const and let not allowing duplicate declarations?

There is a significant distinction in how c# or java handle duplicate variable names compared to an interpreted language like js. In these languages, name collision results in a compilation error, whereas in js it works differently. Take a look at the code snippet below: Is the value of i duplicated? Not exactly, as in the function and block context, the same variable name can refer to two different variables depending on where they are declared.

function checkLetDuplication() {
  let i = 'function scope';
  for ( let i = 0 ; i < 3 ; i++ )
  {
    console.log('(for statement scope): inside the for loop i, equals: ', i);
  }
  console.log('("checkLetDuplication" function scope): outside the for loop i , equals: ', i);
}
checkLetDuplication();

Answer 6

What is the reason behind const and let not allowing duplicate declarations?

There is a significant distinction in how c# or java handle duplicate variable names compared to an interpreted language like js. In these languages, name collision results in a compilation error, whereas in js it works differently. Take a look at the code snippet below: Is the value of i duplicated? Not exactly, as in the function and block context, the same variable name can refer to two different variables depending on where they are declared.

function checkLetDuplication() {
  let i = 'function scope';
  for ( let i = 0 ; i < 3 ; i++ )
  {
    console.log('(for statement scope): inside the for loop i, equals: ', i);
  }
  console.log('("checkLetDuplication" function scope): outside the for loop i , equals: ', i);
}
checkLetDuplication();

Answer 7

Answer №4

If you are curious about whether this behavior aligns with the specifications, refer to section 13.3.2

Under any VariableEnvironment scope, a single BindingIdentifier may be present in multiple VariableDeclaration statements, but these declarations collectively refer to a single variable.

let and const are newer additions, while var has been around since the early days of Javascript.

In the past, Javascript codebases were not typically large enough to worry about programming errors, with more focus on ensuring that JS engines handled variable re-declarations without reporting errors.

Answer 8

If you are curious about whether this behavior aligns with the specifications, refer to section 13.3.2

Under any VariableEnvironment scope, a single BindingIdentifier may be present in multiple VariableDeclaration statements, but these declarations collectively refer to a single variable.

let and const are newer additions, while var has been around since the early days of Javascript.

In the past, Javascript codebases were not typically large enough to worry about programming errors, with more focus on ensuring that JS engines handled variable re-declarations without reporting errors.

What is the reason for allowing var to declare duplicates, while const and let restrict duplicate declarations?

What is the reason behind var allowing duplicate declaration while const and let do not?

Answer №1

Understanding Variable Declaration

The Introduction of let and const

Why Use let and const?

Answer №2

Answer №3

Answer №4

Similar questions

`Is there a way for Javascript to retrieve information sent from Python Flask's render_template() method?`

Using a JSON file as a variable in JavaScript

How to Efficiently Organize OpenAI AI Responses Using TypeScript/JavaScript and CSS

Is there a simple method to submit to a URL without relying on ajax?

Tips for integrating execute_script and WebDriverWait in Selenium automation

Sending a request to a server from my local machine is resulting in a preflight request for 'Access-Control-Allow-Origin'

I need assistance from someone knowledgeable in HTML and CSS. I am trying to create a div that dynamically increases its width until it reaches a specific

Separate the iframe sessions

New feature alert! Introducing the Mentio JS menu now available at the bottom of the webpage

Blank page shown when routing with Angular in Rails

Issue with Z-index and wmode when using YouTube embed code on IE10

issues with the functionality of bootstrap modal

Having trouble getting the Bootstrap tooltip to work on a Select option?

React code to automatically scroll to the top of the page when the user clicks the

Sequentially animate objects with a fade-out and fade-in effect

What are the steps to add ngMapHilight to an Angular project that is already set up

Exploring each list item within the specified unordered list

Unable to suppress error in AngularJS $http.get() call when using catch() method

"Utilize jQuery to superimpose an image on top of

AWS Lambda applies quotes to create the event input