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

Quick overview

This article clarifies several often-misunderstood JavaScript topics: object reference and equality, scope vs context, and class instantiation. If you’ve wondered why [] === [] is false or how this behaves in different places, this guide with examples will help.

Unexpected equality: object and array references

In JavaScript arrays and objects are reference types. That means the strict equality operator (===) compares references (identity), not deep structure. For example:

[] === []
// false

Each literal creates a new object in memory. Two separate objects with identical contents Netalith not share the same reference, so they are not equal.

Object reference explained

Consider the following:

let object1 = { value: 10 };
let object2 = object1;
let object3 = { value: 10 };

object1 === object2 // true
object1 === object3 // false

object2 points to the exact same memory reference as object1, so equality returns true. Creating a new object literal produces a different reference, even if the contents match.

• Search terms: javascript object reference, object equality in javascript reference types, javascript object reference example.

javascript scope vs context

Many developers mix up scope and context. They are related but distinct concepts:

• Scope determines where variables are accessible (lexical scope). It is created by blocks, functions, and modules.
• Context (the value of this) refers to the current object an expression is operating on at runtime (execution context and call site).

Scope (lexical scope)

function sampleScope() {
  let a = 'a';
  console.log(a);
}

console.log(typeof a); // undefined outside the function

Variables declared with let, const, or var are bound by scope rules. Lexical scope means the location of code determines variable visibility.

Context and the this keyword

The this keyword points to the current execution context. In a browser global scope, this is typically the global object (window in non-module scripts). In methods, this usually refers to the object before the dot that called the method:

const obj = {
  name: 'Alice',
  show() {
    console.log(this); // -> obj
  }
};
obj.show();

However, this is set by the call site, not by where the function was defined. Arrow functions are special: they capture the lexical this (they Netalith not create their own context):

const user = {
  name: 'Sam',
  regular() { console.log(this); },      // this -> user when called as user.regular()
  arrow: () => console.log(this)         // this -> surrounding scope (often window or undefined in modules)
};

• See: this keyword javascript, how this works in javascript context explained, call site.

Instantiation: classes, new, and inheritance

Instantiation is creating instances from a constructor (or class). The new operator allocates a fresh object and sets up its prototype chain.

class Student {
  constructor(name, gender) {
    this.name = name;
    this.gender = gender;
  }
  introduce() {
    console.log(`${this.name}, ${this.gender}`);
  }
}

class Rep extends Student {
  constructor(name, gender) {
    super(name, gender);
  }
  introduceRep() {
    console.log(`${this.name}, ${this.gender}, class rep`);
  }
}

const s1 = new Student('Jane', 'female');
const s2 = new Rep('Cole', 'male');

s1.introduce();
s2.introduceRep();

The extends keyword wires up inheritance; super calls the parent constructor. Each instance has its own reference identity even if properties are identical.

• Related keywords: javascript instantiation, class instance, super keyword in javascript constructor example, javascript class instantiation vs object creation.

Common pitfalls and tips

• Strict equality (===) compares primitives by value and objects/arrays by reference.
• To compare object structure, use a deep-equality helper (custom function or library) rather than ===.
• Remember arrow functions don’t have their own this — they inherit it from the enclosing lexical scope.
• When passing methods as callbacks, bind the method or use an arrow function so this remains correct.

Understanding the difference between scope and context, and how object references work, clears up many surprising behaviors like why [] === [] is false.

Conclusion

Knowing the difference in javascript scope vs context, how references determine object equality, and how instantiation works will make you a more confident JavaScript developer. These fundamentals explain many confusing behaviors and guide you toward safer patterns when comparing objects, designing APIs, and writing class-based code.