const
is a keyword added in javascript ES6.const
is a short hand for constant and allows declaring constant values in javascript.
Constant values are those which can not be changed after declared once.
const
is one of the many features introduced in ES6 such as let, arrow functions etc. This article will explain the usage of const
with examples.
Syntax
const
keyword is followed by a user defined variable name to declare it as a constant. Example,
// declaring a constant integer const num = 12; // declaring a constant string const name = 'codippa';
Name of variable should be as per javascript variable naming rules.
As a naming convention in most programming languages, constants are declared in capital letters. This is a convention, not a rule, you can define it in lower case as well.
Variables declared with const
should be initialized at the time of declaration or else there will be an error. Example,
Below statement
const num;
will result in
SyntaxError: Missing initializer in const declaration
So, you need to provide a value to a const
variable at the time of declaring it. Above statement can be corrected as
const num = 20;
Primitive types are those which hold a value such as integers, decimal values, string, boolean etc. Primitives declared with
const
can not be modified again. Example,
// valid const x = 12; // error !! x = 25;
will result in
TypeError: Assignment to constant variable.
const Objects
A javascript object declared with const
can not be assigned again but you can modify its properties or add new properties to it.
That is, following is not allowed.
// define const object const obj = {'name': 'codippa'}; // reassign to new object obj = {'language': 'javascript'};
and will result in
TypeError: Assignment to constant variable.
But, this is legal.
// initialize object const obj = {'device': 'laptop'}; // add properties obj['brand'] = 'Lenovo'; obj['frequency'] = 2.4; // update properties obj['brand'] = 'Sony';
const Arrays
Similar to objects, a javascript array declared with const
can not be re-initialized but you can add or push new elements to it.
Thus,
// define const array const arr = [2, 4]; // reassign to new array arr = [];
is invalid while, this is allowed
// initialize array const arr = ['xyz', 'swfd']; // add elements arr.push('abcd');
A
const
declared in a block is visible only inside that block and you can not modify its value in that block after initialization.But, outside the block, the variable is not visible and can be re-initialized. Example,
// declare a constant const c = 23; { // declare a constant with the same name const c = 46; console.log(c) // prints 46 } // no problem console.log(c) // prints 23
Above code works perfectly fine. This is because the variable declared inside the curly braces is visible only in that block.
const function
In javascript, a function can be assigned to a variable as shown below.
f = function() { console.log('Called'); }
Same variable can later be assigned a different function.
But, if the variable is declared using const
, then it can not be reassigned a function after it is initialized the first time.
Thus, below code
// assign function to const const f = function() { console.log('Called'); } // reassign function to variable f = function() { console.log('Called Again'); }
will result in
TypeError: Assignment to constant variable.
Arrow function is a new concept added in javascript ES6 where there is no need to use
function
keyword while defining functions and there is an arrow(=>
) between function parameters and body.More on arrow functions here.
An arrow function can also be assigned to a variable as
f = () => { console.log('Called'); }
Similar to normal functions, if arrow function is assigned to a const
variable, you can not reassign it again as shown below.
// assign function to const const f = () => { console.log('Called'); } // reassign function to variable f = () =>{ console.log('Called Again'); }
This will again be a TypeError.
const Hoisting
Javascript hoisting means you can use a variable declared with var
before declaring them. Example,
b = 20; let b; console.log(b); // prints 20
But with const
, this is not the case.
That is, you can not use a variable declared with const
before declaring. Same code that uses const in place of var
as below
b = 20; const b = 10; console.log(b);
gives error
ReferenceError: Cannot access ‘b’ before initialization
const browser support
Minimum browser versions that support const
are
Browser | Version |
---|---|
Firefox | 36 |
Chrome | 21 |
Edge | 12 |
IE | 11 |
Safari | 5.1 |
Opera | 9 |
Hope the article was useful, click the clap if you liked it.