DEV Community: Ashutosh Bhadoria

Django Rest Framework: Map Values Before Serializing and Deserializing

Ashutosh Bhadoria — Tue, 18 Apr 2023 05:29:20 +0000

When serializing and deserializing data using a serializer, you may want to map the values of certain fields before they are serialized or after they are deserialized. One common use case for this is to transform the data to match a specific format required by your API or application.

To map values while serializing and deserializing, you can use the serializer's to_representation and to_internal_value methods, respectively. These methods are called when the serializer is used to serialize and deserialize data. You can override these methods to implement your custom value mapping logic.

class MySerializer(serializers.Serializer):
    my_field = serializers.CharField()

    def to_representation(self, instance):
        # Map the value of my_field to lowercase before serialization
        data = super().to_representation(instance)
        data['my_field'] = data['my_field'].lower()
        return data

    def to_internal_value(self, data):
        # Map the value of my_field to uppercase after deserialization
        data['my_field'] = data['my_field'].upper()
        return super().to_internal_value(data)

In this example, the to_representation method is overridden to map the value of the my_field field to lowercase before serialization, and the to_internal_value method is overridden to map the value of the my_field field to uppercase after deserialization. The methods first call the parent implementation to perform the default serialization and deserialization logic, and then apply the custom value mapping.

By doing this, the mapped value will be returned during serialization, and the mapped value will be stored in the database after deserialization.

Tagged Template Literals in ES6

Ashutosh Bhadoria — Sat, 11 Apr 2020 15:37:07 +0000

With a plethora of features that were ushered into the language in the ECMAScript 2015 (ES6), one of the most pragmatic feature that I find very commonly used is the template strings. Template literals are string literals allowing embedded expressions.

This allowed us to get rid of this somewhat clumsy syntax while creating a string using concatenation ,

const character = {
  name: 'Din Djarin',
  creed: 'Mandalorian',
  dialogue: 'I can bring you in warm, or I can bring you in cold',
};

const sentence = character.name + ' is a ' + character.creed + ', and says "' + character.dialogue + '".';
console.log(sentence);

> Din Djarin is a Mandalorian, and says "I can bring you in warm, or I can bring you in cold".

With ES6 template literals we could create a string using a much cleaner syntax and it is something we have been using day in and day out.

const sentence = `${character.name} is a ${character.creed}, and says "${character.dialogue}".`;
console.log(sentence);

> Din Djarin is a Mandalorian, and says "I can bring you in warm, or I can bring you in cold".

A very powerful feature of template literals is that we can tag them, that means we can run the template string through a function rather than have them value immediately assigned. This description of tagged template literals may seem a bit obscure, let us try to understand this concept through examples.

The way the tag template works is you make a function that is going to process the string, and you take the name of the function that you want to run against the string, and you place the function name right in front of the template string.

const strongify = () => {
  // do something
};

const characterOne = {
  name: 'Naruto',
  rank: 'Hokage',
  village: 'Konoha',
};

const characterOneDescription = strongify`${characterOne.name} is ${characterOne.rank} of the village ${characterOne.village}`;

console.log(characterOneDescription);

> undefined

The output is undefined instead of the complete string because the template string is processed by strongify function and it does not return anything, that is the reason the variable characterOneDescription is set to the value of undefined.

Let's make the strongify function return something.

const strongify = () => {
  return 'Damn the tagged template literals are sick!';
};

const characterOne = {
  name: 'Naruto',
  rank: 'Hokage',
  village: 'Konoha',
};

const characterOneDescription = strongify`${characterOne.name} is ${characterOne.rank} of the village ${characterOne.village}`;

console.log(characterOneDescription);

> Damn the tagged template literals are sick!

The function which with which we tag the string is called with the following arguments:

An array comprising of all the string parts.
Individual values as separate arguments.

Let's see this in code,

const strongify = (strings, value1, value2, value3) => {
  console.log(`Inside strongify: ${strings}`);
  console.log(`Inside strongify: ${value1}`);
  console.log(`Inside strongify: ${value2}`);
  console.log(`Inside strongify: ${value3}`);
  return 'Character description: cool';
};

const characterOne = {
  name: 'Naruto',
  rank: 'Hokage',
  village: 'Konoha',
};

const characterOneDescription = strongify`${characterOne.name} is ${characterOne.rank} of the village ${characterOne.village}`;

console.log(characterOneDescription);

> Inside strongify: , is , of the village ,
  Inside strongify: Naruto
  Inside strongify: Hokage
  Inside strongify: Konoha
  Character description: cool

Capturing the values as value1, value2 ... is not a very efficient way, therefore going forward we will use the ES6 rest operator to pack all the values into an array, so our code will look like this now,

const strongify = (strings, ...values) => {
  console.log(`Inside strongify: ${strings}`);
  console.log(`Inside strongify: ${values}`);
  return 'Character description: cool';
};

const characterOne = {
  name: 'Naruto',
  rank: 'Hokage',
  village: 'Konoha',
};

const characterOneDescription = strongify`${characterOne.name} is ${characterOne.rank} of the village ${characterOne.village}`;

console.log(characterOneDescription);

> Inside strongify: , is , of the village ,
  Inside strongify: Naruto,Hokage,Konoha
  Character description: cool

So we have received the following strings and values,

Strings	Values
''	'Naruto'
' is '	'Hokage'
'of the village'	'Konoha'
''

NOTE: There will be always one more string than value, while the function processes the template literal it will always start with a string and end with a string. Our template literal characterOne may seem to start and end with a value, in this case the parsing function treat the starting string and ending string as an empty string.

Let's try if we could process the entire string and render as it should without the tag, using a tagged function 😉

So we append the first item from string array with the first item from value array, and so on

const strongify = (strings, ...values) => {
  let str = '';
  strings.forEach((string, index) => (str += string + values[index]));
  return str;
};

const characterOne = {
  name: 'Naruto',
  rank: 'Hokage',
  village: 'Konoha',
};

const characterOneDescription = strongify`${characterOne.name} is ${characterOne.rank} of the village ${characterOne.village}`;

console.log(characterOneDescription);

> Naruto is Hokage of the village Konohaundefined

OOPS! we have four strings and three values (remember we will have one string more than the number of values), therefore we get this incorrect result. Let's fix this by using the OR operator default value pattern.

const strongify = (strings, ...values) => {
  let str = '';
  strings.forEach((string, index) => (str += string + (values[index] || '')));
  return str;
};

const characterOne = {
  name: 'Naruto',
  rank: 'Hokage',
  village: 'Konoha',
};

const characterOneDescription = strongify`${characterOne.name} is ${characterOne.rank} of the village ${characterOne.village}`;

console.log(characterOneDescription);

Naruto is Hokage of the village Konoha

This looks good, now we know how to tag strings with functions, but we haven't done anything different until now.

Suppose the characterOneDescription is to be displayed on an HTML document and the values supplied to the template literal must indicate strong importance i.e. while displaying the template string the values must be wrapped in <strong> tag.
Let's tweak our code

index.html

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <p id="character-description"></p>
    <script src="./app.js"></script>
  </body>
</html>

app.js

const strongify = (strings, ...values) => {
  let str = '';
  strings.forEach(
    (string, index) =>
      (str += `${string} <strong>${values[index] || ''}</strong>`)
  );
  return str;
};

const characterOne = {
  name: 'Naruto',
  rank: 'Hokage',
  village: 'Konoha',
};

const characterOneDescription = strongify`${characterOne.name} is ${characterOne.rank} of the village ${characterOne.village}`;

const description = document.getElementById('character-description');
description.innerHTML = characterOneDescription;

The output is,

This was a very simple use case we tried out with the tagged template strings. There are much more complicated use cases for that. The main idea is this, if you have a template literal and want to process it programatically before it is assigned to a variable we can do that by tagging the template string with a function.

One very common use case is representing Windows file paths in our JavaScript files.

const filePath = `D:\Games\steamapps\common\Grand Theft Auto V`;
console.log(filePath);

> D:GamessteamappscommonGrand Theft Auto V

This is because the backslash indicates an escape character in JavaScript, to fix that we have to escape the back slash

const filePath = `D:\\Games\\steamapps\\common\\Grand Theft Auto V`;
console.log(filePath);

> D:\Games\steamapps\common\Grand Theft Auto V

To avoid having to escape backslashes we can use the built-in String.raw() static tag function for the template literals,

const filePath = String.raw`D:\Games\steamapps\common\Grand Theft Auto V`;
console.log(filePath);

D:\Games\steamapps\common\Grand Theft Auto V

Conclusion

So in this post we looked at how we can create tag functions to process template literals, and demonstrated how convenient it becomes to process strings using one of the built-in tag method.

Happy coding 😎

A Deep Dive into JavaScript Objects And Prototypes

