DEV Community: Mary Okosun

Understanding Relationships in TypeORM

Mary Okosun — Fri, 13 Jan 2023 09:17:52 +0000

What is TypeORM?

Understanding how relationships works in database management is a concept that is important as a software engineer.
In this article, we would learn what typeORM is, how relationships work in typeORM and the importance of relationships in database management.

If we are creating a typescript application and need a database for backend services, we will need an ORM (Object Relational Mapper) to connect our application to the database.
Object denotes the model in your application, Relational denotes the relationship between tables in a Relational Database Management System(RDMS), and Mapping denotes the act of connecting the model and our tables.

TypeORM is a TypeScript ORM (object-relational mapper) library that simplifies the integration of your TypeScript application with a relational database. MySQL, SQLite, Postgres, MS SQL Server, and a variety of other relational databases are supported by this library.

Relationships in TypeORM

In TypeORM, relationships exist between tables in the database. When one of the tables has a foreign key that references the primary key of the other table, a relationship exists. This feature enhances the power and efficiency with which relational databases store information.

TypeORM enables entities to be related to one another and, as a result, to database tables.

Entities are building blocks of a database.

In TypeORM, an Entity is a class that defines a collection of fields or columns as well as database operations. It is made up of columns and relationships.

In general, relationships can be divided into four types.

One-to-one relationship
One-to-many relationship
Many-to-one relationship
Many-to-many relationship

One-to-one relationship

When an instance of one table, say Table A, contains an instance of another table, say Table B, a one-to-one relationship is formed. For instance, we could use a user's post on a website. The requirement here is that a user can only make one post.

We'd need two tables here: User table and Post table. The User table will contain the user's information, and the Post table will contain the post information as well as the user information who made the post on the site.

To accomplish this, we'll need two entities: User entity and Post entity.

//User.entity.ts
import {Entity, PrimaryGeneratedColumn, Column} from "typeorm";

@Entity() 
export class User {
   @PrimaryGeneratedColumn() 
   id: number; 

   @Column() 
   name: string; 
}

Result

The User entity has an id column which is a primarily generated column with an auto-increment value that is automatically generated. It also has a name column that is string-based.

//Post.entity.ts
import {Entity, PrimaryGeneratedColumn, Column, OneToOne, JoinColumn} from "typeorm"; 
import {User} from "./User.entity"; 

@Entity() 
export class Post { 
   @PrimaryGeneratedColumn() 
   id: number; 

   @Column() 
   post: string; 

   @OneToOne(type => User) 
   @JoinColumn() 
   user: User;
}

Result

The Post entity has an id which is a primarily generated column and a string typed column called post.
It has a third column that is joined to the User entity via the @JoinColumn decorator.
A one-to-one relationship with the type directed to the User entity is established in this column.

@JoinColumn specifies which side of the relation contains the join column with a foreign key. It allows you to customise the names of the join column and the referenced column.

When we use @JoinColumn on a column, the database creates a column by default named propertyName + referencedColumnName. In the example used above, the property name is user while the referenced column name is by default id of the User entity, therefore a new column called userId is created as shown in the result above.

However, the column name can be explicitly set instead of the default naming convention by using
@JoinColumn({ name: "user_post_id" })

//Post.entity.ts 
import {
  Entity,
  PrimaryGeneratedColumn,
  Column,
  OneToOne,
  JoinColumn,
} from 'typeorm';
import { User } from './User.entity';

@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  post: string;

  @OneToOne((type) => User)
  @JoinColumn({  name: "user_post_id" })
  user: User;
}

In the code snippet above, the @JoinColumn had a name property added, therefore the new column created will be user_post_idinstead of the default name of userId.

Result

The @JoinColumn always refers to the primary column of the related entity by default.

If we want to create a relationship with other columns of the related entity, we can do so as:

//User.entity.ts 
import { Entity, PrimaryColumn, Column } from 'typeorm';

@Entity()
export class User {
  @Column()
  id: number;

  @PrimaryColumn()
  name: string;
}

This entity is quite different from the one created above in that the name is the primary column and not the id column. This is necessary because we intend to reference name column in the JoinColumn for Post entity below and it has been earlier stated that the @JoinColumn can only reference a primary column.

//Post.entity.ts 
import {
  Entity,
  PrimaryGeneratedColumn,
  Column,
  OneToOne,
  JoinColumn,
} from 'typeorm';
import { User } from './User.entity;

@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  post: string;

  @OneToOne((type) => User)
  @JoinColumn({ referencedColumnName: 'name' })
  user: User;
}

Result

One-to-many relationship

When one row in one table, say Table A, is linked to multiple rows in another table, say Table B, but only one row in Table B is linked to one row in Table A, a one-to-many relationship is formed.

In the case of a Customer and an account entity, a customer can own multiple accounts, whereas an account can only be owned by one customer.

//Customer.entity.ts
import { Entity, PrimaryGeneratedColumn, Column, OneToMany } from 'typeorm';
import { Account } from './Account.entity;

@Entity()
export class Customer {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @OneToMany(() => Account, (account) => account.customer)
  account: Account[];
}

Result

The Customer entity has a name column and has a one-to-many relationship because one customer can have many account. We added @OneToMany to the account property in the customer entity and specified Account as the target relation type.

It is important to note that the @JoinColumn can be omitted in a many-to-one or one-to-many relationship.

//Account.entity.ts
import { Entity, PrimaryGeneratedColumn, ManyToOne } from 'typeorm';
import { Customer } from './Customer.model';

@Entity()
export class Account {
  @PrimaryGeneratedColumn()
  id: number;

  @ManyToOne(() => Customer, (customer) => customer.account)
  customer: string;
}

Result

The Account entity has a many-to-one relationship because multiple accounts could belong to one customer.
We added @ManyToOne to the customer property in the Account entity and specified Customer as the target relation type.

@ManyToOne cannot exist without @OneToManyas it is required if @OneToManyneeds to be used.

Many-to-one relationship

This relationship is similar to a one-to-many relationship but from a different perspective.

When multiple rows in one table are linked to a single row in another table, a many-to-one relationship is formed.

Looking at a Customer and an Account entity, where a customer can own many accounts in a one-to-many relationship, it is also true that multiple accounts can belong to a single customer in a many-to-one relationship.

Multiple entries in the account table can belong to the same row in the customer table.
An example is quite similar to the one-to-many relationship explained above.

Many-to-many relationship

When multiple rows in one table are linked to multiple rows in another table, a many-to-many relationship is formed.

In a Customer and Product entity, for example, a customer can buy more than one product, and a product can be bought by more than one customer.

//Product.entity.ts 
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm"

@Entity()
export class Product {
    @PrimaryGeneratedColumn()
    id: number

    @Column()
    name: string
}

Result

//Customer.entity.ts 
import {
    Entity,
    PrimaryGeneratedColumn,
    Column,
    ManyToMany,
    JoinTable,
} from "typeorm"
import { Product } from "./Product.entity"

@Entity()
export class Customer {
    @PrimaryGeneratedColumn()
    id: number

    @Column()
    name: string

    @ManyToMany(() => Product)
    @JoinTable()
    product: Product[]
}

The Customer and the Product entity are quite similar except the Many-to-many relationship built on the product column of the Customer table. This table is joined with the Product table using a @JoinTable decorator.

@JoinTable should be added to one of the entities, typically the owning entity.

Due to this decorator, a new table will be created with the default name as table_tableProperty_referencedTable.
In our example, this table will be created as customer_product_product. In this new table, there are two columns which are customerId and productId.
Data stored in this table are entries of a customer id and multiple products bought by such customer and also entries of product id and customers who bought them.
Result

Why is this knowledge important?

Understanding how relationships work in database management is an important concept for a software engineer to understand. The significance of this knowledge cannot be overstated, as relationships are the logic that underpins business rules. Databases are generally about table interaction, and by understanding how the interaction/relationships work, you can begin to make more meaningful business designs as a developer. It aids in the avoidance of many schema errors in database design, as well as the reduction of future limitations in the enhancement of business features.

Conclusion

In this article, we learned how relationships work and the different types of database relationships in typeORM. We also briefly discussed why understanding relationships is important in database management.

What exactly is 'this'? Understanding JavaScript's Call(), Bind(), and Apply() methods.

Mary Okosun — Fri, 03 Jun 2022 14:08:13 +0000

A commonly used keyword in some programming languages is this. This term allows you to refer to an object from within it. One of the more perplexing aspects of Javascript is that this value varies based on the context in which it is invoked.

It refers to the global scope by default, but it refers to the function when invoked within it. We'll learn about the this keyword, as well as why and when to utilize call , bind , and apply in JavaScript, in this article.

The value of this is assigned when a method or function is called. And NOT where it is defined!

const myLanguages = {
  firstLanguage:"Javascript",
  secondLanguage: "Python",
  language() {
    return `I code in ${this.firstLanguage} and ${this.secondLanguage}`;
  }
}

In the example above, the method language() has access to the properties of its object myLanguages, and therefore the this is function-scoped in this situation. In this scenario, myLanguages.language() would return as shown below.

myLanguages.language(); //I code in Javascript and Python

In another scenario, let us assign the method to the variable globalScope. If we try to console this variable, we can see that the this is no longer accessible within the myLanguages object; instead, it is now global scoped and it is now pointing to the window object and it would return an undefined because firstLanguage and secondLangauge are not available globally.

const globalScope = myLanguages.language
console.log(globalScope()) //I code in undefined and undefined

However, if we set a firstLanguage and secondLangauge property to the window object, we can now access both properties globally using the method of the myLanguages object.

window.firstLanguage = "Laravel";
window.secondLanguage = "Golang";
console.log(globalScope()) //I code in Laravel and Golang

So again, to reiterate, the value of this is assigned only when a method or function is called, not when it is defined. Although the this keyword was specified within the scope of the function, its value was allocated at the point where it was invoked in our example.

Now that we have a fundamental knowledge of how the this concept works, we can now delve into the call, bind, and apply methods as these concepts would help solve the issue of this scope.

Using these predefined methods, we can assign the value of this to whatever we want as they can be used to set the this keyword independent of how a function is called.

Call()

This is a method that is predefined in JavaScript. It's used to call or invoke a method that takes the owner object as an argument. An object can use a method that belongs to another object by using the call() function. You can write a method once and then call it from another object without having to rewrite the method.

The format for a call() method can be seen as:

Object.function.call(this.Args)

In the example below, we have two objects relation1 and relation2 that can access the method faveRelation and we utilize the call() method with the owner object as its argument to scope this to be particular for each object.

const person = {
 faveRelation() {
 return `${this.name} is my favourite ${this.relation}`;
 }
}
const relation1 = {
 name:"Jamie",
 relation: "uncle"
}
const relation2 = {
 name:"Austin",
 relation: "nephew"
}
person.faveRelation.call(relation1); //Jamie is my favourite uncle
person.faveRelation.call(relation2); //Austin is my favourite nephew

The call() method accepts arguments as well. These arguments are comma-separated. They will be passed to the function call.

The format for a call() method with arguments can be seen as :

Object.function.call(this.Args, argument1, argument2, ...)

The code below is similar to what we had before, except it now includes method arguments.

const person = {
 faveRelation(city, country) {
 return `${this.name} is my favourite ${this.relation} and he lives in ${city},${country}`;
 }
}
const relation1 = {
 name:"Jamie",
 relation: "uncle"
}
const relation2 = {
 name:"Austin",
 relation: "nephew"
}
person.faveRelation.call(relation1, "Lagos", "Nigeria"); //Jamie is my favourite uncle and he lives in Lagos,Nigeria
person.faveRelation.call(relation2, "Benin-city", "Nigeria"); //Austin is my favourite nephew and he lives in Benin-city,Nigeria

Apply() Method

The apply() method is similar to the call() method. The distinction is that the call() method takes individual parameters, whereas the apply() method takes an array of arguments. A TypeError will occur if this is not done.

The format for an apply() method with arguments can be seen as :

Object.function.call(this.Args, [argument1, argument2, ...])

The apply() method is very handy if you want to use an array instead of an argument list.

If you had an array of numbers, say [1, 2, 3], and you want to determine the largest number, you could use this method. You'd utilize the apply() method with the array of integers as an argument, using the Math object and the max method. Because we don't have an object to refer to, the null keyword is used.

The null value is used in JavaScript to represent the intentional absence of any object value.

console.log(Math.max.apply(null,1,2,3)) // TypeError
console.log(Math.max.apply(null,[1,2,3])) // 3

Using the example below, let us see how the apply() method is used.

const person = {
 faveRelation: function(city, country) {
 return `${this.name} is my favourite ${this.relation} and he lives in ${city},${country}`;
 }
}
const relation1 = {
 name:"Jamie",
 relation: "uncle"
}
const relation2 = {
 name:"Austin",
 relation: "nephew"
}
person.faveRelation.apply(relation1, ["Lagos", "Nigeria"]); //Jamie is my favourite uncle and he lives in Lagos,Nigeria
person.faveRelation.apply(relation2, ["Benin-city", "Nigeria"]); //Austin is my favourite nephew and he lives in Benin-city,Nigeria

Bind() method

The bind() method, unlike the call() and apply() methods, does not instantly execute the function. It simply returns a new version of the function whose this sets to argument thisArg .

The format for a bind() method can be seen as :

const bound = Object.function.bind(thisArgs);
bound()

In the example below, we called the bind() method of the person.faveRelation() method and pass in the relation1 as its argument. The boundFavePerson() function is then called.

const person = {
 faveRelation: function() {
 return `${this.name} is my favourite ${this.relation}`;
 },
 favAnimal: function(hobby, animal) {
 return `${this.name} enjoys ${hobby} and loves ${animal}`;
 }
}
const relation1 = {
 name:"Jamie",
 relation: "uncle"
}
const relation2 = {
 name:"Austin",
 relation: "nephew"
}
const boundFavePerson = person.faveRelation.bind(relation1); 
console.log(boundFavePerson()); //Jamie is my favourite uncle

You can call the bind() method by passing the arguments directly or passing the arguments in the bound function itself.

You can either pass the arguments directly to the bind() method (Method1) or pass the arguments to the bound function itself (Method2).

The format for a bind() method with arguments can be seen as :

//Method1
const bound = Object.function.bind(thisArgs, argument1, argument2);
bound()

//Method2
const bound = Object.function.bind(thisArgs);
bound(argument1, argument2)


//Arguments passed directly
const boundPerson = person.favAnimal.bind(relation1, "surfing", "dogs"); 
console.log(boundPerson()); //Jamie enjoys surfing and loves dogs.

//Arguments passed in the bound function itself
const boundPerson1 = person.favAnimal.bind(relation2); 
console.log(boundPerson1("reading", "cats")); //Austin enjoys reading and loves cats

Conclusion

From this article, we have learned:

How the this keyword is scoped in Javascript.
When a method or function is invoked, the value of this is assigned, not when it is defined.
We also learned how to set the this keyword regardless of how a function is invoked using the call, bind, and apply methods.

If you found this article useful, please share it with your network, and if you have any comments, please drop them! I'd be delighted to help 🙂

References

Scheduling Tasks In Node.js With Node Cron

Mary Okosun — Mon, 09 May 2022 10:51:23 +0000

INTRODUCTION

The essence of technology is to make productiveness faster and easier. Have you ever wanted to automate some tasks on your application? Then this tutorial is for you.

In this article, you would learn how to automate scheduling emails in your node.js application using node-cron.

Even if you are not interested in scheduling a job in node.js, you may still find the knowledge of the cron syntax from this article very useful, so stick around👌

PREREQUISITES

This tutorial is a hands-on demonstration of how you can automate scheduled emails. Before proceeding, ensure you have the Javascript runtime environment Node.js on your local computer.

WHAT IS SCHEDULING AND WHY NODE-CRON?

According to Oxford Dictionary, Scheduling refers to plan an activity at a specific date or time in the future. This tutorial is based on the words that are being highlighted.

In node.js, we can plan(referred to as function) an activity(referred to as job) to run at a specific date or time(referred to as expression) in the future. This is paramount as you cannot schedule a task to run at a past time.

Node cron is an npm package used to schedule jobs that runs at specific time or date intervals. Instances of jobs that can be scheduled include logging at intervals, backing up a database, and sending out scheduled emails and email notifications. Node-cron is based on cron, the time-based job scheduler in Unix-like systems.

