Joe Astuccio

Joe Astuccio

finding the difference of two arrays

10/24/20191 Min Read — In JavaScript, Algorithms, FreeCodeCamp

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays

In a real applicatin you might use Lodash _.difference

That isn't going to work for FCC. Lets head over to Lodash _.difference on github and see how Lodash wrote it.

lodash/difference.js

1import baseDifference from './.internal/baseDifference.js';
2import baseFlatten from './.internal/baseFlatten.js';
3import isArrayLikeObject from './isArrayLikeObject.js';
4
5/**
6 * Creates an array of `array` values not included in the other given arrays
7 * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
8 * for equality comparisons. The order and references of result values are
9 * determined by the first array.
10 *
11 * **Note:** Unlike `pullAll`, this method returns a new array.
12 *
13 * @since 0.1.0
14 * @category Array
15 * @param {Array} array The array to inspect.
16 * @param {...Array} [values] The values to exclude.
17 * @returns {Array} Returns the new array of filtered values.
18 * @see union, unionBy, unionWith, without, xor, xorBy, xorWith,
19 * @example
20 *
21 * difference([2, 1], [2, 3])
22 * // => [1]
23 */
24function difference(array, ...values) {
25 return isArrayLikeObject(array)
26 ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true))
27 : [];
28}
29
30export default difference;

😳 🤯 This ain't your mama's FCC solution. Lodash is used by over 5 million Github repositories. Let's take a deep breath and see if we can figure out what going on.

The first 3 lines import functions. Next comes JSDoc comments from lines 5 to 23. JSDoc is beyond the scope of this post. GoMakeThings has a basic explanation of JSDoc.

line 24 the function is named difference. It accepts an array and spread (...values) Spread simply means 0 or more arguments/elements.

line 25 starts a conditional ternary operator If isArrayLikeObject(array) returns true it executes the code after the ? If it is false it executes the code after the : and returns an object. Let's open up isArrayLikeObject and see whats inside.

isArrayLikeObject

Line28 return isObjectLike(value) && isArrayLike(value) This function just combines two other functions.

isArrayLike l The function starts on line26:

1function isArrayLike(value) {
2 return value != null && typeof value !== 'function' && isLength(value.length)
3}

It checks the value it is passed for 3 things.

  • value is not null
  • not a function
  • has a length > 0

Interestingly only the second equality check is a strict equality check. A quick trip over to stackoverflow gives an explanation why that is:

'Null and Undefined types are == (but not ===). [I.e. (Null==Undefined) is true but (Null===Undefined) is false]'

Good programmers anticipate users will do unexpected things and write code to catch errors.

isObjectLike similarly checks that the value is strictly an object and strictly not null

baseFlatten

baseDifference

Still working on this one... stay tuned 😎