Object-Oriented JavaScript — Metaprogramming and Proxies

A way to control how object properties and get and set.

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at JavaScript metaprogramming with proxies.

Metaprogramming and Proxies

Metaprogramming is a programming method where a program is aware of its structure and manipulating itself.

There’re multiple ways to do metaprogramming.

One is introspection. This is where we have read-only access to the internals of a program.

Self-modification is making structural changes to the program.

Intercession is where we change language semantics.

In JavaScript, we can do this with proxies.

They let us control how objects are accessed and set.

Proxy

We can use proxies to determine the behavior of an object.

The object being controlled is called the target.

We can define custom behaviors for basic operations on an object like property lookup, function call, and assignment.

A proxy needs 2 parameters,

One is the handler, which is an object with methods to let us change the behavior of object operations.

Target is the target that we want to change the operations to.

For instance, we can create a proxy to control an object by writing:

const handler = {
  get(target, name) {
    return name in target ? target[name] : 1;
  }
}
const proxy = new Proxy({}, handler);
proxy.a = 100;
console.log(proxy.a);
console.log(proxy.b);

We created a proxy with handler with the handler object.

The get method lets us control how properties are retrieved.

target is the object that we’re controlling.

The name is the property name we want to access.

In the get method, we check if the name proxy exists.

If it does we return the target value, otherwise we return 1.

Then we create a proxy with the Proxy constructor.

A first argument is an empty object.

handler is our handler for controlling the operations.

proxy.a is defined, so its value is returned.

programming technology javascript

Exercise from Eloquent JavaScript. Today, we will write a function that forms a chessboard. You can find the exercise in the Eloquent Javascript book (3rd edition, chapter 2; Program Structure). Write a program that creates a string that represents an 8×8 grid, using newline characters to separate lines. At each position of the grid there is either a space or a “#” character. The characters should form a chessboard.

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.

Async callbacks or promises. Introduction to JavaScript Async Programming