The Node.js event loop is a crucial mechanism in Node.js that makes Node.js programs run concurrently and asynchronously. Mastering the Node.js event loop helps a Node.js developer understand how Node.js programs run under the hood.

In this article, you will learn the basics of the event loop, starting with threads and processes, then how the JavaScript event loop works, and finally, how the Node.js event loop works.

What are Threads and Process?

To master the Node.js event loop, you must understand processes and threads.

A programmer can write programs that perform different tasks with different programming languages. While some programming languages can run just one task at a time, other programming languages can run several tasks simultaneously.

A process involves several tasks running in a program from start to finish, while a thread is the running of an individual task.

A process consists of all the steps a program takes to run till completion. It is a currently executing program. A program may have one or more independent processes, each having its own memory space or address. A process may have one or more threads in it.

A thread is a single unit of execution that is part of a process, like a task in a program. A thread has a thread ID, a register set, and a stack. A thread also shares its code section, data section, operating system resources, and memory space with other threads in a process.

The code below contains an isNumberEven function that checks if a number is even and an isNumberOdd function that checks if a number is odd. A process involves running this code from start to finish, while a thread involves running individual functions.

function isNumberEven(number) {
  if (number % 2 === 0) {
    return true;
  } else {
    return false;
  }
}

function isNumberOdd(number) {
  if (number % 2 !== 0) {
    return true;
  } else {
    return false;
  }
}

isNumberEven(6);
isNumberOdd(1);

What are Single-threads and Multi-threads?

All programming languages have a runtime engine that runs their code. Some runtime engines are single-threaded (which means they can only run one thread at a time), while some are multi-threaded (which means they can run more than one thread at a time).

The diagram below shows a single-threaded process and a multi-threaded process:

Single-threaded and Multi-threaded Processes

A single-threaded programming language has a single-threaded runtime engine that runs tasks in a program sequentially. A multi-threaded programming language has a multi-threaded runtime engine that runs tasks in a program simultaneously. A multi-threaded runtime engine is more performant than a single-threaded runtime engine.

Programming languages like Java, C#, and so on are multi-threaded, while languages like JavaScript, Python, and so on are single-threaded.

Single-threaded programming languages are synchronous, which means they run the task in their programs sequentially. JavaScript is synchronous, but its event loop makes it asynchronous.

In the upcoming sections, you will learn how the JavaScript event loop works and then master the Node.js event loop.

How the JavaScript Event Loop Works

You must understand how the JavaScript runtime engine runs JavaScript code for you to understand the JavaScript event loop.

The JavaScript runtime engine consists primarily of the:

• Memory heap and

• Call stack

The memory heap is where variables declared in the program are allocated memory space, and the call stack is where the runtime engine stores functions in the program for execution.

The JavaScript runtime engine runs the code below synchronously and in this step-by-step process:

• It allocates memory space for all the variables in the code.

• It executes the exponentiation function after pushing onto the call stack.

• It executes the validatePassword function after pushing it onto the call stack.

function exponentiation(base, exponent) {
  let result = 1;
  for (let i = 0; i < exponent; i++) {
    result *= base;
  }
  return result;
}

function validatePassword(password) {
  const hasUppercase = /[A-Z]/.test(password);
  const hasLowercase = /[a-z]/.test(password);
  const hasNumber = /[0-9]/.test(password);
  const isValidLength = password.length >= 8;

  if (hasUppercase && hasLowercase && hasNumber && isValidLength) {
    return "password is valid";
  } else {
    return "password is invalid";
  }
}

exponentiation(5, 3);
validatePassword("Ab01234");

If your code contains a blocking function, which is a function that takes a lot of time to run, the function will block other functions from running until it completes. Users can’t interact with a website that has a blocking function as part of its code while the function runs.

The code below contains the fibonacci function, which takes time to run. The runtime engine starts running the factorial function first, then the fibonacci function, during which the findMin function can’t run.

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
}

function fibonacci(num) {
  if (num <= 1) {
    return num;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
}

function findMin(numbers) {
  if (!numbers || numbers.length === 0) {
    throw new Error("Empty array provided");
  }

  let min = numbers[0];
  for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] < min) {
      min = numbers[i];
    }
  }
  return min;
}

let numbers = [4, 2, 8, 1, 6];

factorial(5);

fibonacci(45);

findMin(numbers);

To make the program in the example above run asynchronously, you should make the fibonacci function non-blocking with JavaScript web APIs.

JavaScript web APIs do not run on the main thread but instead create their threads, which enables them to run concurrently and not block the execution of other functions in your code.

You can use these JavaScript web APIs to make your functions non-blocking:

• setTimeout

• AJAX and

• DOM

So, if you add a setTimeout to your code like this:

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
}

function fibonacci(num) {
  if (num <= 1) {
    return num;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
}

function findMin(numbers) {
  if (!numbers || numbers.length === 0) {
    throw new Error("Empty array provided");
  }

  let min = numbers[0];
  for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] < min) {
      min = numbers[i];
    }
  }
  return min;
}

let numbers = [4, 2, 8, 1, 6];

factorial(5);

setTimeout(fibonacci(45), 3000);

findMin(numbers);

The factorial and findMin functions will run on the main thread, while the fibonacci function runs concurrently on a separate thread.

To properly understand how the program above runs, you must understand how the JavaScript event loop works. The JavaScript event loop is a mechanism by which tasks in a JavaScript program run asynchronously.

The JavaScript event loop has a callback queue that stores functions that take time to execute.

The event loop sends functions that execute immediately to the callback queue for execution and sends blocking functions to web API threads for execution.

Then, the event loop sends the blocking function back to the callback queue when the set time elapses. The event loop then checks if the call stack is empty before pushing the function in the callback queue to the call stack for execution.

The diagram below explains how the event loop in JavaScript works:

The JavaScript event loop

The code above that contains factorial, fibonacci, and findMin functions is executed like this after adding a setTimeout function.

The event loop pushes the factorial function onto the call stack for execution. Then, the event loop pushes the fibonacci function onto the call stack, but the fibonacci function has a setTimeout function that prevents it from executing immediately. So, the event loop pushes the fibonacci function to a separate thread for web APIs to run concurrently.

Then, the event loop pushes the findMin function onto the call stack for execution. When the time set in the setTimeout elapses, the event loop pushes the fibonacci function to the call stack for execution.

How The Node.js Event Loop Works

Node.js is a JavaScript runtime environment that enables JavaScript to run outside the browser, like on the command line interface, servers, and hardware.

Node.js has an event loop that is similar to the JavaScript event loop. The Node.js event loop and the JavaScript event loop have a call stack and a callback queue. The Node.js event loop is implemented and managed by a library named libuv written in C.

The Node.js event loop has six phases, which are:

• Timer phase

• Pending Callbacks Phase

• Idle Phase

• Poll Phase

• Check Phase

• Close Callbacks Phase

The diagram below shows how the Node.js event loop works:

The Node.js event loop

There is a microtask queue that exists outside of the Node.js event loop. The microtask queue consists of the nextTick queue and the Promise queue. The nextTick queue runs the process.nextTick function, while the Promise queue runs .then, .catch, and other promises.

In the upcoming sections, you will learn about each phase of the Node.js event loop.

Timer Phase

There are three timers in Node.js: setTimeout, setInterval, and setImmediate. setTimeout and setInterval run in the timer phase. The code sample below runs during the timer phase:

setTimeout(() => {
  console.log("setTimeout callback executed");
}, 1000);

setInterval(() => {
  console.log("setInterval callback executed");
}, 2000);

Pending Callbacks Phase

I/O operations execute in the poll phase of the event loop. During the poll phase, some specific I/O operations callbacks defer to the pending phase of the next iteration of the event loop. I/O operations callbacks deferred from the previous iteration run in the pending callbacks phase.

The code sample below runs during the ‘pending callbacks’ phase:

const fs = require("fs");

fs.readFile(__filename, (err, data) => {
  if (err) throw err;
  console.log("File data:", data);
});

Idle Phase

The idle phase is not a normal phase of the Node.js event loop. It is a period whereby the event loop has nothing to do but perform background tasks like checking for low-priority results or running garbage collection.

To skip the idle phase and not perform background tasks, you can call the idle.ignore() method from the idle-gc package in your code.

const { idle } = require("idle-gc");

idle.ignore();

The idle.ignore() method ensures that the code continues to run without any idle period till completion. However, due to the performance issues it causes, the idle.ignore() method should be used sparingly.

Poll Phase

The poll phase is where I/O operations execute. I/O operations transfer data to or from a computer. The event loop checks for new I/O operations and executes them in the poll queue.

The code sample below runs during the poll phase:

const http = require("http");

http.get("http://jsonplaceholder.typicode.com/posts/1", (res) => {
  console.log("HTTP request response received");
  res.on("data", (chunk) => {
    // Do something with the data
  });
});

Check Phase

The check phase is where the setImmediate timer runs. The Node.js event loop goes to the check phase when there is a setImmediate in the program, and the poll phase becomes idle or when the poll phase completes.

The code sample below runs during the check phase:

setImmediate(() => {
  console.log("setImmediate callback executed");
});

Close Callbacks Phase

The close callbacks phase is the last phase of the Node.js event loop. The close callback phase is where callbacks from the close event of a socket and the closing of an HTTP server run.

The code sample below runs during the check phase:

const http = require("http");

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
  server.close(() => {
    console.log('Server closed');
  });
});

Conclusion

The Node.js event loop is the mechanism that enables asynchronous programming in Node.js.

As a Node.js developer, you can understand how your Node.js code runs under the hood if you master the Node.js event loop.

This article explained processes and threads, the JavaScript event loop, and the Node.js event loop.

The JavaScript runtime engine makes it a synchronous programming language where programs run sequentially. Programming languages that are not synchronous are called asynchronous programming languages, which are programming languages where programs run concurrently.

Although JavaScript is synchronous, you can perform asynchronous programming with it. In this article, you will learn about asynchronous programming in JavaScript and how to use it.

What is Asynchronous Programming?

Asynchronous programming is a technique that allows your program to run its tasks concurrently. You can compare asynchronous programming to a chef with multiple cookers, pots, and kitchen utensils. This chef will be able to cook various dishes at a time.

Asynchronous programming makes your JavaScript programs run faster, and you can perform asynchronous programming with any of these:

• Callbacks

• Promises

• Async/Await

In the upcoming sections, you will learn about these techniques and how to use them.

Callbacks

A callback is a function used as an argument in another function. Callbacks allow you to create asynchronous programs in JavaScript by passing the result of a function into another function.

function greet(name) {
    console.log(`Hi ${name}, how do you do?`);
}

function displayGreeting(callback) {
    let name = prompt("Please enter your name");
    callback(name);
};

displayGreeting(greet);

In the code above, the greet function is used to log a greeting to the console, and it needs the name of the person to be greeted.

The displayGreeting function gets the person's name and has a callback that passes the name as an argument to the greet function while calling it. Then the displayGreeting function is called with the greet function passed to it as an argument.

Callback hell

Although callbacks make it easy to control and make your program asynchronous, you'll eventually run into a problem called callback hell while using them.

This problem arises when you perform multiple asynchronous tasks with callbacks, which might result in nesting callbacks in callbacks.

Here's an example:

function greet(callback) {
    setTimeout(function() {
        console.log("Hi Musab");
        callback();
    }, 1000);
}

function introduce(callback) {
    setTimeout(function() {
        console.log("I am your academic advisor");
        callback();
    }, 1000);
}

function question(callback) {
    setTimeout(function() {
        console.log("Are you currently facing any challenge in your academics");;
        callback();
    }, 1000);
}

// callback hell
greet(function() {
    introduce(function() {
        question(function() {
            console.log("Done");
        });
    });
});

In the code above, the greet, introduce, and question functions are nested to create a callback hell, which makes error handling difficult. You should change your asynchronous programming technique from callbacks to Promise to avoid the callback hell.

Promise

Most programs consist of a producing code that performs a time-consuming task and a consuming code that needs the result of the producing code.

A Promise links the producing and the consuming code together. In the example below, the displayGreeting function is the producing code while the greet function is the consuming code.

let name;

// producing code
function displayGreeting(callback) {
    name = prompt("Please enter your name");
}

// consuming code
function greet(name) {
    console.log(`Hi ${name}, how do you do?`);
}

In the example below, the new Promise syntax creates a new Promise, which takes a function that executes the producing code. The function either resolves or rejects its task and assigns the Promise to a variable named promise.

If the producing code resolves, its result will be passed to the consuming code through the .then handler.

let name;

function displayGreeting() {
    name = prompt("Please enter your name");
}

let promise = new Promise(function(resolve, reject) {
    // the producing code
    displayGreeting();
    resolve(name)
});

function greet(result) {
    console.log(`Hi ${result}, how do you do?`);
}

promise.then(
    // the consuming code
    result => greet(result),
    error => alert(error)
);

You can convert the previous callback hell's example to a promise by returning a promise from each function and chaining the function calls together with the .then handler.

You can also use the .catch handler to catch any error thrown during the function execution.

function greet() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("Hi Musab");
            resolve();
        }, 1000);
    });  
}

function introduce() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("I am your academic advisor");
            resolve();
        }, 1000);
    });
}

function question() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("Are you currently facing any challenge in your academics");;
            resolve();
        }, 1000);
    });
}

greet()
    .then(() => introduce())
    .then(() => question())
    .then(() => console.log("Done"))
    .catch(error => console.error("An error occured: ", error));

What are the States of a Promise in JavaScript?

A promise can be in any of these three states:

• Pending: This is the initial state of the promise and its state while it's still running.

• Fulfilled: This is the state of the promise when it resolves successfully.

• Rejected: This is the state of the promise when errors make it not to be resolved.

Async/Await

async/await is syntactic sugar for creating a Promise — it makes creating promises easier.

To make a function asynchronous using async/await, you have to write the async keyword before the function declaration. Then, you can write the await keyword before the producing code's execution call.

Here's an example:

let name;

function displayGreeting() {
    name = prompt("Please enter your name");
    return name;
}

function greet(result) {
    console.log(`Hi ${result}, how do you do?`);
}

async function greeting() {
    // the producing code
    let result = await displayGreeting();
    // the consuming code
    greet(result);
};

greeting();

In the example above, the producing code is the displayGreeting function, and the consuming code is the greet function. The greeting function is the Promise that connects the producing and the consuming code. It waits for the result returned from the displayGreeting function and passes that result to the greet function.

Error Handling in Async/Await

You can easily handle errors that arise when you perform asynchronous operations with async/await using the try...catch statement. The asynchronous operation executes in the try block, and you can handle errors in the catch block.

That is:

async function greeting() {
    try {
        let result = await displayGreeting();
        greet(result);
    } catch(err) {
        console.error(err)
    }
};

Conclusion

Asynchronous programming in JavaScript is used to make tasks in a program run concurrently and uses techniques such as callbacks, Promise, or async/await.

This article explains how to use these asynchronous programming techniques and how to handle errors with them.

You can check the promises and async/await section on the JavaScript.info website to learn more about asynchronous programming in JavaScript.

Next helps you add additional features and optimizations to your React apps like static site generation (SSG), server-side rendering (SSR), automatic code splitting and bundling, and dynamic API routes.

In this article, you will learn about dynamic API routes in Next.js: what they are, how to create them, and how to extend their functionalities.

What are API routes?

Before you know what an API route is, you should know what a route is and what an API is.

A route is a single path of nested folders. Next.js uses a page router to navigate to the various pages in a web application. Each file in the pages directory of a Next.js application's code represents a page on the web application.

For example, if you create a checkout.js file in your pages folder and you visit the URL: "your-app's-domain-name/checkout" on your browser, you will see the content of the checkout.js file rendered.

An API (short for application programming interface) serves as a means of communication between two computers or pieces of software. In a web application, an API facilitates communication between the client and the server.

An API route is a URL that directs incoming requests from the client to the appropriate server resource that will handle the requests.

API routes in Next.js enable you to create API endpoints as Node.js serverless functions. These endpoints allow you to make HTTPS requests and also communicate with a database.

How to Create an API Route

To create an API route you will create a folder named API in your pages folder. Any file inside the /pages/api directory will be treated as an API route instead of a page.

For instance, you can create a folder named API in your pages folder and then create a file named start.js inside it with the following code:

// pages/api/start.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Request successful' });
}

You have now created an API route. You can access this API route through this URL: /api/start. You can use it to handle an HTTP request and send back the response to the client.

The request argument is an instance of an HTTP incoming message plus some prebuilt middlewares. The response argument is an instance of an HTTP server response plus some helper functions.

You can create an API route to handle just one HTTP method. To do so you will need to create a new file named get.js. Then you can add this code to the file:

// pages/api/get.js

export default function handler(req, res) {
  if (req.method === 'GET') {
      res.status(200).json({ message: 'This is a GET request' });
  } else {
      res.status(405).json({ message: 'Method Not Allowed' });
  }
}

This API route can be accessed through this URL: /api/get and it will only handle HTTP get requests.

You can also create an API route to handle more than one HTTP method. To do so, create a new file named all.js and put this code in it:

// pages/api/all.js

function handler(req, res) {
  if (req.method === 'GET') {
      // Handle GET request
      res.status(200).json({ message: 'This is a GET request' });
  } else if (req.method === 'POST') {
      // Handle POST request
      res.status(200).json({ message: 'This is a POST request' });
  } else if (req.method === 'PUT') {
      // Handle PUT request
      res.status(200).json({ message: 'This is a PUT request' });
  } else (req.method === 'DELETE') {
      // Handle DELETE request
      res.status(200).json({ message: 'This is a DELETE request' });
  }
}

This API route can be accessed through this URL: /api/all and can handle four HTTP methods (GET, POST, PUT, and DELETE).

How to Create Dynamic API Routes

Next.js allows developers to create dynamic routes. Dynamic routes are routes whose segment names are not known ahead of time. They are created from dynamic data.

A dynamic API route is a form of dynamic route that allows you to create API endpoints with dynamic segments in the route path.

These segments are filled in at request time or pre-rendered at build time. They can also be cached by the browser, which can improve performance for frequently accessed pages. This makes them a good choice for applications that expect a lot of traffic.

Dynamic route syntax

There is a particular syntax for creating dynamic API routes in Next.js. Next.js allows you to create dynamic API routes by wrapping the file name in square brackets.

To create a dynamic API route for a library API that fetches author data with dynamic IDs, you can start by creating a new folder named authors and then create a file named [id].js and add the following code:

// api/authors/[id].js

export default function handler(req, res) {
  const { id } = req.query;

  if (req.method === 'GET') {
      res.status(200).json({ id, message: 'Author data fetched successfully' });
  }
}

The API route for the code above will be /author/[id], and if it is passed this parameter { id: '234' }, it will match the URL: /author/234.

You can make your dynamic API route handle different HTTP methods. To do so, delete the code in your [id].js folder and put in this code instead:

// api/authors/[id].js

export default function handler(req, res) {
  const { id } = req.query;

  if (req.method === 'GET') {
      res.status(200).json({ id, message: 'Author data fetched successfully' });
  } else if (req.method === 'POST') {
      res.status(200).json({ id, message: 'Author data sent successfully' });
  } else if (req.method === 'PUT') {
      res.status(200).json({ id, message: 'Author data updated successfully' });
  } else if (req.method === 'DELETE') {
      res.status(200).json({ id, message: 'Author data deleted successfully' });
  }
}

Catch-all segments

You can also pass sub-parameters to your dynamic API routes. To do this you will extend your dynamic API route to be able to catch all subsequent segments passed to it by adding an ellipsis before the file name in the square brackets. This ensures that the API routes can be passed more than one sub-parameter.

To create a dynamic API route that catches all segments, create a folder named store and create a file in you store folder named [...gadgets].js. Then add the following code:

// api/store/[...gadgets].js

export default function handler(req, res) {
  const { gadget } = req.query;

  if (req.method === 'GET') {
      res.status(200).json({ id, message: 'Data fetched successfully' });
  }
}

The API route for the code above will be pages/api/store/[...gadgets].js. If it is passed this parameter { gadget: ['phones', 'iphones', 'iphone15'] }, it will match the URLs: /store/phones or /store/phones/iphones or /store/phones/iphones/iphone15.

Optional catch-all segments

You can make the catch-all segments dynamic API route optional. When you make it optional it will not only be able to match all subsequent segments of the URL path, but also the main URL path.

To make the catch-all subsequent segments dynamic API route that we saw in the previous section optional, add a square bracket to the file name like this: [[...store]].js]. The optional catch-all segments will not only be able to match the URLs: /store/phones or /store/phones/iphones or /store/phones/iphones/iphone15 alone – it will also be able to match /store URLs.

Conclusion

This article has helped you understand dynamic API routes in Next.js, including what they are, their uses, and how to create them.

Then, Node.js came to free JavaScript from this confinement. It made JavaScript ubiquitous (meaning it could now be run everywhere).

Node.js is a JavaScript runtime environment that allows JavaScript developers to write command line tools and server side scripts outside of a browser.

Learning Node.js enables JavaScript developers to write server side code and code for embedded systems. This opens up opportunities in backend development and hardware programming.

But, before diving into Node.js, a JavaScript developer has to learn and understand some JavaScript concepts.

In this article, you are going to learn the JavaScript concepts you need to understand before learning Node.js.

Before you continue with the article, check the prerequisites.

Prerequisites

To follow along with this article, you should have some basic knowledge of:

• JavaScript

• The browser console (this is where you will run your code).

Now that we have those out of our way, let's dive into the article, starting with expressions.

Expressions

An expression is a unit or block of code that evaluates to a value.

There are five basic categories of expressions in JavaScript: primary expressions, arithmetic expressions, string expressions, logical expressions, and left-hand side expressions.

Primary expressions

Primary expressions consist of basic keywords in JavaScript. A common example is the this keyword:

this['item'];

this.item;

Later on in this article you will learn more about the this keyword.

Arithmetic expressions

An arithmetic operator takes numerical values as its operands and returns a numerical value. The operands and the operator make up the arithmetic expression:

2 + 3;

2 * 3;

2 ** 3;

String expressions

When strings are concatenated they form string expressions:

console.log('My name is' + 'Peter');

Logical expressions

Logical expressions are expressions in which various values are compared:

10 > 2;
2 < 10;
c === 2 || d === 10;

Left-hand side expressions

Left-hand side expressions are expressions where values are assigned to a variable:

// variables
a = 2;

// object properties
obj = {};
obj.name = 'Paul';

Data Types

There are 8 data types in JavaScript: String, Number, Boolean, Object, Null, Undefined, Symbol, and BigInt.

String

The string type represents textual data. A string is surrounded by a single quote or a double quote.

Each element in a string occupies a certain position in the string. The first element is at index 0, and the second and third are at index 1 and 2 respectively.

Here is an example of a string:

let name = 'Yusuf';
let newName = "Joseph";

Number

The number types are stored in 64-bit format, also known as double-precision floating point numbers.

They consist of numbers that are within the range of -(2⁵³ - 1) and (2⁵³ – 1), with both of these numbers inclusive. These two numbers are known as the MIN_SAFE_INTEGER and the MAX_SAFE_INTEGER respectively.

Numbers that exceed this range, belong to another data type called BigInt.

Here is an example of a positive integer, a float and a negative integer:

let number = 15;
let anotherNumber = 1.5;
let lastNumber = -3;

Boolean

The boolean type is logical, and it has only two values: true or false. It is commonly used in loops and conditional statements.

In the example below, I declared variables and assigned them a value of true and false respectively.

Then, I created a conditional statement that returns 1 if the bool variable is true or -1 if it is false. It returns zero if it is neither true nor false.

let positive = true;
let negative = false;
let bool = false;

// conditional statement
if (bool) {
    return 1;
} else if (bool) {
    return -1;
} else {
    return 0;
}

Object

An object type allows you to store collections of data. The data are stored in a pair of curly braces and a key-value pair format. Object keys must be textual (for example a string).

An object can store any of the other data types, like string, number, arrays, booleans, and so on.

In the example below I created an object named myObject, and gave it three keys with their corresponding values:

let myObject = {
    name: "Gabriel",
    number: 15,
    developer: [true, "Daniel", 1]
}

Null

Null data types are special data types. They have the value null which means that the value is unknown or empty:

let unknown = null;

Undefined

Unlike null, undefined means that a variable is declared and not assigned a value. A variable can also be assigned undefined specifically:

let name = undefined;

let newName;
console.log(newName);

Symbol

Symbols are used to create unique values. They are created by calling the Symbol() function. Every time the Symbol() function is invoked it creates a new unique value.

Symbols are kept hidden or private and they can only be used internally. For instance, they can be used as keys in an object. When you try to get the list of keys in an object where a symbol is part of its keys the symbol key will not be displayed.

You can pass a parameter to the symbol function to serve as a description for the symbol when debugging it in the console:

let firstSymbol = Symbol();

let anotherSymbol = Symbol(anotherSymbol);

BigInt

BigInt is a special type of number that provides support for numbers with a length that a normal number type can not hold (such as numbers that exceed the safe integer limit).

It can be created by appending n to the end of an integer or passing a number into the BigInt function:

let bigNumber = 175337823472347884278247898427427427642n;
let newBigNumber = BigInt(1624743724724724898718247248744774227422n);

let anotherBigNumber = BigInt(14);

Classes

A JavaScript class is a template for creating objects. It contains data and functions that manipulate data.

Classes were introduced to JavaScript in the ECMAScript 2015 (ES6) version of JavaScript.

The functions used in classes are called methods.

There is a basic syntax for declaring classes looks something similar to the following:

class TemplateClass {
    constructor() {...};
    method() {...};
    method() {...};
}

From the syntax you can create a class named Visitor:

class Visitor {
    constructor(name) {
        this.name = name;
    }
    introduce() {
        console.log(`My name is ${this.name} and I am a visitor`)
    }
}

You can create a new class from this class by using the new class syntax. The newly created class can access any method from its parent class:

let visitor = new Visitor("Jeff");

// visitor can call the introduce method in its parent class.
visitor.introduce();

Variables

A variable is a named storage for JavaScript data. JavaScript variables can be declared in three ways:

• Using the var keyword

• Using the let keyword

• Using the const keyword

How to declare variables using the var keyword

Variables declared with the var keyword are function scoped and they can be redeclared:

var num = 1;

// num can be redeclared
var num = 2;

How to declare variables using the let keyword

Variables declared with the let keyword are block scoped and they cannot be redeclared – they can only be reassigned:

let fruit = "banana";

// fruit can only be reassigned
fruit = "orange";

How to declare variables using the const keyword

Variables declared with the const keyword are block scoped and they cannot not be redeclared or reassigned (meaning they are constant):

const bestStudent = "Daniel";

Functions

A function is a block of code that performs a specific task. It can be declared using the function keyword:

function doSomething() {
    return "Does Something";
}

A function takes inputs called arguments and outputs results.

To execute a function you will invoke the function by calling the function name with enclosed brackets:

function addNumbers(a, b) {
    return a + b;
}

addNumbers();

You can assign a function to a variable and call the variable when you want to invoke the function:

function addNumbers(a, b) {
    return a + b;
}

let numberAddition = addNumbers(2, 3)
numberAddition();

Arrow Functions

Arrow functions are a concise and compact way to write a function. They have some deliberate limitations in their usage:

• They cannot be used as a method.

• They cannot be used as a constructor.

• Arrow functions cannot use yield within their own bodies.

Below is the syntax for an arrow function:

const doSomething = () => {
    return "Do something";
}

An arrow function can also take an argument.

const multiplyNumbers = (a, b) => {
    return a * b;
}

this keyword

The this keyword in JavaScript refers to an object that is executing a function or a code.

The this keyword can be used in different contexts – the context in which the this keyword is used determines what it refers to.

The this keyword can be used:

• In an object method.

• Alone.

• In object method bindings.

How to use the this keyword in an object method

The this keyword refers to the object whenever it is used as an object method:

intro : function() {
    return "My name is" + this.name "and, I am a" + this.occupation;
}

How to use the this keyword alone

When this is used alone it refers to the global object:

let wes = this;

How to use the this keyword in object method bindings

When this is used in an object method, it refers to the object:

let student = {
  firstName  : "Juliana",
  lastName   : "Carpe",
  myFunction : function() {
    return this;
  }
};

Loops

Loops are useful for executing a block of code for a specified number of times based on some specified conditions. There are different types of loops in JavaScript:

• for loops

• for ... in loops

• for ... of loops

• while loops

• do ... while loops

How to use for loops

for loops are used to execute a block of code a number of times:

for (let i = 0; i < 5; i++) {
    return i;
}

How to use for ... in loops

for ... in loops are used to loop through the properties of an object:

for (let prop in obj) {
    return obj.prop;
}

How to use for ... of loops

for ... of loops are used to loop through the values of iterable objects like arrays, strings, maps, and so on:

let numArr = [2, 4, 6, 8]
for (let val of numArr) {
    return val ** 2
}

How to use while loops

while loops are used to execute a block of code while a certain condition still holds true:

while (i < 20) {
    return i;
    i++;
}

How to use do ... while loops

do ... while loops execute a block of code first without any conditions. For as long as a certain condition still holds true it continues to execute the block of code:

let i = 3;
do {
    return i;
    i++;
} 
while (i < 4)

Scopes

The scope is the current context of execution. It is where variables and expressions can be accessed.

There is an hierarchical arrangement of scope in JavaScript. This makes it possible for lower scopes to access higher scopes.

The scopes in JavaScript are:

• Global scope

• Module scope

• Function scope

• Block scope

The global scope is the default scope for all codes running in script mode while the module scope is the default scope for all codes running in module mode.

The function scope is created by functions while the block scope is created by variables.

Here is an example of function and block scope:

// function scope
function introduce(name) {
    let age = 12;
    console.log(`My name is ${name}`);
    console.log(`I am ${age} years old`);
}

let firstAge = 13

// block scope
if (firstAge === 13) {
    let secondAge = 20;
    console.log(`I am ${secondAge} years old`);
}

Arrays

An array is a special type of an object that stores data in an ordered form.

Arrays can be declared in two ways:

• Using square brackets.

• Using the the Array() constructor.

How to declare arrays using square brackets

This is the common way of creating an array. It is done by wrapping the array's items in a pair of square brackets:

  let array = [1, 3, "a", "c"];

How to declare arrays using the the Array() constructor

The Array() constructor does the same thing as the bracket notation. It can be called with or without the new keyword:

  let anotherArray = Array(1, 2, 3, "go");

How to access array elements

Array elements can be accessed in three ways:

• using their index.

• using the array's length property.

• using a loop

How to access an array element using its index

You call the name of the array with a square bracket containing the index you want to access:

 let newArray = ["Idris", "Daniel", "Joseph"];

  // To access first element
  let firstElement = newArray[0]; 
  console.log(firstElement);  // Idris

  // To access second element 
  let secondElement = newArray[1];  
  console.log(secondElement);  // Joseph

How to access an array element using the array's length property

You can get the length of the array using the length property. Then, you will subtract any number from it to get the index of the element you want to access:

let newArray = ["Idris", "Daniel", "Joseph"];

  let length = newArray.length;

  let firstElement = newArray[length - 3]; 
  console.log(firstElement);  // Idris

  let secondElement = newArray[length - 2];
  console.log(secondElement);  // Joseph

How to access an array element using a loop

Array elements can be accessed using loops. You can make use of a for loop, while loop, or a for ... of loop:

  let newArray = ["Idris", "Daniel", "Joseph"];
  for (let i = 0; i < newArray.length; i++) {
      return newArray[i]
  }

Important Array methods

There are over fifteen array methods in JavaScript. In this article, you will learn the ones that are most useful in Node.js:

• push() and pop()

• shift() and unshift()

• map()

• sort()

• forEach()

How to use the push() and pop() methods

The push() method is used to add an item to the end of an array, while the pop() method is used to remove an item from the end of an array:

let arr = [1, 2, 3, 9]

arr.push(21);

console.log(arr)    // [1, 2, 3, 9, 21]

arr.pop()

console.log(arr)    // [1, 2, 3, 9]

How to use the unshift() and shift() methods

The unshift() method is used to add an item to the beginning of an array, while the shift() method is used to remove an item from the beginning of an array:

let arr = [1, 2, 3];

arr.unshift(0);

console.log(arr);    // [0, 1, 2, 3]

arr.shift();

connsole.log(arr);    // [1, 2, 3]

How to use the map() method

The map() method iterates through the elements of an array and calls a function on each element of the array. It returns a new array that contains the result of each function call:

let fruits = ["Apple", "Grape", "Cashew"];

let mappedFruits = fruits.map(item => item + "s");
console.log(mappedFruits); // ["Apples", "Grapes", "Cashews"]

How to use the sort() method

The sort() method sorts an array in place and returns the same array in a sorted form.

The default order of the sort() method is ascending order. Strings are sorted in alphabetical order:

let numbers = [8, 7, 5];
let fruits = ["Apple", "Grape", "Cashew"];

let sortedNumbers = numbers.sort();
let sortedFruits = fruits.sort()

console.log(sortedNumbers);  // [5, 7, 8]
console.log(sortedFruits);  // ["Apple", "Cashew", "Grape"]

How to use the forEach() method

The forEach() method loops through the array and calls a function for every element of the array:

let fruits = ["Apple", "Grape", "Cashew"];

fruits.forEach(fruit => console.log(fruit));
//  "Apple"
//  "Grape"
//  "Cashew"

Template Literals

Template literals are enclosed in backticks, just like strings are enclosed in quotes. They allow you to store multiline strings and also interpolate strings with embedded expressions.

The example below shows a basic template literal:

let basic = `I write codes`

You can write a template literal that stores multiline strings like this:

let multiLine = `I write codes                     
        I debug codes`;

You can use the dollar sign and curly braces to embed expressions in template literals.

In the example below, the function myName is embedded in the display variable with a template literal:

function myName(Musab, Habeeb) {        
    alert("Musab Habeeb");    
}    

let display = `This displays my name ${myName()}`

Strict mode

JavaScript is a sloppy language in the sense that it allows you to write code that is not allowed in other languages. Some of the code you write in JavaScript has errors but, JavaScript does not throw an error.

Strict mode does the following:

• It throws errors for JavaScript silent errors.

• It fixes mistakes that makes it difficult for JavaScript engines to perform optimizations.

• It prohibits some syntax likely to be defined in future versions of the ECMAScript.

Strict mode works in an entire script file and functions, but it does not work in block scopes.

To invoke script mode you will add the "use strict"; syntax to the top of the code you want to apply it to. You can apply strict mode to a script like this:

"use strict";

let name = "Musab";

console.log(name);

Also, you can apply strict mode to a function like this:

function sayHi(name) {
    "use strict";
    console.log(`Hi ${name}`);
}

Conclusion

Finally, you are done with learning the JavaScript concepts you need to understand before learning Node.js.

All these concepts are important concepts that a JavaScript Developer aspiring to learn Node.js should understand. Understanding these concepts will make learning Node.js easier.

But, to understand these concepts in depth, you can do more research on each of them and read other articles. Keep learning, keep building.

Since React was written in JavaScript, it uses a lot of the JavaScript concepts that were introduced before and in the ES6 version of JavaScript. It is important for anyone who wants to learn React to understand these concepts.

In this article, I will be explaining with detailed examples the seven most important JavaScript concepts that a developer must know before learning React.

Before you start reading this article, check the pre-requisites

Pre-requisites

To follow along with this article you should have some basic knowledge of:

• JavaScript, and

• The browser console (because this is where you will run your code)

How to Use If Statements and Ternary Operators in JavaScript

In JavaScript, you use conditional statements to specify that a block of code should be executed if certain conditions are true.

Conditional statements are useful in the conditional rendering of UI components in React. They allow you to render your UI based on certain conditions.

If ... Else Statement

The first thing to know regarding conditional statements is how to use the if ... else statement.

You can write code that will add two numbers if the second one is greater than the first, and subtract them if that's not the case. Here's what that would look like using an if ... else statement:

if (a < b) {            
    let output = a + b;        
} else {            
    let output = a - b;        
}

In an if ... else statement, you can use an else ... if instead of writing multiple if's.

The else if makes it possible for you to write multiple conditions together. It specifies a new condition to test, if the first condition is false.

if (a < b)  {        
    let output = a + b;    
} else if (a > b) {
    let output = a - b;    
} else {        
    let output = a * b;    
}

The code above writes an else if statement to the previous example. The else if tests for the condition a is greater than b, if the previous condition is false.

Ternary Operator

A ternary operator is a more concise way of writing an if ... else statement.

It takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.

If you want to rewrite the above if ... else example using a ternary operator, it should look like this:

(a < b) ? a + b : a - b;

The (a < b) is the condition, the ? evaluates the condition, and if it is true it returns a + b, while if it is false it returns a - b.

That's five lines of code from the previous example written in just one line. But, if you want to include else if in your ternary operator code, you would need to write this:

(a < b) ? a + b : (a > b) ? a - b : a * b;

In the code above, the ? evaluates the condition (a < b) and if it is true it returns a + b. But, if it is false it evaluates the second condition (a > b) and if that is true it returns a - b else it returns a * b.

Just, one line too. But, to prevent it from becoming too cumbersome you can split it into multiple lines. This will make your code more readable.

In the example below, you'll see how you can split your code by making the condition and the return statement be on the same line.

(a < b) ? a + b         
: (a > b) ? a - b         
: a * b;

How Destructuring Works in JavaScript

Destructuring in JavaScript is when we unpack values from arrays or properties from objects and assign them to a variable.

It makes it easy to extract data from arrays and objects, and it's applicable in React concepts like useState.

Array Destructuring

Array destructuring is used to extract data from an array.

In the example below, we destructure the newArray array in two ways. One way is to declare an array that contains the variables we want to assign to our array values and assign it to the newArray variable. The other way is to assign the array of variables to the array that contains the values we want to destructure.

let newArray = ["Musab", "I", "Handsome"];    
let [noun, pronoun, adjective] = newArray; 

// The above can also be rewritten as this:  

let [noun, pronoun, adjective] = ["Musab", "I", "Handsome"];    

console.log(noun);    
console.log(pronoun);

You can skip one or more values by putting commas in their place.

let newArray = [a, b, c, d, e];

let [firstLetter, , , ,lastLetter] = [a, b, c, d, e];

Object Destructuring

Object destructuring is similar to array destructuring, but in objects we only destructure the keys/properties.

In the example below, the "personObject" was destructured by declaring an object containing the properties of the personObject and assigning it to the personObject.

let personObject = {        
    name: "David",        
    age: 18,        
    height: "6ft 5in",        
    gender: "male",    
}    

let {name, age, height, gender} = personObject   
console.log(name, age, height, gender);

Now, you can access the values of each of the keys without calling the object.

You can also assign each of the destructured keys to new variables.

let personObject = {        
    name: "David",        
    age: 18,        
    height: "6ft 5in",        
    gender: "male",    
}    

let {name: personName, age: personAge, height: personHeight, gender: personGender} = personObject;

console.log(personName, personAge, personHeight, personGender);

How to Use Template Literals in JavaScript

Template literals are enclosed in backticks just like strings are enclosed in quotes. They allow you to store multiline strings and also interpolate strings with embedded expressions.

The example below shows a basic template literal.

let basic = `I write codes`

You can write a template literal that stores multiline strings like this:

let multiLine = `I write codes                     
        I debug codes`;

You can use the dollar sign and curly braces to embed expressions in template literals. In the example below, the function myName is embedded in the display variable with a template literal.

function myName(Musab, Habeeb) {        
    alert("Musab Habeeb");    
}    

let display = `This displays my name ${myName()}`

How to Use Objects in JavaScript

An object allows you to store collections of data. The data are stored in a pair of curly braces in a key-value pair format.

In the example below, we create an object named "myObject" and we give it three keys with their corresponding values.

let myObject = {        
    name: Musab,        
    number: 12,        
    developer: [true, "David", 1]    
}

You can access the values that belong to each key in an object in two ways:

• by using dot notation (this is the most commonly used) or

• by using bracket notation

In the example below we access the name property using bracket notation and the number property using dot notation.

let myObject = {        
    name: "Musab",        
    number: 12,        
    developer: [true, "David", 1]    
}

console.log(myObject["name"]);
console.log(myObject.number);

Object keys must be in string form. If they aren't, they will be inaccesible using dot notation.

In the example below, by accessing the property 3 you will get a syntax error.

let numbers = {
    one: David,
    two: George,
    3: Peter
}

console.log(numbers.two);
console.log(numbers.3);

You must always put a comma at the end of every value in an object except the last value in the object.

How to Use Arrays and Array Methods in JavaScript

Arrays are special types of objects that store data in an ordered form. Array methods are built-in functions that can be called on an array to do something on or with the array.

There are a lot of array methods, but the ones you will be using the most in React are the map, filter, and reduce methods.

Map method

This method iterates through the elements of an array and calls a function on each element of the array. This returns a new array that contains the result of each function call.

let fruits = ["pawpaw", "orange", "banana"];   

let mappedFruits = fruits.map(item => item + "s");    

console.log(mappedFruits); // ["pawpaws", "oranges", "bananas"]

Filter method

This method returns all items of an array that match a specific condition.

let fruits = ["pawpaw", "orange", "banana", "grape"];

let filteredFruits = fruits.filter(fruit => fruit.length > 5);

console.log(filteredFruits);  // ["pawpaw", "orange", "banana"]

Reduce Method

The reduce method iterates over all the elements of an array and takes an action on each iteration. The result of that action is carried on to the next iteration to be used in the next action until the final iteration. Then, the final result will be returned.

It takes two arguments, which are:

• a function and,

• an optional argument that denotes the value the function will start from.

let evenNumbers = [2, 4, 6, 8, 10]; 

evenNumbers.reduce((sum, current) => sum += current, 0);

How to Use Functions and Arrow Functions in JavaScript

Functions

A function is a block of code that performs a particular task. A function takes an argument, performs a task using the argument, and returns a result.

Functions are used to create functional components in React.

To declare a function you will use the keyword "function" and the function's name like this:

function plusFour(a)  {        
    return a + 4;    
}

The function in the code above is named "plusFour" which takes an argument "a", adds four to "a" and returns the result.

To execute a function you will call the function by writing the function's name with brackets

// We will call the plusFour function in the earlier example    

plusFour();

Arrow functions

Arrow functions are an alternative way of writing functions. They are more compact and also, they contain deliberate limitations. You can rewrite the plusFour function above as an arrow function like this:

let plusFour = (a) => {        
    return a + 4;    
}

Since the return statement is just one line, we can make the arrow function one line:

let plusFour = (a) => a + 4;

Arrow functions cannot be used as methods, generators, or constructors while a regular function can.

ES Modules

Before 2015, JavaScript variables, arrays, objects, and functions created in a file could only be accessed in that file.

But, with the introduction of ES6 in 2015 came modules. Modules allow you to carry out objects, arrays, functions, and so on in one file and use them in another file.

This helps you to maintain the size of your file while your application continues to grow larger.

Modules are what make React work as a single page application framework. All other files are in the form of components and are imported when and where they are needed.

There are two keywords we use when we work with modules:

• export keyword

• import keyword

The export keyword allows you to make the content of the module available to all other JavaScript files, while the import keyword allows you to bring in available content from one JavaScript file into another JavaScript file.

In the example below, the cook function is exported from its file.

// file name: cook.js

function cook(ingredients, water, heat) {        
    let food = ingredients + water + heat;        
    return food;     
}    

export default cook;

Then, in the example below, the cook function is imported into the kitchen.js file and called.

// file name: kitchen.js

import cook from './cook';    
cook();

Conclusion

These seven JavaScript concepts are the most important ones to know if you're trying to learn React.

By learning these concepts it will be easier for you to learn React because you will start seeing their applications in your React code.

You should read more in-depth about these concepts and also try to formulate code examples involving them so you can better understand them.

Keep on learning, and keep on improving.