DEV Community: Adesh Khanna

Javascript Array Methods Ep.5

Adesh Khanna — Sun, 15 Jan 2023 19:38:30 +0000

Hey There 👋
Welcome to Episode 5 of my Array Methods Explain Show.

as always, if you are here then i suppose you must have pre knowledge of javascript and arrays.

we will be discussing only one method on this episode which is : INDEXOF

The indexOf method returns the first index at which a given element can be found in the array, or -1 if it is not present.

the syntax of indexOf method is :

item : the item whose index is to be searched in given array
fromIndex (optional) : The index from which the search should start. If the index is greater than or equal to the array's length, -1 is returned, which means the array will not be searched. If fromIndex value is a negative number, it is taken as the offset from the end of the array. If the provided index is 0, then the whole array will be searched that’s why the default value is also 0.

Now, lets look at examples :

finding index of element

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let value = colors.indexOf("Yellow"); // returns the index of Yellow
console.log(value); // 2

finding index of element from given positive Index

let colors = ["Yellow", "Blue", "Yellow", "White", "Black"];

let value = colors.indexOf("Yellow", 1); // returns the index of Yellow starting from index 1
console.log(value); // 2

finding index of element from given negative Index

let colors = ["Yellow", "Blue", "Yellow", "White", "Black"];

let value = colors.indexOf("Black", -3); // returns the index of Black starting from 3rd last index
console.log(value); // 4

finding index of element that is not in array

let colors = ["Yellow", "Blue", "Yellow", "White", "Black"];

let value = colors.indexOf("Grey"); // returns -1 because grey is not in array
console.log(value); // -1

One thing to note regarding indexOf is that it the elements of array are always compared with strict equality (i.e === is used while comparing)

Javascript Array Methods Ep.4

Adesh Khanna — Tue, 08 Mar 2022 16:58:05 +0000

Hey There 👋
Welcome to Episode 4 of my Array Methods Explain Show.

as always, if you are here then i suppose you must have pre knowledge of javascript and arrays.

we will be discussing only one method on this episode which is : CONCAT

The method concat creates a new array that includes values from other arrays and additional items.

the syntax of concat method is :

item1, item2, item3, .... itemN : the arrays / elements to add.

It returns new array containing the extracted elements, and the original array remains same.

Now, lets look at examples :

concatenating two arrays

let colors = ["Red", "Blue"];
let numbers = [1,2,3];

const colorNumber = colors.concat(numbers);
console.log(colorNumber); // ["Red", "Blue", 1, 2, 3]

concatenating three arrays

let colors = ["Red", "Blue"];
let numbers = [1,2,3];
let veggie = ["Potato", "Carrot", "Raddish"];

const colorNumberVeggie = colors.concat(numbers, veggie);
console.log(colorNumberVeggie); // ["Red", "Blue", 1, 2, 3, "Potato", "Carrot", "Raddish"]

concatenating nested arrays

let numbers1 = [1, [2,3]];
let numbers2 = [[4,5], [6,7]];

const numbers = numbers1.concat(numbers2);
console.log(numbers); // [1, [2, 3], [4, 5], [6, 7]]

concatenating arrays and values

let colors = ["Red", "Blue"];

const moreColors = colors.concat("Yellow", ["White", "Black"]);
console.log(moreColors); // ["Red", "Blue", "Yellow", "White", "Black"]

BEHIND THE SCENES

The concat method does not alter the given array or any of the arrays provided as arguments but instead returns a copy that contains copies of the same elements combined from the original arrays. Elements of the original arrays are copied into the new array as follows:

For objects concat copies object references into the new array. Both the original and new array refer to the same object. That is, if a referenced object is modified, the changes are visible to both the new and original arrays. This includes elements of array arguments that are also arrays.
For data types such as strings, numbers and booleans (not String, Number and Boolean objects): concat copies the values of strings and numbers into the new array.

Javascript Array Methods Ep.3

Adesh Khanna — Wed, 02 Mar 2022 08:41:01 +0000

Hey There 👋
Welcome to Episode 3 of my Array Methods Explain Show.

as always, if you are here then i suppose you must have pre knowledge of javascript and arrays.

we will be discussing only one method on this episode which is : SLICE

slice does not alter the original array. It returns a copy of elements from the original array.

the syntax of slice method is :

beginIndex (optional) :

The starting index from which you want to start the extraction. 
If beginIndex > length of array, then empty array is returned. 
If start is negative, then it starts from last of array.

endIndex (optional) :

The ending index at which you want to stop the extraction. 
If endIndex > length of array, then whole array is returned. If start is negative, then it starts from last of array.

It returns new array containing the extracted elements.

Now, lets look at examples :

return a sub array with given start index

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(2); // return a sub array from index 2
console.log(newColors); // ["Yellow", "White", "Black"]

return a sub array with given start index and end index

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(2,4); // return a sub array from index 2 to 4
console.log(newColors); // ["Yellow", "White"]

return a sub array without any argument

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(); // return whole array
console.log(newColors); // ["Red", "Blue", "Yellow", "White", "Black"]

return a sub array with negative start index

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(-2); // return a sub array from index 2 (from last)
console.log(newColors); // ["White", "Black"]

return a sub array with negative end index

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let newColors = colors.slice(1, -2); // return a sub array from index 1 to 2 (from last) 
console.log(newColors); // ["Blue", "Yellow"]

BEHIND THE SCENES

slice does not alter the original array. It returns a copy of elements from the original array. The copying takes place as -

