Javascript built-in data structure - Set

/
javascriptfundamentals

This tutorial is a part of the Learn everything about Javascript in one course.

What is set and what it's used for?

  • Set is an none-ordered collection of information (string, number, ...).
  • A value in the Set is unique and may only occur once.
  • Set in Javascript is like the Set in Math.
  • In practical programming, set's usually used to keep track of a collection of values because checking if value is present in Set is fast (O(1) time complexity).

Ways to create a set

set.js
// Ways to create a set
const set1 = new Set() // wihout initial value
console.log(set1) // Set {}, empty set

const set2 = new Set([1,2,3, 'a', []]) // with some initial values
console.log(set2) // Set { 1, 2, 3, 'a', [] }

Get the count of values in Set, property size

Syntax set.size

set.js
// Get the count of values in Set, property size
console.log(set1.size) // 0, set is empty
console.log(set2.size) // 5

Add value to Set, method add()

Syntax set.add(value)

Input Process Output
value Add value to set the set itself
Modify original Set Time complexity (worst)
YES O(1)
set.js
// Add value to Set, method add
const set3 = new Set()
console.log(set3.add(1)) // Set { 1 }
console.log(set3.add(2)) // Set { 1, 2 }

Check if a value in Set, method has()

Syntax set.has(value). Although we can put any data types in Set but it's not recommended for non-premitive data types. Best practice is just string and number.

Input Process Output
value Check if a value in set true if value in set
false otherwise
Modify original Set Time complexity (worst)
NO O(1)
set.js
// Check if a value in Set, method has
const set4 = new Set([1,2,'a','b',[], [4]])
console.log(set4.has(1)) // true
console.log(set4.has('b')) // true
console.log(set4.has([])) // false, set does not recognize empty array []
console.log(set4.has([4])) // false, set does not recognize array [4]

Delete a value in Set, method delete()

Syntax set.delete(value)

Input Process Output
value Delete given value in set true if delete success
false otherwise
Modify original Set Time complexity (worst)
YES O(1)
set.js
// Delete a value in Set, method delete
const set5 = new Set([1,2,'a','b',[], [4]])
console.log(set5.delete(1)) // true
console.log(set5.delete(3)) // false
console.log(set5) // Set { 2, 'a', 'b', [], [ 4 ] }

Remove all values in Set, method clear()

Syntax set.clear()

Input Process Output
None Remove all values in Set undefined
Modify original Set Time complexity (worst)
YES O(n), n is set size
set.js
// Remove all values in Set, method clear
const set6 = new Set([1,2,'a','b',[], [4]])
console.log(set6.clear()) // undefined
console.log(set6) // Set {}

Loop through all values in Set, method forEach()

Syntax set.forEach(processFunction([value1, [value2, [originalSet]]])[, additionalArg])

Input Process Output
processFunction contain logic of what you want to do with each set value undefined
value1 a value in set
value2 equals to value1. Weird but..., that's how it is
originalSet is the set itself
Modify original Set Time complexity (worst)
NO O(n), n is set size
set.js
// Loop through all values in Set, method forEach
const set8 = new Set([1,2,'a','b',[], [4]])
const additionalArg = 'hello' // an variable we want to include in loop logic
set7.forEach((value1, value2, originalSet) => {
  console.log(`value1: ${value1}, value2: ${value2}, additionalArg: ${additionalArg}`)
}, additionalArg)
// 6 output on console for set size 6
// value1: 1, value2: 1, additionalArg: hello
// value1: 2, value2: 2, additionalArg: hello
// value1: a, value2: a, additionalArg: hello
// value1: b, value2: b, additionalArg: hello
// value1: , value2: , additionalArg: hello
// value1: 4, value2: 4, additionalArg: hello
console.log(set7) // Set { 1, 2, 'a', 'b', [], [ 4 ] }, original set NOT modified

Summary

  • Javascript Set represent set in Math with unique values
  • Set is fast O(1) to add and check existence of element.