In this article, you will learn what local storage is and how to use it in modern web applications. You will also learn the advantages of using local storage, as well as some of its limitations.

Table of Contents

• What is Local Storage?

• Differences Between Local Storage and Session Storage

• How to Use Local Storage

• A Practical Example

• How to View Local Storage in DevTools

• Benefits of Using Local Storage

• Limitations of Local Storage

• Conclusion

What is Local Storage?

Local storage is a feature in web browsers that allows developers to save data in the user’s browser. It’s part of the web storage API, together with session storage.

Local storage works by accepting data in key-value pairs. It retains the data even when the user refreshes the page or closes the tab or browser.

Differences Between Local Storage and Session Storage

As I mentioned earlier, the web storage API in modern browsers provides two main features for data storage. These are local storage and session storage.

The key differences between the two are the lifespan of the stored data and their scope.

Data in local storage remains available even when the tab/browser is closed. But closing the tab/browser clears any data stored in session storage.

Also, data in local storage is accessible across multiple browser tabs and windows. On the other hand, data in session storage is only accessible within specific browser tabs and is not shared.

How to Use Local Storage

The local storage object provides different methods you can use to interact with it. With these methods, you can add, read, and delete data from local storage.

How to Store Data in Local Storage

To store data in local storage, you use the setItem() method. This method takes in two arguments, a key and a value.

localStorage.setItem(key, value)

If the key does not exist in local storage, the setItem() method will create a new key and assign the given value to it. But if a key with the same name exists in local storage, it will update the value of the key with the provided value.

How to Read Data From Local Storage

To retrieve and use data from local storage, you use the getItem() method. This method takes in a key as an argument.

localStorage.getItem(key)

If the given key exists in local storage, the method returns the value of that key. If it doesn’t, the method returns null.

How to Store and Read Complex Data Values in Local Storage

Local storage can only store strings. This means if you need to store values like objects or arrays, you first need to get a string representation of the value. You do this using the JSON.stringify() method.

Example:

const userObj = {
  username = "Maria",
  email: "maria@mail.com"
}

localStorage.setItem('user', JSON.stringify(userObj))

The JSON.stringify() method converts the userObj object into a string representation before sending it to local storage.

Now, when you want to retrieve the data back from local storage, you also need to change it from its string representation back to the original form. And you do that using the JSON.parse() method.

Example:

const storedUserData = localStorage.getItem('user')

if (storedUserData) {
  const userData = JSON.parse(storedUserData)
  // You can use userData here...
} else {
  console.log('User data not found in local storage')
}

In the example above, we first check if there is data for ‘user’ in local storage before using the JSON.parse() method. This is important because if it does not exist in local storage, JSON.parse() will be applied to a null value (which will result in an error).

How to Delete Data from Local Storage

There are two methods available for deleting data from local storage. One is the removeItem() method and the other is the clear() method.

You use the removeItem() method when you want to delete a single item from local storage. The method takes in a key as an argument and deletes the corresponding key-value pair from local storage.

localStorage.removeItem(key)

But what if, instead of deleting a single key-value pair, you want to clear all data from the local storage? Well, local storage has a method for that - the clear() method.

localStorage.clear()

The clear() method deletes all key-value pairs in the local storage for the current domain.

How to Get the Name of a Key in Local Storage

If you want to get the name of a key at a particular index in local storage, you can use the key() method. It takes in a number as an argument and returns the name of the key at that specified index.

Example:

localStorage.key(0)

The example above will return the name of the key at index 0. If there is no key at the specified index, the method will return null.

A Practical Example

The following shows a practical demo of the difference between local storage and session storage.

In this example, we'll save the user's name in local storage and save the age in session storage.

<!-- HTML --> 
<body>

  <h1 class="userName"></h1>
  <h2 class="userAge"></h2>

  <input type="text" class="name" placeholder="Enter name here"/>
  <button class="saveNameBtn">Save Name</button>

  <br />

  <input type="text" class="age" placeholder="Enter age here"/>
  <button class="saveAgeBtn">Save Age</button>

</body>

The markup includes two header elements. One for userName and the other for userAge. It also includes two input elements for name and age. Each input has an associated button we'll use for saving the data.

Now, let's use the querySelector method to select the various elements.

const userNameText = document.querySelector(".userName")
const userAgeText = document.querySelector(".userAge")

const saveNameButton = document.querySelector(".saveNameBtn")
const saveAgeButton = document.querySelector(".saveAgeBtn")

Code Example for Local Storage

saveNameButton.addEventListener("click", () => {
  const userName = document.querySelector(".name").value
  userNameText.textContent = userName
  localStorage.setItem("name", userName)
})

First, we get the value of the name input, set it as the textContent of userNameText. And then use the setItem() of local storage to save the userName value in local storage.

Next, let's see how we can get the name value from local storage when we need it.

function displayUserName () {
  const nameFromLocalStorage = localStorage.getItem("name")

  if (nameFromLocalStorage) {
    userNameText.textContent = nameFromLocalStorage
  } else {
    userNameText.textContent = "No name data in local storage"
  }
}

displayUserName()

The displayUserName function gets nameFromLocalStorage using the getItem() method. If the value exists in local storage, we set it as the textContent of the userNameText element. If it's null or doesn't exist, then we set textContent to the string "No name data in local storage".

Code Example for Session Storage

Now, let's do the same thing for the age value. The only difference here will be using session storage instead of local storage.

saveAgeButton.addEventListener("click", () => {
  const userAge = document.querySelector(".age").value
  userAgeText.textContent = userAge
  sessionStorage.setItem("age", userAge)
})

function displayUserAge () {
  const ageFromSessionStorage = sessionStorage.getItem("age")

  if (ageFromSessionStorage) {
    userAgeText.textContent = ageFromSessionStorage
  } else {
    userAgeText.textContent = "No age data in session storage"
  }
}

displayUserAge()

The setItem and getItem methods also works for session storage.

Demo:

Local storage and session storage demo.

As you can see from the demo above, when you close and reopen the page, the name data from local storage persists. But the age data from session storage is cleared once the page closes.

Try your hands on the code sample on StackBlitz

How to View Local Storage in DevTools

You can follow the steps below to inspect the contents of local storage in your browser's developer tools.

First, open DevTools. You can do that by right clicking on the web page and selecting "Inspect".

Demo of how to open the DevTools.

Then, select the "Application" tab on the DevTools panel. Depending on your browser, this panel may have a different name. For example, it's called "Storage" in Safari and Firefox.

Demo of how to open the "Application" panel in DevTools.

Locate the "Storage" section on the sidebar showing a list of the various web storage options.

Click on "Local Storage" to expand and view its contents.

Demo of how to open the local storage tab in the storage panel.

You can click on individual items to view the corresponding key-value pair.

Benefits of Using Local Storage

The following are some of the benefits local storage has over other storage mechanisms in modern web development.

1. Persistent data: When you use local storage, the stored data remains even when the user closes the tab or the browser. This is useful for saving user preferences, settings, and other relevant data. It can help create a seamless user experience.

2. Offline access: You can use local storage as a means to cache data which can be accessed even with limited or no internet. This makes it a useful feature for apps that rely on caching data for offline use like news readers, productivity apps, and so on.

3. More storage capacity: Compared to other storage means, local storage has a relatively high capacity. For example, cookies are limited to 4 kilobytes per domain. But local storage can store up to 5 megabytes of data per domain.

Limitations of Using Local Storage

1. Stores only strings: As you learned earlier, local storage can only store string values. You can use the JSON stringify and parse methods to work around it. But some web developers may not prefer it as it can lead to writing complex code that’s difficult to debug.

2. Security concerns: Data in the local storage can be prone to attacks like cross-site scripting (XSS). As such, you should be cautious when working with sensitive information. It’s advisable to assess security implications and consider other alternatives where necessary.

3. Not accessible to web workers: Local storage is part of the Window object. As such, it’s tied to the main execution thread of the web page. This means it's not accessible to web workers. So if you run any background processes, you cannot use local storage within the web worker scripts.

Conclusion

Local storage is a feature in modern web browsers that makes it easy for web developers to store and persist data between browser sessions.

Compared to traditional cookies, it provides larger storage capacities. Also, unlike cookies, it does not rely on server-side processes. This reduces the need for frequent server requests and helps improve performance.

In this article, you learn about how to use local storage. We covered saving, retrieving, and deleting data from local storage. You also learned about some of the benefits of using local storage in your project, and some of its limitations too.

Thanks for reading. And happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

In this article, you'll learn what it means to write JavaScript code in strict mode and how you can enable it. The article also covers some benefits of using strict mode and some examples that show how it differs from regular JavaScript.

Table of Contents

• What is Strict Mode in JavaScript?

• How to Use Strict Mode in JavaScript

• Difference Between Strict Mode and Regular JavaScript

• JavaScript Features that Use Strict Mode by Default

• Conclusion

What is Strict Mode in JavaScript?

Strict mode is a feature in JavaScript that was introduced in ECMAScript 5. It lets you write code in such a way that follows stricter rules.

When strict mode is enabled, the JavaScript engine enforces additional constraints. This means you may be able to catch some common errors that would have otherwise gone unnoticed. It also helps you write cleaner and more secure code.

How to Use Strict Mode in JavaScript

You can use JavaScript strict mode in two ways. You can either enable strict mode for an entire JavaScript file, or you can enable it within the scope of a function.

To enable strict mode for the whole JavaScript file, you simply add the string "use strict" to the top of your code.

"use strict"

// Your code goes here...

For functions, you can enable strict mode by placing the "use strict" string at the top of your function body.

function myFunction() {
  "use strict"
  // Function body goes here...

}

You must place the "use strict" string at the top of the file or function body. Otherwise, it will not work.

But you are allowed to add comments above the "use strict" string. Apart from comments, everything else should be below "use strict" for it to work.

Difference Between Strict Mode and Regular JavaScript

Now, let's see some of the rules that strict mode enforces which aren't enforced when writing code in regular JavaScript.

Using an Undeclared Variable

When writing JavaScript code in strict mode, you must declare all variables and objects before use. This is useful because it helps to prevent creating global variables by accident which can lead to bugs.

Here's an example

// Regular JavaScript

function regularFunc() {
  username = "Marie"
  console.log(username)
}

regularFunc()

Regular JS throws no error for the username variable.

// Strict mode

function strictFunc() {
  "use strict"
  username = "Marie"
  console.log(username)
}

strictFunc()

Strict mode throws error for undeclared variables.

In the regularFunc function, the browser logs the username to the console without any error.

But with the strictFunc function which uses strict mode, it throws a reference error.

That's because the username variable hasn't been declared. And strict mode does not allow the use of variables before they are declared.

Duplicating a Parameter Name

In non-strict mode, duplicating a parameter name in a function is allowed. Only the last instance of the duplicates is allowed whiles the others are ignored.

But strict mode functions do not allow this. It throws a syntax error in the case of duplicates.

Here's an example:

function addNums (num, num) {
  console.log(num + num)
}

addNums(2, 3) // 6

In the example above, the first num parameter is ignored. Only the second one is used. This why the functions returns 6 because 3 + 3 is 6.

But when you define the same parameters in a function using strict mode, you cannot run it because it will throw a syntax error. Strict mode requires each parameter to have a unique name.

That is:

function addNums (num, num) {
  "use strict"
  console.log(num + num)
}

addNums(2, 3)

Browser throws an error for duplicate parameter name.

Using Reserved Future Keywords

In JavaScript, there are some keywords reserved for potential future use. And using these keywords as identifiers (such as variables or function names) may likely cause issues in future.

For example, package is one of such keywords. When you're not using strict mode, you can use it to name variables and functions.

const package = "This is a package"
console.log(package)

Log result for using reserved keyword in regular JavaScript.

Strict mode doesn't allow the use of these reserved keywords. This ensures compatibility with future versions of JavaScript.

"use strict"
const package = "This is a package"
console.log(package)

Using a reserved keyword in strict mode results in a syntax error.

Other future reserved keywords include:

• implements

• interface

• private

• protected

• public

• static

• yield

• arguments

Use of Deprecated Features

Strict mode restricts the use of JavaScript's deprecated features like arguments.caller, arguments.callee, and so on.

These are disallowed due to security and performance concerns. But non-strict mode allows using them.

Let's see an example of using arguments.caller in both strict and non-strict mode.

// non-strict mode

function outerFunction() {
  innerFunction();
}

function innerFunction() {
  console.log(innerFunction.caller); // Example of .caller
}

outerFunction();

arguments.caller works in non-strict mode without any errors.

Using .caller on the innerFunction logs the outerFunction which calls the inner function to the console. It works alright in non-strict mode.

But using it in strict mode will cause JavaScript to throw an error like in the example below.

"use strict"

function outerFunction() {
  innerFunction();
}

function innerFunction() {
  console.log(innerFunction.caller); // Example of .caller
}

outerFunction();

Strict mode throws an "Uncaught TypeError" for using deprecated features.

Assignment to a Read-Only Property

In non-strict mode, when you attempt to assign a new value to a read-only property, the assignment will not modify the property's value. But it will not throw any error. Instead, the assignment silently fails, and the property retains its original value.

const obj = {}

Object.defineProperty(obj, 'key', { value: 10, writable: false })
obj.key = 20

console.log(obj.key)

Log result for object.key

This example defines a new empty object obj. And using Object.defineProperty, a new property key is added to obj. This key property is set as a read-only property.

As you can see from log result, there is no error when you try to update the value of key. And the key property maintains the original value of 10.

In strict mode, however, attempting to update the value of the property will result in a TypeError. This stricter enforcement helps catch potential errors early.

"use strict"
const obj = {}

Object.defineProperty(obj, 'key', { value: 10, writable: false })
obj.key = 20

console.log(obj.key)

Strict mode throws an error when assigning a new value to read-only property.

JavaScript Features that Use Strict Mode by Default

Some JavaScript features do not require you to explicitly invoke "use strict". By default, strict mode is applied to prevent common errors and ensure compatibility with future JavaScript versions.

Examples of such contexts include the following:

• ES6 classes

• ES6 modules

• Arrow functions

• Tagged template literals

Conclusion

JavaScript started off as a language for adding simple interactivity to web pages. But has since evolved to become one of the most-used programming language for creating both simple and complex applications.

As the language evolves, some of its old defects still remain. The strict mode feature helps JavaScript developers deal with some of the issues these defects cause.

In this article, you've learned about the strict mode, how to use it, and how it differs from writing JavaScript code in non-strict mode. You've also learned various contexts in JavaScript where strict mode rules are enforced by default.

Thanks for reading. And happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

But what is a boolean context? It's a situation where a boolean value is expected. Examples include if statements, logical operators, and so on. When you use a non-boolean value in a boolean context, JavaScript will convert the value to its boolean equivalent.

In this article, you will learn about falsy values in JavaScript and how to check if a value is falsy. The article also covers some best practices to consider when checking the boolean equivalent of a value.

Let's get started!

Table of Contents

• The Six Falsy Values in JavaScript

• How to Check if a Value is Falsy

• Truthy Values That May Appear as Falsy Values

• Best Practices When Checking Boolean Equivalent

• Conclusion

The Six Falsy Values in JavaScript

Falsy values in JavaScript are unique because there are only six of them. Apart from these six, all other values are truthy values.

You can commit these falsy values to memory. That way, when you come across any value that isn't one of the six, you know it's a truthy value.

Here are the six falsy values in JavaScript:

• false: The boolean value false.

• 0: The number zero.

• "" or '' or ````: An empty string.

• null: The null keyword, representing the absence of any object value.

• undefined: The undefined keyword, representing an uninitialized value.

• NaN: Stands for "Not a Number". It represents a special value returned from an operation that should return a numeric value but doesn't.

Now, let's see some practical examples of these falsys valsues in JavaScript.

Example 1 – The boolean value false.

let isOnline = false

function checkStatus(status) {
  return Boolean(status) ? "ONLINE" : "OFFLINE"
}

checkStatus(isOnline) // "OFFLINE"

When you pass the isOnline variable to the checkStatus function, it returns the string "OFFLINE". And this is because the value is false in this context. Here, we are using a tenary operator based on the boolean value of the status argument.

Example 2 – The number zero.

let unreadMessages = 0
let hasUnreadMessages = Boolean(unreadMessages)
console.log(hasUnreadMessages) // false

This examples checks whether a user has unread messages or not. We use the in built Boolean function to get the boolean value of the unreadMessages variable. This means anytime the number of unreadMessages is zero, hasUnreadMessages will be false.

Example 3 – An empty string.

let userInput = "";
let defaultText = "No input provided";

let displayText = Boolean(userInput) || defaultText;

console.log(displayText); // No input provided

This example uses the logical OR operator || to determine the value of the displayText. It will assign the value of userInput to displayText if it's a truthy value. Or it will assign the defaultText to displayText if userInput is a falsy value as it is in this case.

Example 4 – null

let user = null;

if (user && user.name) {
    console.log("Welcome, " + user.name + "!");
} else {
    console.log("Please log in to access the website.");
}