For objects, slice copies object references into the new array. Both the original and new array refer to the same object. If an object changes, the changes are visible to both the new and original arrays.
For strings, numbers and booleans (not String, Number and Boolean objects), slice copies the values into the new array. Changes to the string, number, or boolean in one array do not affect the other array.

If a new element is added to either array, the other array is not affected.

Javascript Array Methods Ep.2

Adesh Khanna — Tue, 22 Feb 2022 10:57:06 +0000

Hey There 👋
Welcome to Episode 2 of my Array Methods Explain Show.

as always, if you are here then i suppose you must have pre knowledge of javascript and arrays.

we will be discussing only one method in this episode
which is : SPLICE

This is the best method in javascript arrays armoury, as it can be used to insert, replace or delete an element from an array.

the syntax of splice method is :

start :

The starting index from which you want to modify the array. 
If start > length of array, then start will be set to length of array. 
If start = -1, then start will be set to last element

deleteCount (optional) :

The count of elements you want to remove starting from start, if its value is equal or larger than array.length then all elements are removed. 
If its value is 0, then no element is removed, but then providing item1 parameter becomes compulsory.

item1, item2, item3, .... itemN :

The elements to add, beginning from start. 
If not provided then only elements are deleted.

It returns an element of deleted array elements, if no element is deleted then empty array is returned.

Now, Let's have a look at some of the examples to have better understanding

To remove n elements from ith index. let’s take start as 1 and n as 1

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

colors.splice(1,1); // from index : 1, delete 1 item
console.log(colors); // ["Red", "Yellow", "White", "Black"]

Now, lets delete 2 elements and replace them “pink” and “purple”

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

colors.splice(2, 2, "Pink", "Purple"); // from index : 2, delete 2 item, add two items
console.log(colors); // ["Red", "Blue", "Pink", "Purple", "Black"]

Now, lets just add one element “grey” without deleting any element

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

colors.splice(1, 0, "Grey"); // from index 1, delete 0 item, add 1 item
console.log(colors); // ["Red", "Grey", "Blue", "Yellow", "White", "Black"]

Last, splice returns the array of deleted elements

let colors = ["Red", "Blue", "Yellow", "White", "Black"];

let value = colors.splice(3, 1); // from index 3, delete 1 item
console.log(value); // ["White"]
console.log(colors); // ["Red", "Blue", "Yellow", "Black"]

Javascript Array Methods Ep.1

Adesh Khanna — Tue, 15 Feb 2022 06:25:41 +0000

Hey There 👋
Welcome to Episode 1 of my Array Methods Explained Show.

If you are here then i suppose you must have pre knowledge of javascript and arrays.

we will be discussing four methods in this episode
POP / PUSH / SHIFT / UNSHIFT

THE BASICS

Push

1. Push is used to add an element to the array
2. can add multiple items once
3. It always add to the last of array
4. It returns the size of new array

let colors = ["Red", "Blue", "Yellow"];

// pushing to last of array
colors.push("White");
console.log(colors); // ["Red", "Blue", "Yellow", "White"]

// can be used to push multiple items
colors.push("Green", "Grey");
console.log(colors); // ["Red", "Blue", "Yellow", "White", "Green", "Grey"]

// returns the size of newly modified array
let value = colors.push("Black");   
console.log(value); // 7
console.log(colors); // ["Red", "Blue", "Yellow", "White", "Green", "Grey", "Black"]

Pop

1. Pop is used to remove element from an array
2. It always removes the last element of array
3. It returns the value of data removed

let colors = ["Red", "Blue", "Yellow"];

// poping from last of array
colors.pop();
console.log(colors); // ["Red", "Blue"]

// returns the data removed
let value = colors.pop();
console.log(value); // "Blue"
console.log(colors); // ["Red"]

Shift

1. Shift is used to remove element from an array
2. It always removes the first element of array
3. It also returns the deleted element

let colors = ["Red", "Blue", "Yellow"];

// deleting from front of array
colors.shift();
console.log(colors); // ["Blue", "Yellow"]

// returns the data removed
let value = colors.shift();
console.log(value); // "Blue"
console.log(colors); // ["Yellow"]

Unshift

1. Unshift is used to add element to the array
2. It always add to starting element of array
3. It also returns the added element
4. can add multiple items once

let colors = ["Red", "Blue", "Yellow"];

// pushing to starting of array
colors.unshift("White");
console.log(colors); // ["White", "Red", "Blue", "Yellow"]

// can be used to push multiple items
colors.unshift("Black", "Grey");
console.log(colors); // ["Black", "Grey", "White", "Red", "Blue", "Yellow"]

// returns the size of newly modified array
let value = colors.unshift("Pink");
console.log(value); // 7
console.log(colors); // ["Pink", "Black", "Grey", "White", "Red", "Blue", "Yellow"]

PERFORMANCE

push and pop are fast while shift and unshift are slow, why ?

this is because it is faster to work with the end of array then with beginning, lets see why this is so

if we are executing colors.shift();, then shift has to perform 3 things :

Remove the element with the index 0.
Move all elements to the left, renumber them from the index 1 to 0, from 2 to 1 and so on.
Update the length property.

hence, the more elements in the array, the more time to move them, and more in-memory operations,

the similar thing happens with unshift

And what’s with push/pop? They do not need to move anything. To extract an element from the end, the pop method simply cleans the index and shortens length.

The pop method does not need to move anything, because other elements keep there indices. That’s why it is super fast.

The similar thing with happens with push method.