DEV Community: Souvik Jana

Go offline with Service Worker

Souvik Jana — Mon, 17 Jul 2023 10:28:19 +0000

The only motivation I had behind learning service workers was to access an app offline, so we'll know and understand how to do that using a simple demo project.

Here're a few things we'll cover as part of this blog:

What is a Service Worker?
How to add a service worker?
Lifecycle of a service worker
Different caching strategies
Some slight UX improvements using a service worker

What is a Service Worker?

A JavaScript asset that acts as a proxy between browser and server. If we’ve any service worker installed, all requests go through the service worker before going to the web. It sits in the browser between the app and the rest of the internet.

Service workers run on their own thread and give access to the Cache API which could be used to implement precaching or runtime caching based on the requirements.

Since the service worker gets installed in the browser, the question might arise: how to check if there's any service worker already installed for any app currently running in my browser?

Press command + option + I if you're on Chrome and using Mac or, right click on the page, go to inspect to open dev tools, go to Application tab, under Application tab, there's a section called Service Workers where we can see if the service worker is already registered and running for any particular application.

Here we have a few things to notice in the above screenshot, this shows the followings:

Application URL: https://sjsouvik.netlify.app/
Source: it shows the service worker file name which we can click and check the source code of the service worker as I mentioned in its definition that this is nothing but a JS file.
Status: It shows the current lifecycle phase of the service worker, we'll understand more about this shortly.

There's also a checkbox called Offline which we would be using later to go offline and test our demo app.

How to add a service worker?

I have created a demo project using plain HTML, CSS, and JS so that we can have a better understanding, you can find the source code here. We'll add an external JS script to register a service worker.



// inside index.js file
/* to check whether service worker is supported or not in the browser and then register it accordingly */
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    initServiceWorker();
  });
}

function initServiceWorker() {
  navigator.serviceWorker
    .register("sw.js")
    .then(() => console.log("Service worker is registered successfully"))
    .catch((error) =>
      console.error(`failed to register service worker, error: ${error}`)
    );
}

Service workers are terminated when not being used for some time(40 seconds or so) and enabled again on the next network request.

Visit chrome://serviceworker-internals to see all the installed service workers and observe the scope, running status, the script for the service worker, etc. for one of the installed service workers.

The life cycle of a service worker:

Once the Service Worker is registered successfully, it goes through the following phases:

Install:

This is an event that gets triggered once the service worker is registered. During this phase, we can also cache all the resources of the app which is also known as precaching.



// inside sw.js file

const version = 3;
const cacheName = `portfolio-v${version}`;

const cacheAssets = [
  "index.html",
  "projects.html",
  "blogs.html",
  "styles.css",
  "index.js",
  "blogs/things-i-wish-someone-told-me-during-my-college-days.html",
  "images/hero.svg",
  "images/heroProject.svg",
  "images/heroBlog.svg",
  "images/heroBlogCollege.svg",
];

self.addEventListener("install", (event) => {
  console.log("Service worker is installed");

  /* caching all the assets during install event, this is also known as precaching */

  /* caches.open(cacheName) - this will create a new entry in the cache storage with the given cache name */

  event.waitUntil(
    caches
      .open(cacheName)
      .then((cache) => {
        console.log("Caching assets");
        cache.addAll(cacheAssets);
      })
      .then(() => self.skipWaiting())
  );
});

While the service worker is performing some operation, the browser might shut down the service worker, to avoid that we can use event.waitUntil() method to tell the browser to wait while it’s doing some operation during the install/activate phase.

Wait:

Whenever we do any changes(adding a new character, uncommenting some code, etc.) in our service worker file, the browser loads the updated service worker and it goes through its lifecycle(install, wait, activate). Once the service worker is installed, it goes to the waiting phase. To skip the waiting phase and directly activate the updated service worker, we can use skipWaiting method in the install event handler.



// inside sw.js file

self.addEventListener("install", (event) => {
  console.log("Service worker is installed");

  /* to skip waiting phase, so that any new service worker don't wait for the other service worker to get destroyed and moves to the activate phase once it's installed */
  self.skipWaiting();
});

Activate:

When the service worker is installed and the waiting phase is completed or skipped, it gets into the activate phase, and the old service worker gets removed. This is also an event just like install where we can delete the old caches.



// inside sw.js file

self.addEventListener("activate", (event) => {
  console.log("Service worker is activated");

  // removes the old caches
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return cacheNames.map((cache) => {
        if (cache !== cacheName) {
          console.log("Clearing old caches");
          caches.delete(cache);
        }
      });
    })
  );
});

Now, if you're curious to know where we can check after caching some resources or removing some old caches - open chrome dev tools, visit the application tab and there we have Cache Storage, refer to the image below:

We can check the cache storage for the cached assets, and access, and delete them if required.

As of now, we have registered a service worker, and added different events to cache app resources(using precaching), let's see how to serve the cached resources in case we're offline and trying to access the app.



// inside sw.js file

self.addEventListener("fetch", (event) => {
  console.log("Fetching via Service worker");
  event.respondWith(
    fetch(event.request).catch(() => caches.match(event.request))
  );
});

We use the fetch event of the service worker to intercept the network request and serve the resources from the cache in case it fails to access them over the actual network.

This is how the service worker file would look after all the implementations so far.



// inside sw.js file

const version = 1;
const cacheName = `portfolio-v${version}`;

const cacheAssets = [
  "index.html",
  "projects.html",
  "blogs.html",
  "styles.css",
  "index.js",
  "blogs/things-i-wish-someone-told-me-during-my-college-days.html",
  "images/hero.svg",
  "images/heroProject.svg",
  "images/heroBlog.svg",
  "images/heroBlogCollege.svg",
];

self.addEventListener("install", (event) => {
  console.log("Service worker is installed");

/* caching all the assets during install event, this is also known as precaching */
  event.waitUntil(
    caches
      .open(cacheName)
      .then((cache) => {
        console.log("Caching assets");
        cache.addAll(cacheAssets);
      })
      .then(() => self.skipWaiting())
  );
});

self.addEventListener("activate", (event) => {
  console.log("Service worker is activated");

  // removes old caches
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return cacheNames.map((cache) => {
        if (cache !== cacheName) {
          console.log("Clearing old caches");
          caches.delete(cache);
        }
      });
    })
  );
});

self.addEventListener("fetch", (event) => {
  console.log("Fetching via Service worker");
  event.respondWith(
    fetch(event.request).catch(() => caches.match(event.request))
  );
});

We can also cache at the runtime once the resources are fetched for the first time which is also known as runtime caching. But, using this strategy, users can only access the already visited pages of the app while it's offline.



self.addEventListener("fetch", (event) => {
  console.log("Fetching via Service worker");

/* caching all the assets while fetching for the 1st time during user's navigation from one page to the other, not during install event, this is known as runtime caching */
  event.respondWith(
    fetch(event.request)
      .then((res) => {
        const clonedResponse = res.clone();

/* The open() method of the CacheStorage interface returns a Promise that resolves to the Cache object matching the cacheName. If the specified Cache does not exist, a new cache is created with that cacheName and a Promise that resolves to this new Cache object is returned */
        caches
          .open(cacheName)
          .then((cache) => cache.put(event.request, clonedResponse));

        return res;
      })
      .catch(() => caches.match(event.request))
  );
});

