DEV Community: Aparna Joshi

Javascript Prototype: Inner workings of Objects

Aparna Joshi — Thu, 30 Jul 2020 04:32:17 +0000

Javascript Prototype: First detailed look into objects

Prototype is an attribute every object contains in javascript (unless the object is created using Object.create(null)), however, its inner workings are known to very few. Understanding how the prototype attribute gets assigned is an important concept, using which inheritance can be applied in javascript. Before understanding the prototype, you must know some basic principles and usage of objects. If you aren't familiar with objects, please read my article Basics of javascript objects. In this article, we will deep dive into how prototypes are assigned during object creation, and why this is important.

source

What is the prototype property and what does it contain?

Every javascript constructor function, created using any of the methods available, contains a property. This is the prototype property. It is important to note that, the prototype property is an object in itself.

The prototype property of the constructor function can be used to access/modify the methods, and other properties present in the prototype object which was assigned during its creation.
Every prototype object has a property called constructor. This property points to the Constructor Function itself.

Lets see an example to understand this better:

function Name(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = firstName + " " + lastName
}

var jensen = new Name("Jensen", "Ackles");
console.log(jensen);

If I try to access this console.log, which contains all the properties of the object jensen, we get the following result.

This is how things have worked so far:

Name is a constructor function. It contains the prototype property.
This prototype property has an attribute called constructor which points to Name constructor function itself. Any further attributes can be added to this property.
When the new object jensen was created using the Name constructor, this object got access to all of the properties belonging to Name function, including its prototype.
The prototype of the Name constructor function can be accessed from the new object jensen using __proto__ object.
Since prototype itself is an object, it also contains a prototype attribute. This is how the prototype chain is created.

Several browsers have added support to accessing the constructor function's prototype through the __proto__ object. Even though it's not recommended in javascript programming(This feature is non-standard and might not work as expected in all the browsers), it can be used to check the workings of the prototype chain quickly during development.

Another alternative to __proto__ include Object.getPrototypeOf() or objectInstance.constructor.prototype. If you consider the above example, it can be used in the following ways to access the same prototype property:

Object.getPrototypeOf(jensen);
jensen.constructor.prototype;

Prototype chain

When an object is created, it is usually created from some constructor function. If none of the user-defined constructors were used, it means that the object was created using the javascript's Object Constructor. This implies that any object created is ultimately inherited from the javascript's Object constructor.

Let's look at the following object created, and see what their __proto__ object contains.

function Fruit() {
    this.value = 10;
    this.quantity = 35;
}

function Apple(name, color) {
    this.name = name;
    this.color = color
}

Apple.prototype = new Fruit();

var apple1 = new Apple("Apple", "Red");
console.log(apple1);

If we inspect the inner properties of the object apple1, we can observe the following:

The object apple1 contains two main properties - name and color. These properties have the same value which was assigned to them during its creation.
The __proto__ property of the object apple1 points to the instance of the Fruit object. This, in turn, contains two more properties value and quantity.

If we inspect the __proto__ property of the Fruit instance, we see that it ultimately points to the prototype of the javascript's Object.
When a property is not present directly on an object, javascript moves up the prototype chain to find the property in its immediate prototype. Much like the javascript's scope chain, the prototype chain also goes up the ladder until Object.prototype is reached.

Uses of Prototype: Inheritance and Built-in methods

The Prototype is widely used in javascript to implement inheritance. Traditionally javascript was used only for scripting, and it had no requirement to provide object-oriented programming features like other languages. However, the concept of the prototype can be used to inherit methods and properties from one constructor function to another.

Consider the following example:

function Fruit() {
    this.value = 10;
    this.quantity = 35;
}

Fruit.prototype.setValue = function(value) {
    this.value = value;
}

function Apple(name, color) {
    this.name = name;
    this.color = color
}

Apple.prototype = new Fruit();

var apple1 = new Apple("Apple", "Red");
apple1.setValue(20);

console.log(apple1.name); // Apple
console.log(apple1.value); // 20
console.log(apple1.quantity); // 35

In the above example, even though the new object apple1 doesn't have the properties value and quantity, we are still able to access them. Point to be noted that the setValue method added on the prototype property of Fruit constructor is also accessible through the object apple1. This is how inheritance is implemented in javascript.

When objects are created using any constructor, it comes along with certain inbuilt methods that can be applied to the object. hasOwnProperty (), isPrototypeOf (), propertyIsEnumerable (), toLocaleString (), toString (), and valueOf (). are some of the built-in methods which are readily available to all the objects. This is because all objects in JavaScript inherit properties and methods from Object.prototype.

All built-in Constructors such as Array(), Number(), String(), etc were all created from javascript's Object constructor, and their prototype is also assigned to Object.prototype. I

Problems with prototypes

Prototypes in javascript have a lot of uses, it is used for inheriting the methods of parent functions, it can be also used to abstract the data layer and expose only the getter and setter methods to manipulate values belonging to various Objects. However, prototypes have its drawbacks. All the properties added on the prototype object is common to every instance of the object that is created using its constructor Function. Any change in one of the properties will be reflected in all the objects.

Consider the following example:

function Apple(name, color) {
    this.name = name;
    this.color = color
}

Apple.prototype.value = 20;

var apple1 = new Apple("Apple", "Red");
var apple2 = new Apple("Apple2", "Wheatish Red");

console.log(apple1.name); // Apple
console.log(apple1.value); // 20
console.log(apple2.value); // 20

Apple.prototype.value = 40;
console.log(apple1.value); // 40
console.log(apple2.value); // 40

apple1.value = 30;
console.log(apple1.value); // 30
console.log(apple2.value); // 40

In the above example, changes made directly on the constructor's prototype was reflected in all its objects, however, when the property value inside the object apple1 is changed, it doesn't reflect in the other objects. This is because apple1 has now created its own property value, and from this instance onwards apple1.value will always be referenced to its own property value and not the inherited property.

To mitigate this issue, a combination of Constructor - Prototype pattern can be implemented. The data values belonging to the object can be kept private and unique using the Constructor function. The common methods which can be shared among all the objects to manipulate data can be added to the Prototype object.

I hope this article was able to provide a detailed overview of the prototype property and its uses. If you have any questions regarding the concepts described in the article please feel free to reach out to me.

Originally published at https://aparnajoshi.netlify.app.

Basics of javascript objects

Aparna Joshi — Thu, 30 Jul 2020 04:30:15 +0000

Javascript Objects at a glance

Objects are the most fundamental data type present in javascript. Javascript has two types of data. The primitive data type is the immutable data types whose data is stored as values. In other words, any variable holding value of the primitive data type will always have its memory allocated. Number, String, Boolean, undefined, and null are the primitive data types in javascript. In this article, we will understand some basic concepts related to objects and how they can be created and used.

What are objects?
An object is a list of items that are stored in the form of key-value pairs. The value stored in the object can be of any valid type in javascript. The keys are usually strings or numbers.

Consider a simple object:

var simpleObject = { firstName: "Jensen", lastName: "Ackles"};

In this object, firstName and lastName are the keys, and Jensen and Ackles are the values.
The keys in an object can be either strings or numbers. When numbers are used as keys, the values must be accessed using bracket notation only.

Data stored by value v/s stored by reference

Before we understand what are objects and how they work, we need to understand how data manipulation works when it is stored by value or stored by reference

var variable1 = "Data1";
var variable2 = variable1;

variable1 = "Data2";

console.log(variable1); //Data2
console.log(variable2); //Data1

Data is always stored by value in primitive types. Due to this, each variable has its memory location allocated, and are distinct from one another, even if they are created through the assignment. Any changes made to one variable, will not affect the other unless a reassignment is made.

var variable1 = { name: "Javascript" };
var variable2 = variable1;

variable1.name = "Java";

console.log(variable1.name); //Java
console.log(variable2.name); //Java

Data is stored by reference in objects. Hence, when a new object is created through an assignment, it refers to the existing object from which the data was copied. Any changes in the first object are reflected in the second one.
To mitigate this effect, one can use shallow or deep copying of objects.

Attributes of object data properties

Every value present in the object contains 3 more attributes that define how these property values can be used.

Configurable: Specifies whether a property can be changed or deleted.
Enumerable: Specifies whether the property can be accessed through the for..in loop.
Writable: Specifies whether the property can be changed. These attributes can be used to define certain supporting properties/methods. For example, the array datatype has an inherent length property. However, this is non enumerable, and is often used during array manipulation. Object.defineProperty can be used to set/change these properties.

Object.defineProperty( newObject, 'name', {
   value: "Jensen Ackles",
   writable: true,
   enumerable: true,
   configurable: true
});

Own and Inherited properties of objects

Javascript objects include own properties, as well as inherited properties. Own properties are properties that were defined on the objects, during its creation, or through the assignment. Inherited properties are those which are inherited from the object's Prototype object.

To check whether a property exists on object, in operator can be used.

var name = { fullName : "Jensen Ackles" };
console.log("fullName" in name);  // true - The property is its own property
console.log("lastName" in name); // false - The property doesn't exist
console.log("toString" in name); // true - inherited property

To check whether the object has a particular property as its own, we can use hasOwnProperty method.

var name = { fullName : "Jensen Ackles" };
console.log(name.hasOwnProperty("fullName"));  // true - The property is its own property
console.log(name.hasOwnProperty("lastName")); // false - The property doesn't exist
console.log(name.hasOwnProperty("toString")); // false - inherited property

The enumerable properties associated with an object can be accessed through iteration. for..in loop or regular for loop can be used to access these properties(own/inherited). The ~~non enumerable~~ properties, such as methods inherited from Objects prototype, cannot be iterated.

Primitive ways of creating Objects

Object Literals: The most common and easiest way of creating an object is by using object literal syntax.

var movies = {};
var fruits = {
    name: "Apple",
    color: "red"
}

Object constructor: Object constructors can be used to create an object. In this case, we create an empty object and start adding its properties.

var movie = new Object();
movie.name = "Memento";
movie.director = "Christopher Nolan";

There are two more ways of creating the object, object.create and object.assign. However, these methods are usually used to create an object from an existing object.

Advanced ways of creating Objects

The more programmatic way of creating objects include using either constructor or prototype pattern. Imagine a scenario when an object has certain core property that keeps changing, however, it also requires internal methods to handle and manipulate these properties. Creating a duplicate object consisting of the core properties and methods seems repetitive. Instead, we can use these advanced ways of creating objects and create new objects using a base template(constructor). This is specially used when the same object is used in multiple places. Object inheritance is implemented using these patterns.

Constructor pattern: In the constructor pattern, we can define a function that acts as a constructor, taking in certain properties. The methods common to all the objects created using this constructor can also be defined inside it.

function Fruits (name, color, value) {
    this.name = name;
    this.color = color;
    this.value = value;

    this.getName = function() {
        return this.name;
    }

    this.getValue = function() {
        return this.value;
    }

    this.changeValue = function(newValue) {
        this.value = newValue
    }
}

With the basic constructor in place, we can define/create our own Fruit object with the properties we require anywhere in the code without much repitition.

var apple = new Fruits("Apple", "red", 20);
console.log(apple.getName()); // Apple
apple.changeValue(50);
console.log(apple.getValue()); // 50

Prototype pattern: In this pattern, the initial object is created through a constructor. However, the common methods and properties can be added through the object's prototype property.

function Fruits (name, color, value) {
    this.name = name;
    this.color = color;
    this.value = value;
}

Fruits.prototype.getName = function() {
        return this.name;
    }
Fruits.prototype.getValue = function() {
        return this.value;
    }

We can call the constructor this same way as before. The functions added to the prototype acts as a common function shared between all the objects created using this constructor.

var mango = new Fruits("Mango", "Yello", 70);
console.log(mango.getName()); // Mango
console.log(mango.getValue()); // 70

Accessing properties of an Object

Dot Notation: The most common way of accessing object properties is through dot notation. We use a .(dot) followed by the property name to access its value. Point to be noted that this type of access works only if the property names(keys) are strings without any space.

var fruits = {
    name: "Apple",
    color: "red"
}
console.log(fruits.name); // Apple
console.log(fruits.color); // red

Bracket Notation: The most preferred way of accessing object values are through bracket notation. This also confirms uniformity and provides access to all types of keys which can be used in objects. Numbers, string (with or without spaces), even variables containing object property name can be used in this notation.

var fruits = {
    name: "Apple",
    color: "red"
}
var c = "color";
fruits[1] = "fruit value";
console.log(fruits["name"]); // Apple
console.log(fruits[c]); // red
console.log(fruits[1]); // fruit value

Shallow Copying v/s Deep copying

In one of the earlier examples, we saw that the objects can be copied from one variable to another. However, this copy exists only by reference. Physically there won't be two different copies in the variables. There are two more ways of copying objects to avoid this reference during copying.

Shallow Copying: Using Object.assign, shallow copying can be implemented when we only want the outermost level to be copied by value. Objects can be nested, and these nested values will still be stored through the reference.

var fruit = {
  name: "Apple",
  valueSimple: 20
};
var fruitCopy = Object.assign({}, fruit);

console.log(fruitCopy); // { name: "Apple", valueSimple: 20 }
fruit.valueSimple = 50;
console.log(fruit); // { name: "Apple", valueSimple: 50 }
console.log(fruitCopy); // { name: "Apple", valueSimple: 20 }

If the above example had a nested object, the change in value would be reflected in all the objects created using Object.assign.

var fruit = {
  name: "Apple",  
  valueNested: {
      inr: 20
    }
};
var fruitCopy = Object.assign({}, fruit);

console.log(fruitCopy); // { name: "Apple", valueNested: {inr: 20 } }
fruit.valueNested.inr = 50;
console.log(fruit); // { name: "Apple", valueNested: {inr: 50 } }
console.log(fruitCopy); // { name: "Apple", valueNested: {inr: 50 } } - Nested value are stored by reference.

Deep Copying: Real-life data might contain multiple levels of nesting. One way to completely copy the object, without any reference is through iteration through all the nested levels and using Object.assign. While this is tedious, we have a simple solution. Object.parse and JSON.stringify.

var fruit = {
  name: "Apple",  
  valueNested: {
      inr: 20
    }
};
var fruitCopy = JSON.parse(JSON.stringify(fruit));

console.log(fruitCopy); // { name: "Apple", valueNested: {inr: 20 } }
fruit.valueNested.inr = 50;
console.log(fruit); // { name: "Apple", valueNested: {inr: 50 } }
console.log(fruitCopy); // { name: "Apple", valueNested: {inr: 20 } }

Objects are first-class citizens in javascript. Almost all complex data types, including functions, are created from the javascript's Object. Understanding the basics of object creation and usage should certainly help in the long run.

Originally published at https://aparnajoshi.netlify.app.

Javascript scope and hoisting: Understanding block scope

Aparna Joshi — Thu, 30 Jul 2020 04:27:51 +0000

Introduction to Scope and Hoisting

Every programming language has its own rules regarding the scope of the data being stored during program execution. The term Scope refers to space in the program where the data can be accessed. Traditionally Javascript only had two types of scopes: Global and Function scope.
With the introduction of ES6, Javascript is introduced with the third type of scope - Block scope.

Hoisting is a feature unique to Javascript. Hoisting in javascript refers to the variable and function declaration being moved up to the top of the scope.

source

In this article, we will understand the meaning scope in javascript, the implications of ES6 (block scoping), and the effects of hoisting.

Global and Function scope

Javascript mainly has two types of scope: Global and Function scope.

Global scope refers to all the variables declared in a JS file that are not inside any function. These variables have access anywhere in the file. Function scope refers to a limited private scope that the variable gets within the function it is declared. This variable can be accessed anywhere within the function, but not outside it. Let us try to illustrate with an example. Consider the following lines of code:

// Copy paste this block of code in your file to try it out!!!
var globalVariable = "globalVariable is in global scope";

function func1() {
  var variable1 = "variable1 is in func1 scope";
}

function func2() {
  var variable2 = "variable2 is in func2 scope";
  console.log(variable1); //Uncaught ReferenceError: variable1 is not defined
}
console.log(variable1); //Uncaught ReferenceError: variable1 is not defined

In the above code, globalVariable exists throughout the JS file. Hence, it can be accessed anywhere. Since javascript code mostly executes in the browser, it is good to know what global scope means in the context of a browser. In any web browser, the global scope is created for us, and the window object lies in the global scope. Hence in the browser, the globalVariable can be accessed either directly or through the window object window.globalVariable. Since in web development we might have several javascript files, it is important to know that all the variables declared with the global scope in these files are available in the window object. This is an important point to note, if multiple files contain the same variable name declared in the global scope, unexpected code behaviors might arise because the same variable might get overridden in different files.

The variable1 exists only inside the function func1, and it can be accessed only inside this function. The global space and func2 do not have access to this variable. The console.log statements in both places will throw an error.

Scope chain and Variable look-up

Consider next piece of code:

var globalVariable = "globalVariable is in global scope";

function outerFunc() {
  var outerVariable = "outerVariable is in outerFunc scope";

  function innerFunc() {
    var innerVariable = "innerVariable is in innerFunc scope";
    console.log(innerVariable); //Same scope
    console.log(outerVariable); //Parent scope or outer scope
    console.log(globalVariable); //Global scope
  }
}

The above code might confuse those not familiar with javascript. innerVariable is in the scope of innerFunc, however, outerVariable and globalVariable are also accessible here. This is because, javascript first checks for the existence of a variable within the current scope, if the variable is not present, it looks up for the variable in its immediate parent scope, and so on until the global scope is reached. If the variable is not present anywhere during this lookup, javascript throws Reference error.

The set of nested scopes forming a scope ladder is called Scope Chain, and this process of checking for a variable through the scope chain in ascending order is called Variable lookup. Note that the variable lookup is unidirectional, and happens only from one scope to its parent scope.

Let and Const

ES6 introduced two new ways of holding data in the application. let and const. These are two additional ways to declare and use data in the JS program. let is quite similar to var. Using let we can declare and use variables anywhere in the program just like var. The value assigned to the variable can also be changed whenever we want as long as the scope of the variable remains valid.

// consider having only the following piece of code in your file.

var variable1 = "This is declared using var";
let variable2 = "This is declared using let";

const is used to define a value, however, this value doesn't change throughout the execution. The values assigned with the const keyword cannot be changed, any attempt made to change this will result in an error. It is also the reason why const must be assigned a value during the declaration phase itself.

var variable1;
let variable2;
const variable3 = "Constant value";
const variable4; // Uncaught SyntaxError: Missing initializer in const declaration

variable1 = "This can be reassigned";
variable2 = "This can also be reassigned";
variable3 = "Cannot be reassigned"; // Uncaught TypeError: Assignment to constant variable.

Note that, even if arrays and objects are declared with const, their inner values can be changed.

ES6(ES2015) and Block scope

With the advent of ES6, javascript was introduced with a new type of scope, let and const allows us to declare and use the variables with block scope. Block scope means that any variable declared within a pair of brackets {} can only be used within those brackets. This also means that the variables declared within if-else blocks, for loop blocks will all have block scoping when they are declared with let or const. It is important to note, however, that ES6 still doesn't give ~~block scoping~~ capabilities to ~~var~~. Since let provides block scoping which is more in line with other object-oriented programming languages, it is preferred over the usage of var
Consider the following lines of code:

function func1() {
  var variable1 = "Grapes";

  if(true) {
    var variable2 = "Bananas";
    let apples = "Oranges";
    console.log(apples); // Works - Block Scope
    console.log(variable1); // Works - Function Scope
    console.log(variable2); // Works - Function Scope
  }
console.log(apples); // Doesn't work - Out of the block
console.log(variable1); // Works - Function Scope
console.log(variable2); // Works - Function Scope
}
console.log(apples); // Doesn't work - Out of the block
console.log(variable1); // Doesn't work - Out of the function
console.log(variable2); // Doesn't work - Out of the function

Hoisting and Temporal dead zone

Variable hoisting is important to understand certain unexpected behavior codes have in javascript. All data values declared/defined using var, let, const, and the functions are hoisted in javascript. This means that the declaration is moved up its scope. Javascript is executed in two phases: Parse phase and Execution phase. During the parsing phase, memory allocation, scope creation, and hoisting are carried out. Consider the following example:

function func1() {
  console.log("This is some dummy code");
  var variable1 = "Hoisting Demo";
  let variable2 = "Hoisting";
}

The javascript code translates this peice of code to:

function func1() {
  var variable1;
  let variable2;
  console.log("This is some dummy code");
  variable1 = "Hoisting Demo";
  variable2 = "Hoisting";
}

However, there is a small catch in variable hoisting. During variable hoisting, the variable declared with var is assigned undefined value. However, those declared with const and let are not assigned anything. This leads to the creation of Temporal Dead Zone. Because of this, even if the variable declared with var is used before its declaration, the code doesn't throw any error. However, if the variable declared using let or const is used before they are declared, we get an error.

console.log(variable1); // Works with value undefined
console.log(variable2); // Uncaught ReferenceError: Cannot access 'b' before initialization
console.log(constant1); // Uncaught ReferenceError: Cannot access 'b' before initialization

var variable1 = "Hoisting Demo";
let variable2 = "Hoisting";
const constant1 = "Hoisting Demo";

Final catch

So far we know that var allows function scoping and let allows block scoping. However, there is another difference between the two. If a closure is created within the loop, variables declared using let will be bound to the value during the current iteration of the loop, whereas the value of var variables will be the current value of the variable. Consider the following example:

for(var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log('The number is ' + i);
  });
}

for(let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log('The number is ' + i);
  });
}

The for loop created using var will print the number 10, ten times. This is because 10 is the final current value of i. However, the for loop containing let will print the numbers from 0 to 9, this is because the value of let is preserved and is bound to the current iteration value. This is an important concept that will be helpful when dealing with asynchronous functions within the loops.

Variable scope and hoisting are the basic concepts of javascript which help us in building applications. Note that with the addition of let and const we have only introduced the possibility of having block scope in javascript. The global and function scope always remains whether we use var, let, or const.
I hope that this article helped you understand the usage of var, let and const at a much deeper level.

Originally published at https://aparnajoshi.netlify.app.