Ashutosh Bhadoria — Sat, 30 Nov 2019 09:38:53 +0000

For anybody who has been working with JavaScript even on a beginner level, has come across the notion of object in one's code. Remember the first program in JavaScript we wrote, it must have looked like console.log('Hello World!'). Where we used the log method of the console object.

Broadly speaking, objects in JavaScript can be defined as an unordered collection of related data, of primitive or reference types. This data is represented in the 'key: value' form. The keys can be variables or functions, which in the context of objects are referred to as properties and methods.

Without further ado, lets create our first object by using the object literal.

var beer = {
  name: 'Guinness',
  style: 'Stout'
};

As we can see we just created an object with a name of beer and two properties which are name and style, with values 'Guinness' and 'Stout' respectively. We can access these properties very easily by using the dot operator.

> console.log(beer.name);
  Guinness
> console.log(beer.style);
  Stout

Once an object is created using an object literal we can easily add additional properties to it, let's try to add a color property to our beer object and assign a value of black to it.

beer.color = 'Black';

> console.log(beer.color);
  Black

Similar to adding properties, methods can be added to our beer object very easily. We'll add a makePersonHappy() method to our object.

beer.makePersonHappy = function() {
  console.log('Be happy, Good things come to those who wait.');
}

Let's execute this method right away,

> beer.makePersonHappy();
  Be happy, Good things come to those who wait.

Also, deleting properties (or methods) from your object is very simple with the use of delete keyword, let's have a look at it in the code

var beer = {
  name: 'Guinness',
  style: 'Stout',
  color: 'Black',
  makePersonParty: function() {
    console.log('Partyyyy!');
  }
};

delete beer.color;
delete beer.makePersonParty;

> console.log(beer);
  {name: "Guinness", style: "Stout"}

So, we can see the property color and the method makePersonParty are successfully deleted from our object beer.

Wait, where are the Classes ?

If you are coming from a background in statically typed languages (like I did), it's easy to get bamboozled here, what did I just do?
what is a beer? I haven't even defined a class beer.
The thing is, in a dynamically typed language we can skip the whole ceremony of creating the blueprints i.e. the classes or types ahead of time before we their instances aka. the objects.

Just create an object when you need one with the properties and methods you deem necessary. But another powerful feature of JavaScript objects is that you can change the entire shape of the object as and when you feel necessary. We created our beer object with two properties, name and style, later we felt that the beer needs to have a color, so we added a color property, similarly, we thought it would be good if our beer made a person happy, so that's what we did we added a method to our object makePersonHappy. This dynamic nature allows for more flexibility with less code and less constrainsts.

Now this may seem fun for small scripts, but, especially after JavaScript has become a mainstay in the server side development ecosystem as well, a burning question is, HOW THE HECK DO I WRITE COMPLEX SYSTEMS ?

We will explore features JavaScript provides to get some of the same benefits you can from statically typed languages.

Creating Objects

Using Constructor Functions

function Beer() {
  this.name = 'Guinness';
  this.style = 'Stout';  
}

var beer = new Beer();

> console.log(beer);
  Beer {name: "Guinness", style: "Stout"}

JavaScript provides a new keyword which followed by a function (constructor function) helps us create objects with the desired properties (and methods), without losing the dynamic nature of JavaScript objects. The constructor function is like any other JavaScript function with the first letter of it's name capitalized as a convention.

Let's just take a look at our new Beer object. There you can see that our lowercase beer variable is now a pointer to a Beer object, and that beer is named Guinness and is a Stout. So how exactly did that work? To really understand what is happening here, it's important that you understand what the keyword this is in JavaScript. The this keyword refers to an object. That object is whatever object is executing the current bit of code. By default, that is the global object. In a web browser, that is the window object. So when we executed this Beer function, what was this referring to? It was referring to a new empty object. That's what the new keyword does for us. It creates a new empty JavaScript object, sets the context of this to that new object, and then calls the Beer function. (If it doesn't make sense, please re-read this paragraph)

Let's now make out contructor function dynamic enough to create different beers.

function Beer (name, style) {
  this.name = name;
  this.style = style;
}

var guinness = new Beer('Guinness', 'Stout');
var miller = new Beer('Miller', 'American Pilsner');

> console.log(guinness);
  Beer {name: "Guinness", style: "Stout"}
> console.log(miller);
  Beer {name: "Miller", style: "American Pilsner"}

Using ECMAScript 6 Classes

