Hey folks, hope you all are well! In today's article, we're gonna discuss arrays, yes I know, we already did, but that was in C++. If you guys still haven't read that article, you can do that here. Now, we're gonna discuss arrays in JavaScript, or to be precise, the most useful array methods that every developer must know (◠‿◠) But before we dive in, let's talk a bit about what arrays actually are, for all those folks who don't know or haven't touched JavaScript arrays for a long time👀
Arrays
If we talk in programming language, an array is said to be a collection of elements or items. They store data as elements and can retrieve them back whenever you need them. It is a widely used data structure in the programming languages that support it. In JavaScript, we can use a pair of square brackets [] to represent an array. Every single element in the array is separated by a comma(,). They can be a collection of elements of any data type, meaning that you can create an array with elements of data type String, Boolean, Number, Objects, and even other Arrays. They are used to store multiple values in a single variable.
Syntax:
const array_name = [itemA, itemB, itemC,.............];
Example:
const flowers = ["lily", "rose", "tulip"];
console.log(flowers);
Output:
lily, rose, tulip
Arrays truly are a wonder in JavaScript. They have many useful built-in properties or methods that can help you resolve any task involving them. Let's discuss the most important and useful ones now.
1. Array.push()
This method adds elements at the end of an array.
Example:
// Declaring and initializing our number array
var number_arr = [ 1, 2, 3, 4, 5];
// Adding 6 to the end of the array
number_arr.push(6);
console.log(number_arr);
Output:
1, 2, 3, 4, 5, 6
2. Array.unshift()
It is the opposite of array.push(). This method adds elements to the front of the array.
Example:
// Declaring and initializing our number array
var number_arr = [ 1, 2, 3, 4, 5];
// Now adding 6 to the front of the array
number_arr.unshift(6);
console.log(number_arr);
Output:
6, 1, 2, 3, 4, 5,
3. Array.pop()
This method removes elements from the end of the array.
Example:
// Declaring and initializing our number array
var number_arr = [ 1, 2, 3, 4, 5];
// It will remove element from end of the array
number_arr.pop();
console.log(number_arr);
Output:
1, 2, 3, 4,
4. Array.shift()
It is the opposite of array.pop(). It removes elements from the front of the array.
Example:
// Declaring and initializing our number array
var number_arr = [ 1, 2, 3, 4, 5];
// Removing element from front of the array
number_arr.shift();
console.log(number_arr);
Output:
2, 3, 4, 5
5. Array.splice()
It is a very useful method. It can remove or add elements from or in any particular location of the array.
Example:
// Adding elements using splice()
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// At position 2, adding 2 elements
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits);
// Removing elements using splice()
const number_arr = [ 2, 3, 4, 5, 6 ];
// using splice() to delete 3 elements starting from index 1
number_arr.splice(1, 3);
console.log(number_arr);
Output:
Banana, Orange, Lemon, Kiwi, Apple, Mango
2, 6
6. Array.concat()
This method is used to join two or more arrays.
Example:
// Declaring and initializing our arrays
const fruits = ["apple", "orange"];
const vegetables = ["potato", "capsicum", "carrot"];
const all = fruits.concat(vegetables);
console.log(all);
Output:
apple, orange, potato, capsicum, carrot
7. Array.isArray()
It determines whether the value passed through it is an array or not and returns the answer in booleans (true or false).
Example:
// Declaring and initializing our array
const fruits = ["apple", "orange"];
Array.isArray(fruits);
Output:
True
8. Array.slice()
This method returns selected elements from an array, as a new array.
Example:
// Declaring and initializing our array
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
console.log(citrus);
Output:
Orange, Apple
9. Array.length
This method returns or sets the number of elements in an array.
Example:
// Declaring and initializing our array
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
// Checking the length of the array
const len = fruits.length;
// Printing the result
console.log(len);
Output:
5
10. Array.includes()
This method checks if an array has a certain value among its elements.
Example:
// Initializing and declaring our array
let fruits = ["Banana", "Apple", "Mango", "Peach", "Orange, "Grapes"];
let check = fruits.includes("Apple");
console.log(check); // true
// This method is case sensitive
let check1 = fruits.includes("apple");
console.log(check1); // false
// The second argument here specifies position to start searching from
let check2 = fruits.includes("Apple", 2);
console.log(check2); // false
// The negative argument here starts the count from backwards
// Searching starts from third-to-last element
let check3 = fruits.includes("Apple", -3);
console.log(check3); // false
let check4 = fruits.includes("Lime");
console.log(check4); // false
Output:
true
false
false
false
false
Conclusion
JavaScript arrays have quite a lot of useful methods that can simplify our development efforts. Knowing these methods can save us time and can even boost the performance of our code. I truly hoped that today you all learned something today, whether it was new array methods or refreshing your old concepts which you can use for your next project ^_^