Reflect in JavaScript with Example Codes

In this article, we will discuss the concept of reflect in JavaScript and provide you with clear examples to understand its potential.

What is Reflection in JavaScript?

Reflection in JavaScript is the understanding of a program to check and manipulate its own structure and action.

It enables developers to access and interact with an object’s properties, methods, and metadata programmatically.

This is specifically useful when you need to create generic functions or change existing ones without modifying the source code directly.

Reflective programming can be related to taking a look behind the screen of your code to make on-the-fly adjustments.

The Power of Reflection

Reflection provides plenty of advantages that can approximately improve your coding experience and application development process:

• Dynamic Analysis
  • Reflection allows dynamic analysis of objects during runtime. This means you can observe the properties and methods of an object without knowing its name beforehand.
• Code Generics
  • By using reflection, you can create generic functions that can engage on a wide range of object types, saving you time and effort in writing repetitive code.
• Debugging and Testing
  • Reflection helps in debugging and testing by providing insights into the structure of objects. You can achieve a deeper understanding of how your code is functioning and identify potential issues.
• Metaprogramming
  • Metaprogramming involves writing code that manipulates other code. A reflection is a powerful tool for metaprogramming, enabling you to constantly create classes, methods, and properties.
• Extensibility
  • Reflection improves extensibility by allowing you to add new methods and properties to existing objects during runtime, thereby adapting your application to changing requirements.

Exploring Reflection with Code Examples

Accessing Object Properties

Using reflection, you can access an object’s properties and values constantly.

Let’s take a look at the following example:

const employee = { name: "Jude", age: 21 };
const result = "age";

console.log(employee[result]);

Output:

21

Modifying Object Properties

Reflection also allows you to change the object’s properties dynamically.

Here’s an example code of how you can use it:

const fruits = { name: "Mango", type: "Sweet" };
const result = "type";

fruits[result] = "Bitter";
console.log(fruits.type);

Output:

Bitter

Invoking Methods

You can use reflection to invoke methods constantly.

Let’s see this example code:

class addition {
  sum(x, y) {
    return x + y;
  }
}

const res = new addition();
const output = "sum";

console.log(res[output](8, 9));

Output:

17

Adding New Methods

Reflection allows you to add new methods to an object dynamically.

For example:

class bird {
  twit() {
    console.log("twit twit!");
  }
}

const lovebirds = new bird();
lovebirds["chip"] = function () {
  console.log("chirping!");
};

lovebirds.chip();

Examining Object Metadata

Reflection enables you to check an object’s metadata, such as constructor information.

Here’s an example code:

class BookSample {
  constructorSample(bookTitle, bookAuthor) {
    this.bookTitle = bookTitle;
    this.bookAuthor = bookAuthor;
  }
}

const result = new BookSample("The Great President in Philippines", "J. Juan Delacruz");
console.log(result.constructorSample.name);

FAQs

Conclusion

Reflecting in JavaScript opens doors to a new field of possibilities, allowing you to interact with your code dynamically and make real-time changes.

By utilizing the power of reflection, you can create more functional, adaptable, and efficient applications.

Whether you’re planning to create generic functions, extend object functionality, or inquire into the depths of metaprogramming, reflection is an indispensable tool in your JavaScript programming.

Additional Resources

• JavaScript String Replace Regex with Examples and Tips
• How to Use JavaScript Get Viewport Width
• JavaScript Remove Item from Array by Index