class Beer {
  constructor (name, style) {
    this.name = name;
    this.style = style;
  }
}

var guinness = new Beer('Guinness', 'Stout');
var miller = new Beer('Miller', 'American Pilsner');

> console.log(guinness);
  Beer {name: "Guinness", style: "Stout"}
> console.log(miller);
  Beer {name: "Miller", style: "American Pilsner"}

ES6 classes offer a relatively cleaner and very similar syntax to create objects which may seem familiar to class declarations in statically typed languages.

Using Object.create()

So far we've seen three ways to create JavaScript objects - the object literal, contructor functions and ES6 classes. But there is another way to create objects and is actually how objects are created under the hood even when we use the syntactic sugar available in the three ways we saw earlier.

var guinness = Object.create(Object.prototype, {
  name: {
    value: 'Guinness',
    writable: true,
    iterable: true,
    configurable: true
  },
  style: {
    value: 'Stout',
    writable: true,
    iterable: true,
    configurable: true
  }
});

> console.log(guinness);
  Beer {name: "Guinness", style: "Stout"}
> console.log(miller);
  Beer {name: "Miller", style: "American Pilsner"}

Now all these properties while creating an object using Object.create() may seem very weird because most of the times we do not interact with them and they are oblivious to us, because the other ways of creating objects just abstracts us from that detail. But we'll have a look at them later.

Object Properties

We have already seen creating objects with properties in the previous section, but there's a lot to object properties than it meets the eye. So far we have discussed accessing object properties with the dot notation, but there is an alternative and in some cases an essential construct to access object properties, the bracket notation.

var beer = {
  name: 'Miller',
  style: 'American Pilsner'
}

> console.log(beer.name) // accessing properties using dot notation
  Miller

> console.log(beer['name']) // accessing properties using bracket notation
  Miller

Just place the property name as a string (notice the single quotes) inside a bracket and we have an alternate syntax to aaccess object's properties.

What if we name our properties (or a data fetched as JSON from some source) which are not valid identifier names, in that case the dot notation will not work and we will have to use the bracket notation

var beer = {
  'beer name': 'Kingfisher' // property name is invalid identifier
}

> console.log(beer['beer name'])
  Kingfisher

Bracket notation is extremly useful when we want to access a property through a variable as a key.

var beerStyleKey = 'style';

var beer = {
  name: 'Hoegarden',
  style: 'Belgian Wheat Beer'
}

> console.log(beer[beerStyleKey]) // accessing the property
                                  // using variable as a key
  Belgian Wheat Beer

Property Descriptors

Let us take a closer look at properties, they are more than a key-value pair, using Object.getOwnPropertyDescriptor() which returns a property descriptor for an own property. (we will look at the difference between an own property and a prototype property later).

var beer = {
  name: 'Guinness',
  style: 'Stout'
}

> Object.getOwnPropertyDescriptor(beer, 'name');
  {value: "Guinness", writable: true, enumerable: true, configurable: true}

Now, in the output, we can see in addition to the property having a value, it also has writable, enumerable and configurable attributes.

Writable Attribute

The writable attribute controls wether we can change the value of the property from the initial value.

For demonstrating this behaviour we are going to use the JavaScript strict mode, and we are going to use Object.defineProperty() which defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

Consider our object beer

'use strict';

var beer  = {
  name: 'Guinness',
  style: 'Stout'
};

// set the writable attribute for property style to false.
Object.defineProperty(beer, 'style', {writable: false});

// try to change the style value for beer
> beer.style = 'Belgian Blond Beer';
  Uncaught TypeError: Cannot assign to read only property 'style' of object '#<Object>'

As expected trying to reassign a new value to style property results in a TypeError being thrown.

A word of caution the key concept here is we will not be able to REDECLARE a property. So if in case, the property is an object, we can still modify that object, but we cannot set it to other object.

'use strict';

var beer = {
  name: 'Simba',
  placeOfOrigin: {
    city: 'Bangalore',
    country: 'India'
  }
}

Object.defineProperty(beer, 'placeOfOrigin', {writable: false});

beer.placeOfOrigin.city = 'Mumbai'; // works fine
beer.placeOfOrigin = {city: 'Moscow', country: 'Russia'}; // throws TypeError

Enumerable Attribute

Whenever we want to list or print all the properties of an object we just throw in a good ol' for...in loop. By default, properties on an object are enumerable, meaning we can loop over them using a for…in loop. But we can change that. Let's set enumerable to false for the style property.

'use strict';

