My Diff Two Arrays code is clunky

1

Hi, I successfully passed the Diff Two Arrays, but it feels clunky. I feel like FCC wanted me to do things a different way.

function diffArray(arr1, arr2) {
    var newArr = [];

    for (var i=0; i<arr1.length; i++){
        for (var j=0; j<arr2.length; j++){
            if (arr1[i] == arr2[j]){
                arr1.splice(i, 1);
                arr2.splice(j, 1);
                i -= 1;
                j -= 1;
            }
        }
    }

    for(i=0; i<arr1.length; i++){
        newArr.push(arr1[i]);
    }

    for (i=0; i<arr2.length; i++){
        newArr.push(arr2[i]);
    }

    return newArr;
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);

It works. I use a couple of for loops to check each element against each other, and if they match to slice the offending element out of the array. Then I do two more for loops to push the remaining elements into the new array.

Is someone going to hire me if I try and code like this at the job interview?

2

You got the job done, as a beginner what does it matter if you don’t do the very best solution? And of course freeCodeCamp doesn’t care! I don’t think someone would not hire you because of it.

Try to think through the problem theoreticly without syntax. Check to see if arr1 has elements that arr2 doesn't. Check to see if arr2 has elements that arr1 doesn't. Return those elements in a new Array. I am assuming you wanted to do something along that line; however, you got bogged down with JavaScript syntax. When I approached the problem just now, I was able to solve it like below:
https://repl.it/HV9K

If you look at my solution, you can probably see immediately what I am doing. When I look at yours, I don’t. That is not necessarily a problem. As long as you have the right idea, you are good. As you work more with a language, you become more familiar with the syntax, and then you can make solutions that are a lot less “clunky”. When I first did the challenge about 5 months ago, it looked a lot like yours.

3

Don’t know about the interview scenario, but I think the code can be improved.

This whole lot:

    for(i=0; i<arr1.length; i++){
        newArr.push(arr1[i]);
    }

    for (i=0; i<arr2.length; i++){
        newArr.push(arr2[i]);
    }

can be shortened to:

newArr = arr1.concat(arr2);
2 Likes
4

Use array filter.

In my opinion, it would be worth trying to implement the solution using it since you will learn something in the process.

Whenever an exercise recommends using a certain method to solve the problem, try to solve it with the recommended tools.

In my opinion, that’s why they are giving that exercise - to allow you to solve a problem using the recommended type\method\pattern to learn those things that are being recommended.

I would often solve the problem my own way and then go back to try and implement it the suggested way. Ultimately the goal is learning, not the exercise.

Array.prototype.filter

5

Ok thanks guys. I didn’t even know about the .includes() method, I’m really happy to have that one in my toolbox. I re-wrote my script and it looks way better now. Thanks for the help.

function diffArray(arr1, arr2) {
    var newArr = [];

    var tempArr1 = arr1.filter(function(elementToCheck){
        return !arr2.includes(elementToCheck);
    })

    var tempArr2 = arr2.filter(function(elementToCheck){
        return !arr1.includes(elementToCheck);
    })

    newArr = tempArr1.concat(tempArr2);

    return newArr;

}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);

I used the .filter() method to return two new arrays, using my new favorite .includes() to check for duplicates. Then I joined them up with .concat() into the final array. I feel pretty accomplished.

2 Likes
6

Yes, the .includes() method is super useful and nice. One note though is that it is fairly new syntax and is not supported in IE. One similar method that is a bit uglier is .indexOf() which returns -1 when the item is not found in the array, eg:

var fruits = ["apple", "orange"];
console.log(fruits.indexOf("apple"); // logs 0;
console.log(fruits.indexOf("banana"); // logs -1;