Hey reader 🙂, welcome back again to my 5th blog of this series✌

Hope you've learned a lot till now 🚀

Today's sole topic is Arrays in Js.

Arrays

An array can store multiple values/items under a single variable name.

An array can store items of different data types.

An array can also have duplicate elements in it.

Now, when it has multiple values under a single name, it should also have something to differentiate the items inside it. Hence the concept of indexing comes here.

Each item of the array has an index, and they are accessed using their indexes.

Array index starts from 0, hence it ends at a number less than its size.

Now, comes the actual part, the creation of arrays.

Creating empty arrays

There are two ways to create an empty array :

Using Array constructor

It means using Array()

Using square brackets

Creating arrays with values

Here, we are initializing an array with some values.

Same, let's create arrays using square brackets.

The elements should be separated using commas

Arrays can have items of different data types

We can get the length of the array using length property.

Creating arrays using split() method

If you remember, in the last blog we discussed split() method in Strings.

split() method splits an array based on given argument and returns an array of elements.

Accessing array items using index

Methods to manipulate array

Array constructor

The array is created with empty values.

Now, moving on a step ahead, let's fill with some static values.

Creating static values with fill() method

We can fill the array with some static value rather than keeping it empty.

The value will be repeated till the last index of the array.

You can fill it with the value of any data type.

Concatenating arrays using concat() method

If you remember we did concatenation in Strings.

Similarly now we will do the same using concat() method

The syntax is array.concat(anotherArray), it is similar to array + anotherArray.

Getting Array length

We have seen it already above.

length is a property of every array

Syntax is -> array.length

without parantheses

Check if an element exists in an array

As we did yesterday in string methods -> indexOf() and lastIndexOf()

indexOf returns the index of first occurrence of the repeated element,

whereas the lastIndexOf returns the last occurrence of the given element.

To check if an item exists in an array

To check if an item is included or not in an array, we use includes() method.

This method will return boolean -> true if the given item exists, else false

As simple as that, isn't it?

Checking if an array is an array or not

We have Array.isArray() method to check that

Again, this will also return boolean -> true or false.

Converting Array into String

This is the opposite method of split(), it is toString() method.

Here we will provide the method an array and it will return a string

Joining Array elements

We have join() method to join array elements and form a string.

Clearly, it takes an array and returns a string.

By default, it joins array with the comma, but we can change it by sending a different string parameter.

Therefore, this is an advancement of toString() method, it not only joins but we can also control the joining parameter.

Slice Array elements

This method is used to cut out multiple elements.

It takes two parameters, starting and ending index.

It returns a new array of removed elements.

Also, it does not affect the original array.

1. When you provide no parameters to slice() -> It simply copies all the items into a new array

2. When you provide one parameter -> it means that you want elements from given index till the end.

3. Finally, if you give two parameters, it takes it as a start and end index and copies elements in between them.

Remember, as array items can be accessed using negative index,

slice() method can also be provided with negative indexes

If you see, the -3rd index is of 'is' -> so, from -3rd till the end all the values are copied.

Similarly, change the indexes and play around with them.

Splice method in an array

Splice is a very versatile method, it alone can replace, remove and add items in an array.

Note that unlike slice(), splice() changes the original array.

1. If you provide no parameters -> it simply removes all the elements

2. If you provide two parameters -> it will take it as start and end indexes,

   It returns an array of what it had removed.

   When you check the original array, that too will not have those elements

3. 

   If you provide three parameters -> it takes it as starting index, no. of items to be removed, and items to be replaced with them.

   As you can see below, from the array, it removed from index 3 -> 3 items were removed and were returned -> and the remaining were in place of removed elements.

(A summary to push, pop, shift, unshift is provided at the end)

Adding an item to an array (at the end)

We use the push() method to add an item to an array.

The method takes the element to be added as a parameter

This method returns the new length of the array.

It will get added at the (last index + 1) position.

Removing the last element of an array

The pop () method is just called and it does not take any parameters.

It only removes the last element.

Removing an element from the beginning

We use shift() method for this.

In one way we're shrinking the array.

This method returns the removed element.

The reason is you're removing an element from the 0th index.

Now an array can't be empty at the beginning indexes.

That's the reason we have to shift all the elements toward start index.

Adding elements from the beginning

For this purpose, we use unshift() method

In one meaning, we are unshifting array elements and adding new elements.

Now the array will not remove the last elements and add new in the beginning.

Because the array can be expanded from the end side, but not from the starting side.

You can add as many as you need using unshift() at a time.

This method returns the length of the new array.

Summary for push(), pop(), shift(), unshift()

Reversing array order

reverse() method -> reverse the order of the array

Very simple..! Isn't it.

Sorting elements in an array

sort() function works well with strings, but not for numbers.

To sort numbers using sort() function, we need to pass a compare function

Check the image below

Array of Arrays

These are nothing but your matrices.

That is it for today 😄.

Hope you enjoyed learning different methods of manipulating arrays 🤓.

Have a great day ahead 🙂.