Understand "this" in JavaScript

Shreya Prasad — Sun, 01 May 2022 10:42:35 +0000

"This keyword refers to the object it belongs to."

You must have heard this line almost everywhere, but never fully understood what it actually means? Let's understand this.

this is nothing more than a reserved keyword in JavaScript that points to the object it is present inside.

Global Context:

Alone, this refers to the global object. Global object is nothing but the window object created by the JavaScript engine in the browser.

I learn better when I visualise concepts. That's why I've created few illustrations to simplify this.

this in a global context.

Functional context:

Now what happens if this is used inside a function?

this inside a function.

It still point to window object! But why?

Because that function is present globally, so technically it is present inside window object. So, this refers to the global object, i.e. window.

So far this has been pointing to window object only. Nothing has changed. So when does it return a different value that we all have been reading about?

Custom Object Context:

Let's see what happens if this is used inside an object that we create?

In a method, this refers to the person object. It means that this will point to the object inside which we are using "this" keyword.

To summarise:

Globally, this will point to window object because this is being used inside window object. But if we create an object of our own and use this inside that object, then it will point to that particular object.

Additional Info:

We will talk about the behaviour of this inside an arrow function in another blog.
Tricky questions around this keyword

Introducing Angular Mini Blog Series - Part 1

Shreya Prasad — Sat, 17 Jul 2021 12:27:22 +0000

In this series of blog posts, we are going to learn about Angular from beginning. I will try to keep the blogs very short, crisp and easy to understand.
Go to Angular's official website if you want to learn basic stuff like:

What Angular is
How to create a basic application
Generate Components
Start Angular Live Server
Basic Directory Structure

Here, we will get started with:

Components
Modules
How Angular Apps loads
AppModule

Components

You know about <html>, <head> and <body> tags and so on right? These are native HTML elements that are provided to us. But what if we could create our own HTML elements?

Yes, this is where components come in! Components are typically custom built HTML elements, and each of these elements can instantiate only one component.
The best part is - they are reusable, which means that one you create a component, you can utilize it multiple times in your application! Also, if you need to modify it, simply change one file and those changes will be reflected wherever you have used this component! Some popular examples of components are Navigation Bar, Footer, Side Menu etc.

Modules

Angular is not present as one monolithic code base. Instead, it is divided into modules which are present in different locations and their utility is independent of each other. Modules provide the highest level of abstraction available within the Angular framework. Everything in your app is ultimately structured around modules. This is powerful! It means that you can easily encapsulate code within a module and share or reuse it throughout your app.

We use @NgModule decorator to declare a class as module.
@NgModule decorator contains below properties:

declarations: It includes component, directives, pipes that belongs to this module.
exports: It include component, directives, pipes which can be accessible to other NgModule.
imports: Contains Modules whose exported classes needed by this module.
providers: Contains the services generated by this module. bootstrap: Initialize root component

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How Angular App loads?

Do you see this index.html? This is the page that's mainly rendered by Angular. It consists of only 1 component - <app-root>. This <app-root> is the root component which encapsulates all the child components, i.e the components you create and bootstraps them to render everything inside it on index.html.

<head>
  <meta charset="utf-8">
  <title>Demo Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root> //only this component will be present 
</body>
</html>

AppModule

When looking at the Angular module system, all things must begin with the app module. The root app module is a necessary portion of every Angular app. By default, this module is named AppModule, although it is possible to rename this module. The AppModule is the entry point to your app.

A newly generated AppModule would look like

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

It is a good practice to keep this file as minimal as possible. This can be done by importing only those modules that are absolutely necessary for your app to load initially. Or only declare Angular components, directives, or pipes that you want globally available.

✋ Hey! Before you go 🏃‍

If you enjoyed this article, I recommend you to stay tuned to my Twitter.

This is my first time on Dev.to so I would really appreciate if you would like my blog or share constructive feedback!💖

In the next blog, we will cover data binding and it's various types so stay tuned! ✨

DEV Community: Shreya Prasad