There are several npm packages that handle scheduling in node.js, such as node-schedule, node-cron , Agenda, Bree, Cron, and Bull, but for the purpose of this tutorial, we would be working with node-cron because it is quite mature and stable. It is also preferable because we are making a simple job scheduling.

PROJECT SETUP

To get started, we need to go to our terminal and create a project directory using the following command:

mkdir email-node-cron

We can then move into the created directory using the cd command

cd email-node-cron

We need to create a new file index.js in the email-node-cron directory

touch index.js

The following command initializes the project and creates a package.json file in the root folder.

npm init -y

The -y suffix is a shortened form of the -yes flag. It is used to accept the prompts that come from npm init automatically. It will populate all the options automatically with the default npm init values.

Install dependencies

As stated earlier, node-cron is an npm package, so we need to install it as a package dependency in our project.

npm install node-cron

We also need to install the nodemailer and dotenv package dependency. Nodemailer is an npm package that allows you to send emails.

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

npm install nodemailer
npm install dotenv

After setting up our project and installing dependencies, our folder structure should be like this.

SCHEDULING AN EMAIL AUTOMATION JOB

Let us start writing codes for our job and the code snippet below requires the node-cron package in our index.js file

// index.js
const cron = require('node-cron');

To schedule a task, the node cron package has a schedule method that takes in three arguments.

const cronJob = cron.schedule(expression, function, options)

The first argument known as cron expression specifies the date and time at which the job should execute.
The second argument specifies the function that executes at intervals.
The third argument is an optional configuration of the node cron job.

NODE CRON EXPRESSION

The cron expression which is the first argument is a string that specifies the date and time interval of a job. It comes in the format * * * * * *. Each * is a field and the representation of each field with the values is illustrated in the image below.

The seconds field is an optional field and can be omitted when writing an expression.

There are various ways to populate a cron expression, but, in this tutorial, we would be populating the cron expression with single integer values.

For instance, if we want to send an email to our subscribers every Thursday at 9:50:10 AM, our expression would be like 10 50 9 * * 4

This would run the node-cron job at the tenth second of the fiftieth minute of the ninth hour. Since we did not specify a value for the day of the month and month field, it interprets * to mean every month. But we specified the fourth day of the week, thus this job would run every Thursday at 9:50:10 AM.

Can we attempt writing a cron expression for sending an email to our subscribers on the 15th of every month at 2:30 pm? 😊

NODE CRON FUNCTION

The function is the second argument of the schedule method and it specifies the function that should execute. In our case, the function would be sending emails to our subscribers.

Here, we would require the nodemailer package and then create a mail transporter transporter that sets the username and password of our email account.

It is considered a good software development practice to always store credentials in an environment variable (.env) file.

So let us create a .env file in the root folder

touch .env

Run the following code snippets to add your credentials to the .env file.

//.env file
EMAIL=youremailaddress@gmail.com
PASSWORD=youremailpassword

You need to configure the index.js file so that it can have access to your .env file variables.

const nodemailer = require('nodemailer');
const dotenv = require('dotenv');

// .env configuration
dotenv.config()

In the index.js file, the code snippet above requires the dependencies nodemailer and dotenv installed earlier. It is then configured using the .config() method. In order to use nodemailer, we are expected to do the following:

Create a Transporter object transporter

// creates a mail transporter here
let transporter = nodemailer.createTransport({
   service: "gmail",
   auth: {
      user: process.env.EMAIL,
      pass: process.env.PASSWORD,
   },
});

Create an object MailOptions

let mailOptions = {
      from: 'EMAIL NODE CRON APP',
      to: process.env.EMAIL,
      subject: "Scheduled Email",
      html: `<p>Hello there,</p>
      <p> You have an email scheduled from <b>EMAIL NODE CRON APP</b> </p>
      <p>Keep learning👌👌</p>
      Kind regards, <br>
      <h4> EMAIL NODE CRON APP</h4>`
   };

Use the sendMail method on the object transporter

transporter.sendMail(mailOptions, (error, info) => {
      if (error) {
         console.log("Email error application", error.message);
      } else {
         console.log(`${new Date().toLocaleString()} - Email sent successfully:` + info.response);
      }
   });

In the index.js file, we have the function that needs to execute to send emails to our subscribers. We would take a quick look at the optional argument before we set up our cron job properly.

NODE CRON OPTION

The option is the third argument of the cron schedule method and it is an optional configuration for the job scheduling. It is an object that contains the following:

scheduled : This is a boolean to set if the created task is scheduled. The default value is set to true. When_scheduled_is set to true, the job runs automatically when the cron expression is fulfilled, however when set to false, you need to invoke a start()method to the job object like this job.start()
timezone : This is the timezone that is used for job scheduling. The default timezone is that of the system used in scheduling the cron job. You can check out moment-timezone for valid timezone values.

An instance of this is:

{ 
scheduled: false, 
timezone: Asia/Tokyo
}

Now, we have a pretty good understanding of what each argument means and how they are important in creating a good cron job. We would set up our cron job and executes the job too.

In the code snippet below, we would create a node cron job that schedules emails sent to our subscribers every minute.

Our index.js file should be like this:

const cronJob = require('node-cron');
const nodemailer = require('nodemailer');
const dotenv = require('dotenv');

// .env configuration
dotenv.config();

// creates a mail transporter here
let transporter = nodemailer.createTransport({
   service: "gmail",
   auth: {
      user: process.env.EMAIL,
      pass: process.env.PASSWORD,
   },
});

// Sending emails every minute
cronJob.schedule('59 * * * * *', () => {
   let mailOptions = {
      from: 'EMAIL NODE CRON APP',
      to: process.env.EMAIL,
      subject: "Scheduled Email",
      html: `<p>Hello there,</p>
      <p> You have an email scheduled from <b>EMAIL NODE CRON APP</b> </p>
      <p>Keep learning👌👌</p>
      Kind regards, <br>
      <h4> EMAIL NODE CRON APP</h4>`
   };

   transporter.sendMail(mailOptions, (error, info) => {
      if (error) {
         console.log("Email error application", error.message);
      } else {
         console.log(`${new Date().toLocaleString()} - Email sent successfully:` + info.response);
      }
   });
});

console.log('Application started.....');

In your terminal, type in the code snippet node index.js to start your application.

NB: If you are having an error message of
Email error application Invalid login: 535-5.7.8 Username and Password not accepted.
You might need to allow less secured apps to test if you are using a Gmail address.

This is a screenshot of my terminal and the email delivered to my inbox.

Terminal

Email Inbox

CONCLUSION

In this tutorial, you have learned how to automate scheduling emails in your node.js application using node-cron. This knowledge can be applied in your future projects to be more productive and also avoid repetitive tasks that node-cron can handle.

You can access the GitHub repository for the sample code used in this tutorial.

REFERENCES

A quick and simple editor for cron schedule expressions by Cronitor

https://www.freecodecamp.org/news/schedule-a-job-in-node-with-nodecron/

https://www.digitalocean.com/community/tutorials/nodejs-cron-jobs-by-examples

Primitive Values And Reference Values As Regards Memory Allocation

Mary Okosun — Wed, 26 Jan 2022 14:22:44 +0000

All programming languages have their in-built data structures, however, they differ from each other.

In this article, we would understand the types in JavaScript and learn the different types with references to their use cases and memory allocation. Javascript is a loosely-typed programming language as it allows to assign and reassign values of different types to a variable.

In JavaScript, we have 8 data types which are

String
Number
Boolean
Null
Undefined
Functions
Array
Objects.

The values of these types are classified into Primitive Values and Non-primitive/Reference Values. The primitive values are values of the data types that includes String , Number , Boolean , Null , and Undefined while the Non-primitive or reference values are values of the data types Functions , Array , and Object.

Therefore Primitive Data Types are data types of the primitive values and Non-primitive/Reference Data Types are data types of the reference values. When you declare a variable, the JavaScript engine allocates the memory for them on two memory locations which are the STACK and HEAP.

I wrote an in-depth article about the JavaScript runtime engine here. You can check it out to understand how the JavaScript environment handles variable allocation.

Primitive Data Type

Primitive data types are immutable i.e they can not be modified.

A primitive data type is a sub-class that allows the assignment of a variable to be by value. When a variable is assigned to a value with the primitive data type, the Javascript engine allocates the memory for it on a stack.

A stack is a data structure that allows elements to be added and removed in a particular order. It can be used to store static data. A static data means that the Javascript engine knows the size of such data at compile time.

Let us check out this example to understand better.

let foo = 20 // Initial assignment 
let bar = foo // Assignment of variable *bar* to *foo* variable
foo = 40 // Re-assignment
console.log(foo) // 40
console.log(bar) // 20

From this code, we can see that the variable foo was initially assigned the value of 20 and that variable is pushed to the top of the stack. A new variable bar was assigned to foo, in the case of a primitive data type of which the type string is inclusive, only the value of foo which is 20 is assigned to bar. The variable bar with its value is pushed to the call stack.

In the next line, we can see a reassignment of the value 40 to the variable foo. When we log both variables to the console, we can see the results of both variables.

From the code above, we can understand that the reassignment of a value to a primitive data type does not change the value of the initial assignment.

From the image above, we can see that for each assignment of the variables, they are placed at the top of the stack.

Reference Data Type

Reference data types are mutable i.e they can be easily modified.

In reference type, the assignment of a variable is done by reference. All the reference data types are technically objects so we would collectively refer to them as Objects.

The variables that are assigned to a non-primitive value are usually given a reference to that value. This reference points to that object's address/location in memory. Note that the variables do not themselves contain the value.

let obj = { a: 'I', b: 'love', c: 'JavaScript'}
let newObj = obj
newObj.c = 'Python'
console.log (obj) // { a: 'I', b: 'love', c: 'Python' }
console.log(newObj) // { a: 'I', b: 'love', c: 'Python' }

In the code above, we created an object in memory, and a location and an address of the array are created. Using memory allocation, the address is the stack while the location is the heap. All variables usually first point to the stack. If it is a non-primitive value, the stack would contain a reference to the object in the heap.

From the image above, we can see that for the assignment of the obj variable, the value is not associated with the variable rather an address/reference is pushed to the stack, and a location/object is pushed to the heap. For the assignment of the newObj variable to the obj, it points to the same address and location of the obj variable. When there is a reassignment of the new Obj property, this affects the location thereby changing the value of every variable that points to that location, in our case, affecting the obj and newObj variables.

The memory of the heap is not usually ordered which is why we need to keep a reference to it in the stack.

We can think of the REFERENCES in the stack as the ADDRESS and the OBJECTS in the heap as the LOCATION that the address belongs to.

CONCLUSION

In this article, we were able to:

Understand the various JavaScript data types which are String, Number, Boolean, Null, Undefined, Functions, Array, and Objects.
Understand that primitive data types are immutable i.e they can not be modified, and a non-primitive data type can be easily modified.
Understand how JavaScript handles primitive values and non-primitive values using HEAP and STACK.

RESOURCES

Some resources that helped me understand this concept better include:

If you found this article helpful, don't forget to give a thumbs-up 👍 , and please share with your network. I would appreciate a comment if you have any questions or feedback.

Happy coding👌👌!!!

Understanding JavaScript Runtime Environment

Mary Okosun — Fri, 07 Jan 2022 13:54:16 +0000

In becoming a better JavaScript developer, you need to understand the concept of how JavaScript executes scripts under the hood. In this article, we will better understand how the JavaScript runtime environment works.

The Javascript runtime environment allows Javascript code to be run and consists of the Javascript engine , the Web APIs , a callback queue, and the event loop. The web browser has an inbuilt runtime environment, as in the case of the Chrome browser, called the V8 engine. This enables JavaScript codes to be run on the web browser.

However, in order to run JavaScript code outside of the browser, the JavaScript runtime environment needs to be made available. For example, Node.js is a JavaScript runtime environment that allows you to run JavaScript codes outside of the web browser.

CALL STACK

The JavaScript engine uses a call stack to manage script execution.

According to MDN, a call stack is a mechanism for an interpreter (such as the Javascript interpreter) to keep track of functions in a script that call multiple functions, i.e., what function is currently being run and what functions are being called from within that function.

When you execute a script, the JavaScript engine would create a Global Execution Context and push it to the top of the call stack.

Global Execution Context is the default execution context in which JS code start its execution when the file first loads in the browser.

Whenever a function is called, the JavaScript engine creates a Function Execution Context for the function, pushes it on top of the call stack, and starts executing the function.

A functional execution context is the context created by the JS engine whenever it finds any function call. Each function has its own execution context.

If a function calls another function, the JavaScript engine creates a new Function Execution Context for the function that is being called and pushes it on top of the call stack.

function multiply(a, b){
  return a * b;
}

function square(c){
  return multiply(c,c);
}

square(8)

From the image above, when the script is executed, a global execution context is created main() .The first function, which is square() is executed and pushed as the first item on the stack. Subsequently, the function multiply() is executed and pushed to the top of the stack.

A function is immediately popped out of the stack when a script gets to a return statement, . Therefore, the multiply is popped first, followed by the square function, and then the main().

As soon as the call stack is empty, the script stops execution .

The call stack uses the LIFO principle (Last In, First Out).

The last function in the stack, multiply() is the first function that popped out.

STACK OVERFLOW ERROR

When a function is being invoked recursively, i.e., a function keeps calling itself without any point of exit, it returns a stack overflow error.

This happens because a call stack has a limited size and when this size is exceeded, it throws an error. RangeError: Maximum call stack size exceeded

The maximum call stack size limit ranges from 10 to 50 thousand calls. For the chrome browser, the size limit is 16,000.

function baz(){
  baz();
}
baz()

WEB APIs

Javascript is a single threaded language, which means that it runs synchronously and handles tasks one at a time. JavaScript has a single call stack, due to its single-threadedness.

In this section, we will look at how asynchronous functions operate and how they are placed in the order of execution in JavaScript.

While JavaScript as a language is synchronous, it is possible to run tasks asynchronously, and this is possible through the APIs provided by the browser.

Application Programming Interfaces (APIs) are constructs made available in programming languages to permit developers to form complex functionality more easily. They abstract more complex code far from you, providing some easier syntax to use in its place.

The APIs in client-side JavaScript are divided into two categories:

Browser/Web APIs
Third-party APIs

Browser APIs : These are built into the browser that sits on top of the JavaScript language and permit you to implement functionality more easily.
Third-party APIs : These are built into third-party platforms (e.g., Twitter, Facebook) that allow you to use a number of those platforms's functionality in your own sites (for example, displaying your latest Tweets on your web page).

For instance, when we make an API request or image load to the server, the interpreter would not be able to do anything else until a response is gotten from the server.

This can make our application slow and unusable . With the web APIs, the execution is handled, so this would not block the call stack, and other tasks can be run while we wait for the response.

const a = () => console.log('I');
const b = () => setTimeout(() => console.log('love'), 1000);
const c = () => console.log('JavaScript');

a();
b();
c();

From our initial knowledge of the call stack, the result should be printed as I, love and then JavaScript because the functions have a console.log statement and the script should be executed after each console.log or return statement.

However, the setTimeout function is an asynchronous function, and it is being executed concurrently while the next statement is being executed.

Steps of execution

function a is invoked and executed first. The result I is output (Step 1).
function b is invoked and triggers the execution of the web API (Step 2), and after setTimeout finishes its execution, it adds the callback to the callback queue. In the next section, we will learn what the callback queue is.
function c is invoked and executed last, but it is output second because while the setTimeout is being executed asynchronously, the JS interpreter continues to this task and the result JavaScript is output (Step 3).

CALLBACK QUEUE AND EVENT LOOP

When an asynchronous function like setTimeout gets called, after being executed by the Web APIs, it gets added to the callback queue (Step 4).

A callback queue uses the First-In, First-Out (FIFO) principle.

The functions added to the callback queue are processed in that order. When the event loop in Javascript is fired, it first checks the call stack to see if it is non-empty.

An event loop monitors the call stack and the callback queue. If the call stack is empty, the event loop will take the first event from the queue and will push it to the call stack, effectively running it.

In our code instance used above, the event loop checks the call stack to be empty after function a and function c have been executed and takes function b from the callback queue and pushes it to the call stack where it gets executed (Step 5). The script is said to be completed when the call stack and the callback queue are empty.

CONCLUSION

I hope this article was able to help you understand some concepts happening behind the scenes of your JavaScript code. Please leave a comment if you have any questions or feedback.

Some resources I found helpful while researching on this topic: