DEV Community: Michal Zarzycki

💥ES6 ARRAYS 101 #1💥

Michal Zarzycki — Thu, 06 May 2021 10:42:51 +0000

CREATE AN ARRAY IN ES5

In the ES5 specification, we mainly had two ways to create arrays: array literal syntax and the Array constructor. Both ways only required listing the array elements one by one, which seems to be an easy task. But if we wanted to do something more like converting an array-like object (eg arguments in a function) to an array, we had some limitations and a lot of code to write.

CREATE AN ARRAY IN ES6

To understand the problem of creating arrays with the Array constructor, it's worth seeing its unpredictability in action:

let myArray = new Array(3);
console.log(myArray.length); //3
console.log(myArray[0]);     //undefined
console.log(myArray[1]);     //undefined
console.log(myArray[2]);     //undefined

myArray = new Array("3")
console.log(myArray.length); //1
console.log(myArray[0]);     //3
console.log(myArray[1]);     //undefined
console.log(myArray[2]);     //undefined

myArray = new Array(1,2,"3")
console.log(myArray.length); //3
console.log(myArray[0]);     //1
console.log(myArray[1]);     //2
console.log(myArray[2]);     //3

When we passed a number in the form of Number to the constructor, it was assigned to the length property of the array, and whenever we changed the number to a String, it becomes the first element in the array. When we pass multiple values, they automatically become elements of the array. This behavior can confuse someone and cause many bugs, hence ES6 has a new option to create an array. In the form of the Array.of() method:

let myArray = Array.of(3);
console.log(myArray.length); //1
console.log(myArray[0]);     //3


myArray = Array.of(1, 2, "3")
console.log(myArray.length); //3
console.log(myArray[0]);     //1
console.log(myArray[1]);     //2
console.log(myArray[2]);     //3

myArray = Array.of("3")
console.log(myArray.length); //1
console.log(myArray[0]);     //3

To create an array, pass its values to Array.of().

In most cases you don't need to use Array.of(), you just need to use plain array literal ([]), however when you need to pass the array constructor in a function, you'd better use Array.of():

function arrayCreator(creator, value) {
    return creator(value)
}

let myArray = arrayCreator(Array.of, 69)
console.log(myArray) // [ 69 ]

Now let's move on to the problem I mentioned at the beginning, converting a non-array object to an array. This is what it looked like in ES5:

function createArrayFrom(iWantToBeArray) {
    var array = [];

    for(var i=0; i<iWantToBeArray.length; i++) {
        array.push(iWantToBeArray[i])
    }
    return array;
}

There is another way, to use the slice() method. You only need to define the this value for the slice method that acts on an array-like object. A little less code, but still not the best solution:

function createArrayFrom(iWantToBeArray) {
    return Array.prototype.slice.call(iWantToBeArray)
}

This moves to a new method in ES6 - Array.from(). When we give it, as the first argument, an element to be enumerated, or an array-like object, it will return an array:

function createArrayFrom(iWantToBeArray) {
    return Array.from(iWantToBeArray)
}

But it is not everything. If you want, you can add a mapping function as a second argument, with which you can change the values obtained during the conversion:

function addOne() {
    return Array.from(arguments, x=>x+1)
}
let myArray = addOne(1,2,3)
console.log(myArray) // [ 2, 3, 4 ]

Finally, you can use the Array.from() method on the iterating elements (any element containing Symbol.iterator):

let sayHello = {
    *[Symbol.iterator]() {
        yield "Hello";
        yield "World";
        yield "!"
    }
}

let LOUD_HELLO = Array.from(sayHello, x => x.toLocaleUpperCase())
console.log(LOUD_HELLO) // [ 'HELLO', 'WORLD', '!' ]

End of Part One.

💥Thanks for reading!💥

🚀ES6 MODULES 101 #1🚀

Michal Zarzycki — Tue, 04 May 2021 09:47:12 +0000

A GLOBAL PROBLEM