The following example assumes the user isn't logged in and so the value of user object is null. This means the if statement will evaluate to false. The expected behaviour then will be that the code executes the else block.

Example 5 – undefined

let age;
if (age === undefined) {
    console.log("The age is undefined.");
}

When a variable is declared but not initialized with a value, JavaScript assigns it the value undefined by default. In the code example above, since the age variable is declared but not assigned a value, its value is undefined. This means the code in the if statement will run.

Example 6 – NaN

let value1 = "Ten"
let value2 = 10

let result = value1 / value2

if (isNaN(result)) {
    console.log("The result is not a number.");
} else {
    console.log(result);
}

This example divides value1 (a string) by value2 (a number). This will result in a NaN value because you cannot divide a string by a number. This means the code in the if block will run. And log The result is not a number to the console.

How to Check if a Value is Falsy in JavaScript

A safe way to check whether a value is falsy or not is to use the Boolean function. The Boolean function returns the boolean value of the value of the argument passed to it.

Example:

console.log(Boolean(false))
console.log(Boolean(0))
console.log(Boolean(""))
console.log(Boolean(null))
console.log(Boolean(undefined))
console.log(Boolean(NaN))

Boolean log results for all six falsy values.

Here, we are checking the boolean value of all six falsy values. And as expected, each returns false.

When you pass any other value that's not one of these six falsy values to the Boolean function, it will return true.

Example:

console.log(Boolean('hello'))
console.log(Boolean(24))

Example boolean log results for truthy values.

Truthy Values that May Appear as Falsy Values

There are some truthy values that, at a glance, may appear to be falsy values but aren't. As already mentioned, only six values in JavaScript are falsy values. Anything else is a truthy value.

The following are some of those values that aren't falsy but may appear as such.

console.log(Boolean('false')) // An empty object
console.log(Boolean(' ')) // An empty object
console.log(Boolean('0')) // An empty object
console.log(Boolean([])) // An empty array
console.log(Boolean({})) // An empty object

Log results for truthy values that appear as falsy.

The first three strings contains text that may look like falsy values. First is the string with the text "false", another one with some whitespace, and the third with zero.

Remember that the only string considered a falsy value is an empty string. All non-empty strings in JavaScript are truthy values including strings with only whitespace.

Also, note that unlike strings, both an empty array and an empty object return true in a boolean context.

Best Practices When Checking Boolean Equivalent

The following tips will help make your code more readable and easier to maintain.

1. Use the Boolean function

It's always better to use the built-in Boolean function when you want to check whether a value is truthy or falsy. The function works by coercing any value into its corresponding boolean. It also makes your intention clear to anyone reading the code.

Example:

// Example without the Boolean function
const value = ''; 

if (value) {
    console.log('It is a TRUTHY value');
} else {
    console.log('It is a FALSY value');
}

// Example with the Boolean function
const value = ''

if (Boolean(value)) {
    console.log('It is a TRUTHY value');
} else {
    console.log('It is a FALSY value');
}

Both examples do the same thing. But in the second example, it's explicit that you're checking the boolean representation of the given value.

2. Use strict equality === instead of loose equality ==

When you're comparing values for truthiness or falsiness, it's recommended to use strict equality (===) over loose equality (==). Strict equality compares both the value and the type. Loose equality performs type coercion before comparing the values, and this can lead to unexpected results.

Example:

// Strict Equality Example

if (1 === [1]) {
  console.log('EQUAL')
} else {
  console.log('NOT EQUAL')
}

Log result for strict equality example.

// Loose Equality Example
if (1 == [1]) {
  console.log('EQUAL')
} else {
  console.log('NOT EQUAL')
}

Log result for loose equality example.

Both examples above compare the same values. But the strict equality example logs "NOT EQUAL". This is because the number 1 is not equal to an array containing the number 1. With the loose equality, it coerces the type of the values to make them of the same type. That is why it logs "EQUAL" to the console.

3. Add comments to document your code

To make your code more readable and easier to maintain, consider adding comments when necessary to explain your logic when dealing with truthy and falsy values.

Documenting your code is a good practice to help developers on your team (or your future self) understand the intended behaviour of a piece of code.

Example:

let selectedUser = USER_OBJ

// Check if no user is selected
if (!selectedUser) {
    console.log("Please select a user.");
} else {
    console.log("User address: " + selectedUser.address);
}

In the example above, the comment added before the if statement makes it clear that the code is checking if no user has been selected.

Using the logical NOT operator (!) can make it seem like you're checking if a user is selected rather than checking if no user is selected. So a comment in an instance like helps provide clarity.

Conclusion

In this article, you have learned about the six falsy values in JavaScript and how they differ from truthy values. You also learned about some truthy values that may appear as falsy, but actually aren't. And you also saw some best practices to consider when working with falsy values.

A good understanding of the concept of falsy and truthy values and how they affect comparisons and conditional statement will come in handy when debugging JavaScript applications.

Thanks for reading. And happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

In this article, you will learn how to use both options. You'll also learn about the differences between the two and when it's appropriate to use each of them.

Table of Contents

• Regular Function Syntax vs Arrow Function Syntax

• How to Access the Arguments Passed to Functions

• Duplicate Named Parameters

• Function Hoisting

• How to Handle "this" Binding in Functions

• How to Use Functions as Constructors

• So Which One Should You Use?

Regular Function Syntax vs Arrow Function Syntax

To understand the difference between the two options, let's begin by looking at their syntax.

Regular function syntax

The ordinary way of declaring functions in JavaScript is to use the function keyword. Here is an example:

function sayHello(name) {
  return 'Hello ' + name
}

To return a value from a regular function, you have to explicitly use the return keyword. Otherwise the function will return undefined.

Arrow function syntax

Arrow functions were introduced with ECMAScript 6 (ES6). They give you a more concside way of defining functions in JavaScript.

Using the same sayHello function from the previous example, let's see how to create it with the arrow function syntax.

const sayHello = (name) => {
  return 'Hello ' + name
}

Unlike regular functions, you don't have to use an explicit return if there's only one statement like the above example. You can write the function on a single line like so.

const sayHello = (name) => 'Hello ' + name

Note how the curly braces are also removed to implicitly return the result of the expression. You can even remove the parenthesis too if there is only one argument. See the example below:

const sayHello = name => 'Hello ' + name

The name is the only argument the function takes. And this means you can remove the parenthesis from the argument and it will still work fine.

How to Access the Arguments Passed to Functions

JavaScript provides a way to access all arguments passed to a function. But the way you acess these arguments depends on the type of function you are working with.

How to access arguments with regular functions

You can access all the arguments passed to a regular function using the arguments object. The arguments object is an array-like object that holds all the arguments passed to the function.

Example:

function logNumbers(num1, num2) {
  console.log(arguments)
}

logNumbers(8, 24)

Log results of the arguments object

As you can see from the log result, the arguments object contains the two numbers passed as arguments to the logNumbers function.

How to access arguments with arrow functions

The arguments object is not available in arrow functions. If you try to access it in arrow functions, JavaScript will throw a reference error.

const logNumbers = (num1, num2) => {
  console.log(arguments)
}

logNumbers(8, 24) // Uncaught ReferenceError: arguments is not defined

To access the arguments passed to an arrow function, you can use the rest parameter syntax (...).

Example:

const logNumbers = (...args) => {
  console.log(args)
}

logNumbers(8, 24)

Log results for the arguments from an arrow function

Using the rest parameter syntax (...), you get access to all the arguments passed to the logNumbers function.

Duplicate Named Parameters

Another difference between regular functions and arrow functions is how they handle duplicates in the named parameters.

Duplicate named parameters in regular functions

When a regular function has duplicate names in the parameters, the last parameter with the duplicate name will take precedence. Let's see an example:

function exampleFunction(a, b, a) {
  console.log(a, b)
}

exampleFunction("first", "second", "third")

Log results for named duplicate parameters

In the example above, the third argument overrides the value of the first argument because the last duplicate parameter is the one that takes precedence.

But in "strict mode", using a duplicate named parameter will result in a syntax error.

"use strict"

function exampleFunction(a, b, a) {
  console.log(a, b)
}

exampleFunction("first", "second", "third")

Strict mode doesn't allow using a parameter name more than once

Duplicate named parameters in arrow functions

Arrow functions don't allow for the same parameter name to be used more than once in the parameter list. Doing so will result in a syntax error.

Example:

const exampleFunction = (a, b, a) => {
  console.log(a, b)
}

exampleFunction("first", "second", "third")

Arrow functions do not allow duplicate parameter names

Function Hoisting

Hoisting in JavaScript is a behaviour where variables and functions are moved to the top of their containing scope during compilation, before the code is executed.

Hosting in regular functions

Regular functions are hoisted to the top. And you can access and call them even before they are declared.

regularFunction()

function regularFunction() {
  console.log("This is a regular function.")
}

Log result of calling the regular function before it's declared

The above is an example of calling a regular function before it is declared. And it works fine without throwing any error because of function hoisting.

Hoisting in arrow functions

Arrow functions, on the other hand, cannot be accessed before they are initialised.

arrowFunction()

const arrowFunction = () => {
  console.log("This is an arrow function.")
}

Log result of calling the arrow function before it's declared

Unlike regular functions, attempting to call an arrow function before it's declared will result in a reference error, as you can see from the output above.

How to Handle this Binding in Functions

Regular functions have their own this context. And this is determined dynamically depending on how you call or execute the function.

Arrow functions, on the other hand, do not have their own this context. Instead, they capture the this value from the surrounding lexical context in which the arrow function was created.

The following are two different scenarios using both regular functions and arrow functions. You'll see how the this context is determined.

1. Setting the this value during a simple function call

For regular functions, a simple function call sets the this value to the window object (or to undefined if you're using the "strict mode"):

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

myRegularFunction()

A simple invocation of a regular function sets this to the window object

"use strict"

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

myFunction() // udefined

With arrow functions, a simple function call sets the this value to the surrounding context whether you're using strict mode or not. In the example below, the surrounding context is the global window object.

const myArrowFunction = () => {
  console.log(this);
};

myArrowFunction()

A simple invocation of an arrow function sets this to the window object

2. When invoking or calling a method on an object

When you invoke a method whose value is a regular function, the this value is set to the object on which the method is called. But when the value of the method is an arrow function, the this value is set to the global window object.

const myObject = {
  regularExample: function() {
    console.log("REGULAR: ", this)
  },

  arrowExample: () => {
    console.log("ARROW: ", this)
  }
}

myObject.regularExample()
myObject.arrowExample()

Log result for a method with a regular function and another with an arrow function

While the method with the regular function logs the object to the console, the one with the arrow function logs the global window object instead.

How to Use Functions as Constructors

For regular functions, you can create a new instance using the new keyword. And this sets the this value to the new instance you've created.

For arrow functions, you cannot use them as constructors. This is because the value of this in arrow functions is lexically scoped – that is, determined by the surrounding execution context. This behaviour does not make them suitable to be used as constructors.

Here's an example:

function RegularFuncBird(name, color) {
  this.name = name
  this.species = color
  console.log(this)
}

const ArrowFuncBird = (name, color) => {
  this.name = name
  this.color = color
  console.log(this)
}

new RegularFuncBird("Parrot", "blue") 
new ArrowFuncBird("Parrot", "blue")

Log results for attempting to use regular and arrow functions as constructors

The RegularFuncBird constructor works fine with the new keyword, but the ArrowFuncBird results in a type error.

So Which One Should You Use?

There is no straightforward answer to this. Whether you use a regular function or arrow function depends on the specific use case.

It's recommended to use regular function in any of the following cases:

• when you need to use a constructor with the new keyword

• when you need the this binding to be dynamically scoped

• when you want to use the arguments object

And you can use arrow functions in any of the following cases:

• when you want a more concise syntax for the function

• when you need to maintain the lexical scope of this

• for non-method functions (in most cases)

As you've learned from this article, both are valid ways of defining functions in JavaScript. Remember that choosing between them is not always a matter of personal preference. Rather, it's dependent on the kind of behaviour you expect from the function.

Thanks for reading and happy coding!

That's what we'll cover in this article. I'll discuss some important best practices so that you can manipulate the DOM with confidence.

Table of Contents

• Introduction

• Use the DOMContentLoaded Event

• Cache Selected Elements

• Query Parent Instead of Document

• Use CSS Classes to Style Elements

• Use innerHTML With Caution

• Write Readable Event Listeners

• Use Event Delegation to Handle DOM Events

• Batch DOM Updates With Fragment

• Use the stopPropagation Method

• Test your DOM Manipulation code

• Conclusion

User the DOMContentLoaded Event

The DOMContentLoaded event is fired when the HTML document is fully loaded. Using this event ensures that your DOM manipulation code runs only after the document is fully loaded.

To use the DOMContentLoaded, add an event listener to the document and listen for the DOMContentLoaded event. This helps prevent any issues that may come up when you try to manipulate elements that are yet to be rendered.

Example:

document.addEventListener('DOMContentLoaded', function() {
  // Your DOM manipulation code goes here...
})

Cache Selected Elements

When you have frequently used elements, querying the DOM for the same element anytime over and over is inefficient. It's better to query the DOM once and store the result in variables.

const cachedElement = document.getElementById('exampleId')

This way you can reference the variables anytime you want to use them. This helps improve performance as it reduces unnecessary work.

Query Parent Elements Instead of Document

When you cache an element, you can also query it to select any of its descendants. This can help improve performance because it limits the scope of the query and reduces the number of times the entire document is queried.

Example:

<div id="parent">
    <p id="child">Example paragraph</p>
</div>

const parentElement = document.getElementById('parent')

// Options 1: Querying entire document ❌
const childFromDocument = document.getElementById('child') 

// Options 2: Query the parent element ✅
const childFromParent = parentElement.querySelector('#child')

In the example above is a simple markup containing a #parent div and .child paragraph. Then there are two options for selecting the child element.

Technically, both options are correct and will select the same element. But the difference is in the scope of the query.

Example 1 queries (or searches) the entire document to find and select the child. This is less performant and not even necessary because the parent of the element you intend to select is already cached.

Example 2 narrows the scope of the query (or search) by querying only the parent element and not the whole document. That's why it's preferred because it's more performant – especially when the document is large.

Also, note that the method used for querying the parent is querySelector. Using getElementById to query the parent won't work and will result in an error.

Use CSS Classes to Style Elements

It's best to use CSS classes to style elements instead of using inline styles. Classes are easy to maintain compared to inline styles which can be hard to manage.

The classList property has useful properties like add, remove, toggle, and others that makes it easy to modify styles.

Example:

.styledClass {
  color: red;
}

element.classList.add('styledClass')

This example uses the .add property of classList to add the styledClass to the element. Assuming you wanted to remove the class from the element, you can easily do so using the .remove property in place of add.

Use innerHTML with Caution

The innerHTML property reads and parses HTML markup that you pass to it. This means it can read and run code in a script tag passed to it. And this can pose a security risk to your application.

Where possible, use the innerText or textContent property to render strings. But if you need to use innerHTML, be sure you're using it to insert content from trusted sources. Or sanitize and validate the provided content with a library like DOMPurify.

You can read this freeCodeCamp article to learn more about innerHTML.

Write Readable Event Listeners

Often you will pass two arguments to event listeners. The first is the event you're listening to and the second is the event handler (the function that fires when the event occurs).

To make your code easy to read and maintain, you can define the event handler function outside of the event listener. Then you can call it within the even listener, like in example 1 below:

Example 1 ✅

MyElement.addEventListener('click', handleClick) 

function handleClick() { 
    // your logic goes here.. 
} 

// Example 2 ❌ 

myElement.addEventListener('click', function() { 
    // your logic goes here... 
})

Both are technically correct and will do the same thing. But example 1 is preferred because it's easier to read. Also, you can reuse the handleClick function if you need to. This helps you observe the DRY (Don't Repeat Yourself) principle.

Use Event Delegation to Handle DOM Events

Event delegation is when you attach an event listener on a parent element to listen to events on its descendants. With this technique, you can reduce the number of event listeners to include in your code.

For example, assume you have five buttons inside a parent div:

<div id="parent"> 
    <button id="btn-1">1st Button</button> 
    <button id="btn-2">2nd Button</button> 
    <button id="btn-3">3rd Button</button> 
    <button id="btn-4">4th Button</button> 
    <button id="btn-5">5th Button</button> 
</div>

You can add an event listener to each of the five buttons to listen to a click. Or using event delegation, you can a single event on only the parent div:

const parentElement = document.getElementById('parent') 

parentElement.addEventListener('click', handleClick) 

function handleClick(event) { 
  alert(event.target.id) 
}

In this example, the event to delegated to the parent element. And we're using event.target.id to get the actual button the user clicked. If you are curious, you can run the code on Stackblitz to see how it works.

Event delegation help saves time improve performance. Imagine how this technique can come in handy when dealing with a large amount of dynamic content.

Batch DOM Updates With Fragment

Frequent updates to the DOM can affect the performance of your application. Try to reduce the number of updates where possible.

A useful feature you can use to batch updates is the .createDocumentFragment property. It allows you to group multiple updates before inserting them into the document. This reduces reflows and makes your code more effecient.

