DEV Community 👩‍💻👨‍💻

Cover image for 16-ES6++: Reflection In JavaScript
Hasan Zohdy
Hasan Zohdy

Posted on

16-ES6++: Reflection In JavaScript

What is Reflection In Programming?

Reflection is the ability of a program to examine, introspect, and modify its own structure and behavior at runtime. In other words, it is the ability to look at the structure of a program and determine what it is made of at runtime.

In nutshell, reflection is the ability to inspect and manipulate classes, methods, properties, and other metadata at runtime.

Why Reflection?

Reflection is useful when you want to do something at runtime that you don't know about until runtime. For example, you might want to create a new instance of a class, or call a method on an object, or get the value of a property, or even set the value of a property, all at runtime.

Reflection In ES6

In ES6, we can use the Reflect object to do reflection in JavaScript.

The Reflect object is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of the proxy handlers. The Reflect object is not a function object. You cannot use it with a new operator or invoke the Reflect object as a function.

The Reflect object is used to call methods on objects. It is similar to the Function.prototype.apply() method.

Example of usage

JavaScript is a dynamic language. It means that you can add properties and methods to an object at runtime. You can also delete properties and methods from an object at runtime. You can also change the value of a property at runtime.

const person = {
  name: "Hasan",
  age: 30,
};

person.name = "Hasan Zohdy";

delete person.age;
Enter fullscreen mode Exit fullscreen mode

In the above example, we can add, delete, and change the value of a property at runtime.

Let's see an example of using the Reflect object to add, delete, and change the value of a property at runtime.

const person = {
  name: "Hasan",
  age: 30,
};

Reflect.set(person, "name", "Hasan Zohdy");

Reflect.deleteProperty(person, "age");
Enter fullscreen mode Exit fullscreen mode

In the above example, we used the Reflect.set() method to change the value of the name property. We used the Reflect.deleteProperty() method to delete the age property.

Reflection methods

The following list shows the methods of the Reflect object.

  • Reflect.apply(): Calls a target function with arguments provided as an array (or an array-like object).
  • Reflect.construct(): Calls the target constructor with arguments provided as an array (or an array-like object).
  • Reflect.defineProperty(): Defines a new property on the target object.
  • Reflect.deleteProperty(): Deletes a property from the target object.
  • Reflect.get(): Gets the value of a property from the target object.
  • Reflect.getOwnPropertyDescriptor(): Gets the property descriptor of a property from the target object.
  • Reflect.getPrototypeOf(): Gets the prototype of the target object.
  • Reflect.has(): Checks if the target object has a property with the specified name.
  • Reflect.isExtensible(): Checks if the target object is extensible.
  • Reflect.ownKeys(): Returns an array of all own property keys of the target object.
  • Reflect.preventExtensions(): Prevents any extensions of the target object.
  • Reflect.set(): Sets the value of a property on the target object.
  • Reflect.setPrototypeOf(): Sets the prototype of the target object.

Reflect VS Proxy

You might wonder the similarities between the Reflect object and the Proxy object. The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc). The Reflect object is used to call methods on objects. It is similar to the Function.prototype.apply() method.

Would you ever need to use Reflect in your real world projects?

Honestly, most of the time the answer is no. But, if you are working on a project that requires you to do something at runtime that you don't know about until runtime, then you might need to use the Reflect object.

🎨 Conclusion

In this article, we learned about reflection in JavaScript. We learned about the Reflect object and its methods. We also learned about the similarities between the Reflect object and the Proxy object.

☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (0)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.