16-ES6++: Reflection In JavaScript
Tags: javascript, es6, esnext
Published: 2022-12-06 15:53:25

---
title: 16-ES6++: Reflection In JavaScript
published: true
description: 
series: es6++
tags: javascript, es6, esnext
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g80ssxgl7fmgmcs2td1.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## 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.

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

person.name = "Hasan Zohdy";

delete person.age;
```

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.

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

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

Reflect.deleteProperty(person, "age");
```

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](https://www.paypal.com/paypalme/hassanzohdy), it will help me to keep going and keep creating more content.

## 😍 Join our community

Join our community on [Discord](https://discord.gg/pb2vmdfhGf) 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

* [Event Driven Architecture: A Practical Guide in Javascript](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)