Javascript Advance Concept Symbols, Generators & Iterators, Reflect API, Proxy API

In this article i will explain you some of javascript advance concept

1: Symbol

Symbols are often used to add unique property keys to an object that won’t collide with keys any other code might add to the object, and which are hidden from any mechanisms other code will typically use to access the object.

For Example:

const uid = Symbol("uid");
const user = {
  [uid]: "p1",
  name: "Max",
  age: 30,
  [Symbol.toStringTag]: "User",
};

//Here we can only modify the user object only if we know the symbol id that is uid
user[uid] = "p3";

//Also uid is hidden for outside , accessing the object
//Below will return undefined
console.log(user[Symbol("uid")]);

// Symbol.toStringTag helps in overriding toString() method of javascript we can give custom information

//below will print [object User]
console.log(user.toString());

2: Iterators and Generators

Iterators:

In JavaScript an iterator is an object which defines a sequence and potentially a return value upon its termination. An iterator is any object which implements the Iterator protocol by having a next() method that returns an object with two properties value and done

For Example:

const company = {
  curEmployee: 0,
  employees: ["Abc", "Def", "Ghi"],
  next() {
    if (this.curEmployee >= this.employees.length) {
      return { value: this.curEmployee, done: true };
    }
    const returnValue = {
      value: this.employees[this.currentEmployee],
      done: false,
    };
    this.curEmployee++;
    return returnValue;
  },
};

console.log(company.next());
console.log(company.next());

Generator:

Generator is a special type of javascript function which automatically generates an iterative object which has next method The function* declaration (function keyword followed by an asterisk) defines a generator function.

We use yield with generator function which saves the current state of exection and next time you call the generator function it resumes from where it left off.

For example:

const company = {
  curEmployee: 0,
  employees: ["Abc", "Def", "Ghi"],
  //Here * with the function indicate that it is a generator function
  [Symbol.iterator]: function* employeeGenerator() {
    let currentEmployee = 0;
    while (currentEmployee < this.employees.length) {
      // Yield here save the current state of execution and next time you call the next() method it continues from
      // Where it left off
      yield this.employees[currentEmployee];
      currentEmployee++;
    }
  },
};

for (const employee of company) {
  console.log(employee);
}

3: Reflect API

Reflect api in javascript helps to control objects. Reflect api gives us everything which helps in working with object like object function which helps in performing action on any object

For example:

const course = {
  title: "My Course",
};

//Here we are controlling toString method in javascript
Reflect.setPrototypeOf(course, {
  toString() {
    return this.title;
  },
});

//Reflect.deleteProperty(course, "title");

console.log(course.toString());

4: Proxy API

It creates traps for object operations for example if you want to return some info from object then you can create proxy api to return that information

Example:

const course = {
  title: "My Course",
};

const courseHandler = {
  get(obj, propertyName) {
    console.log(propertyName);
    return obj[propertyName];
  },
};

const pCourse = new Proxy(course, courseHandler);

console.log(pCourse.title);