Example without Fragment:

const container = document.getElementById('container')

for (let i = 0; i < 1000; i++) { 
    const listItem = document.createElement('li')
    listItem.textContent = `Item ${i}`
    container.appendChild(listItem) 
}

This code updates with each iteration of the loop. That means the DOM will be update 1,000 times. There is a more efficient way of doing this with the code below that uses fragment.

Example with fragment:

const container = document.getElementById('container') 
const fragment = document.createDocumentFragment()

// Add multiple list items to the fragment 
for (let i = 0; i < 1000; i++) { 
    const listItem = document.createElement('li') 
    listItem.textContent = `Item ${i}` 
    fragment.appendChild(listItem)
} 

container.appendChild(fragment)

The code above appends the listItem to the fragment with each iteration of the loop. It only appends the child to the container element after the loop is done running. This means the DOM is updated only once instead of 1,000 times like before.

Use the stopPropagation Method

The stopPropagation method controls the flow of events in the DOM. By default, when an event occurs on an element, it bubbles (propagates) through its ancestors.

This event propagating behaviour can sometimes lead to unintended results. The stopPropagation method provides a way to stop the event from propagating to the parent and other ancestors.

Let's take a situation where you have a button inside a parent div. And you want to handle a click event on the button without registering the click on the div:

<div id="container">
    <button id="button">Click me</button>
</div>

const containerDiv = document.getElementById('container')
const buttonElement = document.getElementById('button')

containerDiv.addEventListener('click', handleDivClick)
buttonElement.addEventListener('click', handleBtnClick)

function handleDivClick() { 
    console.log('Div clicked')
} 

function handleBtnClick(event) { 
    event.stopPropagation()
    console.log('Button clicked')
}

Without using the stopPropagation method, a click event on the button will also trigger a click event on the parent div. This means both event handlers will run.

But the event.stopPropagation() line in the code will prevent the handleDivClick function from running when a user clicks the button.

You can run the code on Stackblitz to see how it works. Comment out the line with the stopPropagation method and see the difference.

Test Your DOM Manipulation Code

When you write tests, you create scenarios that mimic user interactions or application states. You also verify that your application gives you the expected outcomes.

Testing your DOM manipulation code is a best practice because it will make your code reliable and easy to maintain. It also gives you confidence that your code behaves as expected, even as it evolves over time when you make changes and add features.

You can use testing frameworks and libraries available for JavaScript, such as Jest, Mocha, Jasmine, and others to automate testing your apps.

The following example uses the Jest framework to test DOM Manipulation code for adding a class to an element.

test('Adding a highlight class changes text color to red', () => {
    myElement.classList.add('highlight');
    expect(getComputedStyle(myElement).color).toBe('red');
});

Adding the highlight class is expected to change the text color to red. If the test passes, it means your DOM manipulation code works as expected. If not, you will need to figure out what figure out what's wrong and fix the issue.

Conclusion

In this article you've learned ten best practices to keep in mind when working with the DOM. Some of them are general while others are situation specific. By using these best practices in your workflow, you will be building your web applications with a code base that is easy to maintain.

If you want to dive deep into DOM manipulation, I wrote a whole handbook that covers the subject in depth.

Thanks for reading. And happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel

The DOM is a powerful tool that allows you to interact with and manipulate the elements on a web page. And this handbook will help you understanding and become confident in working with it.

You will begin by learning what the DOM is and what you can do with it. Then we'll dive into how to select, modyfy, and style DOM elements. You will also learn how to create new elements and add them to your web page.

The handbook also cover topics like how to traverse the DOM what DOM events are, and includes some project ideas for practice.

Let's get started!

Table of Contents

• What is the DOM?

  • What you can do with the DOM

• How to Select DOM Elements

  • getElementById

  • getElementsByClassName

  • getElementsByTagName

  • querySelector

  • querySelectorAll

• How to Change the Content of DOM Elements

  • The innerHTML Property

  • Security Risks with innerHTML

  • The innerText and textContent Properties

• How to Work with Attributes of DOM Elements

  • The getAttribute Method

  • The setAttribute Method

  • The removeAttribute Method

  • The hasAttribute Method

• How to Change the Styles on DOM Elements

  • Setting Styles with the .style Property

  • Setting Styles with Classes

• How to Traverse the DOM

  • Difference Between a Node and an Element

  • Selecting a Parent with parentNode vs parentElement

  • Selecting Elements with childNodes vs children

  • Selecting the First or Last Child/Element

  • Selecting a Sibling of Nodes in the DOM

• DOM Events and Event Listeners

  • Difference Between Event Listener and Event Handler

  • Three Ways to Register Events in JavaScript

  • Practice Challenge

  • Solution to Practice Challenge

  • The Event Object

  • Types of Events

• Event Flow in JavaScript

  • Event Bubbling

  • Event Capturing

  • The Event stopPropagation Method

• JS DOM Manipulation Projects Ideas

• Conclusion

What is the DOM?

DOM stands for Document Object Model. But what does that mean? Let's break it down.

The Document part refers to the webpage you see in the browser. Specifically, the HTML Document which handles the structure of the page's content. This includes the text, images, links, and other elements that make up the page.

Object means the elements like images, headers, and paragraphs are treated like objects. Each object has its properties (like id, class, style) and methods. Using these properties and methods, you can manipulate the elements.

The Model in DOM means it's a representation or copy of the HTML document as a hierarchical tree. This tree includes all the elements. And it captures the parent-child relationships between them.

The DOM is always identical to the HTML document. Browsers ensure that they are in sync. So if something changes in the HTML, the DOM changes too, and vice versa.

A graphical representation of the HTML DOM tree

At the top of the hierarchy is the Document object. It has only one child – the html element. The html element, also known as the root element, has two children, the head and body elements. And each of them also have their own children elements.

The parent-child relationship between the elements is what allows you to traverse or move between and select them. More on that later.

What You Can Do With the DOM

DOM manipulation allows developers to interact with the structure, style, and content of web pages. The following are some of the things you can do with the DOM:

• Change and remove existing elements in the DOM.

• Create and add new elements to the page.

• Change the styles for elements.

• Add event listeners to the elements to make them interactive.

How to Select DOM Elements

To do something with DOM elements, you first have to select or access the element in question. In this section, you will learn some common methods for selecting DOM elements.

Let's use the following phonebook markup to show how the various DOM selector methods work.

  <h1 id="page-title">Phonebook</h1>

  <p class="family">Marie</p>
  <p class="family">Jose</p>
  <p class="work">Anne</p>
  <p class="work">Joan</p>

The markup includes a header with an id of page-title and four paragraphs. The first two paragraphs both have a class of family, and the last two have a class of work.

1. getElementById

You use this method to select elements with an id attribute. Ids are unique identifiers. For example, if a header element has an id attribute with a value of "page-title", no other element on the page should also have an id with the same value.

This means anytime you use the getElementById method, you are going to select only one element from the DOM.

Let's look at an example:

The h1 header has an id value of page-title. Here is how you can select it using the getElementById method:

const titleElement = document.getElementById("page-title")
console.log(titleElement)

The example selects the header element and assigns it to the titleElement variable.

Result of accessing element with getElementById method.

If there's no element in the DOM with the given id, the getElementById() method will return null.

2. getElementsByClassName

You can use this method to select more than one object. This method takes in the value of a class attribute as an argument and selects all elements in the DOM that has the given class. Unlike ids, you can give the same class value for different HTML elements.

Here's an example:

const famContacts = document.getElementsByClassName("family")
console.log(famContacts)

This returns an HTML collection of all elements with the given class. The log statement will print the following in the console:

The getElementsByClassName() method returns an HTML collection.

Note: The HTML collection looks like an array, but it is not. You can access the elements using bracket notation just as you would with an array – but you cannot apply array methods like map, filter, and forEach on it.

console.log(famContacts[0])

This will get the first element in the HTML collection, which is the paragraph with the name Marie.

Result of accessing HTMLCollection element with bracket notation.

But what if you wanted to loop through all the elements in the famContacts HTML collection? You'd first need to convert the HTML collection into an array. Then you could use any of the array methods.

A simple way to create an array from the HTML collection is to use the spread operator, like this:

let famContactsArray = [...famContacts]

famContactsArray.forEach(element => console.log(element))

A result of logging all elements in the HTMLCollection.

Using the forEach method, you can access each of the items in the famContactsArray. The browser will throw an error if you try to apply an array method like map to the HTML collection without first creating an array from it.

Error message when you use array methods on an HTMLCollection.

3. getElementsByTagName

This method will select elements using their tag name. For example, getElementByTagName('p') will select all paragraphs on the page.

Like getElementsByClassName, this method also returns an HTML collection of the selected elements.

Here's an example:

const allContacts = document.getElementsByTagName('p')
console.log(allContacts)

An HTMLCollection containing all paragraph elements.

You can create an array from the HTML collection and use any of the array methods on it.

let allContactsArray = [...allContacts]

allContactsArray.map(element => console.log(element))

Result of using the map method on allContactsArray.

4. querySelector

You can use this method to select any HTML element in the DOM. It returns only one element: the first element that matches the given selector.

The querySelector method works like how CSS selectors work.

For example, what do you do when you want to select an element with an id? You use the hash # symbol. How about when you want to select elements with a class? You put a dot . in front of the class name.

Here's an example:

const firstWorkContact = document.querySelector('.work')
console.log(firstWorkContact)

An example of using the querySelector method.

The example above returns only the first element with a class of work and ignores the rest.

Let's see another example to show how querySelector works like CSS selectors. The following is a div element with four buttons:

<div>
    <button>First button</button>
    <button>Second button</button>
    <button>Third button</button>
    <button>Fourth button</button>
</div>

Assuming you wanted to select the third button, you could use querySelector like the one below. The code uses the CSS nth-child selector to get the third button inside the div.

const thirdBtn = document.querySelector('div button:nth-child(3)')
console.log(thirdBtn)

Result of selecting the third button with querySelector method.

But what if you want to select all four button elements and not only the first one? Then you could use the querySelectorAll method instead.

5. querySelectorAll

Like the querySelector method, querySelectorAll also selects HTML elements using CSS selectors. The difference is that it returns all elements that match the selector instead of returning only the first one.

Using the previous example, let's select all the buttons with querySelectorAll.

const allBtns = document.querySelectorAll('button')
console.log(allBtns)

The querySelectorAll method returns a NodeList of selected elements.

Note: querySelectorAll returns a NodeList. A NodeList is slightly different from an HTML collection. You don't need to convert it to an array to apply a method like forEach on it.

allBtns.forEach(btn => console.log(btn))

Result of using forEach method on the NodeList.

But you still cannot apply array methods like map, filter, and others on a NodeList. You will need to first create an array from it.

You can read this freeCodeCamp article on the difference between HTML collection and NodeList to learn more.

How to Change the Content of DOM Elements

So far you've learned about different ways to select DOM elements. But that is only the beginning. Now, let's see how you can manipulate the DOM to change the content of a webpage.

The first thing you need to do is to select the element. You can do that using any of the methods you learned from the previous section.

After selecting the element, there are several methods you can use to add or update the content.

The innerHTML Property

This is a method that allows you to read or update both the structure and content and structure of elements. Let's see an example of how you can use the innerHTML method.

The following is some markup of three paragraphs, each with an id.

  <p id="topic">JS array methods</p>
  <p id="first-method">map</p>
  <p id="second-method">filter</p>

Simple markup with three paragraph elements

You can read or get the content of the any of the paragraphs using innerHTML. For example, let's get the content of the first paragraph.

const topicElement = document.querySelector('#topic')
console.log(topicElement.innerHTML)

Log statement of the innerHTML of the topicElement

Now, let's say you want to update the topic from "JS array methods" to "JavaScript array methods". You can do that by assigning the new text to the innerHTML of the element.

const topicElement = document.querySelector('#topic')
topicElement.innerHTML = "JavaScript array methods"

The topic is updated from "JS Array methods" to "JavaScript array methods"

With innerHTML, you can change more than just the content. You can also change the HTML structure of the element. For example, if you want to make the word "JavaScript" bold, you could do this:

topicElement.innerHTML = "<b>JavaScript</b> array methods"

The word "JavaScript" is made bold using innerHTML

Security Risks With innerHTML

Using the innerHTML poses potential security risks. An example is cross-site scripting (XSS) attacks.

If the content you're inserting comes from user input or any untrusted source, be sure to validate and sanitize it before using innerHTML to prevent XSS attacks. You can use a library like DOMPurify to do this.

Also, if you are working with plain text content, consider using methods like innerText and textContent.

The innerText and textContent Properties

Both innerText and textContent ignore HTML tags and treat them as part of a string. You can use both methods to read or update the text of DOM elements.

A key difference between the two is in how they treat the text. Using innerText returns the text as it appears on the screen. And using textContent returns text as it appears in the markup. Let's see an example below.

<p>Key =<span style="display: none;">     ABC123<span></p>

A paragraph element with the some text and a hidden span element inside

The example includes a paragraph element. Inside the paragraph is a span that contains a key. The key does not appear on screen because its inline style is set to a display of none.

Now, let's select the paragraph and print both the innerText value and textContent value to see the difference.

const paragraph = document.querySelector('p');

console.log("innerText: ", paragraph.innerText)
console.log("textContent: ", paragraph.textContent)

Result of log statement for innerText and textContent.

Note how innerText returns the text as it appears on the screen (without the value of the key which is hidden with CSS). And note how textContent returns the text including hidden elements and whitespaces.

Let's see another example for adding text to an element. The following code includes two paragraphs, each with bold text and an empty span, as well as a horizontal line between them.

  <p>
    <b>innerText Example</b>
    <span id="inner-text"></span>
  </p>

  <hr>    

  <p>
    <b>textContent Example</b>
    <span id="textContent"></span>
  </p>

Example to demo the innerText and textContent properties

Now, let's select the two span elements and add the same text to them. This will help you better understand the difference between innerText and textContent.

const example1 = document.querySelector('#inner-text');
const example2 = document.querySelector('#text-content');

let address = `
  ABC Street,
  Spintex Road,
  Accra,
  Ghana.
`;

example1.innerText = address;
example2.textContent = address;

The code gives the same variable address to the two examples. The first uses innerText and the second uses textContent. See the results below:

Result of updating content with innerText and textContent.

Notice how innerText uses the line breaks but the textContent example doesn't.

Another key difference between the two methods is how they behave when used inside loops. innerText can be slower than textContent when dealing with bulk operations or frequent updates in a loop.

Read this freeCodeCamp article to learn more about the difference between innerHTML, innerText, and textContent.

How to Work with Attributes of DOM Elements

HTML attributes provide useful information about HTML elements. These attributes are always included in the opening tag of the element. An attribute is made up of a name and a value (though there are exceptions where only a name is present).

As the browser generates the DOM based on the HTML structure, it translates these attributes into dynamic properties of the DOM objects.

Here's an example:

Assume there's a button in the HTML document with the following attributes:

<button id="myBtn" type="submit">Click Here</button>

For this example, the browser will create an HTMLButtonElement object in the DOM. And the object will have properties matching the attributes.

• HTMLButtonElement.id with a value of myBtn.

• HTMLButtonElement.type with a value of submit.

To interact with and manipulate these attributes using JavaScript, you can use methods like getAttribute and setAttribute to directly access the properties.

The getAttribute Method

Like the name suggests, you can use this method to get the value of an existing attribute on an element.

It accepts an argument (the name of the attribute) and returns the value of the attribute. If the attribute you passed to it as an argument does not exist on the element, the method will return null.

Here's an example:

<img src="image.jpg" alt="An example image">

const imageElement = document.querySelector('img')
console.log(imageElement.getAttribute('src'))

The getAttribute method is used to get the value of the src attribute.

Using the getAttribute method is the above example, you can get the value of the src attribute for the image element.

The setAttribute Method

This is used to set or change the attribute of an element. The method takes in two arguments. The first argument is the name of attribute you want to change, and the second is the new value you want to give the attribute.

Here's an example:

<img src="image.jpg" alt="An example image">

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('src'))
imageElement.setAttribute('src', 'new-image.jpg')
console.log("AFTER:", imageElement.getAttribute('src'))

The setAttribute method is used to update the value of the src attribute.

This code example logs the value of the src attribute before and after using setAttribute to change it from image.jpg to new-image.jpg.

When you pass an argument to the setAttribute method and that attribute doesn't exit on the element, it will create a new attribute. For example, you can add a height property to the image element like so:

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('height'))
imageElement.setAttribute('height', '200')
console.log("AFTER:", imageElement.getAttribute('height'))

An example of adding a new height attribute to the image element.

The first log statement returns null because the height attribute was non-existent. But after setting it with the setAttribute method, the second log statement returns the correct value of the height.

The removeAttribute Method

In the previous section, you learned how to add a new attribute using the setAttribute method. What if you wanted to remove an existing attribute?

You can use the removeAttribute method. You pass in the name of the attribute you want to remove from the element as arguments to the method.

Here's an example:

  <img src="image.jpg" alt="An example image" height="200">

Let's use the removeAttribute method to remove the height attribute from the image element.

const imageElement = document.querySelector('img')

console.log("BEFORE:", imageElement.getAttribute('height'))
imageElement.removeAttribute('height', '200')
console.log("AFTER:", imageElement.getAttribute('height'))

An example of using the removeAttribute method.

Before using removeAttribute, the first log statement prints the value of the height attribute, 200. But after using the removeAttribute method, the second log statement prints null, confirming the removal of the height attribute from the image element.

The hasAttribute Method

Another method for working with attributes in the DOM is the hasAttribute method. You can use this method to check whether or not an element has a specific attribute.

The hasAttribute method returns true if the specified attribute exists and returns false if it doesn't.

Here's an example:

<img src="image.jpg" alt="An example image" height="200">

Let's use the hasAttribute to check for the presence of height and width values on the image element.

const imageElement = document.querySelector('img')

console.log("HEIGHT", imageElement.hasAttribute('height'))
console.log("WIDTH", imageElement.hasAttribute('width'))

Example of using the hasAttribute method to check if an attribute exists.

The check for height returns true because it's an existing attribute while the check for width returns false because it doesn't exist.

How to Change the Styles on DOM Elements

There are two main ways of styling elements when working with the DOM in JavaScript. You can use the .style property or you can use classes. Each has its benefits and situations it's best situated for.

Setting Styles With the .style Property

You use the .style property when you want to make specific changes to a single element. The .style property allows you to set styles directly as inline styles for elements. This means it overrides the styles you have in your CSS stylesheet.

Using the .style property, you get access to all the individual CSS properties. See the demo below:

  <h1>Styling elements with JavaScript</h1>

const header = document.querySelector('h1')
console.log(header.style)

CSSStyleDeclarations for an h1 element logged to the console.

The console.log prints the CSS style declarations with all the CSS properties for that element.

Now, let's see an example of how to use the .style property.

  <h1>I love JavaScript</h1>

An example h1 header element

Here is an h1 header. Now, let's add style to it using the .style property.

const paragraph = document.querySelector('h1')

paragraph.style.color = 'white'
paragraph.style.backgroundColor = 'green'

The style property is used to add a background colour to the h1 element.

NOTE: Because this is JavaScript, you cannot use the hyphen if the CSS property name includes two or more words. For example, in CSS you would write background-color. But in your JavaScript code, you need to use camel case. So background-color becomes backgroundColor.

You can also delete a style on an element by setting the value of the property to an empty string.

element.style.propertyName = ""

Setting Styles with Classes

With classes, you can create styles once and apply it to different elements. This helps make your code become more maintainable.

The className Property

The className property represent the class attribute of a DOM element. And you can use it to get or set the value of the class attribute.

Here's an example:

<p class="food rice-dish">Jollof rice</p>

const jollofParagraph = document.querySelector('p')

console.log(jollofParagraph.className)

jollofParagraph.className = 'favorite'

console.log(jollofParagraph.className)

Example of changing the value of a class with the className property.

The className also reads or replace the current class. In the example above, the first log statement prints the original value of the class. And after updating the className, the second log statement prints the new value for class.

But there is a more flexible property. For example, what if instead of replacing the old class with the new class, you wanted to add another class? That's where the classList property comes in.

The classList Property

With the classList property, you can add and remove classes. You can also toggle classes, replace existing class values with new ones, and even check if the class contains a specific value.

Here's an example:

<p class="food">Jollof rice</p>

const jollofParagraph = document.querySelector('p')
console.log(jollofParagraph.classList)

Shows the current classList with only one value

Adding Classes with classList.add()

jollofParagraph.classList.add('fav', 'tasty')

console.log(jollofParagraph.classList)

Example of adding new classes with classList.add.

The code adds two new classes fav and tasty to the class list.

Removing Classes With classList.remove()

jollofParagraph.classList.remove('tasty')

console.log(jollofParagraph.classList)

Example of removing classes with classList.remove.

The code removes the class tasty from the class list.

Replacing Classes with classList.replace()

jollofParagraph.classList.replace('fav', 'favorite')

console.log(jollofParagraph.classList)

The code replaces the class fav with favorite

Example of replacing classes with classList.replace.

Check the Presence of a Class with classList.contains()

const isFavorite = jollofParagraph.classList.contains('favorite')
const isSoup = jollofParagraph.classList.contains('soup')

console.log("Contains favorite: ", isFavorite)
console.log("Contains soup: ", isSoup)

Example checking if a class exists with classList.contains.

The code checks if the class passed to it is contained in the class list.

It returns true if it is included in the class list (for example favorite) and false if it is not included in the class list (for example soup)

Toggling a Class with the classList.toggle()

When you use the toggle property, it first checks if the class exists. If it exists, it will remove it. And if it doesn't exist, it will add it.

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

jollofParagraph.classList.toggle('favorite')
console.log(jollofParagraph.classList)

Example of toggling a class value with classList.toggle.

The first time the toggle runs, favorite exists in the class list. So, the toggle removes it.

The second time the toggle runs, favorite doesn't exist so the toggle adds favorite to the class list.

The next time the toggle runs, favorite now exists again. So it removes it from the class list.

The toggle keeps adding or removing the value from the class list depending on whether it's present or absent.

How to Traverse the DOM

To traverse the DOM means to move between the different elements/nodes within the HTML document. This may includes selecting or accessing parent, child, or sibling elements (or nodes). You do this to get information or manipulate the document structure.

But before we get into how to traverse the DOM, you need to understand the difference between nodes and elements.

Difference Between a Node and an Element

Nodes are the building blocks of the DOM. They represents different components in the HTML structure.

Elements are a specific type of node, but not all nodes are elements. Other types of content like attributes of elements, text content, and comments within the code are nodes too. But they are not elements.

An element is a specific type of node that defines the structure of the document's content. Think of elements as the familiar HTML tags you use. Examples include <div>, <p>, and <ul>. Each element can consist of attributes, text content, and other nested elements.

Selecting a Parent with parentNode vs parentElement

When it comes to selecting the parent of a DOM element, you can use either the parentNode or parentElement. Both will get the parent of the element you pass to it.

From a practical viewpoint, the parent of an element or a node will always be an element. So it doesn't matter which one you use, you will get the right parent of the selected element.

Let's see an example of selecting the parent of an element.

  <div class="container">
    <p class="full-text">
        <i id="italics">Some italicized text</i>
    </p>
  </div>

const italicizedText = document.getElementById('italics')

console.log(italicizedText.parentNode)
console.log(italicizedText.parentNode.parentNode)

First, you select the element. Then, you chain the parentNode method to it to get the parent. You can also chain another parentNode property to get the parent of a parent element like the second log statement.

The screenshot below shows the output of the two log statements.

Example of selecting the parent of an element.

Selecting Elements with childNodes vs children

You can select the contents of an element using both the .childNodes and .children properties. But they work differently.

childNodes: returns a NodeList of all the child nodes within the selected elements. It will include elements and non-element nodes like text nodes, comment nodes, and so on.

.children: returns an HTML collection of only the child elements (element nodes) of the selected objects. It will not include any non-element nodes like texts or comments.

Let's see an example that shows the difference:

  <div id="container">
    A text node
    <p>Some paragraph</p>
    <!-- This is a comment -->
    <span>Span Element</span>
  </div>

The code above has only 2 child elements (element nodes): the paragraph and the span. But there are other elements too – a text node and a comment:

const container = document.getElementById('container');

const containerChildNodes = container.childNodes;
const containerChildren = container.children;

console.log(containerChildNodes);
console.log(containerChildren);

An example of using the .childNodes property

The childNodes will return all the child nodes (both elements and non-elements). It also includes the whitespaces between elements as text nodes.

This can be confusing to work with. So, unless you have a good reason not to, you should stick with the .children property.

The children will only return the child elements (the paragraph and the span).

An example of using the .children property

Selecting the First or Last Child/Element

If you need to select only the first/last child or element, you can use these four properties.

• firstChild: Selects only the first child node of the parent element.

• lastChild: Selects only the last child node of the parent element.

• firstElementChild: Selects only the first child element of the parent.

• lastElementChild: Selects only the last child element of the parent.

Let's use the same example from the previous section to see how each works:

  <div id="container">
    A text node
    <p>Some paragraph</p>
    <!-- This is a comment -->
    <span>Span Element</span>
  </div>

const container = document.getElementById('container');

console.log("FIRST CHILD:", container.firstChild)
console.log("LAST CHILD:", container.lastChild)
console.log("FIRST ELEMENT: ", container.firstElementChild)
console.log("LAST ELEMENT:", container.lastElementChild)

Example demo selecting first child/element and last child/element

Note how firstChild returns the first text node but the firstElementChild returns the first paragraph instead. This means it ignored the text node which comes before the paragraph.

And also note how the lastChild returns a text node – even though from the markup, it looks like there's nothing after the span. That is because the lastChild property considers the linebreak/whitespace between the closing tag of the span and the closing tag of the div elements as a node.

That's why it's generally safer to stick to firstElementChild and lastElementChild.

Selecting a Sibling of Nodes in the DOM

You've learned how to select a parent or a child of an element. You can also select a sibling of an element. You do that using the following properties:

• nextSibling: Selects the next node within the same parent element.

• nextElementSibling: Selects the next element, and ignores any non-element nodes.

• previousSibling: Selects the previous node within the same parent element.

• previousElementSibling: Selects the previous element, and ignores any non-element nodes.

Here's an example:

  <div>
    <p id="one">First paragraph</p>
    text node
    <p id="two">Second paragraph</p>
    another text node
    <p id="three">Third paragraph</p>
    <p id="four">Fourth paragraph</p>
  </div>

const paragraphTwo = document.getElementById('two')

console.log("nextSibling: ", paragraphTwo.nextSibling)
console.log("nextElementSibling: ", paragraphTwo.nextElementSibling)
console.log("previousSibling: ", paragraphTwo.previousSibling)
console.log("previousElementSibling: ", paragraphTwo.previousElementSibling)

Examples of selecting siblings of a node.

nextSibling and previousSibling select the text nodes because they consider all nodes within the parent. While nextElementSibling and previousElementSibling select only the paragraph elements because they ignore non-element nodes like text.

DOM Events and Event Listeners

DOM events are actions that take place in the browser. These events are what allows you to make websites interactive.

Some DOM events are user-initiated like clicking, moving the mouse, or typing on the keyboard. Others are browser-initiated like when a page finishes loading.

Difference Between Event Listener and Event Handler

An event listener is a method that lets you know when an event has taken place. It allows you to "listen" or keep an eye out for DOM events. That way, when an event happens, you can do something.

An event handler is a response to the event. It's a function that runs when an event occurs.

For example, you can attach an event listener to a button that lets you know when a user clicks that button. Then you can write an event handler (a function) that prints something on screen anytime a click event occurs.

In this case, the event listener is what informs your app when a click occurs and then trigger a response. And the response (the function that runs when the click occurs) is an example of an event handler.

Three Ways to Register Events in JavaScript

The following are three different ways you can listen to and respond to DOM events using JavaScript.

• Using inline event handlers: This is when you add the event listener as an attribute to HTML elements. In the early days of JavaScript, this was the only way to use events. See the example below:

// Example of using an inline event handler

<button onclick="alert('Hello')">Click me!</button>

• Using on-event handlers: You use this when an element has only one event handler. When you add more than one event handler using this method, only the last event handler will run, as it will override others before it.

<!-- An example of using an on-event handler -->

<button>Click me!</button>

<script>
  const myButton = document.querySelector('button')

  myButton.onclick = function() {
    console.log("Run first handler")
  }

  myButton.onclick = function() {
    console.log("Run second handler")
  }
</script>

Only the second event handler is executed.

As you can see from the result in the console, the browser runs the code for only the second event handler.

• Using the addEventListener method: This method allows you to attach more than one event handlers to an element. And it will execute them in the order in which they were added.

As a general rule, you should stick with the addEventListener, unless you have a compelling reason not to.

The addEventListener method takes two arguments. The first is the event you want to listen to, and the second is the event handler which is the function you want to run when the event occurs.

<!-- An example of using the addEventListener method -->

<button>Click me!</button>

<script>
  const myButton = document.querySelector('button')

  myButton.addEventListener('click', function() {
    console.log("Run first handler")
  })

  myButton.addEventListener('click', function() {
    console.log("Run second handler")
  })
</script>

The addEventListener method executes both event handlers.

Practice Challenge

Here is a challenge for you before you move on. Try solving it on your own before you take a look at the solution.

Consider the HTML and CSS code below.

The challenge includes two elements. A #gift-box div and a #click-btn button. The gift box is hidden with the .hide class.

Your task is write JavaScript code that listens to a click event on the button, and display the hidden box when the user clicks the button.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

      <div id="gift-box" class="hide">🎁</div>
      <button id="click-btn">Show the box</button>

  </body>
</html>

.hide {
  display: none;
}

#gift-box {
  font-size: 5em;
}

<a href="https://stackblitz.com/edit/js-cywa91?file=index.html,style.css,index.js" target="_blank"

Solve the challenge on StackBlitz

Demo gif for the final solution of the challenge

Solution to Practice Challenge

Congratulations if you were able to solve the challenge. If you were not, that's okay. The solution and explanation is provided below:

const giftBoxElement = document.getElementById('gift-box')
const buttonElement = document.getElementById('click-btn')

buttonElement.addEventListener('click', function() {
  giftBoxElement.classList.remove('hide')
})

To solve this challenge, first you need to select both the #gift-box and #click-btn element.

Then, you add an event listener to the button. As mentioned earlier, the addEventListener method takes in two arguments.

In this case, the first argument is the 'click' event, and the second argument is a function.

The goal is to display the box. The box has a class hide which sets display to none in the CSS. One way to display the box using JavaScript is to remove hide from the classList.

The Event Object

This is a JavaScript object the browser passes as an argument to the event handler function anytime an event occurs. The object includes some useful properties and methods like the following:

• type: the type of event that occurred (like click, mouseover, keydown, and so on)

• target: the element on which the event occurred

• clientX and clientY: the horizontal and vertical coordinates of the mouse pointer at the time the event occurred.

• preventDefault(): prevents default actions associated with the events like preventing a form submission on the submit event.

• stopPropagation(): prevents the event from propagating through the DOM. More on that later.

You can see a full list of the properties and methods on the MDN web docs.

Types of Events

There are many different kinds of DOM events the browsers lets you listen to. The following are few of the common ones.

Mouse events:

• click: when the element is clicked.

• dbclick: when the element is double clicked.

• mouseover: when the mouse pointer enters the element.

• mouseleave: when the mouse pointer leaves the element.

• mousedown: when the mouse is pressed down over an element.

• mouseup: when the mouse is released over an element.

Keyboard events:

• keydown: when a key on the keyboard is pressed down.

• keyup: when a key on the keyboard is released.

• keypress: when a key is pressed and shows the actual key that was pressed. Note that this event is not fired for all keys, especially non-printable keys.

Form events:

• submit: when a form is submitted.

• input: when the value of an input field changes.

• change: when the value of a form element changes and loses focus.

Window events:

• load: when the browser finishes loading the page.

• unload: when the user leaves the page.

• resize: when the browser window is resized.

• scroll: when the user scrolls through the document.

You can see a comprehensive list of DOM events here.

Event Flow in JavaScript

When a JavaScript event occurs, the event is propagated or travels either from the target where the event occurred to the outermost element in the DOM or vice versa.

For example, let's say you click a button on a page. By clicking the button, you've also clicked its parent element and any element the button is inside within the DOM hierarchy.

Event Bubbling

This is when the event is first registered on the target (or specified element) on which the event happened, and then registered outwards to the parent and onwards to the outermost element.

Here's an example:

<!DOCTYPE html>
<html>
    <head>
        <title>Event bubbling DEMO</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
              <button id='btn'>Click Here</button>
            </div>
        </div>
    </body>
</html>

The example here contains a button #btn. With event bubbling, when an event occurs (say a click) on the button, the event goes through the following sequence.

Event bubbling in DOM Manipulation: from button to div#inner to div#outer to body to HTML to document.

The event starts to bubble up from the target element back to the outermost ancestor.

Event Capturing

Event capturing is the opposite of event bubbling. The event starts from the outermost ancestor element and travels down the DOM tree to the target element.

Event capturing in DOM Manipulation

During the capturing phase, event listeners attached to elements are executed in the order of the hierarchy from the topmost ancestor to the target element.

In case you're wondering why this matters, let's see a practical example using the same HTML markup example from above:

<!DOCTYPE html>
<html>
    <head>
        <title>Event bubbling DEMO</title>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
              <button id='btn'>Click Here</button>
            </div>
        </div>
    </body>
</html>

Let's add event listeners to the button, the #inner div, and the #outer div:

const button = document.getElementById('btn')
const innerDiv = document.getElementById('inner')
const outerDiv = document.getElementById('outer')

button.addEventListener('click', function() {
  console.log('Click on button')
})

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
})

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
})

By default, browsers use the event bubbling approach. So there is no need to add any argument to the event listener. This is the order in which the event handlers will run in response to a click on the button:

1. button

2. #innerDiv

3. #outerDiv

Events are executed from the element to the outermost element in the bubbling phase.

To use the event capturing model, you need to pass a third argument true to the event listener.

const button = document.getElementById('btn')
const innerDiv = document.getElementById('inner')
const outerDiv = document.getElementById('outer')

button.addEventListener('click', function() {
  console.log('Click on button')
}, true)

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
}, true)

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
}, true)

The order for executing the event handlers will now run in the opposite direction, like this:

1. #outerDiv

2. #innerDiv

3. button

Events are executed from the outermost element to the element in the capturing phase.

The Event stopPropagation() Method

You've learned about how the event bubbling registers an event on an element and continues registering the event all the way to the outermost ancestor element. You've also seen how event capturing does the opposite.

But what if you don't want the event to register on all the ancestors? That's where the stopPropagation method comes in. You can use this method to prevent the event from propagating through the whole DOM.

Let's use the stopPropagation method on the same example from before:

button.addEventListener('click', function(event) {
  event.stopPropagation()
  console.log('Click on button')
})

innerDiv.addEventListener('click', function() {
  console.log('Click on inner Div')
})

outerDiv.addEventListener('click', function() {
  console.log('Click on outer Div')
})

The stopPropagation method allows the execution of only the first event listener.

Now, only the event handler on the button is fired. The ones on the innerDiv and outerDiv are not because of the stopPropagation method on the button.

Also, note that to get the event object, you need to pass it as an argument to the event handler function.

JS DOM Manipulation Project Ideas

Building projects is an excellent way to improve your understanding of coding concepts. So roll up your sleeves and get ready to work!

Here are five JS DOM manipulation project ideas to help you practice and solidify your skills.

Toggle Switch

Design a toggle switch that changes its state (on/off) when clicked. Update the DOM (for example with a background color) that reflects the current state of the toggle switch.

Random Color Picker

Create a simple app where users can click a button to generate a random color. Include a shape on the screen that gets filled with the chosen color. Also display the color code on screen.

Countdown Timer

Build a timer that starts from a specified time. The app updates in real time and shows the remaining time on the screen.

Word Counter

Develop an app that provides an input field or text area for the user to type. Display the number of words in real time on the screen as the user types.

An Interactive To-Do List

Create an app that allows users to add, delete, or edit tasks. You can have fun with this one and add as many advanced features as you want. For example, adding features like marking tasks as completed, filtering tasks, or sorting them.

Conclusion

If you've come this far, then you now have a good understanding of JavaScript DOM manipulation. With practice, you'll be confident enough to tackle advanced projects that require knowledge of these DOM manipulation concepts.

A good foundation of Vanilla JS DOM manipulation concepts will also come in handy when picking JavaScript libraries/frameworks like React, Angular, Vue, Svelte, and so on.

Thank you for reading, and happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

By the end of this article, you will know how to use template literals. You will learn the syntax, the benefits, and some use cases. And you will also learn about an even more powerful feature called tagged template literals.

Table of Contents

• What are Template Literals?

• Template Literals vs Regular Strings

• Some Use Cases of Template Literals

• Tagged Template Literals

• Examples of Tagged Template Literals

• Conclusion

What are Template Literals?

Template literasl are a feature in JavaScript that let developers work with strings in a convenient way. You denote regular strings in JavaScript using double quotes "" or single quotes ''.

But with template literals, you denote strings using backticks ````. This lets you embed variables and expressions within your strings.

Here's an example:

const website = 'freeCodeCamp'
const message = `Welcome to ${website}`

console.log(message)

Output of template literal example.

The value of the message variable is an example of a template literal. It includes backticks which are used to define the template literal. And it also includes the syntax ${} which is used to embed variables within the string.

Template Literals vs Regular Strings

Let's now take a look at how template literals differ from regular strings and also some of the benefits of using template literals.

String Concatenation

Before the introduction of template literals, you had to use the plus + symbol when you wanted to concatenate strings.

const userName = 'Marie'
const balance = 10

// Using regular string
const str1 = 'Hi ' + userName + ',' + ' your balance is ' + balance + '.'
console.log("Regular string: ", str1)

// Using template literal
const str2 = `Hi ${userName}, your balance is ${balance}.`
console.log("Template literal: ", str2)

The regular string and template literal produce the same output for the example.

Note how using regular strings involves adding many plus signs. And also accounting for whitespace at the right places. This can get difficult to deal with when working with lengthy strings.

With the template literal example, there was no need to add any plus signs. You write everything together as a single string. The variables are directly embedded using the ${} syntax.

Multi-line Strings

Another way template literals make it easier to work with strings is when dealing with multi line strings. For regular strings, you have to use a combination of the plus + sign and \n to denote a new line. But template literals don't require any of that.

const regularString = 
'Hello there! \n' +
'Welcome to our website. \n' +
'How can we help you today?'

const templateLiteral = 
`Hello there!
Welcome to our website.
How can we help you today?`

console.log(regularString)
console.log(templateLiteral)

Multi line string examples for regular string and template literal.

Both the regularString and templateLiteral variables give the same output. The template string recognises whitespaces and linebreaks automatically.

Readability and Maintainability

Template literals also make your code more readable and easier to maintain. As you've seen already, they doesn't require any concatenation with the plus + sign. And you also don't need to worry about escaping quotations marks.

Here's an example:

const city = "Paris"
const str1 = 'She said, "I love ' + city + ', it\'s a beautiful place."'
const str2 = `She said, "I love ${city}, it's a beautiful place`

console.log(regularString)
console.log(templateLiteral)

Results of regular string and template literal examples

Unlike the template literal, the regular string requires the following;

• The use of the plus + for concatenation.

• Careful use of single and double quotes.

• The need to escape the single quote in string with \.

Some Practical Use Cases of Template Literals

So far, you've learned what template literals are and how they compare with regular strings. Now, let's look at some practical examples.

Generating HTML Markup

You will often see template literals used for generating HTML markup. They allow you to embed JavaScript expressions directly into HTML strings. This makes it easy to create content that's dynamic and data driven.

Example:

const user = {
  name: "Marie",
  age: 25,
};

const userProfile = `
<div>
  <h2>Name: ${user.name}</h2>
  <p>Age: ${user.age}</p>
</div>
`

Note how the ${} syntax allows you to run JavaScript expressions directly within the string. In this case, it's used to read the values of the user object's properties.

Creating Dynamic SQL Queries

You can also use template literals to create dynamic SQL queries by embedding variables or expressions directly into the query strings. This means you can easily create queries based on runtime values.

Example:

const tableName = "users";
const columnName = "name";
const searchValue = "John";

const sqlQuery = 
  `SELECT * FROM ${tableName} WHERE ${columnName} = '${searchValue}'`

Localization and Internalization

Another practical use of template literals is for handling localization and internationalization in your apps. It's easier to manage translations because with template literals, you can embed variables for localized content or language keys directly into strings.

Example:

const user = {
  name: "Marie",
};

const locale = "fr";
const greetings = {
  en: "Hello",
  es: "Hola",
  fr: "Bonjour"
};

const localizedGreeting = `${greetings[locale]} ${user.name}!`;
console.log(localizedGreeting)

Example of using template literals for localized content.

This example creates a localizedGreeting string without relying on any cumbersome concatenation.

Tagged Template Literals

This is a feature of the JavaScript template literal that you can use to perform advanced string manipulation.

To use this feature, you need a tag function and then a tagged template.

The tagFunction takes in a mix of strings and variables as arguments. It then formats them based on some condition or rules you set.

Then, you call (or run) the tag function by placing it before the opening backtick of the template literal.

Syntax for Tagged Template Literal

function taggedFunc(strings, ...values) {
  console.log(strings)
  console.log(values)
}

const name = 'Sarah'
const city = 'Rome'

taggedFunc`Hello ${name}. Welcome to ${city}.`

Log results for the string and value arguments of a tagged template literal

There are three things to take note of here.

First, the first parameter (strings in this example) is always an array of all the blocks of strings in the template literal. In this case, it is the array below.

['Hello ', '. Welcome to ', '.']

Next, the rest of the parameters will be all the variables and evaluated expressions within the template literals. The JavaScript rest parameter syntax ...values makes it simple to get all of them.

['Sarah', 'Rome']

Finally, take note of how the taggedFunc is used. Unlike a regular function, you won't call it with a parenthesis. But by attaching it before the first backtick of the template literal.

taggedFunc`Hello ${name}. Welcome to ${city}.` ✅

taggedFunc(Hello ${name}. Welcome to ${city}.) ❌

Practical Example of Tagged Template Literal

Now let's see some practical examples of using a tagged template literal to handle string manipulation.

Example 1

function receiptTag(strings, ...values) {  

  let finalString = ''
  for (let i = 0; i < values.length; i++) {
    finalString += strings[i] + values[i]
  }

  // Add the last string literal
  finalString += strings[strings.length - 1] 

  return finalString
}

const item = 'apple'
const price = 2.5
const quantity = 3

const message = receiptTag`
  You have ${quantity} ${item}s.
  Unit cost: $${price}. 
  Total cost: $${quantity * price}.
`

console.log(message)

Example of a string formatted with a tagged template literal.

In this example, the recieptTag function receives a template literal with four expressions:

• ${quantity}

• ${item}

• ${price}

• ${quantity * price}

The values array will contain the evaluated values of these expressions.

[3, 'apple', 2.5, 7.5]

And you can process them accordingly in the tagged function.

The result, logged to the console is a message that includes information about the quantity, item, unit cost and total cost.

Example 2

function greetUser(strings, name) {
  const now = new Date()
  const currentHour = now.getHours()

  const timeOfDay = currentHour < 12 ? 'morning' : currentHour < 17 ? 'afternoon' : 'evening'

  return `Good ${timeOfDay} ${name}${strings[1]}`
}

const userName = 'Ama'

console.log(greetUser`Hello ${userName}, nice to meet you!`)

This example uses tagged template literal to determine how to greet the user based on what time of day it is.

The function first gets the current hour using the date object. Then uses a tenary operator to determin time of day. And returns a string with a timeOfDay variable indicating what time of day it is.

Also, pay attention to the first word of the log statement and compare it to the first word of the string passed to the tag to see how the function has changed the string.

Conclusion

Template literals provide a convenient way to work with strings in JavaScript. In this article, you've learned about the syntax, and how to use them in your projects.

You also learned about an advanced feature of template literals: tagged template literals. These are functions that take in an array of string blocks and expressions. They return a string based on the logic you write for the function.

Thanks for reading. And happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

By the end of this article, you will learn all about HTMLCollection and NodeList.

Table of Contents

• What is an HTMLCollection?

• What is a NodeList?

• Similarities between HTMLCollection and NodeList

• Differences between HTMLCollection and NodeList

• Which one should you use?

• Conclusion

Let's get started!

What is an HTMLCollection?

An HTMLCollection is a list of DOM elements that match certain criteria. For example, they may have the same tag name or class. Or they may be related in a specific context, like children of a particular element.

Here's an example:

  <button class="btn">First button</button>
  <button class="btn">Second button</button>
  <button class="btn">Third button</button>

In this example, we have three button elements. Each has a class of btn. Now, let's select the buttons using the getElementsByClassName method.

const buttonElements = document.getElementsByClassName('btn')
console.log(buttonElements)

The getElementsByClassName methods returns an HTMLCollection of the three buttons with the btn class. It looks like an array but it's not. More on that later.

What is a NodeList?

Like the name suggests, a NodeList is a list of nodes. But what is a node? A node is any individual element in the DOM tree. This could be elements, attributes, texts, comments, and so on.

An example of a DOM method that will return a nodeList is querySelectorAll.

Example:

  <button class="btn">First button</button>
  <button class="btn">Second button</button>
  <button class="btn">Third button</button>

Using the same example, let's select the buttons with querySelectorAll instead.

const buttonElements = document.querySelectorAll('.btn')
console.log(buttonElements)

This time, the console.log statement prints a NodeList. Again, this is also similar to an array but it isn't quite an array.

Similarities between HTMLCollection and NodeList

Now that you know what HTMLCollection and NodeList are, let's look at how they are alike. They both aren't arrays even though they look like one. But they have features that make them have some behaviours of arrays.

You can access the contents of both using zero-based indexing like you would with an array. And you can also use the length property to find the length of both an HTMLCollection and a NodeList.

Example:

  <div>
    <p class="paragraph">First paragraph</p>
    <p class="paragraph">Second paragraph</p>
    <p class="paragraph">Third paragraph</p>
  </div>

This is a div with three paragraphs. Let's see examples of accessing the elements with zero-based indexing and also checking the length for both HTMLCollection and NodeList.

Example with HTMLCollection:

// getElementsByClassName will return an HTMLCollection
const paragraphs = document.getElementsByClassName("paragraph")
console.log(paragraphs)

// Use the index to get the first paragraph
let firstParagraph = paragraphs[0] 
console.log(firstParagraph)

// Use the length property
console.log(paragraphs.length)

The screenshot below shows the results for the three console.log statements.

Even though the HTMLCollection is not an array, you can still use the index to access the items in the collection. And you can also get the length using the length property.

You will get the same result for a NodeList. To get a NodeList, let's use the querySelectorAll method instead.

Example with NodeList:

// querySelectorAll will return a Nodelist
const paragraphs = document.querySelectorAll(".paragraph")
console.log(paragraphs)

// Use the index to get the first paragraph
let firstParagraph = paragraphs[0] 
console.log(firstParagraph)

// Use the length property
console.log(paragraphs.length)

Just like the HTMLCollection, the NodeList also uses zero-based indexing. And you can also use the length property on it.

Differences between HTMLCollection and NodeList

You've seen how an HTMLCollection and a NodeList are alike. But there are also some differences you need to be aware of when working with these two types of collections in the DOM.

Elements nodes only vs all nodes

Elements nodes are HTML elements like <p>, <div>, <img>, and others. But there are other types of nodes too. For example, text nodes and attribute nodes.

An HTMLCollection will include only element nodes whiles a NodeList includes other node types.

Example:

<div>
  This is a text
  <p class="paragraph">First paragraph</p>
  <p class="paragraph">First paragraph</p>
</div>

Here is a div with a text node and two element nodes (paragraphs). Each paragraph also has a text node.

Assuming you wanted to get only the element nodes in the div, you can use the children property on the div. And it will return an HTMLCollection containing only the element nodes.

But if you wanted all the nodes and not just the element nodes, then you can use the childNodes property to get all the nodes.

const divElement = document.querySelector('div')

console.log(divElement.children) // returns an HTMLCollection
console.log(divElement.childNodes) // returns a NodeList

The HTMLCollection has two items: the paragraph element nodes. Whilst the NodeList includes the first text and the two paragraphs and their text contents too.

Live Collections vs Static Collections

The concepts of "live" and "static" refer to how an HTMLCollection and NodeList behave in response to changes in the document structure.

An HTMLCollection is always live

What does it mean to say an HTMLCollection is always live? It means when there is a change in the document, it will be automatically updated to reflect the change.

Example:

<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>

// returns an HTMLCollection
const paragraphs = document.getElementsByTagName('p')

console.log("BEFORE UPDATE: ", paragraphs)

const newParagraph = document.createElement('p')
document.body.appendChild(newParagraph)

console.log("AFTER UPDATE: ", paragraphs)

The code above creates an HTMLCollection called paragraphs using the getElementsByTagName method. And there are two console.log statements. One before a new paragraph is created and appended to the body, and another one after that.

Before the update, the HTMLCollection had three elements. But after the update, the collection now has four elements, reflecting the change in the document.

A NodeList is sometimes static

A NodeList is not always live. It can be static or live depending on how it is generated. For example, a NodeList generated with the querySelectorAll method is static. A change in the document isn't reflected in the NodeList.

Example:

<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>

// returns an HTMLCollection
const paragraphs = document.getElementsByTagName('p')

console.log("BEFORE UPDATE: ", paragraphs)

const newParagraph = document.createElement('p')
document.body.appendChild(newParagraph)

console.log("AFTER UPDATE: ", paragraphs)

Because of the static nature of the NodeList, it remains the same even after an update in the document.

Note: in exceptional cases, like when a NodeList is generated with the getElementsByName, that NodeList will be live.

How to Access Items in the Collection

When accessing elements in an HTMLCollection, you can use any of the following.

• The index of element.

• Their id attribute with the namedItem property.

• Their name attribute with the namedItem property.

But with a NodeList, you can only access the nodes in the list only by their index.

<div id="container">
  <button id="btn1" name="first-name">First Button</button>
  <button id="btn2">Second Button</button>
  <button id="btn3">Third Button</button>
</div>

Here is a div container with three buttons. Note the first button has an id attribute and a name attribute.

Example with HTMLCollection:

const container = document.querySelector('#container')
const buttons = container.children // returns HTMLCollection

console.log(buttons[0])// using the index
console.log(buttons.namedItem("btn1")) // using the id attribute
console.log(buttons.namedItem("first-name")) // using the name attribute

All three console.logs successfully return the first button.

Example with NodeList:

const container = document.querySelector('#container')
const buttons = container.childNodes // returns a NodeList

console.log(buttons[1])// using the index
console.log(buttons.namedItem("btn1")) // throws an error
console.log(buttons.namedItem("first-name")) // throws an error

Using the same example for a NodeList, the first console.log statement prints the button. But the other two raise a TypeError.

How to loop through the collection

You cannot loop through an HTMLCollection with any of the array methods. Unless you first create an array from the collection.

But with a NodeList, you can use the forEach method to loop through it. But you cannot use other array methods like map, filter, and others without first creating an array from it.

Example:

<button class="btn">First button</button>
<button class="btn">Second button</button>
<button class="btn">Third button</button>

The code below attempts to loop through an HTMLCollection with the forEach method and results in an TypError.

// returns an HTMLCollection
const allButtons = document.getElementsByClassName('btn') 

allButtons.forEach(button => console.log(button))

Let's see another example but with a NodeList.

// returns a NodeList
const allButtons = document.querySelectorAll('.btn') 

allButtons.forEach(button => console.log(button))

In the example above, the forEach method works successfully on the NodeList.

If for some reason, you still want to loop through an HTMLCollection without first creating an array from it, you can use the for...of statement. Let's use the same buttons example to show how you can do that.

// returns an HTMLCollection
const allButtons = document.getElementsByClassName('btn')

for (button of allButtons) {
  console.log(button)
}

Which One Should You Use?

The question of whether you should use an HTMLCollection or a NodeList depends on the use case or specific context.

If you want a live collection that automatically updates when there's a change in the document, then you should use an HTMLCollection. But if you prefer a static collection that doesn't update with a change in the document, then you should use a NodeList.

Most modern JavaScript frameworks and libraries provide higher-level abstractions, simplifying many DOM manipulation tasks. And you don't need to worry about them.

But having a solid understanding of native DOM collections like HTMLCollection and NodeList remains valuable, especially in scenarios where fine-grained control or compatibility with legacy code is essential.

Conclusion

In this article you learned about HTMLCollection and NodeList. You learned about what they are, their similarities and differences. The article also touched on when you should consider using either an HTMLCollection or a NodeList.

Thanks for reading. And happy coding. For more in-depth tutorials, feel free to subscribe to my YouTube channel.

This is a perfect resource for you if you are a beginner web developer. It'll also be useful if you're an experienced developer who wants to brush up on your responsive web design skills.

Table of Contents

• What is Flexbox?

• What are the benefits of using Flexbox?

• The main axis and the cross axis

• Flex Containers and Flex Items

• Understanding Flex and Inline-flex

• display: flex

• display: inline-flex

• The Flex Container Properties

• The flex-direction Property

• The flex-wrap Property

• The flex-flow Shorthand Property

• The justify-content Property

• The align-items Property

• The align-content Property

• The place-content Property

• The Flex Items Properties

• The order Property

• The align-self Property

• The flex-grow Property

• The flex-shrink Property

• The flex-basis Property

• The flex Shorthand Property

• Flexbox Gaps

• How to Center an Element With Flexbox

• Practice with Flexbox Games

• Are There Bugs in CSS Fexbox?

• Conclusion

What is Flexbox?

Flexbox is short for "Flexible Box Layout". It's a CSS layout model that simplifies creating complex layouts. It provides a flexible way to align elements and distribute space within a container element.

The Flexbox layout model is bidirectional. This means you can either arrange your elements in rows, columns, or both. More on that later.

What are the benefits of using Flexbox?

Before Flexbox, it was hard to create complex layouts and responsive web pages. You needed a combination of CSS floats and position properties. This required many workarounds and hacks.

But with Flexbox, you can now do the following with less difficulty and fewer lines of code:

• Align and center elements using properties like justify-content and align-items.

• Develop responsive layouts without writing lots of media queries.

• Reorder elements without changing the HTML structure

• Create same-height columns without any extra HTML elements or background images.

Now you know what Flexbox is, along with some of the things you can do with it. Let's see how you can use it.

The main axis and the cross-axis

The first thing you need to understand about Flexbox is the concept of axes. Every flex container (an element with a display property set to flex or inline-flex) has a main axis and a cross axis.

The main axis is either horizontal or vertical depending on the value of the flex-direction. No worries if you are not familiar with flex-direction. You are about to learn it.

The cross axis and main axis when the flex-direction is row

In this example, the main axis is horizontal and the cross axis is vertical.

The following is an example where the the main axis is vertical and the cross axis, is horizontal.

The main axis and cross axis when the flex-direction is column

Flex Containers and Flex Items

To use all of Flexbox's properties, you need to set the display property for an element to flex or inline-flex.

This turns the element into a flex container, and the children of that element become flex items.

Here's an example:

<section class="container">  
    <div>Flex Item 1</div>  
    <div>Flex Item 2</div>  
    <div>    
        <p>This paragraph is not a flex item</p>  
    </div>
</section>

.container {  
  display: flex;
}

The .container element is now a flex container. The three div elements are direct children of the .container element, which makes them flex items.

But the paragraph element inside the third div is not a flex item. This is because it's not a direct child of the .container element.

Understanding flex and inline-flex

You can use both flex and inline-flex to make an element a flex container. The difference is in how they interact with surrounding elements.

display: flex

This makes the flex container behave like a block-level element. The flex-container takes up the entire available width of its parent element. It starts on a new line, and the element that comes after it also starts on a new line.

Example:

<button>Button One</button>

/* Flex Container */
<section class="container">  
    <div id="red"></div>  
    <div id="gold"></div>  
    <div id="green"></div>
</section>

<button>Button Two</button>

.container {
    display: flex;
}

Flex containers behave like block elements when you use display: flex

The .container element takes up the entire available width of the body (its parent element).

display: inline-flex

This makes the flex-container behave like an inline-level element. This allows other inline elements (like buttons) to flow alongside it. Using the previous example, this is how the elements will be arranged when you change display from flex to inline-flex.

Flex containers behave like inline-elements when you use display: inline-flex

The flex container does not take up the entire width of its parent. It uses only as much horizontal space as necessary for its content.

Practice using flex and inline-flex on StackBlitz

The Flex Container Properties

The flex container properties allow you to control the layout and alignment of the flex items within a flex container.

NOTE: You apply these properties on the flex container, and not on its items.

The following are the flex container properties:

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

• place-content

The flex-direction Property

The flex-direction property defines the direction for displaying the flex items. It is what sets the flex container's main axis. This property can take any of these four values:

• row (default value)

• column

• row-reverse

• column-reverse

Now, let's look at some examples to see how it all works.

In the following code snippet, we have a names-container with four names:

<div class="names-container">  
    <p id="jill">1. JILL</p>  
    <p id="john">2. JOHN</p>  
    <p id="jane">3. JANE</p>  
    <p id="jack">4. JACK</p>
</div>

Let's see the different ways you can arrange the names using the flex-direction property.

flex-direction: row

This displays the flex-items horizontally from left to right.

.names-container {  
    display: flex;  
    flex-direction: row;  
    /* Other styles here... */
}

Example of flex-direction: row

flex-direction: column

This displays the flex-items vertically from top to bottom.

Example of flex-direction: column

flex-direction: row-reverse

This is the opposite of the row value. It displays the flex items from right to left.

Example of flex-direction: row-reverse

flex-direction: column-reverse

This is the opposite of the column value. It displays the flex items from the bottom to the top.

Example of flex-direction: column-reverse

Practice using flex-direction on StackBlitz

A note on the reverse values and accessibility:

There's something you need to keep in mind when you use row-reverse and column-reverse. As you've already seen, both affect the visual order of elements on the screen.

But the order in your HTML remains unchanged. And that is the order that screen readers and keyboard navigation controls use.

In the example, when you use row-reverse, you see Jack's name first on the screen, followed by Jane, John, and Jill.

But for someone using a screen reader, they will hear the names as they appear in the HTML and not as they appear on screen. In this case, they will first hear Jill's name, followed by John, Jane, and Jack.

The flex-wrap Property

Sometimes, the space within the flex container will not be enough for the flex items.

In such cases, you use the flex-wrap property to choose whether to let the flex-items overflow or begin on a new line.

The flex-wrap property accepts any of the following values:

• nowrap (default value)

• wrap

• wrap-reverse

To see flex-wrap in action, let's add four more names to our names-container:

<div class="names-container">  
    <p id="jill">1. JILL</p>  
    <p id="john">2. JOHN</p>  
    <p id="jane">3. JANE</p>  
    <p id="jack">4. JACK</p>  
    <p id="sara">5. SARA</p>  
    <p id="seth">6. SETH</p>  
    <p id="seal">7. SEAL</p>
</div>

flex-wrap: nowrap

This keeps all the flex items on a single line either in a row or column. It allows the flex items to overflow if there's not enough room in the flex container. See the example below:

.names-container {  
    display: flex;  
    flex-direction: row;  
    flex-wrap: nowrap;  
    /* Other styles here... */
}

Flex items overflows because flex-wrap is set to nowrap

In this example, three names overflow out of the container because there is not enough space for them.

flex-wrap: wrap

This will wrap or push the flex items to the next line if there's not enough room for them.

Flex items wrap or moves to the next line when flex-wrap is set to wrap

flex-wrap: wrap-reverse

This is the opposite of wrap. It moves the overflow items to the next line but in a reverse direction.

For example, using wrap-reverse on the names container moves overflow items to the next top line instead of the next line below.

Example of flex-wrap: wrap-reverse

Practice using flex-wrap on StackBlitz.

The flex-flow Shorthand Property

The flex-flow property is a shorthand for the flex-direction and flex-wrap properties. This means that when you use flex-flow, you can apply both properties with only a single line of code.

See the example below using the names container. You can give the container flex-direction and flex-wrap properties.

.names-container {  
    display: flex;  
    flex-direction: column;  
    flex-wrap: wrap;
}

Or you can use the flex-flow shorthand to get the same result.

.names-container {  
    display: flex;  
    flex-flow: column wrap;
}

Example of flex-flow: column wrap

Practice using flex-flow on StackBlitz.

The justify-content Property

This justify-content property handles the alignment of flex items on the main axis of the flex container.

You can use it to take care of how space is distributed on the main axis. This property takes any of the following values:

• flex-start (default value)

• flex-end

• center

• space-between

• space-around

• space-evenly

justify-content: flex-start

This places the items at the start of the flex-direction. If the main axis is horizontal with a flex-direction of row (like the example below), it aligns the items to the left. And if it's vertical (with a flex-direction of column), it aligns the items to the top.

Using the names container example, this is how justify-content: flex-start would look like:

.names-container {  
    display: flex;  
    justify-content: flex-start;  
    /* Other styles here... */
}

Example of justify-content: flex-start

justify-content: flex-end

This will place the flex items at the end of the flex-direction of the main axis.

Example of justify-content: flex-end

justify-content: center

This places the flex items at the center of the flex container's main axis.

Example of justify-content: center

justify-content: space-between

This will place the first flex item at the start of the main axis. And also place the last item at the end of the main axis. Then space on the main axis is distributed equally among the the elements.

Example of justify-content: space-between

justify-content: space-evenly

This distributes space equally among the flex items. This means the space before and after each item is the same.

Example of justify-content: space-evenly

justify-content: space-around

This also distributes space equally between the flex items. The key difference here is that the space before the first item and after the last item is half the space between the flex items.

Example of justify-content: space-around

Practice using justify-content on StackBlitz.

The align-items Property

The align-items property handles the alignment of flex items on the cross-axis of the flex container. It can take any of the following values:

• stretch (default value)

• flex-start

• flex-end

• center

• baseline

align-items: stretch

This stretches the flex items to fill up the space within the flex-container.

See the example below using a new names container with name cards of different sizes:

.names-container {  
    display: flex;  
    align-items: stretch;  
    /* Other styles here... */
}

Example of align-items: stretch

align-items: flex-start

This will place the flex items at the start of the cross-axis of the flex container. If the cross-axis is vertical like in the example below, align-items: flex-start will place the items at the top.

.names-container {  
    display: flex;  
    align-items: flex-start;  
    /* Other styles here... */
}

Example of align-items: flex-start

align-items: flex-end

This will place the flex items at the end of the cross-axis of the flex container. If the cross-axis is vertical like in the example below, align-items: flex-end will place the items at the bottom.

.names-container {  
    display: flex;  
    align-items: flex-end;  
    /* Other styles here... */
}

Example of align-items: flex-end

align-items: center

This aligns flex items at the center of the cross-axis of the flex container.

.names-container {  
    display: flex;  
    align-items: center;  
    /* Other styles here... */
}

Example of align-items: center

align-items: baseline

When you use the baseline value, flex items are arranged such that their baselines are aligned. See the example below:

.names-container {  
    display: flex;  
    align-items: baseline;  
    /* Other styles here... */
}

The baseline is indicated with the dotted white line

Practice using align-items on StackBlitz.

The align-content Property

When you have a flex container with wrap (or more than one flex line), you may need to align the lines to distribute the space as you want. That is when you use align-content. This property can take any of the following values:

• stretch (default value)

• flex-start

• flex-end

• center

• space-between

• space-evenly

• space-around

In the example below, there are 11 names in the names container. And the names container element has a flex-wrap value of wrap. This means you can apply the align-content property to change the alignment of the flex lines.

align-content: stretch

This stretches the flex lines to fill up the space within the flex container's cross-axis.

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    align-items: stretch;  
    /* Other styles here... */
}

Example of align-content: stretch

align-content: flex-start

This places the flex lines at the start of the container's cross-axis. For example, if the cross axis is vertical like that of the names container, it will place the flex lines at the top.

Example of align-content: flex-start

align-content: flex-end

This places the flex lines at the end of the container's cross-axis.

Example of align-content: flex-end

align-content: center

This places the flex lines at the center of the container's cross-axis.

Example of align-content: center

align-content: space-between

This will place the first flex line at the start of the cross-axis. It also places the last flex line at the end of the cross axis. Then space on the cross-axis is distributed equally between the the lines.

Example of align-content: space-between

align-content: space-evenly

This distributes space equally between the flex lines. This means the space before and after each line is the same.

Example of align-content: space-evenly

align-content: space-around

This also distributes space equally between the flex lines. The key difference here is the space before the first line and after the last line is half the space between the flex lines.

Example of align-content: space-around

Practice using align-content on StackBlitz.

The place-content Property

If you need to use both the justify-content and align-content properties, you use the place-content shorthand property.

It can take one or two values. When you give it a single value, the browser will apply the same value for both justify-content and align-content.

And when you give 2 values for place-content, the first value will be for align-content and the second for justify-content.

Let's look at an example:

Instead of writing this:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    align-content: flex-end;  
    justify-content: flex-start;  
    /* Other content */
}

You can instead write the following and it will have the same effect:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    place-content: flex-end flex-start;  
    /* Other content */
}

Example of using the place-content shorthand

Practice using place-content on StackBlitz.

The Flex Item Properties

Every direct child of a flex container is a flex item. So far, you've learned the properties of the flex containers.

Flexbox also has properties that you can apply to individual flex items. They include the following:

• order

• align-self

• flex-grow

• flex-shrink

• flex-basis

• flex

The order property

The order property determines the order of appearance for the flex items.

The value you give to this property must be a number. A flex item with a lower number will appear before one with a higher number.

In the HTML code, the order for the four names is as follows:

1. Jill

2. John

3. Jane

4. Jack

<div class="names-container">
    <p id="jill">1. JILL</p>
    <p id="john">2. JOHN</p>
    <p id="jane">3. JANE</p>
    <p id="jack">4. JACK</p>
</div>

You can change the order of appearance on the screen using the order property. See the example below.

Here's how they appear with no order properties:

Name cards before add the order property

Now, see how they appear when you add the following order properties:

.names-container {  
    display: flex;
}

#jill {  
    order: 2;  
    background-color: #fe4f46;
}

#john {  
    order: 4;  
    background-color: #fcd65c;
}

#jane {  
    order: 1;  
    background-color: 
    #00bab4;
}

#jack {  
    order: 3;  
    background-color: #003f54;
}

The order property changes the order of appearance

Practice using the order property on StackBlitz.

Word of caution: Even though the order of appearance changes on screen, the order in the HTML remains unchanged. And it's the order in the HTML that screen readers use. Where possible, it's best practice to change the order in the HTML rather than doing it with Flexbox.

The align-self property

You can use the align-self property to give a flex item a different alignment from the other items.

It works the same way as the align-items property. The difference is that whereas align-items applies to all flex items, the align-self property is applied to only specific items.

Example:

.names-container {  
    display: flex;  
    align-items: center;  
    /* Other styles */    
}

#jill {
    align-self: flex-start;
}

Example of align-self with a flex-start value

In the example, the align-items property for the names container has a value of center. This aligns all the names at the center.

But using the align-self property, you are able to align Jill's name card to the top with a value of flex-start.

Practice using the align-self property on StackBlitz.

The flex-grow property

When you set a container's display to flex, often there will be some extra space after the items are arranged. See the example below:

.names-container {  
    display: flex;  
    justify-content: 
    flex-start;  
     /* Other styles */
 }

The flex container has more than enough space for the flex items

The browser treats the extra as a value of 1. This means when you give a flex-grow value of 0.5 to only one of the flex items, the browser will add half of the remaining space to the item's size.

#jill {
    flex-grow: 0.5;
}

The flex-grow property makes the Jill's larger than its initial size

And if you add a flex-grow value of 1 to only one of the flex items, the browser will add all the extra space to that item.

NOTE: If only one item in the container has a flex-grow value, then any value of 1 or more will make it take up all the extra space.

For example, the two code snippets below will have the same effect on Jill's card:

#jill {  
    flex-grow: 1;
}

#jill {  
    flex-grow: 99;
}

When only one card has a flex-grow of 1 or more

What happens when you add flex-grow values to more than one element?

The browser will share the extra space proportionately for them.

For example, when you give Jane a flex-grow of 3 and Jack a flex-grow of 1, the browser will share the extra space with a 3:1 ratio.

This means the total value of the extra space becomes 4 (3+1). Jane will then get 3/4 of the extra space. And Jack will get 1/4 of it.

The extra space is shared proportionately betwee Jane and Jack

Practice using the flex-grow property on StackBlitz.

The flex-shrink property

The flex-shrink property is the opposite of flex-grow.

You use flex-grow when you want to increase the flex item's size if there's extra space. But, you use flex-shrink when you want to decrease the flex-item's size if there's not enough space in the flex container.

See the example below:

<div class="numbers-container">
    <p id="one">1</p>
    <p id="two">2</p>
    <p id="three">3</p>
    <p id="four">4</p>
</div>

.numbers-container {  
    display: flex;  
    justify-content: flex-start;  
    /* Other styles */
}

#one {  
    flex-shrink: 2;  
    background-color: #fe4f46;
}

The first card shrinks to make room for the others

In the example, each of the four numbers has a width of 150px (that's a total of 600px). But the numbers-container has a width of 400px which is not enough.

The cards have to shrink to fit in the available space. But Number 1 which with a flex-shrink value of 2 shrinks to become twice as small as the other numbers.

What if you don't want a flex item to shrink?

To prevent a flex item from shrinking, give it a flex-shrink value of 0.

For example, when you give Number 1 a flex-shrink of 0, it will maintain the width of 150px. And the other flex items will shrink to fit in the remaining space.

The first card does not shrink because it has a flex-shrink value of 0

Practice using the flex-shrink property on StackBlitz.

The flex-basis property

You can use the flex-basis property to set the default length of a specific flex item. This is either the width or height of the item depending on the flex-direction.

If the flex-direction is row or row-reverse, the value for flex-basis becomes the initial width of the item.

And if flex-direction is column or column-reverse, then the value for flex-basis becomes the initial height of the item.

Example:

.names-container {  
    display: flex;  
    flex-direction: column;  
    /* Other styles */
}

div {  
    height: 20px;
}

#jane {  
    flex-basis: 60px;
}

Example of flex-basis setting the height of an item

In the example, the height for the divs is set at 20px. But Jane gets a flex-basis value of 60px. And that overrides the 20px given to all the divs.

Note: The flex-basis of 60px becomes the height for Jane because the flex direction is column. This means the main axis is vertical.

Here is another example. This time, the flex-direction is row. This means the flex-basis will set the width of the item.

.names-container {  
    display: flex;  
    flex-direction: row;  
    /* Other styles */
}

div {  
    width: 70px;
}

#jane {  
    flex-basis: 140px;
}

Example of flex-basis setting the width of an item

While all the other divs have a width of 70px, Jane has a width of 140px set by the flex-basis.

Practice using the flex-basis property on StackBlitz.

The flex Shorthand Property

You can use flex as a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

For example, instead of writing the following:

.flex-item {  
    flex-grow: 2;  
    flex-shrink: 0;  
    flex-basis: 50px;
}

You can use the shorthand like so and it will have the same effect:

.flex-item {  
    flex: 2 0 50px;
}

The flex property can take up to three values. The order of the values is important. The browser assigns the first value for flex-grow, the second for flex-shrink, and the third for flex-basis.

The default values for flex are 1 0 auto.

This means if you give flex a single value of 2, the browser uses 2 for flex-grow. And then it sets flex-shrink to 0 and flex-basis to auto.

Practice using the flex property on StackBlitz.

How to Center an Element With Flexbox

One of the headaches for many front-end developers is centering elements. Flexbox has a perfect solution for that.

There are two steps involved.

1. Make the parent element a flex container by setting display to flex.

2. Give a value of center to both justify-content and align-items.

That's it! Your element will be perfectly centered.

Example:

<div class="name-container">  
    <p>JOHN</p>
</div>

.name-container {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    /* Other Styles */
}

Example of centering an element with Flexbox

Whether you're trying to center text, images, or even an entire navigation bar, this will work just fine.

Flexbox Gaps

You can use the gap property to adjust the space between flex items.

NOTE: You apply the gap property on the flex container and not the flex items.

gap can take two values: the first value for gaps between the rows and the second value for gaps between the columns.

Example:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 50px 10px; 
    /* row-gap column-gap */
}

Example of giving two values for the gap property

If the gap you want between the rows and the columns is the same, you can use a single value. The browser will apply the same value to both rows and columns.

Example:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 10px; 
    /* Other Styles */
}

Example of using only one value for both rows and columns gap

You can also use the properties row-gap if you need to apply a specific gap value between only the rows. and column-gap if you need to add gaps between only the columns.

Example: Adding gaps between only the rows:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    row-gap: 20px; 
    /* Other Styles */
}

Example of using row-gap

Example: Adding gaps between only the columns:

.names-container {  
    display: flex;  
    flex-wrap: wrap;  
    column-gap: 20px; 
    /* Other Styles */
}

Example of using column-gap

Practice using the gap property on StackBlitz.

Practice with Flexbox Games

Want to practice Flexbox in an interactive way? Check out the following games. They provide a hands-on experience for practicing Flexbox in a fun and engaging way.

• Flexbox Froggy

• Flexbox Defense

• Flexbox Zombies

Are There Bugs in CSS Flexbox?

While CSS Flexbox is a powerful layout tool, it's got a few bugs that may surprise you.

A common example is that some HTML elements cannot act as flex containers. These include the <button>, <fieldset>, and <summary> elements.

The workaround is to use an element like a div to wrap around the element's children. Then use Flexbox on the wrapper div.

If you are curious about other Flexbox bugs and workarounds, you can have a look at the Flexbugs repository on GitHub.

Conclusion

In this guide, you learned all the Flexbox properties, their values, and how to use them to create responsive layouts. You also learned about some games like Flexbox Froggy you can use for practice.

Thank you for reading, and happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

Developers publish packages on NPM to share their code with others. And organisations also use NPM to share code internally.

In this article, you will learn how to create a package. And you will also learn how to publish your package on NPM so others can download and use it.

Let's get started!

How to Choose a Name For Your NPM Package

The first thing you need to do before creating your package is to choose a name. This is important because your package needs to have a unique name. You should choose a name that has not been used already.

When you decide on a name, go to the NPM registry and run a search. Be sure there's no exact match to the name you chose (or a match that is too similar).

For example, if there's a package called hellonpmpackage and you decide to call yours hello-npm-package, NPM will throw an error when you attempt to publish it.

If there's already a package in the NPM registry with the same you want to use, then you have two options.

1. You can choose a different name.

2. You can publish your package as a scoped package (see the section "Publishing scoped packages" below).

How to Create a NPM Package

Follow the steps below to create your package.

1. Install Node

If you do not already have Node installed, you should go ahead and install it. You can visit the official website to download and install Node.js. NPM comes pre-installed with Node.

2. Initialize a Git Repository

Create a new project folder for your package and navigate into the folder. Then, run the following command in your terminal:

git init

This will help you track the changes you make to your package. Also, make sure you have a remote version of your repository on GitHub (or your preferred hosting service).

3. Initialize NPM in Your Project

To do this, navigate to the root directory of your project and run the following command:

npm init

This command will create a package.json file. You will get prompts to provide the following information:

• package-name: As you learned earlier in this tutorial, the name of your package must be unique. Also it must be lowercase. It may include hyphens.

• version: The initial value is 1.0.0. You update the number when you update your package using semantic versioning.

• description: You can provide a description of your package here. Indicate what your package does and how to use it.

• entry point: The entry file for your code. The default value is index.js.

• test command: Here, you can add the command you want to run when a user runs npm run test.

• git repository: The link to your remote repository on GitHub.

• keywords: Add relevant keywords that will help others find your package on the NPM registry.

• author: Add your name.

• license: You can add a license or use the default license (Internet Systems Consortium (ISC) License).

See the screenshot below for an example of how to answer the prompt questions:

Creating a package.json file

Note: I left the test command blank because there is no test command for the package in this tutorial.

4. Add Your Code

Now, you can go ahead and add the code for your package.

First, you need to create the file that will be loaded when your module is required by another application. For this tutorial, that will be the index.js file.

Inside the index.js file, add the code for your package.

For this tutorial, I will be creating a simple package called first-hello-npm. This package returns the string "Hello NPM!".

//index.js

function helloNpm() {
  return "hello NPM"
}

module.exports = helloNpm

After creating your function, you should export it like in the example above. That way, anyone who downloads your package can load and use it in their code.

If you have been following along, you should now have your package created. But before you publish, you need to test your package. Testing your package reduces the chances of publishing bugs to the NPM registry.

How to Test Your NPM Package

Testing ensures that your NPM package works as expected. There are many ways to test your package. In this tutorial, you will learn one of the simplest ways of testing.

First, navigate to the root of your package project. Then, run the following command:

npm link

This will make your package available globally. And you can require the package in a different project to test it out.

Create a test folder. And inside that test folder, add a script.js file.

Example of a test folder with a script.js file

In the example above, the test folder contains only the script.js file. It does not yet contain the package. To add the package you created to your test folder, run the command below:

npm link <name-of-package>

In the case of the test folder for this tutorial, I will run the following command:

npm link first-hello-npm

This will create a node-modules folder. And it'll add all the files and folders from your package – see the screenshot below:

In the script.js file, you can now require your package and use it for the test.

// test/script.js

const helloNpm = require('first-hello-npm')

console.log(helloNpm())

The first-hello-npm package is expected to return the string "hello NPM!". As you can see from the screenshot below, the package works as expected when I run the script.

Test result for first-hello-npm package

After testing your package and ensuring it works as expected, you can now publish it on the NPM registry.

How to Publish Your NPM Package

To publish your package on the NPM registry, you need to have an account. If you don't have an account, visit the NPM sign up page to create one.

After creating the account, open your terminal and run the following command in the root of your package:

npm login

You will get a prompt to enter your username and password. If login is successful, you should see a message like this:

Logged in as <your-username> on https://registry.npmjs.org/.

You can now run the following command to publish your package on the NPM registry:

npm publish

If all goes well, you should get results similar to the screenshot below:

Notice indicating that the package is published successfully.

If you have been following along, then congratulations! You just published your first NPM package.

You can visit the NPM website and run a search for your package. You should see your package show up in the search results.

For example, from the screenshot below, you can see the first-hello-npm package is now available on NPM.

The first-hello-npm package is now available on NPM

How to Publish Scoped NPM Packages

If an existing package has the same name you would like to use, the workaround is to publish a scoped package.

When you publish a scoped package, you have the option to make it public or private. If it's private, you can choose who you want to share the package with.

How to Create a Scoped NPM Package

To create a scoped package, first navigate to the root of your package directory.

Then, run the npm init command and pass your username as the value to the scope flag:

npm init --scope=@your-username

Respond to the prompts to create a package.json file. For your package name, the format should be @your-username/package-name.

For example @benjaminsemah/first-hello-npm.

You can now add the code for your package and test it. The process is the same as already explained above.

Then, to publish your scoped package, run the following command in your terminal.

npm publish --access public

You can change from public to private if you don't want to make the package available for public use.

You should see a response similar to this.

Scoped package published successfully.

Congratulations if you followed along. You've published your scoped package. You should see your scoped package on NPM if you search for it. For example in the screenshot below, you can see the scoped package I created in this tutorial.

Scoped package is now available on NPM

Conclusion

Packages helps developers work faster. And they also improve collaboration. When you figure out a smarter way of doing things, one way you can share with the community is to create and publish your solution as a package.

In this article, you learned what packages are and why they are useful. You also learned how to create and publish packages on the NPM registry. The developer community awaits all the beautiful packages you will create and share.

Thanks for reading. And happy coding!

In this tutorial, you will learn what node modules are. You will also learn about the three types of node modules. And we'll go over the right way to use them in your applications.

What is a Module in JavaScript?

In simple terms, a module is a piece of reusable JavaScript code. It could be a .js file or a directory containing .js files. You can export the content of these files and use them in other files.

Modules help developers adhere to the DRY (Don't Repeat Yourself) principle in programming. They also help to break down complex logic into small, simple, and manageable chunks.

Types of Node Modules

There are three main types of Node modules that you will work with as a Node.js developer. They include the following.

• Built-in modules

• Local modules

• Third-party modules

Built-in Modules

Node.js comes with some modules out of the box. These modules are available for use when you install Node.js. Some common examples of built-in Node modules are the following:

• http

• url

• path

• fs

• os

You can use the built-in modules with the syntax below.

const someVariable = require('nameOfModule')

You load the module with the require function. You need to pass the name of the module you're loading as an argument to the require function.

Note: The name of the module must be in quotation marks. Also, using const to declare the variable ensures that you do not overwrite the value when calling it.

You also need to save the returned value from the require function in someVariable. You can name that variable anything you want. But often, you will see programmers give the same to the variable as the name of the module (see example below).

const http = require('http') 

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

server.listen(3000)

You use the require function to load the built-in http module. Then, you save the returned value in a variable named http.

The returned value from the http module is an object. Since you've loaded it using the require function, you can now use it in your code. For example, call the .createServer property to create a server.

Local Modules

When you work with Node.js, you create local modules that you load and use in your program. Let's see how to do that.

Create a simple sayHello module. It takes a userName as a parameter and prints "hello" and the user's name.

function sayHello(userName) {
    console.log(`Hello ${userName}!`)
}

module.exports = sayHello

First, you need to create the function. Then you export it using the syntax module.exports. It doesn't have to be a function, though. Your module can export an object, array, or any data type.

How to load your local modules

You can load your local modules and use them in other files. To do so, you use the require function as you did for the built-in modules.

But with your custom functions, you need to provide the path of the file as an argument. In this case, the path is './sayHello' (which is referencing the sayHello.js file).

const sayHello = require('./sayHello')
sayHello("Maria") // Hello Maria!

Once you've loaded your module, you can make a reference to it in your code.

Third-Party Modules

A cool thing about using modules in Node.js is that you can share them with others. The Node Package Manager (NPM) makes that possible. When you install Node.js, NPM comes along with it.

With NPM, you can share your modules as packages via the NPM registry. And you can also use packages others have shared.

How to use third-party packages

To use a third-party package in your application, you first need to install it. You can run the command below to install a package.

npm install <name-of-package>

For example, there's a package called capitalize. It performs functions like capitalizing the first letter of a word.

Running the command below will install the capitalize package:

npm install capitalize

To use the installed package, you need to load it with the require function.

const capitalize = require('capitalize)

And then you can use it in your code, like this for example:

const capitalize = require('capitalize')
console.log(capitalize("hello")) // Hello

This is a simple example. But there are packages that perform more complex tasks and can save you loads of time.

For example, you can use the Express.js package which is a Node.js framework. It makes building apps faster and simple. To learn more about NPM, read this freeCodeCamp article on the Node Package Manager.

Conclusion

In this article, you learned about what Node modules are and the three types of node modules. You also learned about how to use the different types in your application.

Thanks for reading. And happy coding!

In this article, you will learn about Node.js. You will learn the following:

• What is Node.js?

• How the Node.js environment differs from the browser.

• Why you should learn Node.js.

• How to get started with Node.js.

• Resources to help you learn Node.js.

What is Node.js?

"Node.js is an open-source and cross-platform JavaScript runtime environment." - Nodejs.dev Docs

This sounds like a cool, straightforward answer. But for a beginner, this definition might raise further questions. So let's break it down and understand what it means.

Node.js is open-source: This means that the source code for Node.js is publicly available. And it's maintained by contributors from all over the world. The Node.js contribution guide shows you how to contribute.

Node.js is cross-platform: Node.js is not dependent on any operating system software. It can work on Linux, macOS, or Windows.

Node.js is a JavaScript runtime environment: When you write JavaScript code in your text editor, that code cannot perform any task unless you execute (or run) it. And to run your code, you need a runtime environment.

Browsers like Chrome and Firefox have runtime environments. That is why they can run JavaScript code. Before Node.js was created, JavaScript could only run in a browser. And it was used to build only front-end applications.

Node.js provides a runtime environment outside of the browser. It's also built on the Chrome V8 JavaScript engine. This makes it possible to build back-end applications using the same JavaScript programming language you may be familiar with.

Differences Between the Browser and Node.js Runtime Environments

Both the browser and Node.js are capable of executing JavaScript programs. But there are some key differences that you need to know. They include the following.

Access to the DOM APIs

With the browser runtime, you can access the Document Object Model (DOM). And you can perform all the DOM operations. But Node.js does not have access to the DOM.

Node.js exposes almost all the system resources to your programs. This means you can interact with the operating system, access the file systems, and read and write to the files. But, you do not have access to operating systems and file systems from the browser.

Window vs Global object

JavaScript has a built-in global object. The JavaScript global object for the browser is called the window object. In Node.js, the global object goes by the name global.

The window object contains methods and properties available only in the browser environment.

Control over runtime versions

With Node.js, you can choose which version to run your server-side application on. As a result, you can use modern JavaScript features without worrying about any version-specific inconsistencies.

Contrast this to the browser runtime environment. As a developer, you have no control over the version of browsers your clients use to access your app.

Loading modules (import vs require keywords)

Node.js offers out-of-the-box support for CommonJS and ES modules. You can load modules using the require keyword (CommonJS syntax) and the import keyword (ES syntax).

Some modern browsers support ES modules. This means you can use import ES modules. But you will still need to create bundles to cater to older browsers that do not support ES modules.

How Much JavaScript Do You Need to Get Started with Node?

If you are an absolute beginner to JavaScript, I recommend that you start with the basics.

Become familiar with basic JavaScript concepts first. Then, you can move on to learning to build server-side applications with Node.js.

There's no way you'll ever exhaust all there is to learn about JavaScript. So, how to determine when you know enough JavaScript to get started with Node.js?

The Node.js documentation provides a list of JavaScript topics to learn before diving deep with Node.js.

Once you have a grasp of JavaScript basics, then you can get started with Node.js

How to Get Started with Node.js

Let's see how you can create your first Node.js application. This section will show you how to run Node.js scripts from the command line.

How to download and install Node.js

First, you need to download and install Node.js. There are different ways you can do that. If you are a beginner, I would suggest that you download Node.js from the official website.

Screenshot of the official Node.js website

Official packages are available on the website for all major platforms (Windows, macOS, and Linux). Download and install the appropriate package for your system.

How to check the Node.js version

To check the Node.js version, run the command node --version in your terminal.
If the installation was successful, you will see the version of Node.js you installed. You should get a response like the screenshot below.

How to run Node.js from the command line

Let's build a simple Hello World app.

Create a new project folder. You can call it my-project. Open the project in your code editor. Inside the folder, create an app.js file.

Add the following code to app.js

As you can see, this is JavaScript code.

You can run the script in the command line by running the command node <fileName>. In this case, the file name is app.js.

Run the following command in your terminal to execute the Hello world. program:

node app.js

You should see the string "Hello world." logged in your terminal like so.

Congratulations! You just ran your first Node.js application.

Should You Learn Node.js?

Here are some reasons why you should consider learning Node.js

Node.js allows you to write JavaScript on both client and server.

One of the advantages of Node.js is that it allows you to work on both the front-end and back-end of your application. And you use one programming language – JavaScript – to do so.

This is good news for front-end developers who work with JavaScript. If you want to start working on the server side, it's easier compared to learning a new back-end language from scratch.

Node has a vibrant community.

As I mentioned earlier in the article, Node.js is open-sourced. It is actively maintained by developers from all over the world.

There is a vibrant community surrounding Node.js. You can find excellent tutorials and solutions to problems when you get stuck.

Node is built on top of Google Chrome's V8 engine.

Node.js is built on top of the Chrome V8 JavaScript engine. This is significant because the V8 engine powers some of Google's in-browser applications like Gmail. As such, Google invests heavily to ensure it offers high performance.

Demand in the market

Many big names like Netflix, Uber, Paypal, and LinkedIn, and others use Node.js. Apart from the big names, many startups also use Node.js in developing their applications.

Learning to work with Node.js will make you a desirable candidate in the job market.

The NPM library

The NPM library is one of the excellent resources that comes with Node.js.
The library contains a registry of over a million packages. A package is a reusable piece of code.

You can create a package for a recurring task or problem and share the code with others via the registry.

You can also download packages that others have shared. For many tasks that developers perform regularly, there are packages available for that.

Resources to Learn Node

If you are curious about learning how to build Node.js applications, I recommend the following resources.

• 8-Hour Node.js and Express.js Course on freeCodeCamp YouTube Channel.

• The freeCodeCamp Backend Development and APIs curriculum

• Nodejs.dev Documentation

Also, below is a link to a video of Ryan Dahl when he first presented Node.js.

Ryan Dahl: Original Node.js presentation at JSConf 2009

Conclusion

A single blog post like this is not enough to learn all there is to know about Node.js. The purpose of this article was to give you an overview of what Node.js is.

If you were not sure what Node.js is, I hope this article addressed your concerns and cleared your confusion.

Thanks for reading. And happy coding!

In this article, you will learn how to schedule your emails using Gmail. There's no need to install any software or plugins.

What you will learn

• How to schedule an email in Gmail

• How to view or edit a scheduled email in Gmail

• How to cancel a scheduled email in Gmail

How to Schedule an Email in Gmail

Step 1: Log in to your Gmail account.

Step 2: Click compose to create your email.

Step 3: Create the email you want to schedule.

Step 4: Click the Down arrow on the Send button.

Step 5: Click Schedule send.

Step 6: The popup modal give you a few options. You can choose one. Or you can create a custom date/time by clicking Select date and time.

Step 7: Click the Schedule send button.

That's it! Your email is now scheduled. You will see a notification from Gmail (like the one below) confirming a successful schedule.

Next, let's see how you can edit a scheduled mail in Gmail. This can be either editing the content of the mail or changing the scheduled time.

How to Edit a Scheduled Email in Gmail

Assuming you are already logged in to your Gmail, continue with the steps below. If not, first login and then continue with the steps below.

Step 1: To edit a scheduled email, click Scheduled on the left panel.

Step 2: You will be presented with a list of your scheduled emails. Select the email you want to edit.

Step 3: Click Cancel send at the top right of your email.

Step 4: Make the changes if you want to edit the content of your email. If you only want to change the scheduled time, move to Step 5.

Step 5: Next, you use the same process you used for the initial schedule.

• Click the down arrow next to the Send button.

• And then click Schedule send.

• Choose a new date and time.

That's it! You've successfully edited the scheduled email.

How to Cancel a Scheduled Email in Gmail

Assuming you are already logged in to your Gmail, continue with the steps below. If not, first login and then continue with the steps below.

Step 1: To cancel a scheduled email, click Scheduled on the left panel.

Step 2: You will be presented with a list of your scheduled emails. Select the email you want to cancel.

Step 3: Click Cancel send at the top right of your email.

Note that cancelling a scheduled email in Gmail does not delete it. Gmail treats it as a draft and adds it to the drafts folder. See the Gmail notification below.

Conclusion

You now know how to do the following.

• Schedule an email in Gmail.

• Edit or change the date/time for a scheduled email.

• Cancel a scheduled email.

You can also check out this freeCodeCamp article on how to batch delete Emails.

Thanks for reading!

All valid URLs follow certain patterns. So if you know those patterns, you can determine whether a URL is valid or not in your program and give feedback, throw an error, and so on.

In this tutorial, you will learn three methods to check if a string in JavaScript is a valid URL:

• How to Use the URL Constructor to Validate URLs

• How to Use npm Packages to Validate URLs

• How to Use Regex to Validate URLs

How to Use the URL Constructor to Validate URLs

When you pass a string to the URL constructor, it returns a new URL object if a string is a valid URL. Otherwise, it returns an error:

const fccUrl = new URL("https://www.freecodecamp.org/");
console.log(fccUrl);

The following is what you get when you log fccUrl to the console:

A URL object in JavaScript

This object means that the string you passed to the URL constructor was a valid URL.

Now let's see what you get when you pass an invalid URL string:

const fccUrl = new URL('freecodecamp');
console.log(fccUrl);

The string 'freecodecamp' is not a valid URL. Thus, you get the following TypeError:

Invalid URL

To recap:

1. When you pass a valid URL string to the URL constructor, it returns a new URL object.

2. When you pass an invalid URL string to the URL constructor, it returns a TypeError.

With this knowledge, you can create a custom function to check the validity of a given URL string.

How to Create a URL Validator Function with the URL Constructor

By using the URL constructor and a try...catch statement, you can create a custom isValidUrl function:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

The isValidUrl function returns true when the string you pass as an argument is a valid URL. Otherwise, it returns false:

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://mail@freecodecamp.org')); // true
console.log(isValidUrl('freecodecamp')); // false

How to Validate Only HTTP URLs with the URL Constructor

Sometimes, you may want to check if the string is a valid HTTP URL, and reject other valid URLs like 'mailto://mail@freecodecamp.org'.

If you look closely at the URL object, one of its properties is protocol:

The URL object has a protocol property.

In the example above, the value of the protocol property is 'https:'.

To check if a string is a valid HTTP URL, you can use the protocol property of the URL object:

function isValidHttpUrl(string) {
  try {
    const newUrl = new URL(string);
    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
  } catch (err) {
    return false;
  }
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://mail@freecodecamp.org')); // false
console.log(isValidHttpUrl('freecodecamp')); // false

The difference here is that you're not returning true after the new URL object is created. Instead, you're checking if the protocol property has a value equal to 'http:' or 'https:' and returning true if it is and false if not.

How to Use npm Packages to Validate URLs

There are two NPM packages you can use: is-url and is-url-http.

These packages are the simplest way to check if a string is a valid URL. All you need to do is pass in a string as a parameter, and they will return true or false.

Let's see how both of these packages work.

How to Validate URLs with the is-url Package

You can use the is-url package to check if a string is a valid URL. This package does not check the protocol of the URL passed to it.

To use is-url, first install it using the command below:

npm install is-url

Then import it and pass your URL string to it as an argument:

import isUrl from 'is-url';

const firstCheck = isUrl('https://www.freecodecamp.org/');
const secondCheck = isUrl('mailto://mail@freecodecamp.org');
const thirdCheck = isUrl('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // true
console.log(thirdCheck); // false

The is-url package returns true for strings that have valid URL formats and false for strings that have invalid URL formats.

In the example, both firstCheck (with the https: protocol) and secondCheck (with the mailto: protocol) return true.

How to Validate HTTP URLs with the is-http-url Package

You can use the is-url-http package to check if a string is a valid HTTP URL.

Install the package with the following command:

npm install is-url-http

Then import it and pass the URL string to it like so:

import isUrlHttp from 'is-url-http';

const firstCheck = isUrlHttp('https://www.freecodecamp.org/');
const secondCheck = isUrlHttp('mailto://freecodecamp@mail.org');
const thirdCheck = isUrlHttp('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // false
console.log(thirdCheck); // false

In this example, only firstCheck returns true. The is-url-http package is not only checks that the string is a valid URL, it also checks if it's a valid HTTP URL. That is why it returns false for secondCheck, which is not a valid HTTP URL.

How to Use Regex to Validate URLs

You can also use regex, or a regular expression, to check if a string is a valid URL or not.

All valid URLs follow a particular pattern. They have three main parts, which are:

• Protocol

• Domain name (or IP address)

• Port and path

Sometimes a query string or fragment locator follows the path.

You can learn more about URL patterns from this freeCodeCamp article on the structure of URLs.

Knowing the pattern URLs are made of, you can use regex to check for the existence of such patterns in a string. If the patterns exist, then the string passes the regex test. Otherwise, it fails.

Also, using regex, you can check for all valid URLs, or only check for valid HTTP URLs.

How to Validate URLs with Regex

function isValidUrl(str) {
  const pattern = new RegExp(
    '^([a-zA-Z]+:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://freecodecamp.org')); // true
console.log(isValidUrl('freeCodeCamp')); // false

The regex in the isValidUrl function above checks if a string is a valid URL. The protocol check ^([a-zA-Z]+:\\/\\/)? is not limited to just https:.

This is why the second example with the mailto: protocol returns true.

How to Validate HTTP URLs with Regex

To use regex to check if a string is a valid HTTP URL, you need to edit the protocol check.

Instead of ^([a-zA-Z]+:\\/\\/)?, you should use '^(https?:\\/\\/)?':

function isValidHttpUrl(str) {
  const pattern = new RegExp(
    '^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://freecodecamp.org')); // false
console.log(isValidHttpUrl('freeCodeCamp')); // false

Now only the first example which has a valid https: protocol returns true. Note that URL strings with http: work, too.

Wrapping up!

In this article, you learned how to check the validity of URLs in JavaScript. You now know the following three methods for doing so.

• How to Use the URL Constructor to Validate URLs

• How to Use npm Packages to Validate URLs (is-url and is-http-url)

• How to Use Regex to Validate URLs

It's up to you to choose which method you're comfortable working with.

Thanks for reading. And happy coding!

What is a Recursive Function?

A recursive function is a function that calls itself somewhere within the body of the function. Below is a basic example of a recursive function.

function recursiveFunc() {
  // some code here... 
  recursiveFunc()
}

As you can see, the recursiveFunc function calls itself within the body of the function. It will repeat calling itself until the desired output is achieved.

So how do you tell the function when to stop calling itself? You do that using a base condition.

The Three Parts of a Recursive Function

Every time you write a recursive function, three elements must be present. They are:

• The function definition.

• The base condition.

• The recursive call.

When these three elements are missing, your recursive function won't work as you expect. Let's take a closer look at each one.

How to define a recursive function

You define a recursive function the same way you define regular JavaScript functions.

function recursiveFunc() {
  // some code here...
}

What differentiates recursive functions from regular JavaScript functions are the base condition and the recursive call.

What is a base condition?

When using a recursive function, the base condition is what lets the function know when to stop calling itself. Once the base condition is met, the recursion ends.

function recursiveFunc() {
  if(base condition) {
    // stops recursion if condition is met
  }
  // else recursion continues
  recurse();
}

Why do you need a base condition?

Without the base condition, you will run into infinite recursion. A situation where your function continues calling itself without stopping, like this:

function doSomething(action) {
  console.log(`I am ${action}.`)
  doSomething(action)
}

doSomething("running")

Also, without a base condition, your function exceeds the maximum call stack. You will run into the error shown below.

Maximum call stack exceeded when there's no base condition

The Call Stack keeps track of what functions are currently running and the functions that are within them.

The call stack has a limit. And since a recursive function without a base condition will run infinitely, it exceeds the call stack's limit.

The base condition provides a way to break out when the function gets the desired output.

Example of recursive function

Let's see a simple example of a recursive function.

function doSomething(n) {
  if(n === 0) {
    console.log("TASK COMPLETED!")
    return
  }
  console.log("I'm doing something.")
  doSomething(n - 1)
}
doSomething(3)

Here is the result when you pass the number 3 to the doSomething function.

The base condition for the doSomething function is n === 0. Anytime the function is called, it first checks if the base condition is met.

If yes, it prints TASK COMPLETED!. If not, it continues with the rest of the code in the function. In this case, it will print I'm doing something. and then call the function again.

The recursive call

The recursive call is what handles the function calling itself again. In the doSomething function, the recursive call is the line below.

doSomething(n-1)

Note what happens when the function calls itself. A new parameter n - 1 is passed to the function. On every iteration of a recursive call, the parameter will differ from that of the previous call.

The function will keep calling itself until the new parameter satisfies the base condition.

Recursion vs Loops

Recursion and loops work in similar ways. Every recursive function you write has an alternative solution with a loop.

For example, you can create a function to find the factorial of a given number using both recursion and loops.

How to find the factorial with a loop:

function findFactorial(num) {
  let factorial = 1
  for (let i = num; i > 0; i--) {
    factorial *= i
  }
  return factorial
}

findFactorial(5) // 120

To find the factorial using a loop, you first initialize a variable factorial with a value of 1.

Then you initiate the loop with the given number num. The loop will continue running until i > 0.

For each iteration, you multiply the current value of factorial by i. And you decrease the value of i by 1 until i is not greater than zero.

Finally, you return the value of the factorial when the loop finishes running.

How to find the factorial with recursion:

You can create the same solution with a recursive function.

function findFactorial(num) {
  if (num === 0) return 1
  let factorial = num * findFactorial(num - 1)
  return factorial;
}

findFactorial(5) // 120

First, you need a base condition num === 0.

You also need the recursive call findFactorial(num - 1) to ensure the number keeps reducing at each call when you pass a new parameter of n-1.

Then you multiply the result with the previous number num * findFactorial(num - 1) until the base condition is met.

So which is better – recursion or loops?

So which one is better? There's no right or wrong answer to that. It's up to you to decide. Depending on the problem you're solving, you may choose one over the other.

Optimize for the readability of your code. Sometimes, like in the factorial example, recursion leads to shorter and more readable code.

But recursive functions are not always intuitive. If that's the case, you should stick to loops.

Conclusion

In this article, you've learned what recursion is and how to create recursive functions in JavaScript.

Reading and writing recursive functions might be confusing at first. But remember, what makes recursive functions different from regular functions are the base condition and the recursive call.

Thanks for reading. And happy coding!