Javascript Array tricks to improve your development skill

Hi All, today I will share some of the Javascript Array tricks which will improve your development skills. In our daily life, we use arrays a lot in javascript application to store data which is very easy to handle in terms of all crud operations related to data we can handle easily in an array. But there are some tasks which take time to do with a javascript array.

We will look into some scenarios which are easy to do but some times we spend a lot of time completing those tasks. These javascript array tricks will help you work with different scenarios related to javascript arrays.

Shuffle Array

This scenario occurs a lot of times in our application that we have to shuffle the array values and there is no function provided for javascript shuffle array. Here I have created a small snippet to shuffle the array values. 

function shuffle(arr) {
  var i, j, temp;
  for (i = arr.length - 1; i > 0; i--) {
    j = Math.floor(Math.random() * (i + 1));
    temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;
}

Unique Value

We always have to keep unique values in every dataset we handle. Rarely we accept duplicate values in any dataset and that too depends on use case which is not very common in software development. For this, I will share multiple options to achieve the desired results. 

1. Using Set() — works with flat arrays (strings, numbers, booleans). Not suitable for arrays of objects.

const numArray = [
  1, 2, 3, 4, 2, 3, 4, 5, 1, 1, 2, 3, 3, 4, 5, 6, 7, 8, 2, 4, 6,
];

Array.from(new Set(numArray));
[...new Set(numArray)];

2. Using Array.filter() — returns a new array; does not mutate the original. Note: does not run for empty arrays.

const data = [
  { id: 1, name: 'Lemon' },
  { id: 2, name: 'Mint' },
  { id: 3, name: 'Mango' },
  { id: 4, name: 'Apple' },
  { id: 5, name: 'Lemon' },
];

function findUnique(data) {
  return data.filter((value, index, array) => {
    return array.findIndex((item) => item.name === value.name) === index;
  });
}

3. Using lodash uniqBy() — creates a duplicate-free version by comparing a specific property.

import { uniqBy } from 'lodash';

const data = [
  { id: 1, name: 'Lemon' },
  { id: 2, name: 'Mint' },
  { id: 3, name: 'Mango' },
  { id: 4, name: 'Apple' },
];

const unique = uniqBy(data, (e) => e.name);

Sort Javascript array of objects by property

Javascript array provides a sort function that works perfectly with an array of numbers, strings, booleans and etc, but when it comes to the array of objects it does not work that effectively. To tackle this we can use a callback in array.sort function and do our comparison to sort the values and return the sorted array.

We will use compare function to sort the data which is an array of objects. Consider A and B to be the values to compare. From our compare function we will have returned values as per conditions below:

1. less than 0 — A comes before B
2. greater than 0  — B comes before A

3. equal to 0  — A and B are left unchanged with respect to each other.

const data = [
  {id: 1, name: 'Lemon', type: 'fruit'},
  {id: 2, name: 'Mint', type: 'vegetable'},
  {id: 3, name: 'Mango', type: 'grain'},
  {id: 4, name: 'Apple', type: 'fruit'},
  {id: 5, name: 'Lemon', type: 'vegetable'},
  {id: 6, name: 'Mint', type: 'fruit'},
  {id: 7, name: 'Mango', type: 'fruit'},
  {id: 8, name: 'Apple', type: 'grain'},
]

function compare(a, b) {
// Use toLowerCase() to ignore character casing
const typeA = a.type.toLowerCase();
const typeB = b.type.toLowerCase();

let comparison = 0;
if (typeA > typeB) {
  comparison = 1;
  } else if (typeA < typeB) {
  comparison = -1;
  }
  return comparison;
}

data.sort(compare)

Array to comma separated string

Javascript has a very easy and simple way of achieving this task, but most of the new javascript developers don’t know how we can do change array to comma separated string with one simple javascript array function and they end up searching on StackOverflow and go through multiple questions and pages which make them waste their time in this small task. So let's see how we can do this with one line of code.

const data = ['Mango', 'Apple', 'Banana', 'Peach'];

data.join(',');
// return "Mango,Apple,Banana,Peach"

Select a single element from an array

For this task we can use multiple options, we can use javascript forEach function and have an if-else check to pull out value, we can use javascript filter function and filter the value, but the drawback in using javascript foreach and filter functions are 

1. In forEach it will unnecessarily iterate over the array and we have to write additional if else statement to pull out the desired value.
2. In filter function, we have a simple comparison operation but it will return an array which we don’t want instead we want the single object from an array as per the given condition.

To solve this we will use javascript array find function to find the exact element from an array and return that object, here we don’t need to use an if-else statement to check if element meets our condition or not. Below is the example of the javascript array find function.

const data = [
  {id: 1, name: 'Lemon'},
  {id: 2, name: 'Mint'},
  {id: 3, name: 'Mango'},
  {id: 4, name: 'Apple'}
]

const value = data.find(item => item.name === 'Apple')
// value = {id: 4, name: 'Apple'}

 

So this is it for javascript array tricks post today, I will come up with more Javascript functions and tricks which will help you to improve your skill and increase your productivity.

You can visit my Instagram post on Types of Javascript functions

View my post on Creating reusable table component in React