Each of us, at the initial stage of writing scripts in JS, came to the conclusion that having all the code in one file is probably not a good solution. I remember my first attempts to divide my main javascript file into several smaller ones, trying to follow the rule that each such file should correspond to one functionality. Even though it required me to add more <script> tags to the html file, the compensation in the form of seemingly clearer code was quite a reward. Except that not entirely.
One of the biggest problems with the pre-modular era was that code, although separated by different files, still operated at the same global scope. This caused a lot of problems, especially when two different functions in two different files have the same name. The code divide concept was good but not fine-tuned until modules.

Solution to the problem of pre-module-age global variables was to write code inside IIFE.

MODULE vs. SCRIPT

The module is a JS code in which the variables created at the highest level are not shared in the global scope, which solves our main problem in code sharing. In addition, the modules work in strict mode, which is an additional security. You also need to remember about this, because it has a value of undefined in the module.

Anything that does not support the above functionalities can be called a script. However, these are only superficial differences, as modules and scripts also differ in the way JavaScript is loaded and executed, but more on that later.

IMPORT / EXPORT

To export code fragments from the module, just put export before the name of the function, variable or class:

//You can export variables
export const VARIABLE = "HELLO WORLD!";

//function export
export function fullName(name, surname) {
    return name + ' ' + surname;
}
//class

export class Car {
    constructor(name) {
        this.name = name;
    }
    makeItDope() {
        return `${this.name} is dope!`
    }
}

//if you dont add export, this will be private in module
function iAmNotExportes() {
    return "Private message"
}

//you can also export function later
function noRushDude() {
    return "No worries"
}

export { noRushDude };

Once we have the module with exported items, we can import them to our file using the import {} from "" syntax:

import { Car, fullName, VARIABLE, noRushDude } from './previousFile.js'

The from keyword indicates the module that contains the items being exported. The name of the module is given in the form of a text string, in browsers it is given in a similar form as in the element <script src=""> (this means specifying the extension of the .js file), however, if you import the module on the Node.js platform, you must know that there is a distinction between local files and packages, which slightly changes the form of the path (e.g. "express" - package name, "./express.js" - local file).

Another interesting feature of import is that you can import the entire module. Let's have a look:

//all exported items are available inside previousFile
import * as previousFile from './previousFile.js'

console.log(previousFile.VARIABLE) //"Hello World!"

You can also rename items during import and export:

function goodCar() {
    return 'BMW'
}
export {goodCar as badCar}

//==========================

//now you can import 
import { badCar } from '...'

//but also rename it again!
import { badCar as goodCar } from '...'

You can also import and export the default values. The default value is a single variable, function or class, specified with the default keyword. Only one default exported item can be defined:

//You can do it like this:
export default function helloWorld() {
    return "Hello World!"
}
//-----------------------------------
//...or like this:
function helloWorld() {
    return "Hello World!"
}

export default helloWorld

//-----------------------------------
//...or like this:
function helloWorld() {
    return "Hello World!"
}
export { helloWorld as default }

To import the default value you can get rid of {}:

import helloWorld from '...'

Unless you want to rename it:

import {default as helloWorld} from '...'

Some modules do not export anything but exist to modify global objects. Although modules do not have access to the global scope, they have access to objects such as Array, Object, Map, thanks to which they can modify them and such code can be imported. An example syntax for such an import looks like this:

import "./someModule.js";

End of part one.

🚀Thanks for reading!🚀

🚀ES 6 CLASSES 101 #1🚀

Michal Zarzycki — Mon, 03 May 2021 15:02:00 +0000

BEFORE ES6

Specifications before ES6 had no classes, but JavaScript offered a somewhat similar approach, using a constructor to whose prototype we could assign our own methods:

//first we create a constructor
function Car(name) {
    this.name=name;
}
//we add a method makeItDope to the Car prototype
Car.prototype.makeItDope = function() {
    console.log(this.name + " is dope");
}