That's all about caching assets using service workers and now we can access our app offline 🎉.

Please visit this URL to find the hosted app and test it offline using the offline checkbox(if you remember we talked about it earlier in the context of testing the app offline) that we saw in the Application tab under Service Worker section.

Note: Currently, runtime caching is enabled in the app, so you would be able to access the already visited pages only.

Cache serving strategies:

Since the caching part is done, let's explore different strategies that we can follow to serve the cached resources.

Cache first:

As the name says, we try to access the required resource from the cache first, if that fails then fetch it over the actual network.



self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches
      .open(cacheName)
      .then((cache) => cache.match(event.request))
      .catch(() => fetch(event.request))
  );
});

Network first:

Go to the network first to get the resource, if that fails then try to access it from the cache.



self.addEventListener("fetch", (event) => {
  event.respondWith(
    fetch(event.request).catch(() =>
      caches.open(cacheName).then((cache) => cache.match(event.request))
    )
  );
});

Stale-while-revalidate:

This is the complex one where we try to access the asset from the cache which would fail obviously if we're requesting an asset for the 1st time, in that case, fetch it over the network, keep it in the cache, and return the network response. On the subsequent requests, serve the asset from the cache, still make a network call to fetch the asset and update its entry in the cache.

In this way, we make sure, we always have the latest version of an asset in the cache.



self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.open(cacheName).then((cache) => {
      cache.match(event.request).then((cachedResponse) => {
        const fetchedResponse = fetch(event.request).then((networkResponse) => {
          cache
            .open(cacheName)
            .then((cache) => cache.put(event.request, networkResponse.clone()));
          return networkResponse;
        });

        return cachedResponse || fetchedResponse;
      });
    })
  );
});

Service worker handles requests for different files only inside the folder where it’s located. So, if we have our service worker file inside /js/sw.js folder then, it would only handle requests for any asset inside the js folder, which might create issues if we want to handle requests for all assets inside the root folder. Hence, it’s recommended to keep the service worker file inside the root folder only.

UX improvement:

One small UX improvement, we can also do with service workers is showing the connectivity status to our users whenever it goes offline or comes online.



function showConnectivityStatus() {
  let isOnline = navigator.onLine;
  const statusSec = document.getElementById("onlineStatus");

  if (!isOnline) {
    statusSec.textContent = "You're currently offline.";
  }

  window.addEventListener("online", () => {
    statusSec.textContent = "Your internet conection was restored.";
    isOnline = true;
  });

  window.addEventListener("offline", () => {
    statusSec.textContent = "You're currently offline.";
    isOnline = false;
  });
}

We can use the above function to implement that and invoke this function while registering the service worker.



if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    initServiceWorker();
    showConnectivityStatus();
  });
}

This is how it would look depending on the connectivity status:

When the app comes back online:

That's all I wanted to cover as part of this blog 😃. Thanks for reading till now 🙏.

You can find the source code of the project here.

We discussed a lot of things around plain service workers, however, there's a library called Workbox which makes our life easier to use service workers. Since service workers solve hard problems, any abstraction on top of that would also be tricky without understanding it.

It’s recommended to use Workbox instead of vanilla service worker if we’re building any mid to large-size app. Also, different modern UI libraries or frameworks CLIs like CRA, vue-cli, etc. use workbox to have offline support.

Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.

You can connect 👋 with me on GitHub, Twitter, and LinkedIn.

Rendering strategies: CSR, SSR, SSG, ISR

Souvik Jana — Sat, 04 Feb 2023 08:55:39 +0000

We have been using frontend libraries/frameworks that help to build single-page applications out of the box where the application is rendered on the client side and we all are pretty familiar with that approach.

There're a few more ways to render applications which we would be covering in this article along with a brief discussion of client-side rendering(CSR), just to see how it's different from pre-rendering.

Client-Side Rendering(CSR):

In this strategy, the server sends a barebones HTML with just an empty <div> tag, and then data fetching, generating the page with the data, routing, etc. are handled by JavaScript(JS) on the client side(browser).

Pros:

There’s no round trip to the server to fetch more pages once the initial load is completed, so the user experience becomes really good, almost like a native app experience.

Cons:

Not Search Engine Optimization(SEO) friendly as the page is client-side rendered and web crawlers understand server-side rendered pages.
Initial page load takes quite some time because most of the web page lifecycle-related tasks are handled by JS which leads to bad First Contentful Paint(FCP), and Time To Interactive(TTI) for the page. Depending on the complexity and size of the app, this increases more. This implies that the user will see almost a blank screen during the time between First Paint(FP) and FCP.

Server-Side Rendering(SSR):

Unlike CSR, in this strategy, the page would be generated on the server side with all data. So, the JS required to render the page won’t be shipped to the client and additional network requests to fetch content to render the page can also be avoided in this way.

In the case of server-rendered pages, the server sends the rendered non-interactive HTML to the client, and then the client downloads the JS bundle to hydrate or make the page interactive by adding event listeners. This process is known as hydration. Read more about hydration and its implementation here.

Pros:

Lesser JS for the client to get parsed leads to better FCP, and TTI and provides an additional budget for client-side JS.
SEO enabled as the page is now server-side rendered and crawlers can use the same to index it.

Cons:

Slow Time To First Byte(TTFB) since we need to generate the page on the server, users will see a blank page for that time 😟.
Full page reload is required for some interactions.

Implementation:

React frameworks like NextJS, Remix, Gatsby, etc. make it easier to implement SSR. We'll use NextJS to show the implementation since it supports all the rendering strategies that we'll be discussing here.

NextJS provides some functions out of the box to implement pre-rendering and getServerSideProps() is one of them to implement server-rendered pages.

import Link from "next/link";

const Home = ({ posts }) => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      {posts.map((post) => (
        <Link href={`/${post.id}`} key={post.id}>
          <Post {...post} />
        </Link>
      ))}
    </div>
  );
};

export async function getServerSideProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();

  return { props: { posts } };
}

export default Home;

getServerSideProps would be executed at run time to fetch some data from external APIs or filesystem and pass that data to the component(in the above example to Home). Finally, the page would be rendered on the server and sent back to the client.

To know which strategy is being used to generate different pages in a nextJS app, we can build the app locally and that would give the following result:

The build result shows the rendering strategy in use, generated pages during the build with the total time the pages took to be built, and other details for each page. It depicts the rendering strategy using some symbols:

ƛ(lambda for server-side rendered pages),

○(circle for static pages),

●(filled circle for static site generated pages).

In our implementation, we've used SSR to generate the home page and the build log also tells the same using ƛ beside the home(/) route.

Static Site Generation(SSG):

SSG solves all the problems introduced by CSR and SSR by generating pages of an app at build time with all the data. So, in this way, the server won’t have to render the page, and the client would also require minimal JS to make the pages interactive which leads to faster TTFB, FCP, and TTI.

Pros:

Great performance as the page would be built during build time and ready to be served immediately.
SEO friendly as the pages are pre-rendered at build time and available on a server.

Cons:

Generating a large number of HTML files during build time can be challenging and time-consuming.
Any update in data would require the app to go through the build process to generate the pages again with the latest data - which is not that great!
Not so good for highly dynamic content.

Implementation:

