A short Explanation of JavaScript Objects

Roxi — Tue, 17 Mar 2020 16:25:32 +0000

Objects are the general building block upon which much of JavaScript is built. They are one of the six primary types in JS: string, boolean, number, null, undefined and object.

There are two types of objects.

literal form - you can add one or more key/value pairs

var myExample = {
  key: value;
};

constructed form - you must add the properties one by one

var myExample = new Object();
myExample.key = value;

Accessing objects

The contents of an object consist of values stored at specifically locations, called properties.

Consider the next example:

var myExample = {
  a:3;
};

myExample.a; //3
myExample["a"]; //3

To access the value at the location a in myExample we use either "." or "[]". The ".a" syntax is referred to as "property access" and "["a"]" syntax is usually referred to as "key access". In reality the both access the same location, so both terms can be used interchangeably.

Property descriptor

All properties are described as property descriptor, because an object property is much more than just its value. It includes three other characteristics:

writable - the ability to change the value of a property.
configurable - as long as a property is configurable, we can modify its descriptor definition.
enumerable - controls whether a property will show up in certain object-property enumerations, such as for..in loop.

Immutability

Objects can have their mutability controlled to various levels of immutability. All the approaches that are going to be mentioned create a "shallow immutability". This means that they affect only the object and its direct property characteristics.

Object constant - by combining "writable: false" and "configurable: false", you can create a constant as an object property.
Prevent extensions - if you want to prevent an object from having new properties, call Object.preventExtensions()
Object.seal() - it takes an existing object and calls Object.preventExtensions() on it and marks all its existing properties as "configurable: false".
Object.freeze() - it takes an object and calls Object.seal() on it and marks the existing properties as "writable: false", so that their values can't be changed; this is the highest level of immutability that can be attained.

Notes on this from "this and object prototypes"

Roxi — Fri, 13 Mar 2020 16:27:57 +0000

this provides an elegant way of implicitly 'passing along' an object reference, leading to cleaner API design and easier reuse.

There are two meanings often assumed, but both are wrong:

this equals the function itself.
this equals the function's scope.

this is actually a binding that is made when a function is invoked. What it references is determined entirely by the call-site where the function is called.

The four rules of `this`

Default Binding

this is the default rule when none of the other rules apply.

function ball(){
  console.log(this.a);

}

var a = 3;
ball(); //3

Implicit Binding

Here, the call-site uses the obj context to reference the function.

function ball(){
  console.log(this.a);
}

var obj = {
  a: 3,
  ball: ball
};

obj.ball(); //3

Explicit Binding

ball.call() allows us to force its this to be the obj.

function ball(){
  console.log(this.a);
}

var obj = {
  a: 3,
};

ball.call(obj); //3

new Binding

By calling ball() with new in front of it, we have constructed a new object and set that new object as the this for the call of ball().

function ball(a){
  this.a = a;
}

var bar = new ball(2);
console.log(bar.a); //2

Order of precedence

Called with new? Use the newly constructed object.
Called with call or apply? Use the specified object.
Called with a context object? Use the context object.
Default binding; if 'strict mode' => undefined.

Arrow Functions

Arrow functions are signified not by the function keyword, but by the so-called "fat-arrow" operator =>. Instead of using the four rules, arrow-functions adopt the this binding from the enclosing scope.

function ball(){
  //return an arrow-function
  return(a) => {
    //'this' here is lexically inherited from 'foo()'
    console.log(this.a);
  };
}

var obj1 = {
  a: 2,
};

var obj2 = {
  a: 4,
};

var baz = ball.call(obj1);
baz.call(obj2); //2, not 4

the arrow-function created in ball() captures whatever ball()s this is at its call-time. ball() was this bound to obj1, so baz will be this bound to obj1 as well.

Forem: Roxi