//we create a new car
var newCar = new Car("Audi");
newCar.makeItDope();  // 'Audi is dope'

Before ES6, many libraries helped us recreate the behavior of classes using the method above. You could say that this was probably the beginning of the class concept that was eventually implemented in ES6.

HOW TO CREATE A CLASS

You can often find the term that classes in JS are a sugar syntax for what was in before ES6. There is a point in this (but not entirely, more on that later). Class, like a function, have two forms - a declaration and an expression.

//DECLARATION
//We start with the `class`
class Car {
    //we create a constuctor method
    constructor(name) {
        this.name=name;
    }
    //You don't need to add the `function` word
    // no commas are required between the class elements
    makeItDope() {
        console.log(this.name + " is dope")
    }
}

let newCar = new Car('Audi');
newCar.makeItDope() //'Audi is dope'

//EXPRESSION

let Car = class {
    constructor(name) {
        this.name=name;
    }

    makeItDope() {
        console.log(this.name + " is dope")
    }
}

let newCar = new Car('Audi');
newCar.makeItDope() //'Audi is dope'

You can also use named class expression:

//EXPRESSION

let Car = class CarClas {
    constructor(name) {
        this.name=name;
    }

    makeItDope() {
        console.log(this.name + " is dope")
    }
}

let newCar = new Car('Audi');
newCar.makeItDope() //'Audi is dope'

At first glance, it looks like the classes are actually just a different syntax to what was going on in ES5. However, apart from this aesthetic change, there are still quite a few differences that you should keep in mind.

Not such a sugar syntax

Classes, unlike functions, are not hoisted

//That's ok!
var newCar = new Car("Audi")

function Car(name) {
     this.name = name;
 }

//ReferenceError: Cannot access 'Car' before initialization
let newCar = new Car("Audi")

class Car {
    constructor(name) {
        this.name=name;
    }
}

Inside class, there is no way to override strict mode
None of the methods in the class are enumerable, so you can't access them with for..in or Object.keys()
The methods inside the class do not have an construct method, so using them with the new operator will throw an error
You cannot call a class constructor without using the new operator

STATIC METHODS

Static methods are another thing that is not new and was already available in ES5:

function Car(name) {
    this.name = name;
}

Car.theBestCar = function() {
    return "FIAT MULTIPLA!"
}

Car.prototype.makeItDope = function() {
    return this.name + ' is Dope!'
}
var newCar = new Car('Audi')
console.log(Car.theBestCar()) // FIAT MULTIPLA!
console.log(newCar.theBestCar()) //TypeError: newCar.theBestCar is not a function
console.log(newCar.makeItDope()) //Audi is Dope!

To create a static method in a class, you must use the word static:

class Car {
    constructor(name) {
        this.name = name;
    }
    static theBestCar() {
        return "FIAT MULTIPLA!"
    }
    makeItDope() {
        return this.name + ' is Dope!'
    }
}

let newCar = new Car('Audi')
console.log(Car.theBestCar()) // FIAT MULTIPLA!
console.log(newCar.theBestCar()) //TypeError: newCar.theBestCar is not a function
console.log(newCar.makeItDope()) //Audi is Dope!

Static items are not available from the instance level. They can only be accessed from the class level.

INHERITANCE

Another example of how class syntax is superior to ES5 is the way we code inheritance. The example below shows what it looked like in the ES5 era (IMO the easiest example):

function Rectangle(length, width) {
    this.length = length;
    this.width = width;
}

Rectangle.prototype.getArea = function() {
    return this.length * this.width;
}

function Square(length) {
    Rectangle.call(this, length, length)
}

Square.prototype = Object.create(Rectangle.prototype, {
    constructor: {
        value: Square,
        enumarable: true,
        writable: true,
        configurable: true
    }
});

var mySquare = new Square(5)

console.log(mySquare.getArea()) //25