There're 2 methods - getStaticProps() and getStaticPaths() that can be used to render static pages. So, if we have a page, for example, to show all posts, we can use getStaticProps() only to fetch data and generate the page whereas getStaticPaths() could be used along with getStaticProps to generate a page for an individual post.

import Link from "next/link";

const Home = ({ posts }) => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      {posts.map((post) => (
        <Link href={`/${post.id}`} key={post.id}>
          <Post {...post} />
        </Link>
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();

  return { props: { posts } };
}

export default Home;

The above implementation would show all the posts on the home page. The implementation is almost similar to SSR, only the method name is different and page generation would happen during build time.

Now, to generate pages for individual posts, we can use getStaticPaths to fetch all posts and take unique IDs, so that a unique route can be generated for each post with the help of dynamic routes features provided by NextJS.

// generating list of paths/page urls of posts using unique IDs of posts
export async function getStaticPaths() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();

  const paths = posts.map((post) => ({ params: { id: `${post.id}` } }));

  return { paths, fallback: false };
}

// fetching the post details for the given id(ids would come from the result of `getStaticPaths()`) and passing it to the component
export async function getStaticProps({ params }) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  const post = await response.json();

  return { props: { post } };
}

// rendering the given post details
const PostDetails = ({ post }) => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
      }}
    >
      <Post {...post} />
    </div>
  );
};

export default PostDetails;

If you see the getStaticPaths() method in the above snippet, we have used fallback: false that means if a user tries to access a page that is not available then the 404 page would be shown.

This is what the build log of SSG implementation looks like:

As per our implementation and the build result, we can see that the home page and 100 post details pages are using SSG with build time for each.

Incremental Static Regeneration(ISR):

ISR solves the problems with SSG by generating a subset of pages at build time and the rest of the pages on demand. Also, it provides a mechanism to regenerate the pages again if there’s any update in data.

ISR is only supported by NextJS as of today which provides a property called revalidate (which takes an interval in seconds) to validate the data and trigger a page regeneration.

Does that mean that the pages are regenerated continuously at the given interval?

Nope, it regenerates a page once there's any update in data and the given interval is over after that.

Even after the given interval, the first visitor of the page will still see the page with stale data and the page would be regenerated with the latest data in the background. Once the page is generated successfully, it'll replace the old page. If the page regeneration fails for some reason, the old page remains unaltered.

Pros:

This way of rendering pages comes with almost all the benefits of SSG and it reduces the build time of an application as it avoids pre-rendering all the pages during build time.
Regenerates pages if there’s any update in data without rebuilding the whole application.

Cons:

When users visit a page, we want them to see the most up-to-date version immediately. With ISR the first visitor to a page will not see that. They will always see a fallback first or a page with old data. And then later, if the data gets stale, the first visitor to see that cached page will see the out-of-date data first before it revalidates.

Implementation:

We use the getStaticProps method only to implement ISR but use an extra property revalidate while passing the data to the component.

So, the implementation with ISR for the home page would change as follows:

import Link from "next/link";

const Home = ({ posts }) => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      {posts.map((post) => (
        <Link href={`/${post.id}`} key={post.id}>
          <Post {...post} />
        </Link>
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();

  return {
    props: {
      posts,
    },
    revalidate: 10,
  };
}

export default Home;

And the implementation with ISR for the individual posts page would change as follows:

// ISR - fallback: 'blocking'. Restrict in `getStaticPaths()` to generate only limited number of pages and generate rest of the pages on demand
export async function getStaticPaths() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();

  const paths = posts
    .slice(0, 15)
    .map((post) => ({ params: { id: `${post.id}` } }));

  return { paths, fallback: "blocking" };
}

export async function getStaticProps({ params }) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  const post = await response.json();

  return { props: { post }, revalidate: 10 };
}

// ISR - fallback: 'blocking'
const PostDetails = ({ post }) => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
      }}
    >
      <Post {...post} />
    </div>
  );
};

export default PostDetails;

If you've noticed the code for the post details page, we've used blocking as the value of fallback , which means the rest of the pages would be generated server-side on demand. The other possible value of fallback is true and in that case, we can show the fallback page while the page is getting generated.

import { useRouter } from "next/router";

// ISR - fallback: true.
export async function getStaticPaths() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();

  const paths = posts
    .slice(0, 15)
    .map((post) => ({ params: { id: `${post.id}` } }));

  return { paths, fallback: true };
}

export async function getStaticProps({ params }) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  const post = await response.json();

  return { props: { post }, revalidate: 10 };
}

// ISR - fallback: true, show fallback page if value of fallback is true
const PostDetails = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <Loader />;
  }

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
      }}
    >
      <Post {...post} />
    </div>
  );
};

export default PostDetails;

Now, let's see how the build process of ISR is different from the build of an application using SSG.

As per the logs above, we can see that we're generating 15 pages for individual posts instead of all individual posts during build time which reduces the build time significantly and we're revalidating any updates in data at an interval of 10 seconds.

That's all for now 😃. Thanks for reading till now 🙏.

If you want to read more about these strategies, refer to Rendering Introduction.

Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.

You can connect 👋 with me on GitHub, Twitter, and LinkedIn.

Iterators & Generators in JS

Souvik Jana — Mon, 12 Sep 2022 07:43:35 +0000

I learned about Iterators and Generators in JavaScript while solving a problem. So, we will be discussing these concepts here and trying to understand the concepts using the same problem that I encountered.

Before looking at the problem and understanding how to solve it, let's start with some theory...

Iterators

Iterables are objects which could be iterated using the for...of loop.

Anything iterable is an object which will have the Symbol.iterator method in it and when we try to iterate it or want it to behave like an iterable(using for...of loop), the Symbol.iterator method would be invoked which would return an object (iterator). The returned object would have the next method in it, which would produce an object with the value and status of the iteration (using boolean) - whether any other value is present or not to be iterated.

A method(Symbol.iterator) returning an object(iterator) which has another method(next) in it 🤔 - complicated, right?

Let's understand the above statements better by solving the problem using iterators now.

The problem:

Q. Can you create a range(from, to) that makes the following work?

for (let num of range(1, 4)) {
  console.log(num)  
}
// 1
// 2
// 3
// 4

This is a simple one, could you think of more fancy approaches other than for-loop?

The simplest solution for the above problem would be as follows:

function range(from, to){
  const arr = [];

  for(let i = from; i <= to; i++){
    arr.push(i);
  }

  return arr;
}

Look at the problem statement again, we are not required to return an array, but something iterable would be fine as we'll be using the for...of loop.

Now, we would be writing the range function which would take 2 numbers as arguments and return an iterable.

// to make range() iterable
function range(from, to) {
  return {    
    [Symbol.iterator]: function(){
      // This returned object is known as the "iterator object" in the case of iterators and the "generator object" in the case of generators.
      return {
        from,
        to,

        next: function() {
          if(this.from <= this.to){
              return {value: this.from++, done: false}
          }else{
              return {done: true}
          }
        }
      }      
    }
  };
}

for (const item of range(1, 4)) {
  console.log(item);  
}

In the above code, whenever we try to iterate using the for...of loop,

it calls the Symbol.iterator method once for the 1st time and gets the iterator object.
Next time onwards for...of uses the next method to get the next value while iterating.

Don't confuse arrays with the iterables. Iterables are objects which implement the Symbol.iterator method in it. Arrays and strings have built-in implementation of Symbol.iterator along with many other methods and properties, not necessarily other iterables would have the same.

