Using the Chrome DevTools Heap Profiler to Explore Simple Javascript Objects

This is a short note demonstrating one use of the Heap Profile Snapshot capability of the Chrome browser.

In the table below are two examples.

In the first example, an object is created by calling a function that creates an object literal, with the object having two functions, and nothing further is done. The screenshot from the Heap Snapshot shows some internal information about the function. In particular, it shows how both functions getA and setA reference the same "context" that stores the variable myA. I believe that myA could also be referred to as a "closured variable", as Addy Osmani refers to in his section on the Singleton Pattern in his Learning JavaScript Design Patterns.

The second example is the same as the first, except there is one additional line where the setA method is called that modifies the local myA variable. Of course, since the context is shared, getA "sees" the new value as well.

Example 1. Create an object that has methods via an object literal function makeObjectLiteralWithFunctions(myA) { return { getA:function() {return myA;}, setA:function(newA) {myA = newA;} }; } var objectWithFunctions = makeObjectLiteralWithFunctions("theValue");
What the Heap Profile Snapshot in Chrome DevTools shows. The functions getA and setA both share the same variable context.
Example 2. Create an object that has methods via an object literal, and call the method that sets the internal variable. function makeObjectLiteralWithFunctions(myA) { return { getA:function() {return myA;}, setA:function(newA) {myA = newA;} }; } var objectWithFunctions = makeObjectLiteralWithFunctions("theValue"); objectWithFunctions.setA("new value");
What the Heap Profile Snapshot in Chrome DevTools shows. Of course, the variable myA has value "new value" in the context shared by the two functions getA and setA, but I think it's instructive to confirm it with the Heap Profiler here.

What's "this"? What's "this"?

tldr; (for me):

Be very careful when it comes to "this" in javascript, and err on the side of caution, always confirming via examples if in doubt.

What's this?
Jack Skeleton wants to know, too

This is a short note on the javascript notion of "this", illustrated via a few examples. Conceptually, the "this" variable is set to the caller object that is calling a function.

Making Javascript Objects

There are several ways to create a javascript object. In this dive I wanted to take a quick look at a little of what is created under the hood for some of them (I think there are several other ways to do this as well).

Javascript Objects: Just Bags of Stuff

I have been reading a smorgasbord of javascript articles lately. It's really nice how little pieces of understanding can sometimes come together gradually as I do this.

Javascript is deceptive because it is so simple. One of the (surficial) simple things about javascript is its notion of an object.