JavaScript Const

  • In JavaScript, once the value is assigned to a constant variable and is declared with the const keyword, it will remain unchanged. This keyword has the same value throughout the program execution. The const keyword was introduced in ES6 (2015), and it has the following properties:

    • You can not redeclare it.
    • It can not be reassigned. 
    • When declared, it has the block scope.

    Declaring JavaScript Constants

    Values must be assigned to the variable declared with the const keyword at the time of declaration.

    HTML JavaScript

    Cannot be Reassigned

    As mentioned before, a variable can not be reassigned with the const keyword. Always remember this when declaring variables with const.

    HTML JavaScript

    When is JavaScript const used?

    For successful program execution, it is important to learn when to use the const keyword in JavaScript. 

    • It is ONLY used for the variables that have fixed values. 
    • Const is used to declare a new array, object, function, or regular expression (Regex).

    JavaScript const and Block Scope

    When a variable is declared with the const keyword in JavaScript, it is block-scoped and is only accessible within the block where it is declared.

    HTML JavaScript

    The const variable can not be redeclared within the same block.

    Constant Objects and Arrays

    The const keyword does not mean a constant value, but a constant reference. This means once the reference is assigned to a variable, it can’t be changed. However, you are allowed to change the value. The const keyword comes with some possibilities and a few limitations. Here’s a list of them all.

    Cannot Do: You can not reassign the following:

    • A constant value 
    • A constant array and
    • A constant object

    Can Do:

    • Although an array is declared with the const keyword, its elements are not fixed. It allows you to change the values it holds.
    • Change a constant object’s properties.

    Constant Arrays

    As mentioned above, the const keyword does not fix the constant array elements. These elements can be changed.

    HTML JavaScript

    You are only allowed to change constant arrays’ elements. You can not reassign the array.

    Constant Objects

    When a constant object is declared with const, its properties can still be changed. 

    HTML JavaScript

    It is not possible to reassign a constant object. You can only change its properties.

    Understand Var, Let, and Const Difference

    KeywordScopeRedeclareReassignHoistedBinds this
    varnoyesyesyesyes
    letyesnoyesnono
    constyesnononono

    What’s Good About Let and Const 

    • Both have block scope.
    • Can NOT be redeclared.
    • MUST be declared BEFORE USE.
    • Not hoisted.

    What’s Not Good About Var (Not Good)

    • When declaring a variable, it is not necessary to use var.
    • Var is hoisted and binds to this. 

    Browser Support

    Let and const keywords are not supported by Internet Explorer 11 or earlier versions. The following updated versions of the browsers fully support these keywords.

    Browser VersionYear
    Chrome 49Mar, 2016
    Edge 12Jul, 2015
    Firefox 36Jan, 2015
    Safari 11Sep, 2017
    Opera 36Mar, 2016

    Redeclaring the Variable

    A JavaScript variable can be redeclared with var anywhere in a program.

    HTML JavaScript

    A variable declared with var or let in a given scope cannot be redeclared as const within that same scope.

    HTML JavaScript

    If a const variable already exists in the program, it can not be reassigned in the same scope.

    HTML JavaScript

    However, a const variable can be redeclared in another scope or block.

    HTML JavaScript

    Hoisting

    The var variables are always hoisted to the top, and can be used anytime, even if they are not declared.

    HTML JavaScript

    The const variables also behave like var. They are also hoisted to the top, but the difference is that they can not be initialized and can ONLY be used after it is declared.

    HTML JavaScript
  • HTML
    CSS
    JS
  • Ad #1
    Ad #2
    Scroll to Top