Generators

The generator function returns an object known as the "generator object" and has the next method in it.

Example:

function *generatorExample(){
  yield 1;
  yield 2;
}

const generatorObject = generatorExample();
console.log(generatorObject.next()); // {value: 1, done: false};
console.log(generatorObject.next()); // {value: 2, done: false};
console.log(generatorObject.next()); // {value: undefined, done: true};

When the next method is called, it executes the function till the 1st yield, then pause the execution and returns an object with 2 properties:

value: yielded value.
done: boolean, which says whether the function execution is finished or not.

The generator functions can be identified by the * in function declaration, right after the function keyword(function*) or before the function name(function *name) without any space.

The same problem mentioned above could be solved using Generator functions quite easily as follows:

function range(from, to){
  return {
    [Symbol.iterator]: function* (){
      for(let i = from; i <= to; i++){
        yield i;
      }
    }
  }  
}

for (const item of range(1, 4)) {
  console.log(item);  
}
// 1
// 2
// 3
// 4

The range function is still returning an object which has the Symbol.iterator method in it. But the difference is the Symbol.iterator is holding a generator function now. And as we know, the generator function returns the generator object with the next method in itself - which we had to implement explicitly for iterators.

Generators are also iterable.

we can use the for...of loop with generators then.

function *generatorExample(){
  yield 1;
  yield 2;
}

const generatorObject = generatorExample();

for(const item of generatorObject){
  console.log(item);
}
// 1
// 2

Since a generator is also iterable, the solution can be simplified more as we don't have to implement the Symbol.iterator method explicitly.

function *range(from, to){
  for(let i = from; i <= to; i++){
    yield i;
  }
}

for (const item of range(1, 4)) {
  console.log(item);  
}
// 1
// 2
// 3
// 4

That's all for now 😀. Thanks for reading till now🙏.

If you want to read more about these, refer to Iterators & generators - MDN.

Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.

You can connect 👋 with me on GitHub, Twitter, Linkedin

My learning on Web Performance

Souvik Jana — Mon, 24 Jan 2022 13:45:21 +0000

Hello 👋 everyone, I have started learning about Web Performance recently. So, just thought of sharing my learning so far…

Web Vitals

There're a few metrics known as Web Vitals to measure the performance of web apps. So, let’s discuss those metrics briefly:

First Contentful Paint(FCP): The time until the user sees an indication that the page is loading.

Largest Contentful Paint(LCP): The time until the user sees most of the page and believes that it's almost ready to use.

Cumulative Layout Shift(CLS): The movement distance and the impact of the page elements during the entire lifetime of the document the user sees.

First Input Delay(FID): The browser time delay between the user's first click and the actual execution of the application code for that click.

As we now have a basic understanding of these metrics, let's see how we can improve these to make our apps faster for everyone.

How can we improve FCP?

Server with correct hardware configurations based on the need would be doing minimal processing to complete one request with enough bandwidth to complete all the requests.
Small content(HTML page, images,...) delivery over the network with compression(e.g. gzip, brotli,...) would reduce the size of the content and eventually gives better performance.
Using CDN(Content Delivery Network) which would cache the response of every request. If CDN doesn't contain the data then only the request goes to the server for the 1st time and caches the same response to reduce the time of content delivery from the server to the user would improve FCP.

How can we improve LCP?

This is an important metric that can be optimized by downloading and rendering resources that are most important to show the page.

Defer downloading resources(images, scripts,...) for later if that's not required immediately to show the page. Use defer to download scripts parallelly and execute later.
Optimize images by using some compressing tool(e.g. tinypng.com)

Load images lazily

loading="lazy" for images/videos(as we use iframe tag to show video in website/app, loading="lazy" attribute is applicable for any tag which has src as an attribute to load content lazily) can download image parallelly but won't render until it's required to show in the UI based on user's action which can eventually improve the performance as all images rendering won't be a part of LCP process.

Use srcset to show images based on the width of the device for responsive images

Earlier we had the src attribute for images, but now we also have srcset which would take multiple images' sources as value to download & show images based on the device's width. Also, need to add a kind of condition to show the correct version of the image using the sizes attribute. While using srcset, src contains fallback images' source i.e. if srcset is not found for a particular width then only the image of src would be rendered.

<img src="picture-1200.jpg" srcset="picture-600.jpg 600w, picture-900.jpg 900w, picture-1200.jpg 1200w" sizes="(max-width: 600px) 600px, (max-width: 900px): 900px, 1200px" />

Reduce request overhead
- We can use http/2 for reducing overhead which is faster, can help us to reuse connections if we're downloading resources multiple times from a server by removing TCP connection and SSL handshake for each request. But, http/2 is not supported by all servers and requires SSL certification to work which is difficult to set up locally.
- Caching requests could be another approach to reduce request overhead. In this approach, we don't have to do a DNS lookup, TCP connection, SSL handshake, request, response - just take the resource and process it as the browser has it already. But, this can only happen from the 2nd time, for the 1st time, it would download everything required. We can use 3 tags to tell the browser to keep these resources for a particular amount of time - cache control, expires, etag.
- Use preconnect, preload respectively to start connecting with the server and load some resources which are required to show the UI early. preconnect starts DNS lookup or other activities that are required for a request to make the process faster whereas preload downloads the resource to make the rendering process faster. We use preconnect where we don't know exactly which file we need to download and in the case of preload, we know which file needs to be downloaded so we use this.

<link rel="preconnect" href="fonts.gstatic.com"> //to start connecting with the server early as we need to download font from there to show UI properly
<link rel="preload" href="/css/index.css"> //to download resources that are required to show UI

These things can help us to reduce the time between FCP and LCP.

How can we improve CLS?

Apply CSS such that one part of the app doesn't shift other parts of it.
Give height and width to images so that browser knows how much space needs to be reserved which would help us to reduce layout shift and improve CLS.

How can we improve FID?

Reducing JavaScript loading for a single page would reduce the execution time by the browser and eventually improve FID. So, techniques like code-splitting can help here as it would allow the app to load and execute JavaScript when it's needed to make the page interactive.
Use web worker to execute JS code for other operations on a worker thread so that it reduces main thread blocking time and consecutively improves FID score.

Gotchas

We can use Chrome’s Lighthouse to measure the performance of a web app and the result would be shown with respect to the mentioned metrics above.

However, there’re a few gotchas to keep in mind while measuring performance using Chrome’s lighthouse:

It measures performance based on your machine and network NOT the end user's machine and network.
Measurement depends on Chrome window size where the application is running so separate out the lighthouse window(select undock into separate window) before starting measuring performance.
Don't use any other app(by keeping the app in the background for which you want to measure performance) while measuring performance as it'll impact the measurement.
Open the app in an incognito browser window, so that it can be measured without any caching data and gives a fair measurement.

That's all for now 😀. Thanks for reading till now🙏. Explaining each and every keyword in a single blog is difficult I feel. So, please read more about it or let me know if you want me to write a separate blog on some other topic/keywords in detail.

If you want to read more on these, refer to Web Vitals in web.dev, Metrics in web.dev, Fast load times in web.dev.

Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.

You can connect 👋 with me on GitHub, Twitter, Linkedin

Prototypal Inheritance and Classes in JavaScript

Souvik Jana — Sun, 09 Jan 2022 12:26:17 +0000

Hello everyone, in this article, we would be discussing:

Constructor function,
Prototypes,
Inheritance, classes in JS

These are very important concepts and would help you to understand Object-Oriented Programming(OOP) in JS. So, keep reading till the end and I hope you'll learn something from it.

Objects

We had discussed earlier how to create and work with objects using literal notation here.

const phone = {
    RAM: "8GB",
    OS: "Andriod"
}

In practice, we often need to create many similar objects like a list of phones, employees, etc. So, we can achieve this by creating custom types in JS using Constructor Function and then creating multiple objects from it. In other programming languages, we generally use class to define this kind of custom type but in JS, the class system is built directly using functions.

So, rather than using classes in JS directly, we can learn how to do the same using constructor functions which is the base of Object-Oriented Programming in JS.

ES6 introduces the class keyword that allows us to define custom types. But, classes in JS are syntactic sugar over constructor functions with some enhancements.

Constructor Functions

Constructor functions are like regular functions with some conventions:

These functions should be invoked with the new operator.
Naming of these functions are written in CamelCase(starting with capital letter e.g. Employee) by convention
These functions should not have an explicit return value

function Employee(name){
      this.name = name;
      this.role = "Developer";
}

And, this is to create an object using that constructor function

const employee = new Employee("Souvik");
console.log(employee); // Employee {name: "Souvik", role: "Developer"}

this inside the function definition points to the object that has been created using the new keyword in front of the constructor function while invoking it.

So, what if we don’t use the new keyword while calling the function?

In that case, the function would be invoked as a regular function, a new object would NOT be created and returned. Let’s understand this part by invoking the function mentioned above without the new operator:

const employee = Employee();
console.log(employee); // undefined

As you can see, undefined would be returned which any regular function returns by default. Also, this would refer to global object window as the constructor function has been invoked as a regular function.

These are the followings the new keyword is responsible for while invoking constructor function:

Create a new object and assign it to this
Add properties to the object with the given value
Return the newly created object

`this` keyword in JS

We had talked about this keyword before and found out this behaves differently based on implementation. There’re 4 ways to call a function and this refers to a different object in each case.

If calling a constructor function, then this sets to the newly created object
Invoking a function that belongs to an object would set this to the object itself, which is called Implicit binding.
Simply invoking a regular function would set this to the global object window.
The last way of invoking a function allows us to set this ourselves using call(), apply() and bind() methods - that’s known as Explicit binding, talked about it here earlier as well.

Prototypal Inheritance

The problem with the constructor function is that if there’s any method present in the constructor function then that will be created for every instance created using the constructor function.

function Employee(name){
    this.name = name;
    this.role = "Developer";
    this.printDetails = function (){
        console.log(`${this.name} works as a ${this.role}`)
    }
}

So, to make things memory efficient, we can add methods to the prototype property of the constructor function, so that all instances of a constructor function can share the same methods.

function Employee(name){
    this.name = name;
    this.role = "Developer";
}

Employee.prototype.printDetails = function (){
    console.log(`${this.name} works as a ${this.role}`)
}

const employee = new Employee("Souvik");
employee.printDetails(); // Souvik works as a Developer

So, what is a prototype?

A prototype is just an object and all objects created from a constructor function are secretly linked to the prototype.

The prototype also keeps a reference to its own prototype object. And, prototype’s prototype is also linked to its own prototype and so on. This is how it forms prototype chain.

JavaScript uses this link between an object and its prototype to implement inheritance which is known as Prototypal Inheritance.

When we try to access a property or method of an object,

it tries to find that in the object’s own properties. Any properties or methods defined in the object itself get the highest precedence over defining the same elsewhere just like variable shadowing in the scope chain discussed here.
If it doesn’t get that within the object’s properties then it will try to find that in the object’s constructor’s prototype.
If it’s not there even in the prototype object, the JavaScript engine will continue looking up the prototype chain to get the value. At the end of the chain, there’s Object()'s prototype: the top-most prototype object in the chain - if the property is not found even there, then the property is undefined.

But, one question still arises, how is an object created by a constructor function secretly linked to its prototype?

The answer is any object created by a constructor function is linked to its prototype using the __proto__ property which is made by the constructor function and directly refers to the constructor function's prototype.

console.log(employee.__proto__ === Employee.prototype); // true

__proto__ has been used here just for learning purposes. Don't use or reassign the __proto__ property anywhere in production code as it's not supported by all browsers and updating its value might create performance issues since JS searches for properties along the prototype chain.

If we need to check the prototype for an object, we can use the Object.getPrototypeOf() method for the same which takes an object as an argument and returns the prototype of that object.

console.log(Employee.prototype === Object.getPrototypeOf(employee)); // true

Object.create()

As we discussed, using the __proto__ property is not a good practice to use in code, so the same shouldn't be used to implement inheritance or build a prototype chain.

That's why ES5 introduced Object.create() method to implement prototypal inheritance.

Object.create() takes an object as an argument and returns a new object with its __proto__ set to the object that was passed as argument into Object.create().

const person = {
    name: "Souvik",
    greet: function(){
        console.log(`Hi, I’m ${this.name}`);
    }
}

const teacher = Object.create(person);

teacher.teach = function (subject) {
    console.log(`I can teach ${subject}`);
}

teacher.greet(); // Hi, I'm Souvik
teacher.teach("JavaScript"); // I can teach JavaScript
console.log(Object.getPrototypeOf(teacher) === person); // true

We can leverage Object.create() the following way to implement inheritance.

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

Animal.prototype.walk = function (){
    console.log(`${this.name} can walk`);
}

function Dog(name, lifetime){
    Animal.call(this, name); // calling parent constructor function to initialize parent properties for child objects
    this.lives = lifetime;
} 

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.details = function(){
    console.log(`${this.name} can live for ~${this.lives} years`);
}

const dog = new Dog("Dobby", 10);
dog.walk(); // Dobby can walk
dog.details(); // Dobby can live for ~10 years

In this way Dog inherits properties and methods from Animal using prototypal inheritance. But this is a bit tricky and verbose.

That's why ES6 introduces the class and extends keyword to simplify inheritance implementation in JS. Classes in JS are special functions. And the same implementation using class would look like this:

class Animal{
    constructor(name){
        this.name = name;
    }

    walk(){
        console.log(`${this.name} walks`);
    }
}

class Dog extends Animal{
    constructor(name, lifetime){
        super(name);
        this.lives = lifetime;
    }

    details(){
        console.log(`${this.name} can live for ~${this.lives} years`);  
    }
}

const dog = new Dog("Dobby", 10);
dog.walk(); // Dobby can walk
dog.details(); // Dobby can live for ~10 years
console.log(typeof Animal); // function

That's all 😀. Thanks for reading till now🙏.

If you want to read more on these, refer to OOP in JS MDN, Object Prototypes MDN, Inheritance in JS MDN, Classes MDN

Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.

You can connect 👋 with me on GitHub, Twitter, Linkedin

All about Functions and Scopes in JavaScript

Souvik Jana — Mon, 06 Sep 2021 11:01:18 +0000

Hello everyone, we would be covering all about JS functions, callbacks, scopes, closures in-depth here which would help you to

understand different types of functions declaration
make better use of functions
understand how different scopes and scope chain work in JS
learn about closures and how to use it

