HI, fellow developers ! Today, we are going to learn some JavaScript array methods while reading the story of my friend about his valentines. So, let’s began !

My friend let’s say (Abhi) for now, recently got into relationship and he was very happy that somebody liked him back. One day, while he was scrolling the instagram, he come across a reel of upcoming valentines week. So, he decided to give surprises to his girlfriend on each day. To do so he created a list of all things he is going to do on each day. Guess What ! JavaScript array helps him to create a list.

So, he created an array and started storing the days along with the surprises he planned for each day.

let surprises = ["Rose Day :- Give bouquet of flowers", "Purpose Day :- Purpose again", "Chocolate Day :- Bake Chocolate dishes at home and sperad sweetness", "Teddy Day :- Gifting her a special teddy bear"]

He stored some days and decided to put remaining days later.

1. push() and pop() methods

Now, abhi got an idea of what he is going to do on the remaining days. So, he used the array push() operation to put the remaining days surprises in the array. While, doing so he mistakenly added the Rose day again at the end of the list. He used the pop() operation to remove day which he added at the end of array.

• push() ➡️ Used to add item at end of the list.

• pop() ➡️ used to remove the item from end of the list.

let surprises = ["Rose Day :- Give bouquet of flowers", "Purpose Day :- Purpose again", "Chocolate Day :- Bake chcolate dishes at home and sperad sweetness", "Teddy Day :- Gifting her a specila teady bear"]
console.log("Intila array: ", surprises);
// output :- Intila array:  [ 'Rose Day :- Give bouquet of flowers', 'Purpose Day :- Purpose again', 'Chocolate Day :- Bake chcolate dishes at home and sperad sweetness', 'Teddy Day :- Gifting her a specila teady bear' ]

surprises.push("Promise Day :- Going to give a piece of jewelry with promise written on it")
surprises.push("Hug Day :- Recreating our first hug on the place which she likes most")
surprises.push("Kiss Day :- Didn't know what to do :) ")
surprises.push("Valentines Day :- going to take her at the dinner ")
surprises.push("Rose Day :- Give bouquet of flowers")
console.log("After updation: ", surprises);

// After updation: [ 'Rose Day :- Give bouquet of flowers', 'Purpose Day :- Purpose again','Chocolate Day :- Bake Chocolate dishes at home and sperad sweetness', 'Teddy Day :- Gifting her a specila teady bear' ,'Promise Day :- Going to give a piece of jewelry with promise written on it', 'Hug Day :- Recreating our first hug on the place which she likes most', "Kiss Day :- Didn't know what to do :) ", 'Valentines Day :- 'going to take her at the dinner ', 'Rose Day :- Give bouquet of flowers' ]

surprises.pop(); // To remove last mistakenly added item
console.log("After poping:", surprises);
// After poping: [ 'Rose Day :- Give bouquet of flowers', 'Purpose Day :- Purpose again','Chocolate Day :- Bake Chocolate dishes at home and sperad sweetness', 'Teddy Day :- Gifting her a specila teady bear' ,'Promise Day :- Going to give a piece of jewelry with promise written on it', 'Hug Day :- Recreating our first hug on the place which she likes most', "Kiss Day :- Didn't know what to do :) ", 'Valentines Day :- 'going to take her at the dinner ']

---

2. Shift() and unshift() methods

Now, before finalizing the list he decide to show this list to his friends to check whether any further enhancement can be done or not. His friends, told him that his starting days surprises are very boring and suggested him to update the surprises of rose day and purpose day.

So, taking the suggestion of friends seriously he updated the first two days. Initially, he removed both the days from the starting using the array shift() method of the array and after updating those days he insert back those days at starting using the array unshift() method.

• shift() ➡️ Used to remove the items form starting of the list/array.

• unshift() ➡️ Used to insert the items at starting of the list/array.

// first remove the days from staring of the array (SHIFT OPERATION)
surprises.shift();
surprises.shift();
console.log(surprises);
//[ 'Chocolate Day :- Bake Chocolate dishes at home and sperad sweetness', 'Teddy Day :- Gifting her a specila teady bear' ,'Promise Day :- Going to give a piece of jewelry with promise written on it', 'Hug Day :- Recreating our first hug on the place which she likes most', "Kiss Day :- Didn't know what to do :) ", 'Valentines Day :- 'going to take her at the dinner ' ]

// Adding the days aging after updation (unshift operation)
surprises.unshift("Purpose day :- Taking her to place where we met frist time");
surprises.unshift("Rose Day :- Surprising her with bouquet of pink, red and yellow flowers and a handwritten card")
console.log("After updation: ", surprises);
// After updation: [ 'Rose Day :- Surprising her with bouquet of pink, red and yellow flowers and a handwritten card', 'Purpose day :- Taking her to place where we met frist time' ,'Chocolate Day :- Bake Chocolate dishes at home and sperad sweetness', 'Teddy Day :- Gifting her a specila teady bear' ,'Promise Day :- Going to give a piece of jewelry with promise written on it', 'Hug Day :- Recreating our first hug on the place which she likes most', "Kiss Day :- Didn't know what to do :) ", 'Valentines Day :- 'going to take her at the dinner ']

---

3. slice() method

Now, the valentines week started and he did same as he decided. He send bouquet of flowers and also take her to place where they met first time. This gesture made his girlfriend emotional and happy also.

On the 3rd day ( Chocolate Day) he check the list to see what task scheduled today. And while, he was doing so he saw that the days that have been passed are still in the list and decide to remove that from the list. In order, to do so, he used the slice() method of the array.

• slice() ➡️ Extract the part of the array from the initial array without modifying it and returns that sliced array.

// Syntax :-
/* 1. slice()
2. slice(start)
3. slice(start, end) */

let new_list = surprises.slice(2); 
console.log("After slicing: ", new_list);
// After slicing:  [ 'Chocolate Day :- Bake chcolate dishes at home and speread sweetness', 'Teddy Day :- Gifting her a special teddy bear', 'Promise Day :- Going to give a piece of jewelry with promise written on it', 'Hug Day :- Recreating our first hug on the place which she likes most', "Kiss Day :- Didn't know what to do :) ", 'Valentines Day :- 'going to take her at the dinner ']

---

4. splice() method

Now, his next days also goes very well till the Kiss day. From the day before the kiss day he met his friends once again to discuss what should he do on kiss Day. But his all friends are single and they decided to prevent abhi from celebrating kiss day.

So, they threatened abhi by saying that his girlfriend could get very angry if he asked for kiss from her and she even break-up with you. Abhi, took their friend talk seriously and decide to nothing to do on the kiss -day in order to protect his relationship. So, he wanted to remove the kiss day task from his list. To do so, he used the splice() method of the array.

• splice() ➡️ Used to change the content of the list/array by removing or replacing the item in array.

/* syntax :- 
1. splice(start)
2. splice(start, deleteCount)
3. splice(start, deleteCount, item1) */

new_list.splice(0, 1); // o is the index of kiss day and 1 is teling only one item should be removed
console.log("After splicing: ", new_list );
// After splicing:  ['Valentines Day :- 'going to take her at the dinner ']

---

5. findIndex() method

Now, after spending the kiss day sadly at home. Abhi decided to give more surprises to his girlfriend on the valentines day. But, he forgot how many days remaining for the final day (valentines Day).

So, in order days still remaining for the final day he used the findIndex() method of the array.

IMPORTANT :- As, the findIndex() method is going to give result on the basics of 0-based indexing. So, in order to get final day just add one to the output we got.

• findIndex() ➡️ The findIndex() function of the array returns the index of the item that satisfy the provide testing function.

let days_remaining = new_list.findIndex(new_list => new_list.includes("Valentines"));
console.log(days_remaining);
// Output : 0

After getting the output he shocked to know that tomorrow is the final day. He rushed to update his valentines day surprises. He updated the valentines day using splice() method.

---

6. find() method

Now, the final day came abhi completed his basic daily work and went to pick his girlfriend. Today, he planned many surprises for her starting from gifting the album of best memories together to late night walk alogn lake. Both, did many different activities in whole day and enjoyed their day very much.

At evening, when abhi’s girlfriend asks her for dinner then, abhi told her that it is surprise for her. So, they both decided to book a cab to reach the surprise restaurant. But, when abhi booking the cab he forgot the restaurant name where he is going for dinner. So, he immediately used the find() method of the array.

• find() ➡️ The find() method the array return the first element from the provided array that satisfies the provided condition.

let name = new_list.find(new_list => new_list.includes("Valentines"));
console.log(name);
// Output :- Valentines Day :- Going to create an album of favorite moments together and going to take her for finner at One8 Commune and after that, ending the beautiful day with just talking and walking along the lake of our city

From the output he saw the restaurant name which was One8 Commune and both went for dinner there.

---

7. forEach() method

So, finally spending the whole day abhi and his girlfriend decide to go back home. Abhi went to drop his girlfriend to his home. While, he was saying good bye to his girlfriend, his girlfriend told him that today was the best day of her life and also gave kiss to abhi.

Abhi be like :- maza agya bahi ! 😃

After, that abhi also reached his home. And, after coming back home he took his secret list in which he is storing all the expenses he did in the valentine week.

Now, wanted to calculate the total moner which he spend in whole valentines week. So, in order to do =, he used the array method named forEach().

• forEach() ➡️ The forEach() array method runs the provided function for every item in an array once.

let expense = [1000, 1500, 700, 800, 4000, 1000, 0, 6000];
let Total_expense = 0;
expense.forEach(expense => Total_expense += expense);
console.log("Total spending is: ", Total_expense);
// Output :- Total spending is:  15000

---

8. sort() method

Now, abhi wanted to sort the list of expenses to store it in well defined way. So, to sort the expense array abhi used the sort() method of the array.

• sort() ➡️ This array method is used to sort the items of the provided array.

let expense = [1000, 1500, 700, 800, 4000, 1000, 0, 6000];
expense.sort();
console.log("After Sorting :- ", expense);
// Output :- After Sorting :-  [ 0, 1000, 1000, 1500, 4000, 6000, 700, 800 ]

---

So, you see the JavaScript array methods helps my friend abhi to make his valentines happy and special. The JavaScript array helped at every turn and made the abhi’s valentines rememberable. That’s it for today i hope you like the article. If yes, then please like the article.

Thanks for reading !