JS isn't always as consistent as we'd like it to be

set.js

// First, we create a new Set. When we look at the documentation for Set: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set
// We see the following: "The Set constructor lets you create Set objects that store unique values of any type, whether primitive values or object references."
// This means that when creating a Set with multiple values, it only stores UNIQUE values in that set.
// Example:
const mySet = new Set([1, 2, 3, 1, 2, 3]);

console.log(mySet);
// Set {
//  1,
//  2,
//  3
// }
// It has added all the unique values.

// We can also see the following: "If an iterable object is passed, all of its elements will be added to the new Set."
// This means that if we call new Set() with an array, it doesn't create a Set containing an array, it creates
// a Set containing all the items in the array.
const set = new Set([1, 4, 6, 2, 7, 3, 7]);

console.log(set);
// Set {
//  1,
//  4,
//  6,
//  2,
//  7,
//  3
// }
// As you can see, it's a Set containing the actual values, not an array with the values. Because of the first rule,
// the second 7 has not been added. Just unique values.


// Then, we add() an array of numbers to the set. The documentation for that method:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add
// Shows this: "The value of the element to add to the Set object.", it doesn't say anything about iterables so in this
// case, it literally adds any value you pass to it.
set.add([1, 4, 6, 2]);

console.log(set);
// Set {
//  1,
//  4,
//  6,
//  2,
//  7,
//  3,
//  [ 1, 4, 6, 2 ]
// }
// As you can see, the last item is the literal array we add()-ed to it.

// Now, let's say you do want to add the actual values in an array to a Set instead of the literal array. There's
// A few things we can do. I'll be ysing unique numbers because else you won't be able to see the difference...

// We can loop through the array and add them to the Set:
[11, 12, 13, 14].forEach(item => {
    set.add(item);
})

console.log(set);
// Set {
//  1,
//  4,
//  6,
//  2,
//  7,
//  3,
//  [ 1, 4, 6, 2 ],
//  11,
//  12,
//  13,
//  14
// }
// The numbers are added to the set, not an array of numbers.

// Or, we can turn the current set into an array, merge that array with another array that contains our values, and then
// create a new Set using our array that contains all of the values we want in our set.
const setAsArray = [...set];

console.log(setAsArray);
// [
//  1,
//  4,
//  6,
//  2,
//  7,
//  3,
//  [ 1, 4, 6, 2 ],
//  11,
//  12,
//  13,
//  14
// ]
// It's an array now, not a Set anymore

const newArrayWithMoreValues = [...setAsArray, ...[15, 16, 17, 18]];

console.log(newArrayWithMoreValues);
// [
//  1,
//  4,
//  6,
//  2,
//  7,
//  3,
//  [ 1, 4, 6, 2 ],
//  11,
//  12,
//  13,
//  14,
//  15,
//  16,
//  17,
//  18
// ]
// We've merged 2 arrays into one big array

const myNewSetWithAllValues = new Set(newArrayWithMoreValues);

console.log(myNewSetWithAllValues);
// Set {
//   1,
//   4,
//   6,
//   2,
//   7,
//   3,
//   [ 1, 4, 6, 2 ],
//   11,
//   12,
//   13,
//   14,
//   15,
//   16,
//   17,
//   18
// }

// As a one-liner:
const myOtherNewSetWithAllValues = new Set(
    [
        ...set,
        ...[15, 16, 17, 18]
    ]
)

console.log(myOtherNewSetWithAllValues);
// Set {
//   1,
//   4,
//   6,
//   2,
//   7,
//   3,
//   [ 1, 4, 6, 2 ],
//   11,
//   12,
//   13,
//   14,
//   15,
//   16,
//   17,
//   18
// }