ABOUT JS

JavaScript MetaProgramming-1

In this article, I will try to explain the subject by taking notes from Axel Rauschmayer’s Deep JS book to understand the concept of JS MetaProgramming.

onur dayibasi
Jul 22 · 4 min read

Metaprogramming is a programming method that allows you to access dynamically over the skeleton structure, apart from the standard use of the language. Dynamically accessing information such as Reflection API in Java .. Class, Methods, etc., and performing dynamic code calls.

JS's internal mechanics are already prepared on dynamic interoperability in this way. For example, by using the eval function, you can dynamically run the code that the network reads from a string or a file you want. In the example below, you can see the code that describes this situation.

eval fonksiyonunu kullanma

Secondly, you can see all the values ​​and structures in the Object created with Object.*. From this article, where we explain how the JS engine is operated, you can learn the details of the subject and how we can access all the properties in an Object.

We normally use Object directly when writing normal JS code. Defines the object and the property .name .sayHello() in it

Object Standart Kullanımı

but you know..you can see how dynamic and accessible the language is, with the possibility of accessing the values ​​in the object via string ['name'] ['sayHello()'].

Objenin Property Dinamik Erişim..

Even if we do not know which Property of an Object that comes to us, you have the opportunity to return and access the property of this object with Object.keys in a loop.

Object.keys

If we want to go a little deeper, we can access these property definitions with Object.getOwnProperyDescriptor

Why Proxy If JS Already Has MetaProgramming Capabilities?

In her book, Kichales talks about 3 types of metaprogramming that can access and change atoms of her own programming structure

  • Introspection: Read-Only Metastructure Access
  • Self-modification: Changing the Meta Structure
  • Intercession: Redefining the structures of some language operations

We have explained from the examples above that we can provide it with methods such as Intospection, Object.keys etc.

We can perform Self-modification, assigning a new property to an Object, defining it or deleting an existing property via Object[…]. Just as you can see in the example below.. I can change the structure of the current Object as I want.

Self Modification

We have MetaProgramming capabilities for the above concepts not only on Objects but also on Functions. While I was talking about Prototype, I talked about it in detail in this article.

Intercession capability was not included in the ES5 language specification. The ability to change some operations provided by the language. I have explained the concept of the operator in detail in this article. There is no Operator Overloading similar to JS, C++, but it allows us to establish a control mechanism while using normal object properties, thanks to the Proxy object that can intercept the Object.* properties we use most fundamentally.

Proxy Kullanımı

As in the example above, when any of your objects are surrounded by a handler via a proxy, our access to the object will begin to flow through the Handler. This is a design pattern. If you want the Proxy Design Pattern, you can access it from this article.

In summary, we have the ability to intervene as we wish during both reading and assigning a value.

const name=user.firstName //Reading...
user.firstName="ahmet" //Writing...

In some Usage Scenarios, this provides the infrastructure that will allow us to write the code cleaner and in the structure suggested by the language.

Note: I will be continuing the proxy issue as a broad topic in 2,3 serial articles.

Sample Codes

References

Let’s continue reading 😃

Please click the link to access other articles in the training group

javascript-notes

All things about JavaScript

javascript-notes

Javascript Basics, Deep, Async, MetaProgramming, FrontendDev, React, Software

onur dayibasi

Written by

Senior Frontend Developer @Thundra

javascript-notes

Javascript Basics, Deep, Async, MetaProgramming, FrontendDev, React, Software

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Start a blog

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store