Discovering Arrays in Javascript with beautiful examples     (Part -1)

Discovering Arrays in Javascript with beautiful examples (Part -1)

["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]

ยท

4 min read

image.png

Don't worry, we will not start with this ๐Ÿ˜„

Arrays: The collection of different types of data/elements inside [ ] is called Arrays. In Javascript, the array is a single variable that stores multiple elements. It can be a boolean, string, object, number, etc.

Declaration

There are 2 ways to declare an array inside js.

let array1= [];  // Method-1 This one is mostly preferred. 
let array2= new Array(); // Method-2 This one is optional.

Initialization

let array1=['A', 'B', 'C', 'D', 'E' ]; 

let array2 = new Array(5); // Creates  5 undefined elements inside array2

How to access elements inside Array

image.png

He is saying right. We use the array index to access elements inside the array, which starts from 0.

let animals= ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]

console.log(animals[0]); // ๐Ÿซ
console.log(animals[1]); // ๐Ÿฆ”
console.log(animals[2]); // ๐Ÿฆ–
console.log(animals[3]); // ๐Ÿฟ

// The index of an array's last element is always one
// less than the length of the array.

Ok, so till here I understand what is array and how is declare it and initialize it. But if we have millions or many elements inside the array, how do we count them? ๐Ÿค”๐Ÿค”

Here comes Array. length property. Let's understand the same example of animals.

 let animals=["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]
console.log(animals.length); // 7

image.png

Array Methods

Array.includes()

If you want to check whether that particular element is present inside your array or not, this method is used.

 let animals= ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]
console.log(animals.includes("๐Ÿก")); // true
console.log(animals.includes("๐Ÿฆข")); // false



Array.indexof()

If you don't know at which index, ๐Ÿฆ– is stored. To find that out, we use this method.

 let animals= ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]
console.log(animals.indexof ("๐Ÿฆ–")); // 2



Array.push()

If you want to add/append an item inside your array from the last end, you can use this method.

 let animals= ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]
console.log(animals.push("๐ŸŒ"));  

//Output : ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก", ๐ŸŒ"]

Note: Using this method our original array does not get changed, it only just appends that item.



Array.unshift()

If you want to add an item to the top of the array, you can use this method.

 let animals= ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]
console.log(animals.unshift("๐ŸŒ"));  

//Output : ["๐ŸŒ", ๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]



Array.pop()

This method is used to remove the last element of your array. It doesn't take any parameters.

 let animals= ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ]
console.log(animals.pop("๐Ÿก"));  

//Output : [๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ]



Array.shift()

If you want to remove an item from an array from the starting point, you can use this method.

 let animals= ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ]
console.log(animals.shift());  

//Output : [ "๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ]



Array.at()

If you want to know the array item at a particular index, use this method. It also accepts the negative index which starts from the right.

 let animals= ["๐Ÿซ" ,"๐Ÿฆ”" ,"๐Ÿฆ–" ,"๐Ÿฟ" ,"๐ŸฆŽ" ,"๐Ÿณ" ,"๐Ÿก"]
console.log(animals.at(2));  

//Output : "๐Ÿฆ–"

Array.concat() This method is used to merge two or more arrays. Here also, the original array doesn't get changed, although returns a new array.

let smile = ["๐Ÿ˜" , "๐Ÿคฃ" , "๐Ÿ˜„"];
let sad = ["๐Ÿ˜ฅ" , "๐Ÿ˜”", "โ˜น"];
let neutral =smile.concat(sad); //  ["๐Ÿ˜" , "๐Ÿคฃ" , "๐Ÿ˜„",  "๐Ÿ˜ฅ" , "๐Ÿ˜”", "โ˜น"];

Array.every() This method executes the function on each array element and returns a boolean value.

let even= [2,4,6,8,10];
let checkEven= function(num){
if(num%2==0){
return num;
}}

even.every(checkEven);

Output :

image.png

Array.join() This method returns a new string that combines all the elements inside the array. These elements can be separated either by comma or any specified separator string. So if you want to convert your array into a string, use this method.

let smile = ["๐Ÿ˜" , "๐Ÿคฃ" , "๐Ÿ˜„"];
smile.join();    //  '๐Ÿ˜,๐Ÿคฃ,๐Ÿ˜„'
smile.join(" "); // '๐Ÿ˜ ๐Ÿคฃ ๐Ÿ˜„'
smile.join("_"); //'๐Ÿ˜_๐Ÿคฃ_๐Ÿ˜„'

Array.split() This method is used to convert a string into an array. It is opposite of join method. ``` let myString= " India, Bhutan, Malaysia, Germany, USA, China, UK "; let myAray= myString.split(",");

// Output: [' India', ' Bhutan', ' Malaysia', ' Germany', ' USA', ' China', ' UK '] ```

ย