Introduction
The best measure for growth in any area of life is the ability to embrace change. Everyone feels productive when trying new things, and becoming adventurous gives that sense of confidence.
Now in the life of any software developer, change is inevitable. Often, it is hard. Why? Because technology is fast-evolving, new languages and updates are constantly released. Being a developer is signing in to becoming a life-long student.
This article is neither meant for motivational speaking nor change discussion. We will explore ECMAScript2015, known as ES6. ES6 is the ECMAScript language specification standard's 6th and most significant edition.
With ES6, you can write Javascript with simple code, increasing readability.
Pre-requisites
Before getting with this article, you need to:
- Know Javascript Basics. To get started with Javascript, Mozzila Developers
- Understand how to use the DevTools console to run Javascript code. This video will help you get started. Console Logging Javascript
- Be willing to learn and practice.
var
and let
Keywords
Both var
and let
keywords are used in declaring variables. let
and var
differ in the scope of the variables they create.
When you declare a variable with the var
keyword, it is declared globally. The var
keyword, however, is declared locally if inside a function.
var myName = "Dennis"; // declared globally
console.log(myName) //Output- Dennis
The above myName
variable is declared globally, hence, can be accessed anywhere in your code.
CASE 1
function firstName(){
var myName = "Dennis"; //declared locally
return myName;
}
console.log(firstName()); //Output -Dennis
CASE 2
function secondName(){
return myName;
}
console.log(secondName()); // _Output a Uncaught ReferenceError: myName is not defined_
Let me explain what the above code does:
CASE 1
We have declared the myName
variable inside a function firstName
, right? then we return the myName
variable.
when you call the function, the myName
variable can be seen by the function hence the console logs Dennis
.
CASE 2
We have a function secondName
that returns the myName
variable which is only locally available in the firstName
function. When you call the secondName
function, the console logs an error.
However, changing the myName
variable to global, the secondName
function should return Dennis
.
let
Keyword
When you declare a variable with the let keyword inside a block, statement, or expression, its scope is constrained to that block, statement, or expression.
In JavaScript, a block is a set of zero or more statements grouped inside a pair of curly braces { }.
A block can contain any valid JavaScript statement, including variable declarations, loops, conditionals, function declarations, and expressions.
- Variable declaration inside a block
{
let x = 10;
console.log(x); // Output: 10
}
- Variable declaration as a statement
let y = 5;
console.log(y); // Output: 5
- Variable declaration as an expression
let z = (a = 2, b = 3, a + b);
console.log(z); // Output: 5
Here's an example that demonstrates how the let keyword creates variables with limited scope:
function exampleFunction() {
let x = 10;
if (true) {
let y = 20;
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: 10
console.log(y); // Uncaught ReferenceError: y is not defined
}
exampleFunction();
In the example above, the exampleFunction function contains two let declarations:
let x = 10, and let y = 20;
Inside the if statement block, both x
and y
are accessible because the let
keyword creates variables with block scope. This means that the variables declared with let
are only accessible within the block where they are defined or any nested blocks.
However, outside the if
statement block, y
is no longer accessible. When we attempt to access y
after the if
statement, an Uncaught ReferenceError
is thrown becausey
is not defined in that scope.
On the other hand, x
is accessible both inside and outside the if statement block because it is declared in the outer scope of the function.
Mutate array declared with const
keyword
The const keyword is applicable in many use cases in Modern Javascript.
Some developers prefer to use the
const
keyword throughout. The developers, who use theconst
keyword however, may use thelet
keyword when they need to reassign a value later.Variables declared with the
const
keyword areread-only
. However, it is important to note objects(including arrays and functions) assigned to a variable using const are still mutable.
const arr = [2,3,4,5,6];
arr = [4,5,6,7];
arr[2] = 50;
console.log(arr);
arr = [4,5,6,7]
will result in an error. when you comment on the line, the console.log will display [2,3,50,5,6]
.
From the above example, you can mutate objects, and thearr
variable still points to the altered array. Like all arrays, the array elements in arr
are mutable, but because const
was used, you cannot use the variable identifier arr
to point to a different array using the assignment operator.
How to prevent Object mutation
From the previous example, const
keywords do not protect your data from mutation.
Javascript provides an Object.freeze()
function to prevent mutation. Any attempt to mutate data will throw an error if the script is running in strict mode.
for example,
let myObject = {
name: "Dennis,
age:30
}
Object.freeze(myObject);
myObject.name = "John"
myObject.newproperty = "learning"
console.log(myObject);
Conclusion
Thanks for reading this article.
You have learned to declare variables in Javascript using let
const
and var
keywords.
Also, the article has helped you understand how the keywords create scopes in your code.
This article was written by Dennis Mbugua.
Follow me on Twitter Twitter
Top comments (0)