As you can see, it is not that simple, and in my opinion it is not even easy to understand at first glance.
If we wanted to use inheritance in the case of class, all we need to do is use the word extends, which indicates the function to inherit from, and the super method that allows us to access the base class constructor:

class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width
    }
    getArea() {
        return this.length * this.width
    }
}

class Square extends Rectangle {
    constructor(length) {
        super(length, length)
    }
}

let mySquare = new Square(5) 
console.log(mySquare.getArea()) //25

Here are some things you should keep in mind about inheritance:

If a constructor is given in the derived class, you must use super().
The super() method can only be used in a derived class constructor.
The super() method must be called before accessing the this binding.
Methods in derived classes always override methods with the same name in the base class.
static methods are also inheritable.

End of Part One.
🚀Thanks for reading!🚀

🚀ITERATORS AND GENERATORS 101 #1🚀

Michal Zarzycki — Thu, 29 Apr 2021 15:10:31 +0000

For loop problem

Before I start explaining what is the problem with the for loop and why it is worth using the for-of loop, let's take a look at the code below:

//I want to list all combinations of these three arrays
let colors = ["Red ", "Blue ", "Yellow "];
let cars = ["BMW ", "Audi ", "Fiat "];
let models = ["v1.", "v2.", "v3."];

let allOptionsForLoop = [];
let allOptionsForOfLoop = [];

//Let's use for loop to create allOptionsForLoop: 

for(let i=0; i<colors.length; i++) {
    for(let j=0; j<cars.length; j++) {
        for(let k=0; k<models.length; k++) {
            allOptionsForLoop.push(colors[i]+cars[j]+models[k]);
        }
    }
}

// And for-of loop to create allOptionsForOfLoop;

for(const color of colors) {
    for(const car of cars) {
        for(const model of models) {
            allOptionsForOfLoop.push(color+car+model)
        }
    }
}
console.log(allOptionsForLoop)
console.log("_________________________")
console.log(allOptionsForOfLoop)
console.log(JSON.stringify(allOptionsForLoop)===JSON.stringify(allOptionsForOfLoop))
// [
  'Red BMW v1.',     'Red BMW v2.',  
  'Red BMW v3.',     'Red Audi v1.', 
  'Red Audi v2.',    'Red Audi v3.', 
  'Red Fiat v1.',    'Red Fiat v2.', 
  'Red Fiat v3.',    'Blue BMW v1.', 
  'Blue BMW v2.',    'Blue BMW v3.', 
  'Blue Audi v1.',   'Blue Audi v2.',
  'Blue Audi v3.',   'Blue Fiat v1.',
  'Blue Fiat v2.',   'Blue Fiat v3.',
  'Yellow BMW v1.',  'Yellow BMW v2.',
  'Yellow BMW v3.',  'Yellow Audi v1.',
  'Yellow Audi v2.', 'Yellow Audi v3.',
  'Yellow Fiat v1.', 'Yellow Fiat v2.',
  'Yellow Fiat v3.'
]
_________________________
[
  'Red BMW v1.',     'Red BMW v2.',
  'Red BMW v3.',     'Red Audi v1.',
  'Red Audi v2.',    'Red Audi v3.',
  'Red Fiat v1.',    'Red Fiat v2.',
  'Red Fiat v3.',    'Blue BMW v1.',
  'Blue BMW v2.',    'Blue BMW v3.',
  'Blue Audi v1.',   'Blue Audi v2.',
  'Blue Audi v3.',   'Blue Fiat v1.',
  'Blue Fiat v2.',   'Blue Fiat v3.',
  'Yellow BMW v1.',  'Yellow BMW v2.',
  'Yellow BMW v3.',  'Yellow Audi v1.',
  'Yellow Audi v2.', 'Yellow Audi v3.',
  'Yellow Fiat v1.', 'Yellow Fiat v2.',
  'Yellow Fiat v3.'
]
true

Do you see the differences?
The for-of loop allows you to completely eliminate the need to monitor the collection index, so you can concentrate on working with the collection's content.

