JavaScript – Working with Arrays Top Tips and Tricks (With Examples and Code)

Working with Arrays in Javascript or Jquery? Trouble in working with Arrays? or want to make work easier when it is about Arrays? well, we bring you the top tricks and tips which you must know in order to make your work easier and interesting while working with Arrays in JavaScript or JQuery.

SO without wasting time let’s jump directly to these awesome Tips and Tricks which we have gathered from Top notch Programmers working with JavaScript/JQuery from a long time. by the end of this post, you must say these Tips can save your time and effort and even change your thinking about working with Arrays. we all have some sort of problems while working with Arrays. because we need to insert and retrieve data from Array and for that we need to make use of loops and other techniques which may result in a code which is not good looking and most of the times chances of breaking functionality from some point. so we all must know these awesome tips and tricks. so now let’s see what are these top tricks and tips about JavaScript/JQuery – Arrays[].

  • map() Function –  in JavaScript / JQuery this map() function made for arrays is very useful and very effective. but few of us are aware of this in the beginning of our programming career and we ended up using Loop instead of this. so if you are such a person then don’t worry just learn from here and you will be able to use this easily anywhere you want with ease.

What is map() function? – this method creates a new array with the results of calling a function for every array element. this method calls the provided function once for each element in an array, in order.

you can simply think of this as a for loop in which you are calling a function to perform a specific task. but with map() you are not needed to write a loop or anything like this. it will take care of all this on its own.

Benefits of using map()? –

  1. it does not execute the function for array elements without values.
  2. it does not change the original array.

Syntax – Basic Syntax is  –  array.map(function(currentValue, index, arr), thisValue). but I will show you some really simple syntax of map() function in this post.

function(currentValue, index, arr) – This is a Required Function to be called for every element in Array on which map() is applied.  where currentValue is Required Parameter and Other 2 are Optional depends on your need you can use or not.

thisValue – This parameter is also optional.

Look at below Example to make it clear –

var array = [
    {firstname : "vijay", lastname: "sharma"},
    {firstname : "arpit", lastname: "mittal"}
];

function getFullName(item, index) {
    var fullname = [item.firstname,item.lastname].join(" ");
    return fullname;
}

function myFunction() {
    var fullNameArray = array.map(getFullName);
}

so in this above example, we have an array of objects with 2 elements as KeyValue pair are we are making a new array named as fullNameArray from the original array with combining properties of the old array and assigning into the new array. so as simple as this you can use this map() function to make your work easy and your code will look cool also.

Let’s see another Example of map() function to make it more clear to you.

in this example, our Requirement is to make a new array with different properties in the object as compared to original Array. in the day to day programming we need this kind of work to do i.e from server data is coming with different property names and we need something else so we need to make a new array with the desired property name and use it. but making new array by using for loop is old way. The new and cool way is to use map() function let’s see how we can do this.

see below example code –

var originalArray = [
    {name : "vijay", key : "1"},
    {name : "arpit", key : "2"},
    {name : "surbhi", key : "3"}
];

var newArray = originalArray.map(function (e){
    return {id: e.key, value: e.name}
});

this above code will give output in newArray as objects with properties “id” and “value” now we can use where-ever we want to use this newArray.

So now let’s See another awesome Method to use on Arrays in JavaScript/JQuery.

  • filter() Function – this method creates an array filled with all array elements that pass a test (provided as a function). we can simply think of this as a Regex to compare values and values which pass the test or matches the Regex are assigned to a new array that we call as a filter array.

Benefits of using filter()? –

  1. it does not execute the function for array elements without values.
  2. it does not change the original array.

Syntax – Basic Syntax is  –  array.filter(function(currentValue, index, arr), thisValue). but I will show you some really simple syntax of map() function in this post.

function(currentValue, index, arr) – This is a Required Function to be called for every element in Array on which map() is applied.  where currentValue is Required Parameter and Other 2 are Optional depends on your need you can use or not.

thisValue – This parameter is also optional.

Look at below Example to make it clear –

var originalArray = [1, 11, 21, 31, 41];

var newArray = originalArray.filter(function (e){
    return e > 11;
});

Simply we are searching for all elements which are greater than 11 in the original array. and we will get  [21, 31, 41] as our answer.

Now, these were 2 main tips and tricks to work with Arrays and now let’s see some few minor tricks also which can help you.

  • JOIN() – if you want an array to be converted into a string with comma separated values. just use this function join(). to make it happen see below example code –
var array = ['a','b','c'];

var stringValue = array.join();

you will get  output something like  – “a,b,c”;

  • push() – if you want to enter values into your array. then this function is Saviour just 1 line and value will be pushed into the array at last position.

see below code to make it clear –

var array = [1, 2, 3];

array.push(4);

this will push 4 into our array at last position.


So These all were Tips and Tricks for Working with Arrays in JavaScript. Hope you Enjoyed Reading. be with us for some upcoming awesome material in Programming.


Happy Coding

 

You may also like...

3 Responses

  1. Anonymous says:

    I’m not that much of a internet reader to be honest but your blogs really nice, keep it up!
    I’ll go ahead and bookmark your website to come back later.

    Cheers

  2. GHGH says:

    var names = [“Peter”, “Joe”, “Cleveland”, “Quagmire”, “Joe”];
    var uniqueNames = […new Set(names)];

    console.log(uniqueNames);

    • admin says:

      Yes this is approach when we are using es6. But here i just described how we can do it in basic javascript 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *