DEV Community

Cover image for Array Operation with Javascript
Humza Hasan
Humza Hasan

Posted on • Originally published at Medium

1 2

Array Operation with Javascript

In this article, we will be discussing the various functionalities offered by Javascript for Arrays. We will be starting with the basic Javascript functionalities along with some new features added in ES6.
So it’s almost summer and I guess fruits gonna be the best array name to start our experiments.

Note: Writing this article to serve the purpose of quick revision through most of the array features offered by Javascript.

Array Declaration

let fruits = [mango,apple];
console.log(fruits);
//Output :[ ‘mango’, ‘apple’ ]
Enter fullscreen mode Exit fullscreen mode

Array length

let fruits = [mango,apple];
console.log(fruits.length);
//Output : 2 
Enter fullscreen mode Exit fullscreen mode

Adding element at the end of the array

fruits.push(watermelon);
console.log(fruits);
//Output : [ ‘mango’, ‘apple’, ‘watermelon’ ]
Enter fullscreen mode Exit fullscreen mode

Deleting element from the end of the array

fruits.pop();
console.log(fruits);
//Output: [ ‘mango’, ‘apple’ ]
Enter fullscreen mode Exit fullscreen mode

Deleting element from the start of the array

fruits.shift();
console.log(fruits);
//Output: [ ‘apple’ ]
Enter fullscreen mode Exit fullscreen mode

Adding element at the start of the array

fruits.unshift(banana);
console.log(fruits);
//Output: [ ‘banana’, ‘apple’ ]
Enter fullscreen mode Exit fullscreen mode

Slicing Array into parts

numbers = [12,31,23,76,3,9,45,2];
let fristTwo = numbers.slice(0,2);
console.log(fristTwo)
//Output: [12, 31]
Enter fullscreen mode Exit fullscreen mode

Sort numeric array

numbers = [12,31,23,76,3,9,45,2];
console.log(Original Array:  + numbers)
let numberSort = numbers.sort((a,b) => { return a-b })
// return b-a for decending order
console.log(Sorted Array:  + numberSort)
/*Output:
Original Array: 12,31,23,76,3,9,45,2
Sorted Array: 2,3,9,12,23,31,45,76 */
Enter fullscreen mode Exit fullscreen mode

Sort array alphabetically

fruits = [mango,apple,watermelon,banana]
let fruitSort = fruits.sort()
console.log(fruitSort)
//Output: [ 'apple', 'banana', 'mango', 'watermelon' ]
Enter fullscreen mode Exit fullscreen mode

Reversing Array

fruits = [mango,apple,watermelon,banana]
fruits.reverse()
console.log(fruits);
//Output: [ 'banana', 'watermelon', 'apple', 'mango' ]
Enter fullscreen mode Exit fullscreen mode

Array Iteration

Looping through array using forEach

fruits = [mango,apple,watermelon,banana]
fruits.forEach((fruit,index) => {
console.log(`${fruit} is at index ${index} in the array`)
})
/*Output:
mango is at index 0 in the array
apple is at index 1 in the array
watermelon is at index 2 in the array
banana is at index 3 in the array */
Enter fullscreen mode Exit fullscreen mode

Filtering array according to the requirement

let numbers = [12,31,23,76,3,9,45,2];
let evennumber = numbers.filter(number => number%2==0)
console.log(Original Array:  + numbers)
console.log(Filtered Array:  + evennumber)
/*Output:
Original Array: 12,31,23,76,3,9,45,2
Filtered Array: 12,76,2 */
Enter fullscreen mode Exit fullscreen mode

Modifying array according to requirement

let numbers = [12,31,23,76,3,9,45,2];
let timeTwo = numbers.map(number => number*2)
console.log(Original Array:  + numbers)
console.log(Modified Array:  + timeTwo)
/*Output:
Original Array: 12,31,23,76,3,9,45,2
Modified Array: 24,62,46,152,6,18,90,4 */
Enter fullscreen mode Exit fullscreen mode

Array to String

fruits = [ "apple", "banana", "mango", "watermelon" ]
console.log(fruits.toString)
//Output: apple,banana,mango,watermelon
Enter fullscreen mode Exit fullscreen mode

Concatenation of two array

let fruits = [apple,mango,banana]
let veggies = [potato,onion,spinach]
let food = fruits.concat(veggies);
console.log(food)
//Output: [ 'apple', 'mango', 'banana', 'potato', 'onion', 'spinach' ]
Enter fullscreen mode Exit fullscreen mode

To be updated soon with few more functionalities of Array

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit