Why Template Literals was introduced?

Before template literals was introduced, developers used the + operator to join strings.

let name = "Ayush";

console.log("Name: "+ name);
//Output --  Name: Ayush

Problems with + Operator

1. Poor Readability

As strings become longer, concatenation becomes messy.

const text =
  "Hello " +
  name +
  ", welcome to our website. Your account balance is " +
  balance +
  " rupees.";

2. Multi Line string

before Template Literals

const message =
  "Line 1\n" +
  "Line 2\n" +
  "Line 3";

we had to use /n for every line.

3. Easy to make mistakes

missing spaces

let name = "Ayush"
console.log("Hello" + name)
//Output -- HelloAyush

these types of mistakes were very common

What are Template Literals?

Template literals were introduced with ES6 in 2015.

Now instead of ( ' ' ) and ( " " ) back ticks ( ` ` ) are used to define a string and this allowed writing a variable inside a string ( string interpolation) without using the operator.

const name = "Ayush";

const message = `Hello ${name}`;

console.log(message);

//Output -- Hello Ayush

Syntax of template literals

Basic syntax

`Text here`

With variable

const language = "JavaScript";

console.log(`I am learning ${language}`);

//Output -- I am learning JavaScript

Multi Line String

template literals allow you to write multi-line strings directly.

Without Template Literals:

const text =
  "Hello\n" +
  "Welcome\n" +
  "To JavaScript";

With Template Literals:

const text = `
Hello
Welcome
To JavaScript
`;

Real-World use cases

Generating Dynamic Messages

const username = "Ayush";

const greeting = Welcome back, ${username}!;

Building URLs

const userId = 123;

const url = /users/${userId};

Dynamic CSS Classes

const active = true;

const className = `btn ${active ? "active" : ""}`;

Used extensively in React.

Key Takeaways

• Template literals were introduced in ES6.

• They use backticks ( ` ` ) instead of quotes.

• ${} allows string interpolation.

• They improve readability compared to + concatenation.

• Multi-line strings become much easier to write.

• Widely used in React, URLs, and dynamic UI rendering.

In this blog, we will learn the important Javascript array methods that are used most of the time.

Why do We Need Array Method?

Without array methods, If we need to perform operations on a particular or all the elements of an array, we will have to use a for loop:

For example:

let arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
  arr[i] *= 2;
}

console.log(arr);  // Output : [2, 4, 6, 8]

This works, but array methods are very much shorter, cleaner, and more readable.

1. push() and pop() :-

• Both are used to manipulate the data at the end of an array. They mutates the original array

• push() is used to add an element at the last of an array.

• pop() is used to remove an element from the last of an array.

For Example:

//Push.....

const fruits = ["apple", "banana"]; 
fruits.push("mango"); 
console.log(fruits);

// Output : ["apple", "banana", "mango"]

//Pop.....

fruits.pop();
console.log(fruits);

// Output : ["apple", "banana",]

2. shift() and unshift() :-

• Both are used to manipulate the data at the beginning of an array. they mutate the original array

• shift() is used to add an element at the start of an array.

• unshift() is used to remove an element from the start of an array (first element).

For Example:

//shift().....

const fruits = ["apple", "banana"]; 
fruits.shift("mango"); 
console.log(fruits);

// Output : ["mango", "apple", "banana"]

//unshift.....

fruits.pop();
console.log(fruits);

// Output : ["apple", "banana"]

3. map() :-

Map is used to mutate every element of an array, for example, doubling each element of the array, etc

Map returns a brand new array consisting of the elements which result from the calling of the callback function for each element in the original array

For Example:

const arr = [1, 2, 3, 4];

const doubled = arr.map(function (num) {
  return num * 2;
});

console.log(doubled);

//Output: [2, 4, 6, 8]

4. filter() :-

As the name suggests, it is used to filter the elements of on array based on a given condition. It returns a brand new array consisting of the elements that satisfied a given condition.

For Example:

const numbers = [5, 10, 15, 20];

const greaterThanTen = numbers.filter(function (num) {
  return num > 10;
});

console.log(greaterThanTen);




Output

[15, 20]

Visual Flow

 [5, 10, 15, 20]
        ↓
keep numbers > 10
        ↓
    [15, 20]

5. reduce() :-

• reduce() is used to combine all array values into a single value.

• It may feel confusing at first, so start with simple examples.

Example: Find Sum of Numbers

const numbers = [1, 2, 3, 4];

const total = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(total);

Output

10

How reduce() Works

0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10

Final Answer = 10

6. forEach :-

• forEach() is used to loop over each element of an array and perform the required action.

• Unlike map, it does not return anything.

Example

const fruits = ["apple", "banana", "mango"];

fruits.forEach(function (fruit) {
  console.log(fruit);
});

// Output

apple
banana
mango

Use forEach() when you only want to perform actions like printing values.

Small Practice Assignment

Try this yourself in the browser console.

Step 1: Create an array

const numbers = [2, 5, 8, 12];

Step 2: Double each number using map()

const doubled = numbers.map((num) => num * 2);

console.log(doubled);

Step 3: Get numbers greater than 10 using filter()

const greaterThanTen = numbers.filter((num) => num > 10);

console.log(greaterThanTen);

Step 4: Find total sum using reduce()

const total = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(total);

Final Thoughts

Array methods are extremely useful in JavaScript in modern web development.

At first, reduce() and filter() might feel a little difficult, but after practicing a few examples, it will become much easier

The more you practice, the more natural these methods will feel.

Happy Coding