Maximize Your Productivity with These Essential JavaScript Array Techniques

Are you new to JavaScript and feeling a little overwhelmed by all the array methods out there? No worries, I’m here to help. In this blog post, I’m going to go over some of the most common array methods and explain how to use them, what actually they returns and are they mutating or immuntating with simple examples. If you use these methods, surely it will save your time and boost your productivity in office. But remember one thing, you don’t have to memorize all these things, just keep practicing.

Maximize Your Productivity with These Essential JavaScript Array Techniques

In JavaScript, an array is a data type that allows you to store a list of items. This definition is almost true for all programming languages. You can store items of any data type in an array, including numbers, strings, and even other arrays. Here’s a simple example of an array of numbers:

let numbers = [1, 2, 3, 4, 5];

Got it? Great! Now let’s dive into some array methods.

length

The length method returns the size of an array.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // The length of the 'numbers' array is 5

at()

The at() method returns the indexed element from an array.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.at(0)); // 1
console.log(numbers.at(1)); // 2
console.log(numbers.at(2)); // 3
console.log(numbers.at(3)); // 4
console.log(numbers.at(4)); // 5
console.log(numbers.at(5)); // undefined

join()

The join() method is commonly used to join elements of an array into a single string.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.join()); // "1,2,3,4,5"
console.log(numbers.join(' + ')); // "1 + 2 + 3 + 4 + 5"

delete

The delete operator in JavaScript removes a property from an object.

let numbers = [1, 2, 3, 4, 5];
delete numbers[2];
console.log(numbers); // [1, 2, undefined, 4, 5]
delete numbers[4];
console.log(numbers); // [1, 2, undefined, 4, undefined]

concat()

The concat() method in JavaScript is used to merge two or more arrays, creating a new array that encapsulates the elements of the original arrays.

let numberArr1 = [1, 2, 3, 4, 5];
let numberArr2 = [6, 7];
let numberArr3 = numberArr1.concat(numberArr2);
console.log(numberArr3); // [1, 2, 3, 4, 5, 6, 7]

push()

The push() method allows you to add one or more items to the end of an array. Here’s an example:

let numbers = [1, 2, 3];
numbers.push(4, 5); // the array is now [1, 2, 3, 4, 5]

Now, we’ll see what actually push method returns.

let numbers = [1, 2, 3, 4, 5];
let length = numbers.push(6); // now the array is [1, 2, 3, 4, 5, 6]
console.log(length) // push method returns the length of the ‘numbers’ array after appending values to the end which is 6

The push method changes the length and the element of the array. So it is a mutating method.

pop()

The pop() method removes the last item from an array and returns it. Here’s an example:

let numbers = [1, 2, 3, 4, 5];
let last = numbers.pop(); // the array is now [1, 2, 3, 4], and the variable last is equal to 5

The pop method returns the removed element. It is also mutating method like push method. That means, it changes the actual array content.

shift()

The shift() method works similar to pop(), but it removes the first item from an array instead of the last one. Here’s an example:

let numbers = [1, 2, 3, 4, 5];
let first = numbers.shift(); // the array is now [2, 3, 4, 5], and the variable first is equal to 1

The shift method returns the removed element from the array and it changes the original array. So, it is also a mutating method.

unshift()

The unshift() method adds one or more items to the beginning of an array. Here’s an example:

let numbers = [1, 2, 3, 4, 5];
numbers.unshift(-1, 0); // the array is now [-1, 0, 1, 2, 3, 4, 5]

The unshift() method returns the new length. And it is also a mutating method.

indexOf()

The indexOf() method searches for an item in an array and returns its position. If the item is not found, it returns -1. Here’s an example:

let numbers = [1, 2, 3, 4, 5]; 
let index = numbers.indexOf(3); // the variable index is equal to 2
index = numbers.indexOf(6); // 6 is not present in the array so the variable index is equal to -1

Is this method mutating or non-mutating? It doesn’t have mutating feature.

includes()

The includes() method is similar to indexOf(), but it returns a boolean value indicating whether an item is present in the array or not. Here’s an example:

let numbers = [1, 2, 3, 4, 5];
let hasThree = numbers.includes(3); // the variable hasThree is equal to true 
let hasSix = numbers.includes(6); // the variable hasSix is equal to false

reverse()

The reverse() method reverses the order of the items in an array. Here’s an example:

let numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // now the array is [5, 4, 3, 2, 1];

sort()

The sort() method can be used to sort the items in an array. By default, it sorts the items in alphabetical order (for strings) or in ascending order (for numbers). Here’s an example:

let numbers = [3, 1, 2];
numbers.sort(); // the array is now [1, 2, 3]
let fruits = [‘apple’, ‘banana’, ‘orange’];
fruits.sort(); // the array is now [‘apple’, ‘banana’, ‘orange’]

You can also provide a comparison function as an argument to the sort() method to specify a custom sorting order. For example, to sort the items in descending order:

let numbers = [3, 1, 2];
numbers.sort(function(a, b) {
 return b — a;
}); // the array is now [3, 2, 1]

slice()

The slice() method allows you to extract a portion of an array and returns a new array with the extracted items. It takes two arguments: the start index and the end index (the end index is not included). Here’s an example:

let numbers = [1, 2, 3, 4, 5];
let middle = numbers.slice(1, 4); // the array middle is [2, 3, 4]

splice()

The splice() method can be used to add, remove, or replace items in an array. It takes at least two arguments: the start index and the number of items to remove. You can also provide additional arguments to specify the items to add. Here’s an example:

let numbers = [1, 2, 3, 4, 5];

// remove one item starting at index 2 
numbers.splice(2, 1); // the array is now [1, 2, 4, 5]

// add two items starting at index 2 
numbers.splice(2, 0, 3, 4); // the array is now [1, 2, 3, 4, 4, 5]

// replace one item with two items starting at index 2 
numbers.splice(2, 1, 3, 4); // the array is now [1, 2, 3, 4, 5]

And that’s it! These are some of the most common and also essential array methods in JavaScript. I hope this helps you get started with working with arrays in your code. As always, if you have any questions or need more clarification, don’t hesitate to ask in the comment section.

Happy coding!