But how does the for-of loop know how to iterate through a given collection?

ITERATORS

Before you fully understand how the for-of loop works, you need to understand the iterators. What are iterators?

An iterator is such an object with a rather unusual interface that is designed to iterate. The iterator contains an internal pointer that tracks our position in the collection, and a next() method that contains the result object. The result object has two values {value, done}, value contains the return value of the iterator, and done tells us whether the given value is the last value returned true or not false.

Based on this information, let's try to create such an iterator ourselves:

function myFirstIterator(itemsToIterate) {
    // i is an "iteration pointer"
    let i = 0;
    return {
        next: function() {
            //check if itemsToIterate[i] exists
            let done = i >= itemsToIterate.length;

            //if its done return undefined
            let value = !done ? itemsToIterate[i] : undefined;

            //ok we've got {done, value} so lets move forward
            i++;
            return {
                done,
                value
            }
        }
    }
}

let iterateMe = myFirstIterator(["Hello", "World", "!"]);

console.log("1. ", iterateMe.next()) // 1.  { done: false, value: 'Hello' }
console.log("2. ", iterateMe.next()) // 2.  { done: false, value: 'World' } 
console.log("3. ", iterateMe.next()) // 3.  { done: false, value: '!' }     
console.log("4. ", iterateMe.next()) // 4.  { done: true, value: undefined }
console.log("5. ", iterateMe.next()) // 5.  { done: true, value: undefined }

As you can see, creating iterators that behave according to the rules described above (those defined in ES6) is not an easy task. Fortunately, ES6 comes to the rescue and offers us generators that make iterator creation easier. How?

GENERATORS

In simple words: generator is a function that returns an iterator. Let's look at the code below:

// * placed in front of myFisrstGenerator makes this function a generator
function *myFirstGenerator() {
    //yield specifies the values that should be returned by the iterator when calling the next () method
    yield "Hello";
    yield "World";
    yield "!"
}

let iterateMe = myFirstGenerator()
console.log("1. ", iterateMe.next()) // 1.  { done: false, value: 'Hello' }
console.log("2. ", iterateMe.next()) // 2.  { done: false, value: 'World' } 
console.log("3. ", iterateMe.next()) // 3.  { done: false, value: '!' }     
console.log("4. ", iterateMe.next()) // 4.  { done: true, value: undefined }
console.log("5. ", iterateMe.next()) // 5.  { done: true, value: undefined }

After each yield command, the generator stops running the generator functions. This allows us to develop a generator that adds elements to iterators:

function *iterateMyArray(myArray) {
    for(let i=0; i<myArray.length; i++) {
        yield myArray[i]
    }
}
let iterateMe = iterateMyArray(["Hello", "World", "!"])
console.log("1. ", iterateMe.next()) // 1.  { done: false, value: 'Hello' }
console.log("2. ", iterateMe.next()) // 2.  { done: false, value: 'World' } 
console.log("3. ", iterateMe.next()) // 3.  { done: false, value: '!' }     
console.log("4. ", iterateMe.next()) // 4.  { done: true, value: undefined }
console.log("5. ", iterateMe.next()) // 5.  { done: true, value: undefined }

Now compare the generator * iterateMyArray() with the iterator from the beginning. The difference in the ease of writing ES6 iterators with generators compared to ES5 is huge.

Generators tips and tricks

Creating a generator:


//✅✅✅
function* sampleGenerator() {}
//✅✅✅
function * sampleGenerator() {}
//✅✅✅
function *sampleGenerator() {}
//✅✅✅
function*sampleGenerator() {}

//✅✅✅
let sampleGenerator = function *() {}

//❌ ❌ ❌ 
let sampleGenerator =  *() => {}

Be careful where you use yield:

//yield can be used only inside generators
//❌ ❌ ❌ 
function *newGen() {
    function insideNewGen() {
        //it will throw an error
        yield "Hello"
    }
 }

You can add generators as an object method:

let obj = {
    //like this (ES5)✅✅✅:
    generatorNr1: function*(myArray) {
        for(let i=0; i<myArray.length; i++) {
            yield myArray[i]
        }
    },
    //or like this (ES6)✅✅✅:
    *generatorNr2(myArray) {
        for(let i=0; i<myArray.length; i++) {
            yield myArray[i]
        }
    }
}

`[Symbol.iterator]`

But what about that for loop? So much code for iterators and generators here, but how does that relate to the for loop? Good question. The iterator is associated with the element that iterates, that is the Symbol.iterator object. It specifies the function that returns the iterator for the given object. All iterable elements have a default Symbol.iterator defined. Thanks to this, they can use the for of loop because it is from such iterator the loop takes knowledge about its iteration. But do all elements have such a default iterator? Let's check:

function doIhaveDefaultIterator(obj) {
    return typeof obj[Symbol.iterator] === 'function'
}
//array✅
console.log(doIhaveDefaultIterator(["Hello", "World", "1"])) //true
//Map✅
console.log(doIhaveDefaultIterator(new Map())) //true
//String✅
console.log(doIhaveDefaultIterator("hello")) //true
//Object❌
console.log(doIhaveDefaultIterator(new Object())) //false
console.log(doIhaveDefaultIterator({})) //false
//Set✅
console.log(doIhaveDefaultIterator(new Set())) //true
//Weakmap❌ 
console.log(doIhaveDefaultIterator(new WeakMap)) //false
//WeakSet❌
console.log(doIhaveDefaultIterator(new WeakSet)) //false

Wow. As you can see, not everything in JS can be iterated by default, it is especially painful that objects do not have an iterator. Does this mean that the for-of loop is useless for objects? Not necessarily ...

How to create an iterable object?

You need to create a new iterator using [Symbol.iterator]

let object = {
    "name":"Michal",
    "surname":"Zarzycki",
    *[Symbol.iterator]() {
       let keys = Object.keys(object);
       for(let i=0; i<keys.length; i++) {
           yield [`${keys[i]}: ${object[keys[i]]}`]
       }
    }
}

for(const props of object) {
    console.log(props)
}
//[ 'name: Michal' ]
//[ 'surname: Zarzycki' ]

Looking at the example above, an observant might say that since this is just printing key-value pairs from an object, wouldn't it be better to just use the for ... in loop, which does just that? This is another good question. Although creating iterators or overwriting default iterators works in a bit more specific situations, where our iteration does not necessarily have to be typical, adding an iterator to the object may be useful for another reason: for..in does not see Symbols:

let symbol1 = Symbol('symbol1')

obj = {
    "name":"Michal",
    "surname":"Zarzycki",
}

obj[symbol1] = "Secret message: I love puppies"
for(const prop in obj) {
    console.log(`${key}: ${prop[key]}`)
}
//console.log
//name: Michal
//surname: Zarzycki

Ufff, my secret message is safe now. Unless I use an iterator:

let symbol1 = Symbol('symbol1')

obj = {
    "name":"Michal",
    "surname":"Zarzycki",
    *[Symbol.iterator]() {
        let arr = Object.getOwnPropertySymbols(obj)
        let ob_keys = Object.keys(obj);
               let keys = [...arr, ...ob_keys]
               for(let i=0; i<keys.length; i++) {
                   yield [keys[i], obj[keys[i]]]
               }
            }
}

obj[symbol1] = "Secret message: I love puppies"

for(const prop of obj) {
    console.log(prop)
}
//console.log():
//[ Symbol(Symbol.iterator), [GeneratorFunction:[Symbol.iterator]] ]
//[ Symbol(symbol1), 'Secret message: I love puppies' ]
//[ 'name', 'Michal' ]
//[ 'surname', 'Zarzycki' ]

As you can see, iterators are a very powerful tool and they have many uses. I recommend you to create your own iterator, maybe it will skip your message secret when iterating 😃.

