Choosing Wisely: A Hands-On Examination of Practical Disparities in JavaScript Arrays and Sets
Ordering:
-Array:
– Maintains the order of elements based on their indices.
– Set:
– Does not guarantee any specific order of elements.
// Array
const arrayExample = [3, 1, 2];
console.log(arrayExample); // [3, 1, 2]
// Set
const setExample = new Set([3, 1, 2]);
console.log(setExample); // Set {3, 1, 2}
Uniqueness:
– Array:
– Can contain duplicate values.
– Set:
– Only stores unique values; duplicates are automatically eliminated.
// Array
const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
console.log(Array.from(new Set(arrayWithDuplicates))); // [1, 2, 3, 4, 5]
Accessing Elements
– Array:
– Access elements by index (`array[index]`).
– Set:
– No direct indexing; values are accessed using iteration or conversion to an array.
// Array
const arrayExample = [1, 2, 3];
console.log(arrayExample[1]); // 2
// Set
const setExample = new Set([1, 2, 3]);
// No direct indexing, use iteration or conversion to array
Size Property
– Array:
– Has a `length` property indicating the number of elements.
– Set:
– Has a `size` property instead of `length`.
// Array
const arrayExample = [1, 2, 3];
console.log(arrayExample.length); // 3
// Set
const setExample = new Set([1, 2, 3]);
console.log(setExample.size); // 3
Mutability
– Array:
– Mutable; elements can be added, removed, or modified.
– Set:
– Mutable, but values are added or removed using specific methods (`add`, `delete`, `clear`).
// Array
const arrayExample = [1, 2, 3];
arrayExample.push(4); // Modifying the array
// Set
const setExample = new Set([1, 2, 3]);
setExample.add(4); // Modifying the set
Iterating:
– Array:
– Can be iterated using methods like `forEach` or loops.
– Set:
– Can be iterated using `forEach` or a `for…of` loop.
// Array
const arrayExample = [1, 2, 3];
arrayExample.forEach(value => console.log(value));
// Set
const setExample = new Set([1, 2, 3]);
setExample.forEach(value => console.log(value));
Removing Elements:
– Array:
– Uses methods like `pop`, `shift`, or `splice` to remove elements.
– Set:
– Uses the `delete` method to remove specific values.
// Array
const arrayExample = [1, 2, 3];
arrayExample.pop(); // Removes the last element
// Set
const setExample = new Set([1, 2, 3]);
setExample.delete(2); // Removes the value 2
Checking Element Existence:
– Array:
Uses methods like `indexOf` or `includes` to check if an element exists.
– Set:
– Uses the `has` method to check if a value exists.
// Array
const arrayExample = [1, 2, 3];
console.log(arrayExample.includes(2)); // true
// Set
const setExample = new Set([1, 2, 3]);
console.log(setExample.has(2)); // true
Union, Intersection, and Difference:
– Array:
– Requires custom code to perform union, intersection, and difference operations.
– Set:
– Has built-in methods (`union`, `intersection`, and `difference`) for these operations.
// Set
const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);
const union = new Set([…set1, …set2]);
const intersection = new Set([…set1].filter(x => set2.has(x)));
const difference = new Set([…set1].filter(x => !set2.has(x)));
Performance:
– Array:
– Generally faster for index-based access and iteration.
– Set:
– Faster for membership tests and eliminating duplicates.
Choose between arrays and sets based on your specific use case and the operations you need to perform frequently. Each has its strengths and is suitable for different scenarios.
