Arrays 101

Arrays are one of the most important DS that are widespread used in any programming language and is no different for JavaScript. In JavaScript array is an object which allows to store multiple items under a single variable name.

1. JavaScript arrays are resizable and can contain different elements of different data types

2. JavaScript arrays are zero indexed

3. JavaScript array copy operations create shallow copy of the original array.

In this article, we would be studying some of the most widely used array properties in a fun story format to make learning arrays as fun.

Once upon a time, the land of Coders was suffering from the evil doing of two major bugs, which some thought to be invincible, to defeat the bugs and bring back peace to the land of coders, few coders decided to join arms against the bug

Their first step was to create a party of those fighting against the bug.

let party = Array.of(
  "Arya the archer",
  "Bravo the brave",
  "Swordingo the swordsMaster",
  "Debin the debugger",
  "Eren the executioner"
);

Once the party was created, they needed to confirm if indeed the first step was achieved, so they decided to use isArray on party

let isParty = Array.isArray(party);

Introducing the members of the party using enteries:

//display the enteries of an aray
for ([index, element] of party.entries()) {
  console.log(index, element);
}

To locate the bug hiding in the land of coders, our party needed someone to guide the path to them. Adding Garry the guide in the front position using unshift

party.unshift("Garry the guide");

The party guided by Garry the guide reached the land of unoptimized code, and were met by the underdogs of the bugs, we need Arya the archer to shoot the bugs from the long distance, so we need to find her position in the array using findIndex.

//finding index of Arya the archer
const archer = party.findIndex((member) => member === "Arya the archer");

After defeating the underdog bugs, Arya the archer needed to heal before continuing her journey. Do we have a healer in our party? let us use find on our party array.

//find healer in party
const isHealer = party.find((member) => member === "healer");
console.log(
  "Our healer is",
  isHealer,
  "\n we need to get a new healer before proceeding further"
);

Met Harry the healer in the land of unoptimised code, let us add him at the end of our party to provide support from the back using push.

party.push("Harry the healer");

Our team continued their journey and needed to cross a bridge of the brave, it is said that no party can cross this bridge with a coward within them. Let us check if even on of the party member is a coward using isSome.

const isCoward = party.some((member) => member === "coward");
console.log("The cowards in the team are:", isCoward);

Someone needed to guard the bridge until the team finishes its mission, Bravo the brave volunteered to do it, we need to filter him out.

//filter the party and leave Bravo the brave behind
party = party.filter((member) => member !== "Bravo the brave");

The team decided to continue their journey and Bravo the brave decided to stay back guarding the place.After a long journey and defeating some more bugs, it was time for the Harry the healer to stay behind and heal the coders they had freed.

let us remove Harry the healer from the party using pop

//pop Harry the healer
const removed_member = party.pop();
console.log("updated party member:", party);

now the team had to divide into two smaller teams for the final debugging.

Team A would take the eastern route, and Team B the western route, both paths filled with traps of logic errors and exceptions.

console.log("Team A:", teamA);
console.log("Team B (remaining in party):", party, "\n");

To navigate the errors, Team A needed to prepare and transform themselves to adapt.\nLet us use map to enhance their titles to 'BugSlayer'

// enhance teamA
let enhancedTeamA = teamA.map((member) => `${member} the BugSlayer`);
console.log("Enhanced Team A:", enhancedTeamA, "\n");

Meanwhile, Team B faced a trial of purity – they could only proceed if none of them had a trace of 'evil bug' in their name.

const isTeamBClean = party.every((member) => !member.includes("bug"));
console.log("Is Team B clean?", isTeamBClean, "\n");

To confuse the bugs, Team B decided to reverse their formation.

party.reverse();
console.log("Reversed Team B:", party, "\n");

The members of Team B then called out their names together using join to signal to Team A.

const teamBChant = party.join(" || ");
console.log("Team B chant:", teamBChant, "\n");

Team A and Team B finally reunited at the mouth of the Great Recursive Cave.They must now unite forces once again to take on the final boss: the Infinite Loop.

let fullParty = [...party, ...enhancedTeamA];

Before facing the Infinite Loop, the team needed to collect their combined name strength using reduce.

const nameStrength = fullParty.reduce((sum, member) => sum + member.length, 0);

They approached the final boss, whose name was encrypted in a string. To identify it, they used from to decode it.

const finalBoss = Array.from("InfiniteLoop");
console.log("Final Boss revealed as:", finalBoss.join(""), "\n");

A hidden message was discovered in the ruins nearby. They had to split it by words to understand the prophecy.

const prophecy =
  "Only those who code together can conquer the loops forever".split(" ");
console.log("Prophecy words:", prophecy, "\n");

With courage in their hearts and arrays in their minds, the party fought the Infinite Loop using all their logic and strength. After a legendary battle of callbacks and closures, they emerged victorious.

The land of Coders was finally free. The bugs were defeated. The party, forever remembered as heroes, were immortalized in a constant array.

const heroes = Object.freeze([...fullParty]);
console.log("Legendary Heroes:", heroes);

This was an attempt to learn about different functions related to array in Javascript