Block-scoped variables
Variables that are declared with the
let
orconst
keywords are block-scoped.It allow us to declare variables within a block, such as a loop or an if statement, which are only accessible within that block.
This can be useful for preventing naming collisions and for keeping variables local to a specific block of code.
The
let
keyword is used to declare block-scoped variables that can be reassigned.
function myFunction() {
let x = 5; // block-scoped variable
if (true) {
let x = 10; // another block-scoped variable with the same name
console.log(x); // 10
}
console.log(x); // 5
}
In the above example, there are two block-scoped variables with the same name x
. The inner variable is only accessible within the if
statement block, and the outer variable is only accessible within the myFunction
block. This prevents any naming collisions between the two variables.
-
The
const
keyword is used to declare block-scoped variables that cannot be reassigned.
function myFunction() { const x = 5; // block-scoped variable that cannot be reassigned if (true) { const x = 10; // another block-scoped variable with the same name console.log(x); // 10 } console.log(x); // 5 }
In this example, both
x
variables are constants, which means that they cannot be reassigned. This can be useful for defining values that should not change within a block of code, such as a mathematical constant. block-scoped variables provide more flexibility and control over variable scope and can help to prevent naming collisions and bugs in your code.
Arrow Function
Arrow functions are a shorthand way to define functions in JavaScript.
Arrow functions have a more concise syntax than traditional function expressions and can be more readable in certain situations.
To define an arrow function, you can use the arrow (
=>
) notation, which consists of the parameter list (if any) and the function body.-
The basic syntax for an arrow function is:
(parameter1, parameter2, ..., parameterN) => { statements }
-
An arrow function that takes two parameters and returns their sum:
const sum = (a, b) => { return a + b; };
-
If the function body contains only a single expression, you can omit the curly braces and the
return
keyword, and the expression will be automatically returned.
const sum = (a, b) => a + b;
-
Arrow functions also have a shorter syntax when the function takes only one parameter.
const square = x => x * x;
NOTE: Arrow functions have some important differences from traditional function expressions. One of the most significant differences is that arrow functions do not have their own
this
keyword.they inherit the
this
value from the enclosing context.
Template literals
It provides a more concise and expressive way to define string literals in JavaScript.
It allows you to embed expressions and variables directly in a string by using backticks (`) instead of single or double quotes.
-
To define a template literal, you can use the backtick notation and enclose the expression or variable in
${}
.javascript
Hello, ${name}!
const name = 'Aman';
const message =;
console.log(message); // prints "Hello, Aman!"
Destructuring
It allows you to extract individual values from an array or object and assign them to variables using a shorthand syntax.
Array destructuring allows you to extract values from an array and assign them to variables using a square bracket notation.
-
For example, the following code extracts the first two values from an array and assigns them to the
a
andb
variablesjavascript
const arr = [1, 2, 3, 4, 5];
const [a, b] = arr;
console.log(a); // prints 1
console.log(b); // prints 2
Object destructuring allows you to extract values from an object and assign them to variables using a curly bracket notation.
-
For example, the following code extracts the
name
andage
properties from an object and assigns them to thename
andage
variablesjavascript
const person = {
name: 'Aman',
age: 30,
gender: 'male'
};
const { name, age } = person;
console.log(name); // prints "Aman"
console.log(age); // prints 30
-
Destructuring also allows you to provide default values for variables in case the value being destructured is
undefined
.javascript
const person = {
name: 'Aman',
gender: 'male'
};
const { name, age = 18 } = person;
console.log(name); // prints "Aman"
console.log(age); // prints 18
In this example, the
age
variable is assigned a default value of 18 using the=
operator.
If you enjoyed this article and would like to read more, Be sure to Follow me for regular updates.
Top comments (0)