So, keep reading till the end and I hope you'll learn something from it.

Functions

Functions allow us to package up lines of code so that we can use (and reuse) a block of code in our programs. Sometimes, they take some values as parameters to do the operation and return some value as a result of the operation.

function add(a, b){ //a, b are the parameters of this function
     //code to do the operation
     return a + b; //return statement
}

add(2, 3); //invoking the function; 2, 3 are arguments here

First-Class Citizen

Functions are considered as First-Class Citizen in JavaScript, which means we can do anything we want with functions.

We can

store function in a variable
pass a function as an argument to another function
return a function from another function

Function Expressions

When a function is stored inside a variable it's called a function expression. This can be named or anonymous. If a function doesn't have any name and is stored in a variable, then it would be known as anonymous function expression. Otherwise, it would be known as named function expression.

//Anonymous function expression
const add = function (a, b){
     return a + b;
}

//Named function expression
const subtractResult = function subtract(a, b){
     return a - b;
}

console.log(add(3, 2)); // 5
console.log(subtractResult(3, 2)); // 1

Callbacks

Storing a function in a variable makes it really easy to pass a function to another function as an argument. A function that takes other functions as arguments or returns a function is known as higher-order function. A function that is passed as an argument into another function is known as callback function.

function showLength(name, callback){
     callback(name);
}

//function expression `nameLength`
const nameLength = function (name){
     console.log(`Given Name ${name} is ${name.length} chars long`) // Given Name Souvik is 6 chars long
}

showLength("Souvik", nameLength); //passing `nameLength` as a callback function

Generally, we use callback function in array methods - forEach(), map(), filter(), reduce().

Scope

Scope in JS tells us what variables and functions are accessible and not accessible in a given part of the code.

There're 3 kinds of scopes in JavaScript.

Global scope
Function scope
Block scope

Variables declared outside of all functions are known as global variables and in global scope. Global variables are accessible anywhere in the program.

Variables that are declared inside a function are called local variables and in function scope. Local variables are accessible anywhere inside the function.

The code inside a function has access to

the function's arguments
local variables declared inside the function
variables declared in its parent function's scope
global variables

const name = "Souvik";
function introduceMyself(greet){
     const audience = "students";     
     function introduce(){
           console.log(`${greet} ${audience}, I am ${name}`); // Hello students, I am Souvik
     }     
     introduce();
}
introduceMyself("Hello");

Block scope tells us that any variable declared inside a block ({}) can be accessed only inside that block.

Now, what is block 🤔? a block {} is used to group JavaScript statements together into 1 group so that can be used anywhere in the program where only 1 statement is expected to be written.

Block scope is related to variables declared with let and const only. Variables declared with var do not have block scope.

{
      let a = 3;
      var b = 2;
}

console.log(a); //Uncaught ReferenceError: a is not defined
console.log(b); // 2 `as variables declared with `var` is functionally and globally scoped NOT block scoped`

Scope chain

Whenever our code tries to access a variable during the function call, it starts the searching from local variables. And if the variable is not found, it'll continue searching in its outer scope or parent functions' scope until it reaches the global scope and completes searching for the variable there. Searching for any variable happens along the scope chain or in different scopes until we get the variable.

If the variable is not found in the global scope as well, a reference error is thrown.

const name = "Souvik";
function introduceMyself(greet){
     const audience = "students"; 
     function introduce(){
           console.log(`${greet} ${audience}, my name is ${name}`); // Hello students, my name is Souvik
     }     
     introduce();
}
introduceMyself("Hello");

In the given example above, when the code attempts to access variable name inside the introduce() function, it didn't get the variable there and tried to search in its parent function's (introduceMyself()) scope. And as it was not there, it finally went up to global scope to access the variable and got the value of the variable name.

Variable shadowing

If we declare a variable with the same name as another variable in the scope chain, the variable with local scope will shadow the variable at the outer scope. This is known as variable shadowing.

Example 1:

let name = "Abhijit";
var sector = "Government";
{
      let name = "Souvik";
      var sector = "Private"; //as `var` is NOT block scoped(globally scoped here), it'll update the value 
      console.log(name); //Souvik
      console.log(sector); //Private
}
console.log(name); //Abhijit
console.log(sector); //Private

Example 2:

let name = "Abhijit";
var sector = "Government";
function showDetails(){
      let name = "Souvik";
      var sector = "Private"; //`var` is functionally scoped here, so it'll create new reference with the given value for organization
      console.log(name); //Souvik
      console.log(sector); //Private
}
showDetails();
console.log(name); //Abhijit
console.log(sector); //Government

In case of example 1, the name variable is shadowing the variable with the same name at the outer scope inside the block as we have used let to declare the variable. But, the sector variable is also updating the value at the same time as we have used var to declare it. And as we know var is functionally and globally scoped, the declaration with the same name(sector) inside the block will update the value at the same reference.

Whereas in case of example 2, the sector variable inside the function is function scoped and will create a new reference which will just shadow the variable with the same name declared outside.

Closure

Closure is an ability of a function to remember the variables and functions that are declared in its outer scope.

MDN defines closure as:

the combination of a function bundled together with references to its surrounding state or the lexical environment

Now, if you're thinking 🤔 what's lexical environment? function's local environment along with its parent function's environment forms lexical environment.

function closureDemo(){
     const  a = 3;
     return function (){
           console.log(a); 
     }
}
const innerFunction = closureDemo(); //returns the definition of inner function
innerFunction(); // 3

In the above example, when the closureDemo() function is called, it'll return the inner function along with its lexical scope. Then when we attempt to execute the returned function, it'll try to log the value of a and get the value from its lexical scope's reference. This is called closure. Even after the outer function's execution, the returned function still holds the reference of the lexical scope.

Advantages:

Currying
Memoization
Module design pattern

Discussing these in detail would take another blog 😀. So, will do it later sometime to discuss problems and solutions using a closure.

Disadvantages:

Overconsumption of memory might lead up to the memory leak as the innermost function holds the reference of the lexical scope and the variables declared in its lexical scope won't be garbage collected even after the outer function has been executed.

Immediately-Invoked Function Expression(IIFE)

An immediately-invoked function expression or IIFE(pronounced as iify) is a function that's called immediately once it's defined.

(function task(){
      console.log("Currently writing a blog on JS functions");
})();

We're basically wrapping a function in parenthesis and then adding a pair of parenthesis at the end to invoke it.

Passing arguments into IIFE

We can also pass arguments into IIFE. The second pair of parenthesis not only can be used to invoke the function immediately but also can be used to pass any arguments into the IIFE.

(function showName(name){
     console.log(`Given name is ${name}`); // Given name is Souvik
})("Souvik");

IIFE and private scope

If we can use IIFE along with closure, we can create a private scope and can protect some variables from being accessed externally. The same idea is used in module design pattern to keep variables private.

//module pattern
let greet = (function (){
    const name = "Souvik Jana"; //private variable
    return {
        introduce: function(){
            console.log(`Hi, I am ${name}`);
        }  
    } 
})();

console.log(greet.name); //undefined
greet.introduce(); // Hi, I am Souvik Jana

IIFE helps to prevent access to the name variable here. And the returned object's introduce() method retains the scope of its parent function(due to closure), we got a public interface to interact with name.

That's all 😀. Thanks for reading it till now🙏.

