Key Concepts in JavaScript
What is JavaScript ??
JavaScript is a programming language that conforms to ECMAScript specifications. It is one of the main programming langue used all around the world. By default, JavaScript programs run using a Single Thread. Though there are ways to create new threads, JavaScript is considered a Single-Threaded language. JavaScript does not wait for I/O operations to get completed; instead, it continues the execution of the program. This is called a Non-Blocking I/O. If it waits for I/O operations to get completed, JavaScript won’t perform well. JavaScript is asynchronous because of this NIO. Apart from that, it is a Dynamic, Weakly-Typed, and Multi-Paradigm Language as it supports OOP as well as functional programming. JavaScript has an eventing system that manages its asynchronous operations.
Variable Scoping
JavaScript has three types of variable scoping as var, let, and const. The main difference between them is var is globally scoped or functional scoped while let and const are block-scoped.
var
- Variables can be redeclared in the same block or scope.
- Variables declared with var keyword can be hoisted.
let
- Variables can not be redeclared in the same block or scope.
- Variables declared with the let keyword can not be hoisted.
- Can not access by the window object.
const
- Same as let can’t be redeclared in same block or scope and can not be accessed by the window object.
- Variables declared with as const have to assign value instantly and can not reassign other values to them later.
- If the const variable is an object or an array, we can add new array elements and object property values and update those values.
Data Types
JavaScript is a dynamically typed language as the same variable use to hold different data types. Numbers, Strings, Booleans, Arrays, and Objects are the main data types of JavaScript.
JavaScript Objects
JavaScript objects are written with curly braces ( { } ). Object consists of property name and value pairs separated by a colon ( : ) as shown above. Object property can be accessed by dot notation ( . ) as obj.propertyName. In the new version of ECMAScript, if the variable we use to represent the property name and value is the same, we can represent them using a single variable as shown below. To avoid any changes that might happen to a JavaScript object as it travels through the program, we can use the freeze() method so that no one can modify that object. But freeze() method only work on first level values inside the object. If the object has another nested object, it will be subjected to changes. Dynamic Properties inside objects will be helpful in places where when we do not know the key at execution time. Therefore, we can have a placeholder for the object key as below.
JavaScript Functions
There are two types of functions in JavaScript as Function Declaration and Function Expressions. Variable declaration and function declaration are hoisted but not functions defined as expression. Function Expression can be self-invoked but not function declarations. Apart from that, we have another type of function called Arrow Functions. Arrow functions do not represent the caller of the function, which means it can not represent this keyword inside it.
JavaScript Closure
JavaScript Closure is a function that returns another function. In JavaScript, closure is used to encapsulate variables into a function and restrict access to it from the outside. JavaScript creates an environment with all the local variables from the outer function when the inner function is created. Therefore closure is a function that has access to parent scopes even after the parent function closes.
Strict Mode and ‘this’ Keyword
Unlikely other languages in JavaScript, this keyword acts differently. Inside an object, this refers to the object itself. In a global context, this keyword refers to the global object (in the browser, it is the window object). This behavior will get changed in strict mode. If a function that is using this keyword is being passed to another object, then this will refer to that object, but not to the original object where the function was declared in the first place. This behavior is very noticeable in callbacks and closures.
Strict Mode is the restricted version of JavaScript. The purpose is to make it easier to write secure JavaScript. Strict mode makes bad practices in JavaScript to errors. Keep developers away from using syntaxes that will get invalidate with future JavaScript developments. For example, it does not allow creating variables without the var keyword (Variable have to be declared). Another example would be it will stop referring to the window object as this from outside object instances.
Constructor Functions and Classes
In JavaScript, a constructor function is used with the new key keyword when creating an Object. The constructor function is just another function. When the function is used with the new keyword, that function acts as a Class. The newer version of JavaScript introduced the class keyword, and now it is adopted by the majority of JavaScript engines. Another way of creating an object is using object literals ({ }), as shown above. These objects are considered to be a singleton. JavaScript also supports static methods and variables. When the new keyword is used, a new object is created, and it is assigned as this for the duration of the call to the constructor functions.
Prototypes
When we are creating objects using Constructor Functions, those functional classes have access to an object called Prototype. This object is conceptually similar to Java Object Class. The prototype is used to add methods and properties to constructor functions and to implement inheritance between functional classes. Only functional classes (like Person) have access to Prototype, not the objects (like p1).
Constructor Functions
A function that is being used to create an object, as shown above, is called the Constructor Function. We can implement inheritance between two functional classes as below.
Class Syntax
We can implement the above scenario using the Class syntax, which is introduced in ES6. In the early days, it is not supported by many browsers. But now, the majority of browsers support Class syntax.
Callback and Promises
- JavaScript is asynchronous. All I/O operations in JavaScript are implemented to be asynchronous by nature.
- Since JavaScript is a single-threaded language, if an I/O operation holds the thread till it gets completed, JavaScript won’t perform well as a programming language.
- But asynchronous operation introduces difficulty when we need to do synchronous processing using data.
- We use Callbacks and Promises to solve this problem.
- The callback is a function that is, being passed to an async task, and on completion, the function will be executed.
- A promise is an object that is being returned from async tasks. Promise has properties to deal with async operations synchronously.
Important point
🔸 To do intensive synchronous processing using data, sometimes we have to pass a lot of nested callbacks to a sequence of an asynchronous task; this is called Callback Hell. To solve this problem, we use promise objects. Promise objects have properties and methods to handle complex nested callbacks nicely.
We will talk more details about callbacks and promises in a separate article like situations where we use them, different kinds of promise methods and when it is best to use promises over callbacks function, and so on. If you are working with JavaScript frameworks, it is important to have a better understanding of the above concepts. For example, if you are working with React, Node, or Angular, it is important to master the above concepts well.
References
For further more clarification check these resources;
