DEV Community: Saloni Yadav

Little shenanigans of JavaScript- the sly Map of ES6

Saloni Yadav — Sun, 19 Jul 2020 08:59:29 +0000

We all know how quirky Javascript is, with all its sly ways and silent mischiefs. I encountered another such shenanigan of JS while using Maps. For those of you still living in ice age- YES, JavaScript supports Map (and Set) Data Structures ES6 on.

Before we see what motivated me to write this post, let's quickly brush up what JS has to offer in Maps:

What is it? - Just an easier way to create an object of key-value pairs. Needless to say, it inherits Object prototype.
How is it any different from Objects? - We get several functions to make our life easier.

Find the documentation on Maps here.

For the sake of this article, let me list out some basic functions that we will be using.

//creating a new Map
const ourMap = new Map();

//setting key-value pairs
ourMap.set("firstName", "Regina");
ourMap.set("lastName", "Phalange");

//getting value, given a key
const fullName = ourMap.get("firstName") + " " + ourMap.get("lastName");
//fullName-> "Regina Phalange"

//Size of the map - number of key-value pairs
ourMap.size;
//returns 2

When you try the above out on a browser's developer console, you will see something like this:

(Note the arrow mark notation of Map's key-value pairs)

Now, since Map is nothing but a data structure holding key value pairs, it feels quite intuitive to go ahead and set the key-value using the usual Object properties method. Something like this-

ourMap["profession"] = "Trader";
ourMap.age = 45;
//All these return true as the properties indeed get set.
//You can check as following:

console.log(ourMap.profession);
console.log(ourMap.age);

ourMap.size;
//2

The above also sets a key-value pair in ourMap. But what happens when you fetch the size of the map???

BAM! It is still 2!
Then where on earth did ourMap engulf the age and profession keys? Where did it fetch these from when we console logged it??

The answers to these are very similar to Who murdered my array in my previous post.

When we take a look at the map after all our fiddling, we see something like this:

The key-value pair ONLY when set through the getter-setter, populates the entry in the [[Entries]] of the Map (note the arrowed key-value). When set through the object literals, it uses Prototypal Chaining and accesses the methods offered by the Object interface to set the key-values OUTSIDE the [[Entries]].

Consequently, ourMap.size which has access to only the Map Entries counts only the firstName and the lastName.

I have been working on developing a game. While using the Map to store Game Level Statistics, I used the shorthand for key-values and went bonkers when the map size kept returning 0. Only after further digging did I realise what was happening. I went back to the documentation and realised, there was a clear disclaimer for such a behavior, specially for lazy developers like myself.

Lesson learnt?? ALWAYS read the documentation thoroughly!🥱🥱

Now that we know what's happening, why stop here? Let's have some fun with it...

A trick you can play on JS newbies:

const person = new Map();
person.set("firstName", "Regina");
person.set("lastName", "Phalange");
person.firstName = "Phoebe";
person.lastName = "Buffey";

console.log(person.get("firstName")); //Regina
console.log(person.firstName); //Phoebe

//And the left Phalange of my brain short-circuits!! XD

This can also be a potentially popular entry-level JS interview question to see if you got your fundas right.

P.S. Remember that you cannot use any of the map functions on attributes that you set through object literals.

Again, lesson learnt? Read the damn documentation well! Hope you learnt something out of this article. We can also extrapolate this behavior to other data structures in JS, including Sets and Arrays... The fundamental remains the same!

Until next time...👋

Who else misses DEV's old Unicorn n Heart icons?

Saloni Yadav — Wed, 17 Jun 2020 15:35:40 +0000

I refreshed my Window's DEV app and saw the old colorful unicorn and heart replaced by a some not-so-fancy icon. :(

Anybody else with me?

Why it's important to strengthen core HTML/CSS and Vanilla JS before frameworks.

Saloni Yadav — Mon, 15 Jun 2020 07:18:44 +0000

If you have been following my posts, you would know that I am not a full-time blogger who has any fixed agenda or timeline for her content. I write what I experiment. And I write to document my learnings on-the-fly, hoping it will help others who seek similar goals! So, the next question arises...

In this era of powerful frameworks, why am I spending time on vanilla JS, HTML and CSS. Long answer short-

1- While frameworks were busy keeping us away from our roots, the HTML5+CSS3+Vanilla JS combo have grown so powerful that it's mind-blowing how much catching-up we have to do.

2- While the frameworks raging through the industry change with a blink, these roots will be our only constants and our forever companions.

3- God forbid, but if ever these open-source frameworks start licensing themselves, companies will start relying on their home-grown frameworks (already many "big fishes" like Facebook, Oracle... prefer this over third-party- they want their revenue to stay indoors). This is when people with strong fundamentals will prove to be an irreplaceable asset!

4- Every framework has its own set of limitations (no one's perfect). And, if you want to design a webpage out of the imagination of these framework developers, you have to rely on your own strength to create from scratch!

I absolutely realise how controversial all points presented above could be! And that's why it's open for a friendly discussion.

Again, I am not against frameworks. I am just against all the newbies jumping directly into the frameworks without knowing their roots. They end up thinking that certain features are specific to their frameworks while all the time it's offered by Vanilla JS and the framework is only gift-wrap around it. I have been there, and I don't want the newcomers to be in the same delusion.

Any thoughts?

Deep Clone of JS Objects with circular dependency

Saloni Yadav — Tue, 09 Jun 2020 05:45:50 +0000

Deep cloning JS objects has a plethora of blog posts and articles over the internet. But as I see, most or rather all of them end up with a solution of stringifying the JSON object and parsing them back. Somehow I am really unsettled with this solution. Is there any other way of deep clone a JS object?

Let's take some scenarios to discuss:
1- Not just one level of nested object, how about atleast 10?
2- What if after a certain point, there is circular dependency in the objects. (Ever heard of the tortoise-hare algorithm in linked list?) How will be approach cloning such an object?

P.S. I do not want to JSON.parse(JSON.stringify(obj)).

Edit:

Why I don't what to use JSON.stringify?
I came across this article on Medium.
And it was pretty convincing of certain loopholes in using JSON.stringify.

I agree that this is the most effective way to convert an object, but I am in a quest for a non-work-around solution. We will deal with performance of cloning later. For now, a base solution!

Behind the scenes: From the moment you enter a URL

Saloni Yadav — Wed, 27 May 2020 17:43:35 +0000

Recently in a job interview, I was asked- "What happens from the moment you enter a URL in the browser?". Although, I had an overall idea, I was quite unable to construct the entire flow loquaciously. This article is meant to give you (and me) a seamless flow chart of what happens from top to bottom until you see the very webpage. It covers both, the browser components and server side resolution of domains.
So without further ado, let's dive in...

The overall picture

Although, a webpage loads in a matter of seconds, there is quite a lot going on in the background. For simplicity, we will split them into three major flows:

1. Get the IP address of the server that your domain name refers to

2. Hit the server to fetch what is to be rendered on the UI

3. Construct, paint, and render the page

This is it. It's as simple as three steps. However, the complex part kicks in when we dive deeper into the two black boxes-

IP address resolution.
Constructing and rendering webpage.

If you are backend developer, the first will be of prime concern to you, and for frontend folks it's the browser rendering that takes precedence.
Anyways, let's look into both of them.

Domain name to IP Address using Domain Name Server(DNS)

Although this article is not meant for heavy theory (there are plenty on the internet), I will give a small summary why this block is important.

We as human beings don't retain long numbers. And machines don't understand our sophisticated language. As a win-win solution, we give names (domain name) to our servers while they have their identity as IP Addresses (numbers). So how do we bridge the gap and communicate? Domain Name Server acts as our mediator!
This is what goes behind the curtains:

Sorry if image is too small on your device, I had to fit in a lot of content in one flow chart. I urge you to download it and analyse each component. They are quite self-explanatory.

How the user finally gets a fancy webpage

Once we have resolved the IP Address of the server that has our relevant data (the webpage), all there is left is to actually hit it and fetch what we wanted. Most of the time, we get an HTML page in response, but we also have instances when it is a PDF, or other content-types like image, JSON, XML etc.

In this section, we will see how the browser converts an HTML file (bunch of nodes, scripts, and stylings) into a full-fledged viewable page.

This is only an overview. But, if you want to dig deeper into how each and every browser component works, refer here. This site is pretty much the Magnum Opus of how browser renders the HTML with embedded scripts and painted stylings.

However, I would like to mention a couple of important points here-
1- Your Browser Engine holds your JS environment like v8(for chrome) that has call stack, memory heap, event loop, Web API.. yada yada.
2- It's the Render Engine that parses the HTML nodes into a DOM tree and then further into a painted(CSS applied) render tree to display.
3- Everytime your HTML parser encounters script tag, it PAUSES PARSING DOM elements (IMPORTANT!!!) and synchronously downloads all scripts first.

Conclusion

Again, the agenda of this article was to help you articulate a big picture into a consolidated 3 min answer if anybody ever asks you- "What happens when you enter a URL?". Of course, there is a lot to explore here, and there are brilliant sources online to do so. Mentioning some of them in the references below.

Reference

The Big Picture
How DNS works
Rendering HTML into the browser

Thank you for reading. Hope this helps! 🦄🦄🦄

Little Shenanigans of JavaScript - Max is Negative Infinity? WHAT!

Saloni Yadav — Fri, 15 May 2020 18:22:04 +0000

JavaScript is like the father who over-pampered and spoilt his son, and now the son blames his Dad for things he can't handle. When I was first introduced to JS, I was said, and I quote - "JavaScript is a very forgiving language." This epithet stuck with me forever. Indeed, JS lets you do stuff you cannot imagine with other popular languages (I do not speak for the ones I don't know).

But before blaming JS think for a second, WHY would you want to add a string and number? What's the meaning of subtracting two strings? Why would you want to assign a negative index in an array? (Wait, did I just say negative indices??👻 Boo! I will get to it.) Some of the answers are obvious to ardent JS users when they use it day-in and day-out. But for the rest of you out there, just don't do it until you see why!

Jokes aside, I present to you few more such playful insanities of JS. I had a fun time fiddling with them, hope you too. Enough said, let's dive in.

1. Math.min() and Math.max() Upside-down

Most of us use these two functions in day-to-day basis. It's easiest way to compare a set of N numbers. Let's see what happens when you call them without feeding any parameters. What do you think the output to the following be:

console.log( Number.POSITIVE_INFINITY > Math.min() ); //false
console.log( Number.NEGATIVE_INFINITY < Math.max() ); //false
//Damn Son!!

First reaction: You kidding me!
But let's go ahead and see what values are we comparing at first place.

console.log( Math.min() ); //Infinity
console.log( Math.max() ); //-Infinity

Although this feels very counterintuitive to have min() as +Infinity and max() as negative, I find an explanation very convincing...

Let's take Math.min().
We use it to find the minimum number from a set. When you call it with no parameters, it initializes a number with Maximum Possible Value. Then, when you compare your first finite number with this, it will always pick that number as minimum.
Imagine if Math.min() was -Infinity. No matter what you compare this with, it will always pick your -Infinity. The function would fail!

When I have to write an algorithm to find a minimum of something. Say, a minimum Sum, or the smallest number in a dynamic array, or what-so-ever, I always initialize my comparison variable with Math.min(), so when I revisit it, I instantly know what I am intending to do! That is, find the MINIMUM.

Doesn't sound so counterintuitive now, does it? Simple logic- Want to find the minimum of a lot? Initialize using min!

Needless to explain, the same logic goes with Math.max(). To check if a number is maximum, we start comparing it with -Infinity and climb all the way up.

Now that you know, you will find yourself using this so very often! Been there. Done that.

2. Identity Crisis of NaN (I am Not-A-Number!!)

What do you think is the type-of NaN?

console.log( typeof NaN );
//"number"

This one got me rolling on the floor. 🤣
Literally, the full-form of NaN is Not a number. And yet, here we are!

Contrary to the popular belief, NaN is not a JS Keyword. It is merely a property of the global object Number, just like several others you would be aware of:

let x = Number.NaN; //NaN
let y = Number.NEGATIVE_INFINITY; //-Infinity
let z = Number.MIN_VALUE; //5e-324
let w = Number.MAX_VALUE; //1.7976931348623157e+308

NaN signifies quite a variety of scenarios. To enumerate a few:

You did an operation not explained by Math. Example- 0/0, Infinity/Infinity, Infinity * 0
You are trying to convert a non-numeric value to Number. Example- Number('foo') or +"foo"
You challenged the finites of Computer Arithmetic and executed an operation far bigger than the bits could hold. Example- (3.3489324884 * 10e616) / (3.3489324884 * 10e616); //NaN

So, NaN does not always signify Not-a-number, rather it's a way of saying-
"You are trying to get a number beyond the understanding of your machine."

having understood NaN now, what would be output for this:

let x = (3.454*10e500)/(3.454*10e500);
console.log( x );
console.log( x === NaN );

YES! Although x is NaN, the comparison throws False. Could you try reasoning out why?
This question reminds me of a famous John Green quote:
"Some infinities are bigger than other infinities."

Anyways, if you are searching for an exact answer why this doesn't work and how else will you check for NaN, you will find the answer here.

Shhh, spoiler:

let x = NaN;
isNaN(x); //true

3. Who murdered my Array?

Prepare to get Bonkers! I urge you to open your Developers Console even before you start scrolling, you are going to need it.

let x = [10, 20, 30, 40, 50];
console.log( x.length );

x[-1] = 0;
x[-2] = -10;
console.log( x.length );
console.log( x );

Did JS just let me add negative indices to an array!!! 🔪🔪🔪

Before I start explaining, let's see what the output looks like?

If you notice, even after adding two more data to the array, x.length remains as 5, although the array shows the newly added data.

Let's get our funda clear-

Any non-primitive data type in JS is treated as an Object. Let alone Arrays, Sets, Maps, even Functions are Objects. And any object is a set of key-value of pairs.

To understand what's happening in our use case here, let's for a second, forget that x is an Array, and treat it as an Object (which it is, since arrays are also objects). Now, let's try adding a function definition, or a new attribute to x:

x.foo = () => console.log('in x foo')
x.name = "James Dean";
console.log( x );
console.log( x.length );

x.foo();
console.log( x["name"] );

I hope you are trying this out on-hands with me. You will get an x that looks like this:

Are you able to guess what's happening? The array length still remains as 5 but all other attributes are present just like in an Object. If you open up the __proto__ of x you will see Array, open it up one more hierarchy and you see Object. This is Prototype Chaining.

Since, only whole number indices are supported by the Array data structure, the rest of the keys are simply treated as key-value pairs of an Object.

You can simply invoke foo using x.foo() or access the name attribute using one of the two ways of accessing a JSON Object:

x.name
x["name"]

So what's with the negative indices?

They are also just a key-value pair like name. Where the object x has
x["-1"] attribute value. It is only an illusion of negative index where as it's only a part of the x object and not the Array.

And there's your answer!!! 🦄

But before I end, I want you to try a couple more things and see what x looks like and what happens to the length:

x[5] = 90;
x[8] = 100;
//NOTE: We skipped index 6 and 7 altogether.
//What happens to the length?

console.log( x.length ); //9
console.log( x );

When you skip the whole number indices (the legit indices of an array), JS just creates EMPTY spaces- an array index holding undefined data type. But the space gets reserved as a part of the array. And that's why the length increases to the maximum index. This is what it looks like:

AMAZING!!! Isn't it?

I absolutely adore JavaScript for it's Willy Wonka ways with data types and data structures. I have laughed out loud at some problems, I have pulled my brains out at others. But nevertheless, I hope this language never dies. Frameworks may come and frameworks may go, I hope Vanilla JS goes on forever.

I do hope you had fun trying out some examples from above. And I also hope, I atleast inspired a handful of you to open up your computers and get scripting! Do let me know if I went wrong somewhere or what you think about the article. Your response inspires me to write more! 🧐

Find the previous article of this series here.
See you soon! 👋

Little shenanigans of JavaScript

Saloni Yadav — Fri, 08 May 2020 17:33:38 +0000

Even after working with JavaScript for over three years now, it never fails to surprise me with its little tricks and sly outputs. But these very secrets and surprises makes me fall in love with this language, all over again. Everytime!🤩

Some people don't find these shenanigans hindering their practical work. But believe me, I avoided a production bug (which would have made my fancy looking UI go berserk) by serendipitously testing a sample dataset that unveiled yet another sly trick of JS arithmetic.

And so, finally, I decided to compile a few such tricks here in this post. Hope you have fun discovering something new.

1. Adding float numbers

console.log(0.1 + 0.2)
console.log(0.1 + 0.2 - 0.2)
console.log(0.1 + 0.7)
console.log(0.2 + 0.7)

Run the above code in your developer console and be like WTF!! How can you mess up something as simple as this JS??

If you are too lazy to check for yourself, this is what the output looks like:

0.30000000000000004
0.10000000000000003
0.7999999999999999
0.8999999999999999

The reason behind this behavior is the accuracy with which JS stores float values.

I was working on a report visualization project where I had to display the total bounced email percentage by adding up soft-bounce and hard-bounce. Since this was to be displayed in a compact UI, displaying 0.30000000000000004% instead of 0.3% would make my page go insane (much to the amusement of the user). Fortunately, I realised it as soon as I tested it and fixed it.

So, how do we fix this?

let a = +(0.1 + 0.2).toFixed(1)
let b = +(0.1 + 0.7).toFixed(2)

Explanation:
toFixed(num) converts the float to string with precision of num after decimal point. The unary operator converts the string back to number. If you are using this to display somewhere in your UI, you are pretty much done after 'toFixed'. If you are going to use it for further calculations, go ahead and convert it to number.

But note:
"0.30" in string when converted to number becomes 0.3. So, don't be surprised.

2. Silent conversions

I don't see why someone would write a code like this, but let's assume you somehow landed with these set of numbers (say from an API call response) and are performing an operation as below:

console.log(022 === 018) //true
console.log(023 === 019) //true
console.log(010 === 008) //true
//if i keep going on, you will soon see the pattern

Common, don't be lazy and give this a shot in your console. The best way to learn JS is to befriend that F12 of your browser.
Most of you would have guessed what's happening here. But let me lay it down for you either way...
When JS sees 0 in the start of a number, it converts it to Octa. That explains 022, 023, 010 (you can experiment more). But wait! 8 and 9 are not valid numbers of the Octa Number System. Well, that's why they are converted to Decimal.
And this explains 022 (18 in Decimal) even strictly matches with 018.

3. Let's get Quirk-ier

There is no real-world example of this crazy expression, but I loved it so much that I decided to pop it in anyways. I came across this in WTF-JS (quite apt!).

console.log((!+[]+[]+![]).length)
// 9

Yes, the answer is 9! Whaaaaa 🤐
There was no way I was going to give up without finding out why! After a gazillion unsatisfying hypothesis, I finally made one that I am quite sure of, and here it is...

But before scrolling down for the solution, I urge you to try figuring out for yourself. Believe me, it's Merlin's Beard Satisfying!

Explanation:
First let's see what are we finding the length of, at first place?

console.log(!+[]+[]+![])
// Ans: "truefalse"
//HOLY CHRIST!!!!

How on earth did JS do this??
Let's chop it down to three parts:
(!+[]) + ([]) + (![])

! alone is really nothing in JS. God knows why it took me so long to figure out... And soooo,
+[] works as a unary operator on an empty object, which basically converts [] into Number.
Since [] is an empty array, its numeric value is 0.
So this is equivalent to !0 == true (because Boolean of 0 is TRUE).
[] is an empty array. Adding this with a boolean true converts both of them to string. So the stringified value of [] is an empty string "". Hence, so far we have "true".
Now, the last one might be get a little tricky considering the first one in picture and if you are not aware of falsy values in JS.

Here, ![] is not the same as !0.
This time [] is NOT converted to number, but directly applied to Boolean(![]) which is FALSE.
There are only 8 falsy values in JS, find them here.

So all-in-all, this expression is equivalent to:

"true"+false
//"truefalse"

We know here on. string + boolean = string. So the result is "truefalse". And the length of it is 9.

DAMN! This felt GOOD! 🤸‍♂️

I will end the list for now. But I have way too many such examples. If you liked it, let me know and I will make this into a series. Also, if you have such examples which got you like- Whaaaaaa 👀 , do share it in comment section.

Re-introducing JavaScript Objects using Object constructor

Saloni Yadav — Tue, 05 May 2020 14:06:05 +0000

If you have been with me since the last two posts, first of all, thank you for coming back! And second, the contents of this post is a learning curve for me as well. So there are a few questions that I am still seeking answers to, see if you can help me out.

Let's begin...

In the previous post, we had discussed Constructor Function way of creating objects and I had left you wondering about memory optimization using Prototypes.

But before we get into the vast concept of prototypes, I want to discuss two more ways of creating objects-
1- Using Object Constructor
2- Using Object.create(..) function (This one has a little surprise in it.🎁)

So without further ado, let's dive in:

Using Object Constructor

JavaScript offers a class called Object, and every object we create, no matter which way, is an instance of this class. And so, we can simply call this class constructor to create an instance of it-

var person3 = new Object({
    name: 'Maria',
    greeting: function() {
        console.log('Hola! Mi nombre es ' + this.name + '.');
    }
});

We basically pass the JSON into the Object Constructor to get an object instance.

If you working on-hands with the above examples (including the one in #1 using Object Literals), you will be wondering WHAT IS THE DIFFERENCE? As far as Object properties and prototypes are concerned, there is absolutely NO difference. And if you are a beginner, let's have it this way.

Note (NOT for beginners)-
Well, after much Googling, I am still boggled as to what indeed is the difference between creating using Object Literal and Object Constructor! May be "nothing" is answer. May be not. I have my suspicions on memory usage. Since, an object is allocated space in HEAP instead of the CALL STACK (in case primitives), I am not really sure of how these two ways are different. If you have any idea, do comment below or DM me.

Let's see what our developer console shows for the two cases:

Using Object Literal
Using Object Constructor

Using Object.create function

Before we move on to compare all the ways of creating objects and which way do we go about for different scenarios, we have one last way of creating an object, which I personally find the most exciting one! (Told you, there is a 🎁)...

If you refer the Mozilla developer docs, you will see a plethora of methods housed by this Object Class. One of which is .create(...). Let's see how to use it.

We created person3 in the above example. Here, we pass this object reference to create a new object.

var person4 = new Object.create(person3);
//try calling the greeting function in person3
//to check if person4 actually got created. 
person4.greeting();
//What output do you see?

The above functioned well, did it not?
Well, you will be surprised when you call console.log(person4). What do you see!
An EMPTY OBJECT! What! 😨
Again, try person4.greeting(). Works fine!

Then where on earth is this function getting called from?

The secret lies in its prototype.
Now open __proto__. What do you see?

The reason for this behavior is clearly mentioned in the mozilla docs I referred you to earlier. Let me lay it for you:

"What we pass is the object that should be the prototype of the newly-created object."

And so, the person4 is actually an empty object with a reference to person3 in its prototype. This leads us to the next important concept in JS- Prototype Chain and Inheritance. Also, this queer behavior makes a great source of many JS Interview questions (which I will share towards the end).

But before we move on, let's play around with this object a bit-

Try these out:
1- We know that person4 is an empty object. But try person4.name. What do you see? Where is this value coming from?
2- Now run person4.name = "Maria Junior". And see what the object holds using console.log(person4).
3- Run person4.greeting() and what do you see? Since this function was not in the object when we printed it earlier, where is it getting fetched from? And what is it printing?
4- Now try person4.__proto__.greeting(). Can you explain the result?

Try this actual interview question!

What will be the output? (Answer without running the code)

var muffin_order_1 = new Object({
    name: 'muffin',
    quantity: 10, 
    delivery: function () {
        console.log('Days to deliver: ' + this.quantity*2);
    }
});

muffin_order_1.delivery();

var muffin_order_2 = Object.create(muffin_order_1);

delete muffin_order_2.quantity;

muffin_order_2.delivery();

By now you should have an abstract idea about what are prototypes and what are we aiming for with them. Nevertheless, I will formalize them for you in the future posts. Meanwhile...

You have made it so far! You deserve a 🍰. Go ahead, take a break!

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Re-introducing JavaScript Objects using Constructor Function

Saloni Yadav — Mon, 04 May 2020 12:34:07 +0000

Previously we had seen JavaScript's Object Literal method of creating an object. In this post, we will explore how to create an object using the Constructor Function. Yes, that's right. You can create an object using a function!

For those of you familiar with Classes and instantiating an object from a class, this concept is very similar.

Then why don't we just create a class??
Surprisingly, classes were introduced in JS only with ES6 (ECMAScript2015), which is quite recent. Sigh! Until then, Constructor Function was our savior. (Don't worry if you don't know what I am talking about.)

Having said that, let's dive in:

We will use the same object format we used in #1 post for our example. Here it is,



function Person(thename) {
    this.name = thename; 
    this.greeting = function() {
        console.log('Hola! Mi nombre es ' + this.name + '.');
    }
}

PS. I have dropped the age and country attributes just to keep it simple.

This creates a function "object" with a namespace Person, within which there are two attributes called name (of string type) and greeting (of function type).
Internally, JS converts this code into an Immediately-Invoked Function Expression and allocates a variable Person of type - function object. We will learn about IIFE later, let's keep it simple for now.

Note- The CAPITAL 'P' used while declaring 'Person' is nothing but a common naming convention for anything that resembles a Class. If you are using any modern code editor like VSCode with ES6 JS version, you will notice a warning like:
"This constructor function may be converted to a class declaration."

Remember, we haven't created an object yet. We have only defined what the object should look like. Now, to create an object, simply call the function like a constructor:

person1 = new Person('Sanchez');

This creates a new object called person1. Go ahead and print person1 in your console using console.log(person1) and dissect it. Open it until you have reached trivia. You will see something like this (and a lot more):



/**
 * {
 *  name: 'Sanchez',
 *  greeting: f (), --> no name to the function - anonymous function
 *  __proto__: {
 *      constructor: f Person(thename), --> name of the function "Person"
 *      __proto__: Object
 *  }
 * }
 */

What is actually happening here?

We can break it down to three steps:

new creates a new empty object and assigns it to this -> this = {}
The function then runs and adds new key-value pairs to this object -> this.name = thename and this.greeting = function() {...}
Finally, the value of this is returned and assigned to person1 -> person1 = function () {... return this; }

Note- In this case, your constructor function should NOT have any return statement. JS won't stop you from adding one. If you do, that return statement will be executed and the corresponding object will be returned instead of this and the instantiation will work differently than you anticipate. So be careful!

But what is this ugly wormy thing that creeped into your object called __proto__!! This is JavaScript's Object Prototypes. It's an amazing and equally important concept for us to master Objects in JS. We will get to them soon!
For now, stash them in your memory palace.

When do we use Constructor Functions?

Take a scenario where you just know you are going to have Objects of 'Person' type, but don't know HOW MANY. Here, it is simply convenient to call var newguy = new Person('His Name') everytime you encounter a need for new object, instead of creating them using the verbose method of Object Literal.

But this can't be all so perfect, can it?

Think about this...
Everytime you create a new object from Person, a new variable is getting assigned in the memory with an object reference. And EVERY object contains a function called greeting which is essentially doing the same thing in all the objects. If you have 10 such object, 50... 100... How many times do we define the same function for every object!!

We have solution to this extravagant waste of space. 🎶🎵 #SuspenseMusic ...
Prototypes.
Whaaaaaa.... 😱
Anyways, let's not overload ourselves. If you have made it this far, treat yourself with some 🍦. Take a break. Then move on to #3.

PS: Before you move on to the next chapter. I would suggest you play around with this a bit. Create new functions. Instantiate new objects. Open them up. Open what's openable inside of them. Keep going. I promise, it's fun! Comment here some interesting things you see.

Also, I will soon add some JS Interview kind of questions to help you grasp the usage of these concepts soon. Hang in there!

Reference:
https://javascript.info/constructor-new#constructor-function
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS

Re-introducing JavaScript Objects using Object Literals

Saloni Yadav — Mon, 04 May 2020 08:02:59 +0000

The number of ways one can create Objects in JavaScript can be quite overwhelming. JavaScript is a unique language where almost EVERYTHING is an Object. It is not an exaggeration when I say, even Functions in JavaScript are Objects. This article is a detailed re-introduction to Objects, to refresh one's basics if already familiar, or introduce the newbies to Object Oriented Programming in JS.

Having said that, let's dive in:

What is an object?

Simply put, it's a group of anything! Usually, a group of some related data and functionalities put together make an object. There is nothing more or less to it. So I will not get into the bookish definitions.

For example, details about a person can be represented as an object:
Name
Age
Country

In JS we have a particular way of representing this object- Curly Braces with key-value pairs! It's nothing but JavaScript's Object Notation or JSON. (Oh! I have heard this!)

var person0 = {
    name: 'Juan',
    age: 25,
    country: 'Mexico'
};

And there you have your first object. 😊
But remember I told you, some data and functions. So let's add a function:

var person0 = {
    name: 'Juan',
    age: 25,
    country: 'Mexico',
    greeting: function() {
        console.log('Hola! Mi nombre es Juan');
    }
};

Eazy-Peezy!

Wondering why are you able to add a function inside an object? Well, remember even Functions in JS is an Object! So this is simply a nested object. An object inside an object.

What happens when you call person0.greeting()? You guessed it right, "Hola! Mi nombre es Juan"

This way of declaring an object in JS is called Object Literal.

But, what happens if you change person0's name?
i.e. person0.name = 'Maria';
Then, calling person0.greeting() still prints "Hola! Mi nombre es Juan".

Let's fix this. Instead of hard-coding "Juan", we simply fetch the current 'name' in the object-

var person0 = {
    name: 'Juan',
    age: 25,
    country: 'Mexico',
    greeting: function() {
        console.log('Hola! Mi nombre es ' + this.name);
    }
};

this holds the current scope where the function is called, which in our case in person0. Now, if you change person0's name in future, the greeting() function will update its output accordingly.

Unfortunately, the concept of scope is 'out of scope' of this article. Pun Intended! 😂 I promise to cover it later.

You have done well 🤗. Take a break. Digest this. Then move on to #2.

Reference:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics