Prerequisites:

Basic understanding of TypeScript.

What is Webpack?


React 17 was focused on improving the fundamentals but there are few important things that got added in React 18. In this article, we will go through some of the latest updates on how to get started with the cool new features in react 18 alpha.

Install React 18 alpha : npm install react@alpha react-dom@alpha

Here is the list of few updates.

  1. New Root API
  2. Suspense
  3. SuspenseList
  4. useDeferredValue
  5. Automatic Batching

New Root API

Earlier in our reactDOM.render method, we use to pass our App component, then document.getElementById and our root element. …


What is a Decorator?

A decorator is simply a way of wrapping a function with another function to extend its existing capabilities. You “decorate” your existing code by wrapping it with another piece of code. This concept will not be new to those who are familiar with functional composition or higher-order functions.

With the introduction of Classes in TypeScript and ES6, there now exist certain scenarios that require additional features to support annotating or modifying classes and class members. Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.

Why Use a Decorator?

Decorators allow you to write cleaner code and…


Prerequisites:

Basic understanding of Typescript.

What are Generics/ Generic Types?

→ Generics pass some extra information that TypeScript fails to infer (i.e. guess). They allow you to continue working with data in TypeScript optimal way.

→ A generic is a type followed by another type.

For example, there is a variable of type array. Now array can hold data of any type i.e. string, number, etc.

→ It specifies the TS which type of data type it will hold, we can use it.

TRICK: Anything type written inside <> is generics.

A. Some built-in Generics:

  1. Array: If we know the array will hold a specific type (say string).

Here array…


What is a singleton?

Singleton is, at its core, a design pattern that restricts the instantiation of a class to one object. Usually, the goal is to manage the global application state. Some examples using a singleton as the source of config settings for a web app, on the client-side for anything initiated with an API key (you usually don’t want to risk sending multiple analytics tracking calls, for example), and to store data in memory in a client-side web application (e.g. stores in Flux).

A singleton should be immutable by the consuming code, and there should be no danger of instantiating more than…


A. Basics:

  1. Proxy API helps in meta programming like Reflect API or Symbols.
  2. Meta-programming means that you’re able to change (parts of) the behaviour of the underlying language — JavaScript in this case. This of course is a powerful feature as it allows you to influence the way your code is executed.
  3. Suppose there is an object with some properties in it. A source code wants to access it

— in regular case directly access


Why ES6 — Reflect API is important? Let us understand it.

What is the Reflect API?

The Reflect API could be described as a collection or “central place” which houses all kind of object and function related functions (for creation, property management etc.). Some of the functionalities added on the Reflect object where available before on the Object object.

Some points to note:

  1. Reflect API deals with Meta programming.

Metaprogramming…


In JavaScript, developers often spend a lot of time deciding the correct data structure to use.This is because choosing the correct data structure can make it easier to manipulate that data later on, saving time.

We as developers generally use objects or array to store data. With ES6, there are two more ways to save data — Maps and Sets

1. Map

A Map is a key-value collection introduced in ES6. It kind of fills the gap between arrays (no key-value pairs) and objects (key-value pairs but much more complex than a simple collection).

  1. The Map object holds key-value pairs and remembers…


No matter how great we are at programming, sometimes our scripts have errors. They may occur because of our mistakes, an unexpected user input, an erroneous server response, and for a thousand other reasons.But there’s a syntax construct try..catch that allows us to “catch” errors so the script can, instead of dying, do something more reasonable.

eg1

lalala;     
// Error msg:ReferenceError: lalala is not defined - code dies here
// my next codes.
console.log('initiating a service'); // this code will break

with try-catch

try {lalala;} catch(err) {console.log(err.stack);   // this will throw in console}console.log('next codes'); //…

Comparison between prototypal inheritance and classical inheritance on multiple parameters. Is classical inheritance obsolete. How does JavaScript inherit objects. Battle between Java and JavaScript.

These questions have always bothered me. What is the difference between prototypal and classical inheritance? Is prototypal inheritance better than classical? If yes, then why?

Being a JavaScript enthusiast, my answer has always been biased towards prototypal inheritance. Then I did more research on it. And it turns out I was right.

Let’s understand those differences and reasons which makes prototypal inheritance better than classical.

First things first.

What is Prototypal and Classical inheritance?

Simply put…

Amir Mustafa

Web Artisan. Human — Engineering

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store