Imagine that Doraemon, Nobita and his friends are on an adventure or mission to save future gadgets from falling into the wrong hands. To succeed in this adventure they need to work as a team and each team member is stored in an array. This array represents their roster (which means a list of people's names) and along the way they use special powers (built-in Javascript array functions) to overcome challenges.

The Starting Point - The Team Array

Our journey begins with an array of doraemon characters →

let team = ["Doraemon", "Nobita", "Shizuka", "Gian", "Suneo"];
console.log("Team assembled:", team);

// Output -> Team assembled: [ 'Doraemon', 'Nobita', 'Shizuka', 'Gian', 'Suneo' ]

1. push() – Adding Member in the Team

During the mission the team realize they need more help to fight bad guys. Doraemon calls on Dorami to join them. The code push() adds her to the end of the array.

let team = ["Doraemon", "Nobita", "Shizuka", "Gian", "Suneo"];
team.push("Dorami");
console.log("After push (Dorami added):", team);

// Output -> After push (Dorami added): [ 'Doraemon', 'Nobita', 'Shizuka', 'Gian', 'Suneo', 'Dorami' ]

2. pop() - A Temporary Retreat

After Dorami helps the Doraemon team, Dorami decides to retreat and go back to her timeline. The pop() method removes the last element (Dorami) from the array.

let team = ["Doraemon", "Nobita", "Shizuka", "Gian", "Suneo", "Dorami"];
team.pop();
console.log("After pop (Dorami removed):", team);

// Output -> After pop (Dorami removed): [ 'Doraemon', 'Nobita', 'Shizuka', 'Gian', 'Suneo' ]

3. unshift() - Nobita Teacher arrives

Suddenly the nobita teacher Professor arrives to give some guidance and scold on nobita for not completing his homework. The team welcomes him at the beginning of the array using unshift().

let team = ["Doraemon", "Nobita", "Shizuka", "Gian", "Suneo"];
team.unshift("Professor");
console.log("After unshift (Professor added):", team);

// Output -> After unshift (Professor added): [ 'Professor', 'Doraemon', 'Nobita', 'Shizuka', 'Gian', 'Suneo' ]

4. shift() – The Teacher Departs

Once the strategy is set the professor leaves to let the team continue their mission. The shift() method removes the first element (Professor) from the array.

let team = ["Professor", "Doraemon", "Nobita", "Shizuka", "Gian", "Suneo"];
team.shift();
console.log("After shift (Professor removed):", team);

// Output -> After shift (Professor removed): [ 'Doraemon', 'Nobita', 'Shizuka', 'Gian', 'Suneo' ]

5. splice() - Adjusting the Team

In mid mission the team encounters unexpected obstacles. They decide to remove Shizuka from the team temporarily to reassign roles. The splice() method removes an element from a specific index.

let team = ["Doraemon", "Nobita", "Shizuka", "Gian", "Suneo"];
let removedMember = team.splice(2, 1);

console.log("After splice (Shizuka removed):", team);
// Output -> After splice (Shizuka removed): ["Doraemon", "Nobita", "Gian", "Suneo"]

console.log("Removed member:", removedMember);
// Output -> Removed member: [ 'Shizuka' ]

Later, they realize they need her back and decide to add dorami to the team. They use splice() again to insert both characters in the correct position.

team.splice(2, 0, "Shizuka", "Dorami");
console.log("After splice insertion (Shizuka and Dorami added back):", team);

// Output -> After splice insertion: [ 'Doraemon', 'Nobita', 'Shizuka', 'Dorami', 'Gian', 'Suneo' ]

6. slice() - checking the team

Before the next phase of the mission doraemon wants to review a subset of the team quickly. Using slice() they take a snapshot of team members from index 1 to 3 (without changing the original team).

let team = ["Doraemon", "Nobita", "Shizuka", "Dorami", "Gian", "Suneo"];
let teamSnapshot = team.slice(1, 3);
console.log("Team snapshot using slice:", teamSnapshot);

// Output: Team snapshot using slice: [ 'Nobita', 'Shizuka' ]

7. forEach() - Team Briefing

The team holds a quick briefing where every member shares their plan and they are ready for action. The forEach() method is perfect for iterating over the team array.

let team = ["Doraemon", "Nobita", "Shizuka", "Dorami", "Gian", "Suneo"];
team.forEach((member, index) => {
  console.log(`Member ${index}: ${member} is ready for action!`);
});
/* Possible output:
Member 0: Doraemon is ready for action!
Member 1: Nobita is ready for action!
Member 2: Shizuka is ready for action!
Member 3: Dorami is ready for action!
Member 4: Gian is ready for action!
Member 5: Suneo is ready for action!
*/

8. sort() - Organizing the Team

As the mission progresses the team realizes that order is key. They decide to organize themselves alphabetically to ensure smooth coordination. The sort() method rearranges the team members in ascending (alphabetical) order.

let team = ["Doraemon", "Nobita", "Shizuka", "Dorami", "Gian", "Suneo"];
team.sort();
console.log("Team sorted alphabetically using sort():", team);

// Output -> Team sorted alphabetically using sort(): [ 'Doraemon', 'Dorami', 'Gian', 'Nobita', 'Shizuka', 'Suneo' ]

9. filter() – Choosing the Specialists

Not every team member is suited for every challenge. Suppose the mission now requires specialists whose names have more than 5 characters. The filter() method helps select these experienced members.

let team = ["Doraemon", "Nobita", "Shizuka", "Dorami", "Gian", "Suneo"];
let specialists = team.filter(member => member.length > 5);
console.log("Specialists using filter:", specialists);

// Output -> Specialists using filter: [ 'Doraemon', 'Nobita', 'Dorami', 'Shizuka', 'Suneo' ]

10. reduce() – Combining Forces

For the ultimate challenge the team needs to combine all their strength. They use the reduce() method to calculate the total number of letters in all team members names symbolizing the combined power of their skills.

let team = ["Doraemon", "Nobita", "Shizuka", "Dorami", "Gian", "Suneo"];
let totalPower = team.reduce((total, member) => total + member.length, 0);
console.log("Total combined power (number of letters):", totalPower);

// Output -> Total combined power (number of letters): 36

Conclusion

In our Doraemon adventure we learned that arrays in JavaScript are like a team where each member can be added, removed or rearranged with ease. By using methods like push(), pop(), unshift(), shift(), splice(), slice(), forEach(), sort(), filter() and reduce() we can manage our data effectively. Just like Doraemon and his friends adjust their lineup to face challenges these methods help us build clean and flexible code.

Thanks for reading this far.