var beer  = {
  name: 'Guinness',
  style: 'Stout'
};

Object.defineProperty(beer, 'style', {enumerable: false});

for (var key in beer) {
  console.log(`${key} -> ${beer[key]}`);
}

// output
name -> Guinness

Well looks like our style property wasn't enumerated (no pun intended).

Setting the enumerable attribute to false also has another important implication, the JSON serialization of the object. Let's have a look what happens to our beer object which has enumerable attribute for style set to false.

> JSON.stringify(beer);
  "{"name":"Guinness"}"

We didn't get the style property in our stringified object.

A convenient way to get all the keys (or attributes) of an object is to use the Object.keys() method, let's see what if we set enumerable attribute to false for a particular key.

> Object.keys(beer);
  ["name"]

Again the only key showing up is the name key and not the style key.

Although we cannot enumerate the style key in the for...in loop, or JSON stringification, or in Object.keys(), we still have it present on the object. Let's print out it's value.

> console.log(beer.style);
  Stout

Configurable attribute

The configurable attribute helps you lock down some property from being changed. It prevents the property from being deleted.

Lets see this in the code

'use strict';

var beer = {
  name: 'Guinness',
  style: 'Stout'
}

Object.defineProperty(beer, 'style', {configurable: false});

// try deleting the style property.
> delete beer.style;
  Uncaught TypeError: Cannot delete property 'style' of #<Object>

Also, after setting configurable attribute to false we cannot change the enumerable attribute of the object.

> Object.defineProperty(beer, 'style', {enumerable: false});
  Uncaught TypeError: Cannot redefine property: style

Interestingly, once we set configurable atribute to false, we cannot flip it back to true.

> Object.defineProperty(beer, 'style', {configurable: true});
  Uncaught TypeError: Cannot redefine property: style

However, note that we can still change the writable attribute on the style property.

Getters and Setters in JavaScript

Getters and Setters are properties on an object that allow you to set the value of a property or return the value of property using a function. Thus, allowing for a more secure and robust way of assigning or retrieving values of object properties.

var beer = {
  brand: 'Miler',
  type: 'Lite'
}

Now suppose we wanted to retrieve the full name of our beer as 'Miller Lite' we could define a getter as follows,

var beer = {
  brand: 'Miller',
  type: 'Lite'
}

Object.defineProperty(beer, 'fullBeerName', {
  get: function() {
    return `${this.brand} ${this.type}`
  }
});

Now let's see if our code works

> console.log(beer.fullBeerName);
  Miller Lite

Well it does 😄

What if we wanted to do the reverse of what we've done, that we could supply a value such as 'Miller Lite' and it will set the brand property to 'Miller' and type property to 'Lite'. For this we need to define a setter.

var beer = {
  brand: 'Miller',
  type: 'Lite'
}

Object.defineProperty(beer, 'fullBeerName', {
  get: function() {
    return `${this.brand} ${this.type}`
  },
  set: function(str) {
    var parts = str.split(' ');
    this.brand = parts[0];
    this.type = parts[1];
  }
});

Let's test this out,

> beer.fullBeerName = 'Kingfisher Strong';
> console.log(beer);
  {brand: "Kingfisher", type: "Strong"}

It seems to work! We just set the brand and type property using a single assignment to fullBeerName.

Prototypes

Before we define and discuss prototypes let's consider an example, suppose we want to have a property which could give us last element of the array we defined. But as JavaScript is a dynamic language we can add a new property to achieve this.

var beers = ['Heineken', 'Miller', 'Tuborg'];

Object.defineProperty(beers, 'last', {
  get: function() {
    return this[this.length - 1];
  }
});

> console.log(beers.last);
  Tuborg

NOTE: Declaring and initializing arrays like we have done above by using the square bracket notation is just a simplified syntax for creating an Array using the Array constructor, var beers = ['Heineken', 'Miller', 'Tuborg']; is equivalent to var beers = new Array('Heineken', 'Miller', 'Tuborg');

However, the problem in this approach is, if we decide to define a new array we will need to define the last attribute again for that particular array. This approach is not extensible for all arrays.

If we define our last method on Array's prototype instead of the beers array we declared we will be able to achieve the expected behaviour.

Object.defineProperty(Array.prototype, 'last', {
  get: function () {
    return this[this.length - 1];
  }
});

> var beers = ['Heineken', 'Miller', 'Tuborg'];
> console.log(beers.last);
  Tuborg
> var gins = ['Bombay Sapphire', 'Gordon', 'Beefeater'];
> console.log(gins.last);
  Beefeater

Awesome.

So What is a Prototype?

A prototype is an object that exists on every function in JavaScript. Caution, some convoluted definitions are coming up. A function's prototype is the object instance that will become the prototype for all objects created using this function as a constructor. An object's prototype is the object instance from which the object is inherited.

Let's have a look at these concepts through code.

function Beer (name, style) {
  this.name = name;
  this.style = style;
}

var corona = new Beer ('Corona', 'Pale Lager');

> Beer.prototype;
  Beer {}

> corona.__proto__;
  Beer {}

> Beer.prototype === corona.__proto__;
  true

In the above example, when we define the constructor function Beer a protype object is created. Then we create a corona object using the Beer constructor function we can see that the same prototype object instance is available in the corona object (the name of the prototype object instance is __proto__ in case of the objects created from the constructor).

Let's tinker around with this prototype object.

Beer.prototype.color = "Golden";

> Beer.prototype;
  Beer { color: 'golden' }

> corona.__proto__;
  Beer { color: 'golden' }

> console.log(corona.color);
  "Golden"

> var guinness = new Beer('Guinness', 'Stout');
> guiness.color;
  "Golden"

We added a new property color to Beer's prototype and because the objects created from the Beer constructor have the exact same prototype object instance, the changes in function's prototype object are reflected in corona object's __proto__ object. Also, we can see another more practical effect of adding a property to the prototype object, we are able to access color property from all the objects created through Beer constructor using the simple dot notation. Let's discuss this in the next section.

Instance and Prototype properties

Let us code up our previous example real quick

function Beer (name, style) {
  this.name = name;
  this.style = style;
}

Beer.prototype.color = 'Black';

var guinness = new Beer('Guinness', 'Stout');

Now we'll head to our JavaScript console to draw some insights from the above example

> (console.log(guinness.name);
  "Guinness"

> console.log(guinness.style);
  "Stout"

> console.log(guinness.color);
  "Black"

So far so good, we are getting expected values for all the three properties.

Just to be sure, let us list the properties of the guinness object.

> Object.keys(guinness);
   ["name", "style"]

Wait what? Where is the color property we just accessed it's value. Let's double-check this.

> guinness.hasOwnProperty('name');  // expected
  true

> guinness.hasOwnProperty('style'); // expected
  true

> guinness.hasOwnProperty('color') // Oh! Weird
  false

> guinness.__proto__.hasOwnProperty('color'); // Hmmmm
  true

To explain this, name and style are the properties of the guinness object and are referred to as Instance properties, while color is a Prototype property.

While trying to access a property of an object (using the dot or the square bracket notation) the engine first checks if the property we are trying to access is an Instance property, if yes the value of the Instance property is returned. However, when the property is not found in the Instance properties of the object, a look up of Prototype properties is performed, if a corresponding matching property is found, it's value is returned.

Let's see one last example to drive this concept home.

function Beer (name) {
  this.name = name;
}

Beer.prototype.name = 'Kingfisher';

var corona = new Beer('Corona');

> console.log(corona.name);
  "Corona"

Even though the name property is available on the prototype it's value is not returned because first a look up of Instance properties is performed, where the property name was found and it's value of "Corona" is returned.

Multiple Levels of Inheritance

function Beer (name) {
  this.name = name;
}

var corona = new Beer('Corona');

We know now, that corona has a prototype and that it was created from the Beer function, as can be seen here.

> corona.__proto__;
  Beer {}

But on close inspection we will see that the the Beer prototype also has a prototype.

> corona.__proto__.__proto__;
  Object {}    // maybe represented as `{}` in some environments

This indicated that Beer objects inherit from Object. Let us try going up the prototype chain.

> corona.__proto__.__proto__.__proto__;
  null

Looks like we've hit the roof. So to conclude this discussion, by default, all objects in JavaScript inherit from Object. And Object has no prototype. So almost all objects that we work with have some type of prototypal inheritance chain like this.

Creating Prototypal Inheritance Chains

To create complex systems it is often essential we think of in terms of creating ample abstractions to make the system design cleaner, robust and reusable.

Let us try to create an abstraction for our Beer class, let us say Beer is a type of Beverage, and the Beverage happens to make people happy. So, we add a method to Beverage's prototype makePersonHappy(). Now Beer being a Beverage should also be able to make people happy, right? Let us see how we can achieve this

function Beverage() {
}

Beverage.prototype.makePersonHappy = function () {
  console.log('You are feeling so good!');
}

function Beer (name, style) {
  this.name = name;
  this.style = style;
}

Beer.prototype = Object.create(Beverage.prototype);

var guinness = new Beer('Guinness', 'Stout');

Let's see if guinness can make a person happy.

> guinness.makePersonHappy();
  "You are feeling so good!"

So what happened was, when we defined the method makePersonHappy() on Beverage's prototype, every object created from the Beverage function would have this method. If you look closely at the line of code

Beer.prototype = Object.create(Beverage.prototype);

This sets up a prototype chain from Beer to it's parent Beverage and therefore we are able to access the method makePersonHappy(). Let's verify this claim

> console.log(guinness.__proto__.__proto__);
  Beverage { makePersonHappy: [Function] }

There is, however, one discrepancy here, let's print the guinness object.

> console.log(guinness);
  Beverage { name: 'Guinness', style: 'Stout' }

Here the object guinness has Beverage as it's constructor, but we created this object using Beer function. Turns out we had overwritten the constructor property of the Beer's prototype when we established the prototype chain. This can be easily amended by explicitly setting the constructor property of the prototype.

Beer.prototype = Object.create(Beverage.prototype);
// explicitly setting the constructor
Beer.prototype.constructor = Beer;

Now, let's go to the console to verify this

> console.log(guinness);
  Beer { name: 'Guinness', style: 'Stout' }

A lot of times we may decide to change some default behaviour provided by the parent to better suit the design of the system. Here we will try to override the message shown in makePersonHappy() method provided by the Beverage. Let us use every thing we have covered in this sub-section.

function Beverage (message) {
  this.message = message || 'You are feeling so good!';
}

Beverage.prototype.makePersonHappy = function () {
  console.log(this.message);
}

function Beer (name, style) {
  // Call Beverage constructor
  Beverage.call(this, 'You have never felt better before!');
  this.name = name;
  this.style = style;
}

// Set prototype chain
Beer.prototype = Object.create(Beverage.prototype);
// Explicitly set constructor
Beer.prototype.constructor = Beer;

var guinness = new Beer('Guinness', 'Stout');

In order to call the Beverage constructor we use the JavaScript's call method which calls a function with a given this value and arguments provided individually. This is done to take care of any initializations that we intended to do in the parent class, in this case we want to display a custom message from the makePersonHappy() method.

Let's verify if everything works fine.

> guinness.makePersonHappy();
  "You have never felt better before!"

> guinness;
  Beer {
    message: 'You have never felt better before!',
    name: 'Guinness',
    style: 'Stout'
  }

Using Class Syntax to Create Prototype Chains

The way to achieve prototypal inheritance using the moden ES6 class syntax is very similar and perhaps more cleaner than what we have seen. Recall how in an earlier section we created objects from classes, let's apply those concepts here.

class Beverage {
  constructor (message) {
    this.message = message || 'You are feeling so good!';
  }

  makePersonHappy () {
    console.log(this.message);
  }
}

// Set up inheritance chain
class Beer extends Beverage {
  constructor (name, style) {
    // Call constructor of parent class
    super('You have never felt better before!');
    this.name = name;
    this.style = style;
  }
}

var guinness = new Beer('Guinness', 'Stout');

Here we use the extends keyword to set up the inheritance chain, and used the super keyword to call parent class' constructor.
Let's test this out.

> guinness.makePersonHappy();
  "You have never felt better before!"

> console.log(guinness);
  Beer {
    message: 'You have never felt better before!',
    name: 'Guinness',
    style: 'Stout'
  }

Note that here we did not have to explicitly set the constructor of the Beer's prototype.

Summary

With this deeper understanding, we'll be able to create powerful and well-structured applications that take advantage of the dynamic power of JavaScript to create real-world apps tackling complexity and standing the test of the harsh production-environments.

Happy coding 😎

Hey Alice what's the big deal about the JavaScript's strict mode ?

Ashutosh Bhadoria — Tue, 28 May 2019 03:50:55 +0000

Before Alice begins to answer Bob's question, let me set the stage for this conversation. Because JavaScript can be used without completely or adequately understanding, the understanding of the language and why something works or why that thing is used, eludes us. Consider Bob as a developer who wants to go the extra mile to understand what he uses day in and day out, without putting conscious thoughts. And Alice being an empathetic developer wants to help her colleague.

(Perhaps in a different setting, Bob could be interviewing Alice for a full-time job. 😉)

Hey Alice, my code works like a charm, but I am being told to use the `strict mode`, what's the big idea?

The JavaScript strict mode basically allows you to place a program or even a function in a strict operating context. And before you ask "What good does it do to me ?", let me answer that as well. It will make debugging easier, it will make you less vulnerable to the quirks of the JavaScript language. A lot of the errors which would silently fail and would be uncovered somewhere during the runtime (possibly in production) would be exposed to you upfront, if you use the strict mode.

So how do I use the fabled `strict` mode?

Oh! just place the string "use strict"; on the top of your program file. Now your code is using the strict mode and a lot of code lines which seemed fine in the non-strict mode will break, forcing you to refactor your program to make it easier for debugging. And we all make our lives easier.

Doesn't that mean I will break a lot of Grandpa Charles's legacy code by using the `strict` mode on my entire program file?

Remember when I told you, you could set the strict mode on a function. So if you don't want to hurt grandpa's feelings as of now, consider beginning to use the strict mode on the functions you write.

// non-strict mode

function doSomethingCool() {

    "use strict";

    // some cool `strict` stuff
}

// non-strict mode

Why does `"use strict"` have to be a string?

Because when this feature was being developed a lot of the older browsers did not support the strict mode. So if such a legacy browser encountered "use strict", it would treat it as a simple string literal which simply does nothing (in the context of affecting the state of a program).

That's really cool Alice, could you please demonstrate how `"use strict"` benefits me, through code examples?

Ah! I thought you'd never ask, let me think of a few scenarios off the top of my head.

Strict mode won't allow you to assign a variable before you declare it

"use strict";

myName = "Alice";

ReferenceError: assignment to undeclared variable myName script.js:3:1

This prevents polluting the global scope.
Look at this example,

"use strict";

var doAwesomeStuff = false;

doawesomeStuff = true // OOPS messed up the camel casing!!!

if (doAwesomeStuff) {

    console.log("Beginning to do some awesome stuff");

    // Awesome stuff 
}

ReferenceError: assignment to undeclared variable doawesomeStuff script.js:5:1

Had it not been for the strict mode you would never get an error for the typo you committed (fail silently) and you would never have had been able to do the awesome stuff. Thanks to the strict mode you would now amend your typo and continue doing the awesome stuff you were destined to do.

Strict mode forbids from using JavaScript keywords reserved for future use

// Non-strict mode
var let = 5;

console.log(let);

"use strict";

var let = 5;

console.log(let);

SyntaxError: let is a reserved identifier script.js:3:4

It's 2019 already and folks are moving to use the latest JavaScript features. One of them is the let keyword. let keyword is used to declare block-scoped variables in ES6 (ECMAScript® 2015). It would be unwise to use it as an identifier name. So strict mode has got your back.

Strict mode makes the dreaded eval() safer

eval() is a global function in JavaScript that evaluates specified string as JavaScript code and executes it. The use of eval has been discouraged maninly for the reason that it may alter lexical scope at run time (If this looks gibberish just ignore for now 😄)

// Non-strict mode 

var b = 5;

eval("var b = 6");

console.log(b);

Notice that eval() went on to re-declare the variable in the scope it was present. Reckless use of eval() may result in scope pollution and in more complex scenarios lead to unexpected results and convoluted logic.

"use strict";

var b = 5;

eval("var b = 6");

console.log(b);

In the strict mode the variable declaration takes place in a separate eval() scope (in a crude explanation this scope spans the argument passed to eval()), thereby not polluting the current scope.

Strict mode will not allow you to delete variables, function definitions and function arguments

"use strict";

var a = 10;
delete a;

SyntaxError: applying the 'delete' operator to an unqualified name is deprecated script.js:4:7

"use strict";

function dontDelete() {
    // some stuff
}

delete dontDelete;

SyntaxError: applying the 'delete' operator to an unqualified name is deprecated script.js:7:7

"use strict";

function dontDelete(arg) {
    delete arg;
    // some stuff
}

SyntaxError: applying the 'delete' operator to an unqualified name is deprecated script.js:4:11

These restrictions are mainly to ensure that we are not making it difficult for the JavaScript Engine to optimize our code and to make the semantics of a block of code easier to describe.

Wraping it up

The JavaScript's strict mode ensures that our code is cleaner and we avoid some very common syntax errors before the code is shipped to production. However the strict mode is not a silver bullet for all the problems, we still need to do good programming 😅