Retrieving unique Values from two array – JavaScript

Share your learning

Arrays are a fundamental data structure in JavaScript, and comparing arrays is a common task in many programming scenarios. In this tutorial, we will explore how to compare two arrays and extract the matching unique values using JavaScript. By the end of this article, you’ll have a clear understanding of the process and be able to apply it to your own projects.

Let’s consider two arrays, array1 and array2, as our starting point. Our goal is to find the matching unique values between these arrays. In other words, we want to extract the values that exist in both arrays while eliminating any duplicates.

Here’s a step-by-step guide to retrieve the unique values from a JavaScript array:

Step 1: Define the arrays

Start by defining two arrays that you want to compare. For the purpose of this tutorial, let’s call them array1 and array2.

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

Step 2: Create a function to compare arrays

Next, create a function that will compare the arrays and return the matching unique values. Let’s name this function getMatchingUniqueValues.

function getMatchingUniqueValues(array1, array2) {
  // Code goes here
}

Step 3: Iterate over the arrays

Inside the getMatchingUniqueValues function, start by iterating over one of the arrays. In this case, we’ll iterate over array1 using the forEach method.

function getMatchingUniqueValues(array1, array2) {
  const matchingValues = [];

  array1.forEach((value) => {
    // Code goes here
  });

  return matchingValues;
}

Step 4: Check for matching values

Within the forEach loop, use the includes method to check if the current value exists in array2. If it does, push it to the matchingValues array.

function getMatchingUniqueValues(array1, array2) {
  const matchingValues = [];

  array1.forEach((value) => {
    if (array2.includes(value)) {
      matchingValues.push(value);
    }
  });

  return matchingValues;
}

Step 5: Filter out duplicate values

To ensure that the resulting array only contains unique values, you can use the filter method and the indexOf method to remove any duplicates.

function getMatchingUniqueValues(array1, array2) {
  const matchingValues = [];

  array1.forEach((value) => {
    if (array2.includes(value) && matchingValues.indexOf(value) === -1) {
      matchingValues.push(value);
    }
  });

  return matchingValues;
}

Step 6: Test the function

Finally, you can test the function by calling it with the defined arrays and log the output.

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

const result = getMatchingUniqueValues(array1, array2);
console.log(result);

When you run the code, the console will display the matching unique values between array1 and array2.

Conclusion:

In this tutorial, we’ve explored how to compare arrays and retrieve the matching unique values using JavaScript. By following the step-by-step guide, you’ve learned how to create a function that can tackle this common task. Remember, array manipulation is an essential skill in JavaScript, and this knowledge will empower you to handle array comparisons effectively in your own projects.