A Powerful Concept Array in JavaScript

Preface

Before deep dive into this blog, I am assuming you already know tons of things about Array but let us make more from it and understand it more so have more grip upon this topic and also beginners can get a head start from this blog post

so let's jump into it...

So whats exactly array is ???

Simply an array is a collection of elements or data is used to store and retrieve data as an element.

so let's know what javascript gives us lets start with creating an array

1. using array literal
2. creating an instance of Array directly

3. using an Array constructor

4. using array literal

const itsArray = [1,3,"user","mango"];

point to be noted you can mix type in js array

1. creating an instance of array

const itsArray= new Array();
itsArray[0]="user1";
itsArray[1]="user2";
console.log(itsArray[0]);

so you can access and assign value to array index like this

1. using Array constructor

const itsArray= new Array(1,2,"user1","user2");
console.log(itsArray);

how we are able to do create an array using new operator and things like this so let me tell you what MDN docs say about array in javascript.

The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.

so whenever you create an array it's getting created using the global object class of Array and it gets the prototype property attached that's why you can use array methods like map, reduce, etc. we will talk about the prototype later but for now, basically its way in which mechanism in which an object inherits the property of another object so you can add a method to an existing object

fun fact

Type of Array in javascript is Object because it constructed using Array global object

let us understand prototypes or methods of Array

here I'm covering some methods so you will get the basics of it

let's create an Array first so we will have a better idea of how to use this

let fruits =['Mango','Apple','Banana','Blueberry'];

1. forEach

This method iterate over each element of an array and perform operation accordingly takes a callback in it in which it takes 3 parameters first will be a current item of array second will be index and third is the array itself but it's okay if you won't pass it all you can pass the argument as you need

fruits.forEach((element, index, array) => { console.log(item)} )
//output 
Mango  
Apple 
Banana 
Blueberry

1. map

basically, it also iterates over each element of an array but creates a new array and returns it so it does not mutate the original array.

const map1=[1,2,3,4,5,6]
const map2=map1.map((item)=>item*2);
console.log(map1);
console.log(map2);

//output
 (6) [1, 2, 3, 4, 5, 6]
 (6) [2, 4, 6, 8, 10, 12]

1. find

find return a specific element that you are looking for if it won't found return undefined.

const item=fruits.find((item)=>item==="Banana");
console.log(item);

//output
Banana

1. filter

so the filter method returns a new filtered array upon what condition you pass in it it takes a call back function in which you write your condition how you want to filter your array.

const newFruits = fruits.filter((item)=>item.length<6)
console.log(newFruits)
//output
["Mango","Apple"]

1. reduce

reducer method returns a single output from an array basically it reduces an array as its name is it takes a call back in which it takes two arguments first will accumulator and second will current value let's see in the example.

const numbers = [1, 2, 3, 4];
const reducedNumber = number.reducer((accumulator, currentValue) => accumulator + currentValue);
console.log(reducedNumber)
//output
10

1. some

some method work like the find method but instead of that item it returns true or if it's not present then returns false

const answer = fruits.some((item)=>item==="Banana");
console.log(answer);
//output 
true

1. push

push method push items in an array in last let's say we are having fruits array it push element in last

fruits.push("kiwi","grapes");
console.log(fruits)
//output
['Mango','Apple','Banana','Blueberry','kiwi','grapes'];

1. pop

the pop method remove the last element from the array

fruits.pop();
console.log(fruits);
//output
['Mango','Apple','Banana'];

1. join

join method creates a string by concatenating all of the elements in an array

const fruitStr=fruits.join();
console.log(fruitStr);
//output
'Mango,Apple,Banana'

1. indexof

it returns the index of items in an array

console.log(fruits.indexof("Manog"))
//outout
0

1. shift

The shift method removes the first element from an array and returns that removed element. This method changes the length of the array.

const firstfruit=fruits.shift();
console.log(firstfruit);
console.log(fruits)
//output
Mango
['Apple','Banana','Blueberry'];

1. unShift

its push item at 0 index of the array and returns the new length

const firstlength=fruits.shift("kiwi");
console.log(firstlength);
console.log(fruits)
//output
5
['Mango','Apple','Banana','Blueberry'];

sources:mdn docs