Understanding JavaScript Sets in ES6

=====================================

JavaScript sets were introduced in ECMAScript 2015 (ES6) as a new data structure that provides an efficient way of storing and manipulating unique elements while preserving their insertion order.

Key Features of JavaScript Set

------------------------------

1. Ordered Elements: Unlike other set implementations, the elements within a JavaScript set can be iterated over in the exact order they were inserted.

2. Flexible Data Types: A JavaScript set can store any type of value, including primitive data types like numbers and strings as well as objects.

Creating an Empty Set

------------------

To create a new empty set without passing any parameters to its constructor function:

```javascript

const mySet = new Set();

```

Alternatively, you can pass null or undefined to achieve the same result:

```javascript

const anotherEmptySet1 = new Set(null);

const anotherEmptySet2 = new Set(undefined);

```

Populating a Set with Elements from an Iterable Object

------------------------------------------------

You can also create and populate a set simultaneously by passing an iterable object as an argument to its constructor function. Here's an example using an array:

```javascript

let fruitsArray = ''Apple', 'Banana', 'Orange'';

const fruitSet = new Set(fruitsArray);

console.log(fruitSet); // Output: Set { 'Apple', 1, 'Banana' }

```

Note that the console output will display a string representation of each unique element in the set. If you use `for...of` loop or other methods designed for iterating over sets (see below), you'll see only one occurrence of each fruit.

Why Avoid Using `setAttribute()` for Styling?

---------------------------------------------

The primary reason to avoid using `setAttribute()` when dealing with styling elements is that it does not respect the cascade nature of CSS styles. Instead, directly manipulate and access style properties through their corresponding objects or pseudo-classes whenever possible:

```javascript

// Do this:

const myDiv = document.getElementById('myDiv');

myDiv.style.color = 'red';

// Avoid doing something like this:

document.getElementById('someOtherElement').setAttribute('style', 'color: blue');

```

Similarly, never use `setAttribute()` to set style properties such as the following:

```javascript

element.setAttribute('data-style', 'some-value'); // Bad practice for styles!

```

-------

In conclusion, JavaScript sets are powerful tools that offer a flexible and efficient way of managing unique elements while maintaining their insertion order. When working with styling or adding attributes to DOM nodes, always prefer using the native API over `setAttribute()` whenever possible.

Example Use Case: Implementing an Unidirectional Bag Data Structure

Here's a simple example of how you could implement an unidirectional bag data structure in JavaScript by extending from the built-in Set class:

```javascript

class UnidirectionalBag extends Map {

constructor(...args) {

super({ ...Object.entries(args'0'), ...args.slice(1)'0' || {} });

}

add(key, value = null) {

if (!this.has(key)) this.set(key, '');

(this.get(key) as any).push(value);

return this;

}

const bag = new UnidirectionalBag({ a: 'apple', b: ''banana'' }).add('c').add('d');

console.log(bag); // Output: Map { 'a' => ' 'apple'', 'b' => ' Array ' 'banana' ' ', 'c' => '', d => '' } }

```

This article has covered the key features and usage of JavaScript sets in ES6, including how to create them empty or populated from iterable objects. Additionally, it provided guidance on avoiding `setAttribute()` for styling purposes and instead recommended using native API methods whenever possible.

By following these best practices and understanding when to use JavaScript sets effectively, you can write more maintainable, efficient, and idiomatic code that leverages the full potential of modern web development tools.

Javascript set