Advanced JavaScript Backend Basics

Getting Started with JavaScript Backend Basics The following article is a continuation to my previous article. In this article, we will dive deep into some of the advanced JavaScript concepts that are being used widely in the industry.

“==” vs “===”

• The “==” coerces the types of the input that is it forces the variable to be the same and then checks their equality.
• The “===” actually requires equivalent types to give a true output. Basically, the “===” is more widely used and the “==” should only be used when we really know the type equivalence of the inputs. Below is the table that clearly defines for what values they both will send TRUE or FALSE.

Note: My suggestion would be to always use “===” unless you really know what you are doing.

JavaScript false values

The following values when converted into boolean are treated as FALSE values:

• 0 – The number zero is always false
• undefined – Any value if primitively undefined is treated as false.
• null – Primitive null values are always false
• +0 , -0 , NaN(not a number) – positive/negative zero or a value which is Not a number is considered false.

JavaScript Truth Values

The following values when converted into boolean are treated as TRUE values:

• { } – The empty object
• [ ] – The empty array
• Everything else that is not false is TRUE.

Prototypical inheritance

We know that everything in JavaScript is an object except the primitive types so we require a way to differentiate between objects and the other data types. Here comes the concept of prototypical inheritance.

• The Non Primitive types (Objects) have a few properties/methods associated with them. Example:- Array.prototype.push() String.prototype.toUpperCase()
• Each object stores a reference to its prototype and then maybe its prototype also has its prototype that is prototype chaining might be possible.
• The prototype/ properties/ methods defined most tightly to the instance have priority.

Example: 

javascript

let arr = [];
arr.test = 'test'; // making a property called test
Array.prototype.test = 'test1' // making a prototype test on the array object

Now if we print “arr.test” on our console.

 Output :

test

The reason is that test is tightly bound first to the array instance and has priority even though we defined a prototype “test1” later.

Prototype Chain

NULL<—Object<—Array<—Instances of Array The above represents an example of prototype chain followed in case of objects. Like prototype of all instances of array is the object array, the prototype of array object is Object and since in JavaScript everything is an Object and hence its prototype is NULL. Some methods or prototypes has a method ‘writable’ which is set to false i.e. they can’t be overwritten. Example: 

javascript

let arr = [1, 2, 3];
arr.length = 'test'; //length is also an actual property of array and not writable

The above program gives no error but when we print arr.length, the output is “3” which is the actual property and not what we created. Note:- We know that primitive types have no methods associated with them but most primitive types have object wrappers which we can declare and then we can use those methods and properties. JavaScript will box or wrap the primitive values so that you can have access to the methods which the non primitive types use. The following list defines the different wrappers in JavaScript:

• String()
• Boolean()
• Number()
• Object()
• Symbol()

Note: Please make sure you see the difference between these and the primitive types that in the above wrappers, all the first characters of the name of the wrapper is capitalized. Example:- The above line errors since 50 is a primitive type that is a ‘number’ and has no methods. But in the below example,

The JavaScript engine wraps the primitive type ‘x’ by assuming the Number() object wrapper. So now since it wraps the ‘x’ into Number() prototype which is an object and now we can use the functions that were not accessible to us.

The Global Object

All the variables and functions are actually parameters and methods defined on the global object. For a browser, the global object is the ‘window’ object. For NodeJS, the global object is called ‘global’ itself. Below is an image of both the global objects on the browser and nodeJS engine. The list shows all the browser global object ‘window’ functions defined which can be used by JavaScript. The list shows all the nodeJS global object ‘global’ functions defined which can be used by JavaScript.

Execution context

• This is equivalent to a “Stack Frame” in C.
• Wrapper of variables and functions are local to a function creation.
• Collection of execution contexts is known as execution stack.

Lexical Environment

• It determines how variable names are resolved especially with nested functions.
• Child functions contain the scope of the parent function even if the parent has returned. (This part will be covered later in the topic “closures”)

Example:- 

javascript

let x = 50;
function test() {
      var x = 42;
      function printvaluex(){
             console.log(x);
     }
}

The child function is in scope of test even though there is a global ‘x’ present. This is due to the fact that the lexical environment of the child function is in a closure to its parent and not to the global value ‘x’.