A Look at Scopes, Context, Object Reference and Instantiation in JavaScript

In this article, I would like to explain some tricky concepts in JavaScript that can get really confusing, depending on where you are in your development journey. Namely, I’ll discuss object references, scopes, context and instantiation in JavaScript. It should help you understand some behaviors that can otherwise seem odd with JavaScript.

First, an example to illustrate the point:

Woah, what just happened an empty array is not equal to an empty array. JavaScript, how confusing can you be!

Object Reference

The concept of object reference can be very tricky, here for example let’s do a check to see if object1 and object2 is the same:

letobject1={value:10};letobject2=object1;letobject3={value:10};

object1===object2//true

We get true because both object1 and object2 are both pointing to the same reference data that’s in memory. If we check to see if object1 and object3 is the same:

object1===object3// false

Interesting! they both have the same value but why are they not the same. That’s because object3 creates another reference in the memory, which isn’t the same as object1 so JavaScript treats both objects as being different.

To explain further, imagine object1 being created as an address in memory, then object2 pointing to object1 at the same address. While object3 is another address in memory. object1 address can never be the same as object3 address.

Array Reference

Back to the initial example of:

In Javascript array’s are really objects behind the scene so JavaScript treats the first [] as a new object and store the reference in memory, then stores the second [] as a different reference in memory, So when checking for equality, it turns out they can’t be the same.

Scopes and Context

Context are always confused with scopes. A scope is always created when curly brackets are encountered. If we create a function, for example, a new scope is created:

functionsampleScope(){leta='a';console.log(a);}

If we were to reference the variable a from outside the sampleScope function it wouldn’t be recognized because the variable is defined inside the sampleScope function scope.

Context

A context is different from scope, it tells you the current object we are currently referencing. Context is accessed using the this keyword. For example, if we log the current context we are in from the console in the browser with the following:

We have a class that we created accepts a name and a gender and also has access to a function that logs the student’s name.

Now let’s say we want to create a class representative without having to copy the same code and adding extra information, we can extend the Student class while creating a new class for the class representative, like so:

The extends keyword tells JavaScript to add whatever property the class extends from to the current class. Whenever we extend a class, we also need to call it’s constructor method, super gives us the power to do just that.

After creating these new instances you’ll see that the two console outputs are different. That’s simply because they are instances of different classes.

Conclusion

With JavaScript the behavior of objects can seem quite complicated at first, but understanding the underlining concepts can give you a lot of power and reveal the underlining simplicity.

We’ve looked at how object references, context, scope and instances come to play in JavaScript, and we’ve shown how to use them. Hopefully you now have a better understanding of these more advanced concepts! 🏋