Thanks for reading! 🚀🚀🚀

💥 ES6 Symbol 101 #1💥

Michal Zarzycki — Tue, 27 Apr 2021 10:42:42 +0000

Symbols are one of the new features of ES6. Originally they were intended to help create private components of the object, but the concept was abandoned and today they are mainly used as non-text object property names, which, in combination with their other features, allows us to create a values which guaranteed to be unique.

Create a Symbol

As Symbol is primitive value, the way it is created can be a bit confusing:

//create a Symbol and empty object
let myFirstSymbol = Symbol();
let obj = {};

//add a new property
obj[myFirstSymbol] = "Hello World!";
console.log(obj[myFirstName]);  //"Hello World!"

Symbol, unlike other primitive values, has no literal form like:
let string = "Hi!"
let number = 42
let bool = false
Which may be a certain difficulty in working with it. Fortunately, the description of the symbol and the (explicit or implicit) method called toString() come in handy.

let mySecondSymbol = Symbol("Hey, I'm second!");

//console.log calls `toString()` method implicitly
console.log(mySecondSymbol); //"Symbol("Hey, I'm second!")"

It is worth noting that the symbol description itself is completely optional, it cannot be used to access the Symbol, and it does not affect the Symbol itself in any other way. Its only purpose is to help us work with the code.

Share a Symbol

Speaking of working with code, what if I want to use the same Symbol in many different parts of my application? Maybe I should create my own separate file for such global Symbols? An interesting option, but completely unnecessary. The ES6 specification offers us the possibility of storing Symbols in the Global Symbol Register(GSR), which, due to being global, is open to the public.

To create / get / work with shared symbols, you only need to know two methods: Symbol.for(), Symbol.keyFor()

Symbol.for() first searches the GSR to see if there is a Symbol with the given key ("userID"). If so, this method will return an existing Symbol, if not, the Symbol will be created and registered in GRS, and then returned.

let userId = Symbol.for('userId');
let obj = {};
obj[userId] = 'qwerty123';


let userId_2 = Symbol.for('userId');
console.log(obj[userId_2]) //qwerty123 
console.log(userId === userId_2) //true

The Symbol.keyFor() method is used to retrieve a Symbol key that already exists in the GRS. If we use it for a Symbol that is not shared, this method will return undefined

let symbol_1 = Symbol.for('the best Symbol');
console.log(Symbol.keyFor(symbol_1))  //'the best Symbol'

let symbol_2 = Symbol.for('the best Symbol');
console.log(Symbol.keyFor(symbol_2))  //'the best Symbol'

let symbol_3 = Symbol('the best Symbol');
console.log(Symbol.keyFor(symbol_3))  // undefined

Where is my property?

In order to maintain functionality with ES5, some methods may not "see" Symbols. It is worth remembering about it when we start using them:

let symbolProp = Symbol("prop1");

let obj = {
   [symbolProp] : "I AM SYMBOL",
   "prop2": "Strings are cool",
   "prop3" : false,
   "prop4" : 69
}
//no Symbol 😞
Object.keys(obj) // ["prop2", "prop3", "prop4"]

//still no Symbol 😞
Object.getOwnPropertyNames(obj) //["prop2", "prop3", "prop4"]

//..again 😞😞
JSON.stringify(obj) // "{\"prop2\":\"Strings are cool\",\"prop3\":false,\"prop4\":69}"

//😞😞😞
for(prop in obj) {
console.log(obj[prop])
}
 // Strings are cool
 // false
 // 69

In the ES6 specification, the Object.getOwnPropertySymbols() method was added to return an array of all symbol properties found directly upon a given object.

//😍😍😍
Object.getOwnPropertySymbols(obj)
// [Symbol(prop1)]

Working with symbols can be tricky, but if you need unique values in your code, they're very helpful. I hope I was able to encourage you to use them.

Thanks for reading 😊