If you want to read more on these, refer to Functions MDN, Closures MDN, IIFE MDN.

Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.

You can connect 👋 with me on GitHub, Twitter, Linkedin

Call, apply and bind in JS

Souvik Jana — Sat, 10 Jul 2021 18:14:29 +0000

Hello everyone, in this article, we would be discussing:

Implicit binding, Explicit binding in JavaScript
the call, apply and bind methods in JavaScript and how they are different from each other.

These are very important concepts and asked frequently in interviews. So, keep reading till the end.

Implicit & Explicit binding

this keyword in JS generally points to the object that the function is a property of. In other words, we can also say this refers to the object that is being used to invoke the function.

const souvik = {
      learning: true,
      status: "Learning",
      work: function () {
             console.log(`${this.status} Full Stack Web Dev!`);
      }
}

souvik.work() //Learning Full Stack Web Dev!

In the example above, we can see that the work() method is being invoked using souvik object. This way of invoking a method using dot operator is known as Implicit binding where this refers to the object using which the method is invoked.

There are other ways as well to reuse the same method or, to invoke a method using other objects by the help of call(), apply() and bind() methods in JS where this keyword will point to the object that will be passed as an argument to the call(), apply() and bind() methods. This kind of invoking a method is known as Explicit binding.

Want to know more about this keyword and objects in JS? read this JS objects in depth

What is the call() method?

Let's say, we have an object with some properties and functions.

let learning = {
    technology: "JavaScript",
    printActivity: function(){
        console.log("Learning ", this.technology);
    }
}

this keyword in the object points to the learning object itself in the example. And if we just try to invoke the printActivity() function, it would print Learning JavaScript. Simple! right?

learning.printActivity(); //Learning JavaScript

Now, what if we want to print the same for other learning activities? One solution that comes to our mind easily, is to create a new object for that and call the method just like we did in the 1st example.

let learningSomethingNew = {
    technology: "React",
    printActivity: function(){
        console.log("Learning ", this.technology);
    }
}

The other and best solution for this scenario is to use the call() method.

let learningSomethingNew = {
    technology: "React"
}
learning.printActivity.call(learningSomethingNew); //Learning React

In this way, we could reuse the printActivity function for different objects. That's why it's recommended to write a function separately without making it a part of an object if it could be used in multiple scenarios.

let learning = {
    technology: "JavaScript",
}

let learningSomethingNew = {
    technology: "React"
}

function printActivity(){
     console.log("Learning ", this.technology);
}

printActivity.call(learning); //Learning JavaScript
printActivity.call(learningSomethingNew); //Learning React

We might need to pass some extra argument to the function as well. We can do that too.

function printActivity(months, days){
     console.log("Learning "+ this.technology + "since " + months + " and " + days);
}

printActivity.call(learning, 3, 15); //Learning JavaScript since 3 months and 15 days
printActivity.call(learningSomethingNew, 2, 15); //Learning React since 2 months and 15 days

What is the apply() method?

The apply() method is similar to the call() method. The only difference is that apply method takes arguments as an array whereas the call method takes arguments separately.

function printActivity(months, days){
     console.log("Learning "+ this.technology + "since " + months + " and " + days);
}

printActivity.apply(learning, [3, 15]); //Learning JavaScript since 3 months and 15 days
printActivity.apply(learningSomethingNew, [2, 15]); //Learning React since 2 months and 15 days

What is the bind() method?

The bind() method doesn't invoke the function like call() and apply(), instead it returns a copy of the function where the this keyword will point to the object that is passed as an argument.

let learning = {
    technology: "JavaScript",   
}

function printActivity(){
     console.log("Learning ", this.technology);
}

let copyOfTheFunction = printActivity.bind(learning); 
copyOfTheFunction(); //Learning JavaScript

If you want to read more on this, refer call MDN, apply MDN, bind MDN.

Thanks for reading till now🙏

Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.

You can connect 👋 with me on GitHub, Twitter, Linkedin

JS Objects in depth

Souvik Jana — Thu, 08 Jul 2021 15:11:44 +0000

Hello everyone, we would be covering all about JS objects today which would help you to

make better use of objects while writing programs in JS
understand its syntax and different ways to manipulate objects

So, keep reading till the end and I hope you'll learn something from it.

Objects

The object is one of the most useful data structures in JavaScript - a collection of associated key/value pairs.

Creating objects

New empty objects can be created in 2 ways:

literal notation
Object() constructor function

const myObject = {}; // Using literal notation
const myObject = new Object(); // Using the Object() constructor function

However, the recommended way to create a new object is to use literal notation as the Object() constructor function is a bit slower and verbose.

Add property to an object

Dot notation as well as square bracket notation can be used to add a new property to an object with its value.

const souvik = {};

souvik.learning= true;
souvik["status"] = "Learning and implementing";
souvik.work = function () {
  console.log("Working as Full Stack Web Dev!");
};

After adding all these properties, the object would look like this:

{
      learning: true,
      status: "Learning and implementing",
      work: function () {
             console.log("Working as Full Stack Web Dev!");
      }
}

Modify properties of an object

Data within objects are mutable, which means data can be modified.

const souvik = {
      learning: true,
      status: "Learning and implementing",
      work: function () {
             console.log("Working as Full Stack Web Dev!");
      }
}

Feel free to use dot or square bracket notation to modify the value of a property.

souvik.learning = false;
souvik["status"] = "Building projects";

Remove property of an object

Since data within objects are mutable, we can delete any property from an object using the delete operator.

delete souvik.learning; //true

Passing arguments

Objects are mutable in JS. So, if you're passing an object to a function or, you're creating a copy of the original object, and modifying the value of any property of the object that would modify the value for the original object as in both cases the new copy of the object points to the same reference or memory location. And once we're updating the value of a property, it would reflect in each and every copy of the object.

let originalObject = {
  status: "online"
};

function setToOffline(object) {
  object.status = "offline";
}

setToOffline(originalObject);
originalObject.status; // "offline"

On the other hand, the primitive data types(string, boolean, number) are immutable. When we pass a primitive argument, the function creates a local copy of the same which points to a different memory location and performs the operation on it as per the need. In that way, it doesn't update the actual data.

function changeToEight(n) {
  n = 8; // whatever n was, it is now 8... but only in this function!
}

let n = 7;

changeToEight(n);
console.log(n); // 7

`this` keyword

A method can access the object's properties it was called on using the reserved keyword this.

const souvik = {
      learning: true,
      status: "Learning",
      work: function () {
             console.log(`${this.status} Full Stack Web Dev!`);
      }
}

souvik.work() //Learning Full Stack Web Dev!

In other words, we can also say the this keyword helps an object to access and manipulate its own properties. This way of invoking a method using dot operator is known as Implicit binding where this refers to the object using which the method is invoked.

There're other ways of invoking a method where this will point to some other objects using call(), apply() and bind() methods - which is known as Explicit binding. To know more read call, bind and apply in JS article.

`window` object

Now, as we know about the this keyword, I have a question for you, what would be the output if we invoke exploringThis function?

function exploringThis() {
       console.log(this)
}

exploringThis();

In this case or, any regular function this points to the global object window.

window object is provided by the browser and globally accessible by JS code using the window keyword. This object is not part of the JavaScript specification.

Any global variables, functions are accessible as properties of the window object.

var learning = "objects in JS";

function work() {
      console.log("Writing blog on JS objects")
}

window.learning === learning; //true
window.work === work; //true

Only declaring variables with the var keyword will add them to the window object. If you declare a variable with let or const, it won't be added as the property to the window object.

let learning = "objects in JS";

window.learning === learning; //false

Object methods

The Object() constructor function that can be used to create a new empty object, has some methods of its own. These methods are:

Object.keys() - this would return an array of keys of the object that is given to it
Object.values() - similarly, this would return an array of values of the object that is given to it

const souvik = {
      learning: true,
      status: "Learning",      
}

Object.keys(souvik); // ["learning", "status"]
Object.values(souvik); // [true, "Learning"]

These methods are really helpful while you want to do some manipulation with respect to an object's keys or values.

If you want to read more on this, refer Object MDN, this keyword MDN, window object MDN.

Thanks for reading till now🙏

Share this blog with your network if you found it useful and feel free to comment if you've any doubts about the topic.

You can connect 👋 with me on GitHub, Twitter, Linkedin

JavaScript DOM(Document Object Model)

Souvik Jana — Tue, 08 Dec 2020 19:22:23 +0000

We would be discussing JavaScript DOM in this article which is a very important topic to learn when you're starting your journey with JavaScript as well as preparing for JS interview. This would help you to understand how Vanilla JS works.

What is DOM in Javascript?

DOM is a Javascript object to manipulate HTML elements. In simple words, we use DOM to select HTML elements and manipulate what user sees on the browser.

How to select HTML element?

We generally use global variable document to select the required HTML element. These are some of the ways to select HTML element :

querySelector() :

const element = document.querySelector(".className");
const element = div.querySelector("#id");

querySelector() method works on document, HTML tags(h1, p, div...) to select one HTML element with the given .className or #id. This method will return the 1st matched element from the DOM or document. If we apply this method on some html tags then that would help to select childs of that tag whereas document helps to select its child elements (i.e. all elements in HTML are childs of document).

querySelectorAll() :

const elements = document.querySelectorAll(".className");
const elements = div.querySelectorAll("tagName");

querySelectorAll() method returns an array with all the matches found. We use this to select multiple elements having same CSS class or tag.

Recommended to use querySelectorAll(), when we have to attach the same event handler or functionality to multiple elements, otherwise if we try to select multiple elements using tag name or class and try to attach different event handler depending on the element's position in the returned array then it might happen that position of the element in the HTML document changes in future which will produce wrong output eventually since event handlers need to be altered in that case.

getElementById() :

const element = document.getElementById("id")

getElementById() is an another method to select an element using id. We could do the same thing using querySelector() but we 're using "#" before the "id" while doing the same using querySelector(), in this case "#" is not required to select as we are using getElementById()

It's not like that we can only select existing HTML elements only, we can also create HTML element using DOM.

How to create HTML element?

There're 3 steps to create a new HTML element. Follow the attached code to do so.

const newElement = document.createElement("tagName"); //to create a new element with the given tag(p, div,...)
newElement.textContent = "textContentForNewElement"; //to add textContent to the new element
document.querySelector("parentTagName").appendChild(newElement); //to append the new element in the any existing element of the document as a child

The above mentioned code will do the following

create new element,
add content for that,
append the newly created element to the HTML document as a child of the given parent tag.

What to do with the selected / newly created HTML element?

Once it's selected, we can manipulate as per our choice to fulfill the requirement - we can

get content or value of an element,
change content or value of an element,
change styles, attributes, add or remove CSS classes from an element.

Get content or value of an element?

const element = document.querySelector(".className");
let msg = element.textContent;

This is for <p>, <div>... tags which contain some text as content of the page, we can get that content as mentioned above to do some work.

const element = document.querySelector("#id");
let msg = element.value;

This is for input elements like textbox where we take some input from user and do our work after that.

Change content or value of an element?

For <p>, <div>... tags

const element = document.querySelector(".className");
element.textContent = "newContent";

For input elements like textbox

const element = document.querySelector(".className");
element.value = "newValue";

NOTE :- Notice when we are using textContent and when we're using value.

Change styles, attributes, add or remove CSS classes from an element?

To change style of an element, we need to do the following after selecting the element from the DOM :

element.style.backgroundColor = "color"; //this is to set or change the background color of an element

To set or change some attributes of an element, do the following step after selecting the element from the DOM :

element.src = "pathOfTheImageFile"; //this is to set or change the `src` attribute of an `<img>` element

Add the CSS class to an element

element.classList.add("className");

Remove the CSS class from an element

element.classList.remove("className");

Toggle the CSS class from an element i.e. remove the class from the element if it's present else add the class to the selected element.

element.classList.toggle("className");

To get whether the CSS class is present or not with the selected element, it returns true or false based on the availability.

var isPresent = element.classList.contains("className");

As you all know there are so many methods, concepts and ways to work with Javascript DOM. These are some of those ways that I used while I was learning DOM. Lastly, I will add one more part of it to mention how to add event along with eventHandler for an element which is one of the things that we can perform once we have the element selected.

How to add event to an element?

There're tons of events which we can attach to an element, once that is selected. This is how you can attach one event to an element.

element.addEventListener("nameOfTheEvent", "eventHandler");

if there's any event that we want to execute once then we can remove that event as well once it's executed.

element.removeEventListener("nameOfTheEvent", "eventHandler");

I have decided to discuss about DOM only in this blog, events will take may be another blog post to discuss.

Want to read more about events?

Read here

Comments?

Please feel free to share your comments on this blog post. Happy Learning :)

DEV Community: Souvik Jana

Go offline with Service Worker

What is a Service Worker?

How to add a service worker?

The life cycle of a service worker:

Install:

Wait:

Activate:

Cache serving strategies:

Cache first:

Network first:

Stale-while-revalidate:

UX improvement:

Rendering strategies: CSR, SSR, SSG, ISR

Client-Side Rendering(CSR):

Pros:

Cons:

Server-Side Rendering(SSR):

Pros:

Cons:

Implementation:

Static Site Generation(SSG):

Pros:

Cons:

Implementation:

Incremental Static Regeneration(ISR):

Pros:

Cons:

Implementation:

Iterators & Generators in JS

Iterators

Generators

My learning on Web Performance

Web Vitals

How can we improve FCP?

How can we improve LCP?

How can we improve CLS?

How can we improve FID?

Gotchas

Prototypal Inheritance and Classes in JavaScript

Objects

Constructor Functions

this keyword in JS

Prototypal Inheritance

Object.create()

All about Functions and Scopes in JavaScript

Functions

First-Class Citizen

Function Expressions

Callbacks

Scope

Scope chain

Variable shadowing

Closure

Advantages:

Disadvantages:

Immediately-Invoked Function Expression(IIFE)

Passing arguments into IIFE

IIFE and private scope

Call, apply and bind in JS

Implicit & Explicit binding

What is the call() method?

What is the apply() method?

What is the bind() method?

JS Objects in depth

Objects

Creating objects

Add property to an object

Modify properties of an object

Remove property of an object

Passing arguments

this keyword

window object

Object methods

JavaScript DOM(Document Object Model)

What is DOM in Javascript?

How to select HTML element?

How to create HTML element?

What to do with the selected / newly created HTML element?

Get content or value of an element?

`this` keyword in JS

`this` keyword

`window` object