{"id":486,"date":"2022-07-26T11:16:54","date_gmt":"2022-07-26T11:16:54","guid":{"rendered":"https:\/\/typedarray.org\/?p=486"},"modified":"2023-07-13T05:23:43","modified_gmt":"2023-07-13T05:23:43","slug":"find-difference-between-two-arrays-in-javascript","status":"publish","type":"post","link":"https:\/\/typedarray.org\/find-difference-between-two-arrays-in-javascript\/","title":{"rendered":"Find The Difference Between Two Arrays In JavaScript"},"content":{"rendered":"\n

To find the difference between two arrays in JavaScript, you can use the following methods –<\/p>\n\n\n\n

  1. Array.prototype.filter() and indexOf() method<\/li>
  2. Array.prototype.filter() and includes() method<\/li>
  3. Set object<\/li>
  4. jQuery methods<\/li>
  5. Underscore\/Lodash library<\/li><\/ol>\n\n\n\n

    Find The Difference Between Two Arrays In JavaScript<\/h2>\n\n\n
    \n
    \"find<\/figure><\/div>\n\n\n

    Let’s look at these methods one by one, but let’s first start by understanding what difference means in this context.<\/p>\n\n\n\n

    Different values in arrays<\/a> can be of the same type or different types. In case of primitive data types, difference is defined as the elements that are present in one array but not in the other. In case of reference data types like objects and arrays, two instances are considered equal if they have the same properties with the same values.<\/p>\n\n\n\n

    For example, let’s consider two arrays –<\/p>\n\n\n\n

    var array1 = [\u2018a\u2019, \u2018b\u2019, \u2018c\u2019];\n\nvar array2 = [\u2018b\u2019, \u2018c\u2019];<\/code><\/pre><\/div>\n\n\n\n
    Here, the difference between array1 and array2 is –<\/p>\n\n\n\n
    [‘a’]<\/p>\n\n\n\n
    The order of elements in the output array is not important. In other words, it doesn’t matter if the element ‘a’ is at index 0 or index 2 in the output array.<\/p>\n\n\n\n
    Similarly, let’s consider two more arrays –<\/p>\n\n\n\n
    var array1 = [\u2018a\u2019, \u2018b\u2019, \u2018c\u2019];\n\nvar array2 = [\u2018c\u2019, \u2018a\u2019];<\/code><\/pre><\/div>\n\n\n\n
    In this case as well, the difference between array1 and array2 is –<\/p>\n\n\n\n
    [‘b’]<\/p>\n\n\n\n
    The order of elements in the output array is not important. In other words, it doesn’t matter if the element ‘b’ is at index 0 or index 1 in the output array.<\/p>\n\n\n\n
    Now that we have a clear understanding of what difference means in this context, let’s look at the different methods that can be used to find the difference between two arrays.<\/p>\n\n\n\n
    Array.prototype.filter() And indexOf() method<\/h3>\n\n\n\n
    You can use the Array.prototype.filter()<\/a> method to create a new array from the existing array, excluding the elements which are present in both arrays. Then, use the indexOf() method to find the index of all elements which are present in the first array, but not in the second array.<\/p>\n\n\n\n
    Example:<\/p>\n\n\n\n
    var arr1 = [\u2018a\u2019, \u2018b\u2019, \u2018c\u2019, \u2018d\u2019];\n\nvar arr2 = [\u2018b\u2019, \u2018c\u2019];\n\narr1.filter(function(element) {\n\n  return arr2.indexOf(element) === -1; \/\/ include only those elements which are not present in arr2\n\n}).forEach(function(element) { \/\/ print only those elements which are not present in arr2\n\n  console.log(element);\n\n});<\/code><\/pre><\/div>\n\n\n\n
    Output<\/strong>:<\/p>\n\n\n\n
    a<\/p>\n\n\n\n
    d<\/p>\n\n\n\n
    Array.prototype.filter() And includes() method<\/h3>\n\n\n\n
    Instead of using the indexOf() method, you can use the includes()<\/a> method to find the index of all elements which are present in the first array, but not in the second array.<\/p>\n\n\n\n
    Example:<\/p>\n\n\n\n
    var arr1 = [\u2018a\u2019, \u2018b\u2019, \u2018c\u2019, \u2018d\u2019];\n\nvar arr2 = [\u2018b\u2019, \u2018c\u2019];\n\narr1.filter(function(element) {\n\n  return !arr2.includes(element); \/\/ include only those elements which are not present in arr2\n\n}).forEach(function(element) { \/\/ print only those elements which are not present in arr2\n\n  console.log(element);\n\n});<\/code><\/pre><\/div>\n\n\n\n
    Output<\/strong>:<\/p>\n\n\n\n
    a<\/p>\n\n\n\n
    d<\/p>\n\n\n\n
    Set Object<\/h3>\n\n\n\n
    You can convert one array into Set object and then use the difference() method to find the difference between two arrays in JavaScript.<\/p>\n\n\n\n
    Example:<\/p>\n\n\n\n
    var arr1 = [\u2018a\u2019, \u2018b\u2019, \u2018c\u2019, \u2018d\u2019];\n\nvar arr2 = [\u2018b\u2019, \u2018c\u2019];\n\nvar set2 = new Set(arr2);\n\nvar difference = [...arr1].filter(x => !set2.has(x))); \/\/ find elements which are present in set1, but not in set2\n\nconsole.log(Array.from(difference)); \/\/ convert the difference back to an array<\/code><\/pre><\/div>\n\n\n\n
    Output<\/strong>:<\/p>\n\n\n\n
    [“a”, “d”]<\/p>\n\n\n\n
    jQuery methods<\/h3>\n\n\n\n
    If you are already using jQuery in your project, then you can use the $.grep() and $.inArray() methods to find the difference between two arrays in JavaScript.<\/p>\n\n\n\n
    Example:<\/p>\n\n\n\n
    var arr1 = [\u2018a\u2019, \u2018b\u2019, \u2018c\u2019, \u2018d\u2019];\n\nvar arr2 = [\u2018b\u2019, \u2018c\u2019];\n\n$.grep(arr1, function(element) {\n\n  return $.inArray(element, arr2 ) < 0; \/\/ include only those elements which are not present in arr2\n\n}).forEach(function(element) { \/\/ print only those elements which are not present in arr2\n\n  console.log(element);\n\n});<\/code><\/pre><\/div>\n\n\n\n
    Output<\/strong>:<\/p>\n\n\n\n
    a<\/p>\n\n\n\n
    d<\/p>\n\n\n\n
    Underscore.js methods<\/h3>\n\n\n\n
    If you are already using Underscore.js in your project, then you can use the difference() method to find the difference between two arrays in JavaScript. The difference() method returns the values from arr1 which are not present in arr2.<\/p>\n\n\n\n
    Example:<\/p>\n\n\n\n
    var arr1 = [\u2018a\u2019, \u2018b\u2019, \u2018c\u2019, \u2018d\u2019];\n\nvar arr2 = [\u2018b\u2019, \u2018c\u2019];\n\nconsole.log(_.difference(arr1, arr2)); \/\/ find elements which are present in arr1, but not in arr2<\/code><\/pre><\/div>\n\n\n\n
    Output<\/strong>:<\/p>\n\n\n\n
    [“a”, “d”]<\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    As you can see from the above examples, there are many ways to find the difference between two arrays in JavaScript. Which method you choose will depend on the requirements of your project.<\/p>\n\n\n\n
    I hope you found this article helpful. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
    To find the difference between two arrays in JavaScript, you can use the following methods – Array.prototype.filter() and indexOf() method Array.prototype.filter() and includes() method Set object jQuery methods Underscore\/Lodash library Find The Difference Between Two Arrays In JavaScript Let’s look at these methods one by one, but let’s first start by understanding what difference means […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[12],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/posts\/486"}],"collection":[{"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":5,"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"predecessor-version":[{"id":1966,"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/posts\/486\/revisions\/1966"}],"wp:attachment":[{"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typedarray.org\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}