Logo

dev-resources.site

for different kinds of informations.

Sets

Published at
8/25/2024
Categories
webdev
javascript
es6
datastructures
Author
mahf001
Author
7 person written this
mahf001
open
Sets
  • Before ES6, JS had only two inbuilt Data Structures namely arrays & objects. ES6 introduced two new DS: Sets, Map.
  • For storage & orderly retirieveal use arrays.
  • Use sets only if order doesn't matter, and you just need to check the presence of element inside the data structure.
  • Sets are not intended to replace arrays. Arrays are more important.

- Whenever values need to be stored in order along with duplicates, arrays have to be used.

## Usecase: To remove duplicate values of arrays.
const order = ['pizza','burger','pasta','noodles','pizza','noodles','burger'];

const items = new Set(order);
items; // All duplicate values are removed

const city = new Set("California").size;
city; // 8
Enter fullscreen mode Exit fullscreen mode

Sets:

  • Sets are also iterables like String.
  • Collection of unique values.
const city = new Set("California");
city;     // Set(8) { 'C', 'a', 'l', 'i', 'f', 'o', 'r', 'n' }

Enter fullscreen mode Exit fullscreen mode
## Difference between Set & Array:
1. Although looks similar to array, but it has no key-value pairs. Hence, set[0] is invalid.
2. Only a list of unique values, all duplicate removed.
3. Order of element is irrelevant

## Similarities between Arrays & Sets:
1. Set has size property, Array has length propery.
2. Set has 'has' method, Array has includes method.

const order = ['pizza','burger','pasta','noodles','pizza','noodles','burger'];

const items = new Set(order);
items; // Set(4) { 'pizza', 'burger', 'pasta', 'noodles' }


//Both array and sets are iterables. Hence easier to convert from sets to array.
[...items];
Enter fullscreen mode Exit fullscreen mode

Adv: Can never have duplicate, although can hold mixed data types.
Most common iterable is Array. Ex. Syntax: new Set(iterable)

List of methods & properties on Sets:

.size;  // returns a numerical value
.has('name'); // returns a boolean value
.add('name');  // returns the set with added value
.delete('name'); // returns a boolean value
.clear(); // deletes all elements. returns Set(0) {} 


Enter fullscreen mode Exit fullscreen mode
es6 Article's
30 articles in total
Favicon
Next-Generation Buttons: Implementing the Command Pattern through Web Components
Favicon
Hoisting: facing Temporal dead zone
Favicon
Learn javascript promises. Part 1 β€” What is a promise?
Favicon
Bootcamping 02: Named exports and default exports - does it really matter?
Favicon
Mastering Modern JavaScript: A Deep Dive into ES6 Function Creation and Best Practices
Favicon
Promises: The Ability to Write Asynchronous Code Using Javascript
Favicon
Exploring JavaScript's Modern Primitives: BigInt and Symbol
Favicon
JavaScript ES6 Release Notes: Unleashing the Power of Modern JavaScript
Favicon
WHY YOU SHOULD LEARN ES6
Favicon
Understanding ES6 API's
Favicon
Transpiler vs Polyfills
Favicon
JavaScript Spread Syntax: Expanding Arrays and Objects
Favicon
API Design and Debugging:A Comprehensive Guide for BeginersπŸš€
Favicon
Understanding the JavaScript Spread Operator (With Examples)
Favicon
A Comprehensive Guide to ES6 and Arrow Functions
Favicon
Controla tus promesa con JavaScript
Favicon
Sets
Favicon
Enhanced Object Literals
Favicon
Iteration Stament i.e for-of loop
Favicon
1.1 Ins & outs of ES6(JavaScript) Import with Realworld Example and Demo Project.
Favicon
Math Namespace & BigInt
Favicon
JavaScript - Destructuring Arrays & Objects [Live Doc]
Favicon
ES2015 (ES6) Tips, Tricks, Best Practices, and Code Snippet Examples for Your Day-to-Day Workflow
Favicon
Objects in JavaScript
Favicon
Intro to DSA & Big O Notation
Favicon
Execution Context & Call Stack
Favicon
Asynchronous programming in Javascript - Callbacks, Promises & Async Await
Favicon
Loops in JavaScript !!πŸ“šπŸ”„
Favicon
Array
Favicon
Functions

Featured ones: