Instead of covering all the theories and concepts of React in their entirety, I'll be teaching you important building blocks of the library. You'll learn about JSX, components, props, states, event handlers, creating forms, and running network requests.

Table of Contents

• Requirements
• Chapter 1: Introduction
  • Computer Setup
  • Your First React Application
  • Explaining the Source Code
• Chapter 2: How to Create React Components
  • How to Return Multiple Elements With Fragments
  • How to Render to the Screen
  • How to Write Comments in React
  • How to Compose Multiple Components as One
• Chapter 3: Making Sense of JSX
  • How to Render a List Using JSX
  • How to Add the Class Attribute
• Chapter 4: Props and States
  • How to Pass Down Multiple Props
  • Props are Immutable
  • State in React
  • How to Pass State to a Child Component
  • How to Use React DevTools to Inspect States and Props
• Chapter 5: React Conditional Rendering
  • Partial Rendering with a Regular Variable
  • Inline Rendering with the && Operator
  • Inline Rendering with the Conditional (Ternary) Operator
• Chapter 6: How to Handle User Events
  • How to Change the UI by Handling Events
• Chapter 7: CSS in React
  • React Inline Styling
  • CSS Files
  • CSS Modules
  • Tailwind CSS
  • Which One Should You Use?
• Chapter 8: How to Build Forms in React
  • How to Handle Form Input
  • How to Handle Form Submission
  • How to Handle Form Validation
• Chapter 9: Network Requests in React
  • The useEffect Hook
• Wrapping Up

By covering these concepts, you'll be equipped to dive further into advanced React topics.

Requirements

To get the full benefit of this handbook, you should have basic knowledge of HTML, CSS, and JavaScript. No previous knowledge about React is needed, as we will start from the very basics.

If you need a JavaScript refresher, you can get my JavaScript book here.

Chapter 1: Introduction

React is a very popular JavaScript front-end library. It's received lots of love from developers around the world for its simplicity and fast performance.

React was initially developed by Facebook as a solution to front end problems they were facing:

• DOM manipulation is an expensive operation and should be minimized
• No library specialized in handling front-end development at the time (there is Angular, but it's an ENTIRE framework.)
• Using a lot of vanilla JavaScript can turn a web application into a mess that's hard to maintain.

Why do developers love React? As a software developer myself, I can think of a few reasons why I love it:

• It's minimalist. React takes care of only ONE thing: the user interface and how it changes according to the data you feed into it. React makes your interface dynamic with minimal code.
• It has a low learning curve. The core concepts of React are relatively easy to learn, and you don't need months or 40 hours of video lectures to learn the basics.
• It's unopinionated. React can be integrated with lots of different technologies. On the front-end, you can use different libraries to handle Ajax calls (Axios, Superagent, or just plain Fetch.) On the back-end, you can use PHP/ Ruby/ Go/ Python or whatever language you prefer.
• It has strong community support. To enhance React's capabilities, open source contributors have built an amazing ecosystem of libraries that enables you to make even more powerful applications. But most open source libraries for React are optional. You don't need to learn them until you've mastered React fundamentals.

The bottom line is that with a low learning curve, React gives you incredible power in making your UI flexible, reusable, and spaghetti-free.

Learning React opens tremendous opportunities if you want to work as a web developer.

Computer Setup

To start programming with React, you'll need to have three things:

1. A web browser
2. A code editor
3. Node.js

We're going to use the Chrome browser to run our JavaScript code, so if you don't have it, you can download it here.

The browser is available for all major operating systems. Once the download is complete, install the browser on your computer.

Next, you'll need to install a code editor if you don't already have one. There are several free code editors available on the Internet, such as Sublime Text, Visual Studio Code, and Notepad++.

Out of these editors, my favorite is Visual Studio Code, because it's fast and easy to use.

How to install Visual Studio Code

Visual Studio Code, or VSCode for short, is an application created for the purpose of writing code. Aside from being free, VSCode is fast and available on all major operating systems.

You can download Visual Studio Code here.

When you open the link above, there should be a button showing the version compatible with your operating system as shown below:

Downloading Visual Studio Code

Click the button to download VSCode, and install it on your computer.

Now that you have a code editor installed, the next step is to install Node.js

How to install Node.js

Node.js is a JavaScript runtime application that enables you to run JavaScript outside of the browser. You need to install this application on your computer to install packages required in React development.

You can download and install Node.js from https://nodejs.org. Pick the recommended LTS version because it has long-term support. The installation process is pretty straightforward.

To check if Node has been properly installed, type the command below on your command line (Command Prompt on Windows or Terminal on Mac):

node -v

The command line should respond with the version of the Node.js you have on your computer.

Your First React Application

It's time to run your first React application. First, create a folder on your computer that will be used to store all files related to this book. You can name the folder 'beginning_react'.

The next step is to open your terminal and run the npm command to create a new React application using Vite.

Vite (pronounced 'veet') is a build tool that you can use to bootstrap a new React project. Inside the 'beginning_react' folder, you need to run the following command to create a new React project with Vite:

npm create vite@5.1.0 my-react-app -- --template react

You should see npm asking to install a new package (create-vite) as shown below. Proceed by typing 'y' and pressing Enter:

Need to install the following packages:
  create-vite@5.1.0
Ok to proceed? (y) y

Then Vite will create a new React project named 'my-react-app' as follows:

Scaffolding project in /dev/beginning_react/my-react-app...

Done. Now run:

  cd my-react-app
  npm install
  npm run dev

When you're done, follow the next steps you see in the output above. Use the cd command to change the working directory to the application you've just created, and then run npm install to install the packages required by the application.

Then, you need to run the npm run dev command to start your application:

$ npm run dev

> my-react-app@0.0.0 dev
> vite


  VITE v5.0.10  ready in 509 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Now you can view the running application from the browser, at the designated localhost address:

Vite-React Home Page

This means you have successfully created your first React app. Congratulations!

Explaining the Source Code

Now that you've successfully run a React application, let's take a look at the source code generated by Vite to understand how things work.

Run the Visual Studio Code you've installed in the previous section, and open the 'my-react-app' folder inside VSCode.

Here, you should see several folders and files that make up the React application as follows:

Vite-React Application Structure

The vite.config.js is a configuration file that instructs Vite on how to run the application. Because we have a React application, you'll see the React plugin imported inside:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

When you run the npm run dev command, Vite will look into this file to know how to run the program.

The package.json file stores the information about the project, including the packages required to run the project without any issues. The package-lock.json file keeps track of the installed package versions.

The .eslintrc.cjs file contains ESLint rules. ESLint is a code analysis tool that can identify problematic code in your project without needing to run the project. It will report any errors and warnings in VSCode.

The index.html file is a static HTML document that's going to be used when running the React application, and the README.md file contains an introduction to the project.

You don't need to modify any of these files. Instead, let's go to the src/ folder where the React application code is written.

src
├── App.css
├── App.jsx
├── assets
│   └── react.svg
├── index.css
└── main.jsx

First, the App.css file contains the CSS rules applied to the App.jsx file, which is the main React application code.

The assets/ folder contains the assets required for this project. In this case, it's the React icon, which you had seen in the browser.

The index.css file is the root CSS file applied globally to the application, and the main.jsx file is the root file that access the index.html file to render the React application. Here's the content of main.jsx file:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Here, you can see that the ReactDOM library creates a root at the <div> element that contains the root ID, then renders the whole React application to that element.

You can open the App.jsx file to view the React code:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

In this file, a single component named App is defined. The Vite and React logos are rendered with a link to the respective library, and there's a counter button that will increment the counter by 1 when you click on it.

This file is where we will be exploring the fundamentals of React. Let's delete everything in this file, and write a simple App component that renders a <h1> element:

function App() {
  return <h1>Hello World</h1>
}

export default App

Next, delete the index.css, app.css, and assets/ folder. You also need to delete the import './index.css' statement in your main.jsx file.

If you open the browser again, you should see a single heading rendered as follows:

React Output From Code Changes

Alright! Now you're ready to learn the fundamentals of React. We'll start your first lesson in the next chapter.

Chapter 2: How to Create React Components

In React, a component is a single independent unit of a user interface (UI). What you write inside a component will determine what should appear on the browser screen at a given time.

In the previous chapter, we created an App component that returns a heading element:

function App() {
  return <h1>Hello World</h1>
}

export default App

A component is made up of a function that returns a single UI element.

When you want a component to render nothing, you can return a null or false instead of an element.

function App() {
  return null
}

All React components are saved under the .jsx file extension. As you can see in this project, you have main.jsx and App.jsx.

What is JSX? It's an extension of JavaScript that produces JavaScript-powered HTML elements. We're going to learn about it later.

How to Return Multiple Elements With Fragments

A component must always return a single element. When you need to return multiple elements, you need to wrap all of them in a single element like a <div>:

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </div>
  )
}

export default App

But this will make your application render one extra <div> element in the browser. To avoid cluttering your application, you can render an empty tag <> like this:

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </>
  )
}

export default App

The empty tag above is a React feature called a Fragment. By using a Fragment, your component won't render an extra element to the screen.

You can also import the Fragment module from React to make it explicit as follows:

import { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </Fragment>
  )
}

export default App

But you don't need to explicitly state the Fragment tag. Using an empty tag <> is enough.

How to Render to the Screen

To render a React component into the browser, you need to create a root React component using the ReactDOM library, which you've seen previously when viewing the main.jsx file.

You need to have an HTML file as the source from which your React component is rendered.

Usually, a very basic HTML document with a <div> is enough, as you can see in the index.html file:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

Next, you render the component into the <div> element.

Notice how ReactDOM is imported from react-dom package, and the document.getElementById('root') is used to select the <div> element below:

import React from 'react'
import ReactDOM from 'react-dom/client'

function App() {
  return <h1>Hello World!</h1>
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Here, you can see that the App component is placed in the same file as the ReactDOM library. You can do this if you want to remove the App.jsx file, so you have only a single main.jsx file as the source for your React application.

But it's confusing to have multiple components in one file, so let's not do this.

How to Write Comments in React

Writing comments in React components is similar to how you comment in regular JavaScript code. You can use the double forward slash syntax // to comment any code.

The following example shows how to comment the export statement:

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </>
  )
}

// export default App

When you want to comment the code inside the return statement, you need to use the curly brackets, forward slash, and asterisk format {/* comment here */} as shown below:

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      {/* <h2>Learning to code with React</h2> */}
    </>
  )
}

It may seem very annoying that you need to remember two different ways of commenting when writing React applications. But don't worry, because a modern tool like VSCode knows how to generate the right comment syntax.

You only need to press the comment shortcut, which is CTRL + / for Windows/ Linux or Command + / for macOS.

How to Compose Multiple Components as One

Up until this point, you've only rendered a single App component to the browser. But applications built using React can be composed of tens or hundreds of components.

Composing components is the process of forming the user interface by using loosely coupled components. It's kind of like making a house out of Lego blocks, as I will show you in the following example:

export default function ParentComponent() {
  return (
    <>
      <UserComponent />
      <ProfileComponent />
      <FeedComponent />
    </>
  );
}

function UserComponent() {
  return <h1> User Component </h1>;
}

function ProfileComponent() {
  return <h1> Profile Component </h1>;
}

function FeedComponent() {
  return <h1> Feed Component</h1>;
}

From the example above, you can see how the <ParentComponent> renders three children components:

• <UserComponent>
• <ProfileComponent>
• <FeedComponent>

The composition of many components will form a single tree of React components in a top-down approach.

The tree will then be rendered into the DOM through the ReactDOM.render() method:

React Component Tree Illustrated

By composing multiple components, you can split the user interface into independent, reusable pieces, and develop each piece in isolation.

Chapter 3: Making Sense of JSX

In the previous chapter, you learned that a component must always have a return statement that contains elements to render on the screen:

function App() {
  return <h1>Hello World</h1>
}

The tag <h1> looks like a regular HTML tag, but it's actually a special template language included in React called JSX.

JSX is a syntax extension that produces JavaScript powered HTML elements. It can be assigned to JavaScript variables and can be returned from function calls. For example:

function App() {
  const myElement = <h1>Hello World</h1>
  return myElement
}

Because of JSX, you can also embed JavaScript expressions inside an element by using curly brackets {}:

const lowercaseClass = 'text-lowercase';
const text = 'Hello World!';
const App = <h1 className={lowercaseClass}>{text}</h1>;

This is what makes React elements different from HTML elements. You can't embed JavaScript directly by using curly braces in HTML.

Instead of creating a whole new templating language, you just need to use JavaScript functions to control what is being displayed on the screen.

How to Render a List Using JSX

For example, let's say you have an array of users that you'd like to show:

const users = [
  { id: 1, name: 'Nathan', role: 'Web Developer' },
  { id: 2, name: 'John', role: 'Web Designer' },
  { id: 3, name: 'Jane', role: 'Team Leader' },
]

You can use the map() function to loop over the array:

function App() {
  const users = [
    { id: 1, name: 'Nathan', role: 'Web Developer' },
    { id: 2, name: 'John', role: 'Web Designer' },
    { id: 3, name: 'Jane', role: 'Team Leader' },
  ]

  return (
    <>
      <p>The currently active users list:</p>
      <ul>
      {
        users.map(function(user){
          // returns Nathan, then John, then Jane
          return (
            <li> {user.name} as the {user.role} </li>
          )
        })
      }
      </ul>
    </>
  )
}

Inside React, you don't need to store the return value of the map() function in a variable. The example above will return a <li> element for each array value into the component.

While the above code is already complete, React will trigger an error in the console, saying that you need to put a "key" prop in each child of a list (the element that you return from map() function):

React 'key' Warning on Browser Console

A prop (short for property) is an input that you can pass to a component when rendering that component. The key prop is a special prop that React will use to determine which child element has been changed, added, or removed from the list.

You won't use it actively in any part of your array rendering code, but React will ask for one when you render a list.

It is recommended that you put the unique identifier of your data as the key value. In the example above, you can use the user.id data. Here's how you pass a key prop for each <li> element:

return (
  <li key={user.id}> 
    {user.name} as the {user.role} 
  </li>
)

When you don't have any unique identifiers for your list, you can use the array index value as the last resort:

users.map(function(user, index){
  return (
    <li key={index}>
      {user.name} as the {user.role}
    </li>
  )
})

Props are one of the ingredients that make a React component powerful. You're going to learn more about it in the next chapter.

How to Add the Class Attribute

You can add the class attribute to your elements by using the className keyword:

function App() {
  return <h1 className='text-lowercase'>Hello World!</h1>
}

The keyword class is reserved for JavaScript classes, so you need to use className instead.

Chapter 4: Props and States

Props and states are used to pass data inside React components. Props (or properties) are inputs passed down from a parent component to its child component.

On the other hand, states are variables defined and managed inside the components.

Let's start by understanding props. Suppose you have a ParentComponent that renders a ChildComponent like this:

function ParentComponent() {
  return <ChildComponent />
}

You can pass a prop from ParentComponent into ChildComponent by adding a new attribute after the component name.

In the code below, the name prop with the value 'John' is passed to the ChildComponent:

function ParentComponent() {
  return <ChildComponent name='John' />
}

When the component is rendered on the browser, the ChildComponent will receive the name prop into the component.

You can access the props object by defining it in the function component's argument:

function ChildComponent(props){
  return <p>Hello World! my name is {props.name}</p>
}

The props parameter will always be an object, and any prop you define when rendering the component will be passed as a property to the object.

How to Pass Down Multiple Props

You can pass as many props as you want into a single child component. Just add the props when using the component as shown below:

function ParentComponent() {
  return (
    <ChildComponent
      name="John"
      age={29}
      hobbies={["read books", "drink coffee"]}
      occupation="Software Engineer"
    />
  )
}

All the props above will be passed to the ChildComponent's props parameter.

You can even pass a function into props like this:

function ParentComponent() {
  function greetings() {
    return 'Hello World'
  }

  return <ChildComponent greetings={greetings} />
}

In the child component, you can call the function as follows:

function ChildComponent(props) {
  return <p>{props.greetings()}</p>
}

Note that if you pass anything other than a string as a prop value, you need to put the value in curly brackets (numbers, functions, arrays, objects, and so on)

This is because JavaScript expressions can't be processed by JSX unless you put the expression inside curly brackets.

Props are Immutable

Immutable means that a prop's value can't be changed no matter what happens.

In the code below, the ChildComponent tries to change the value of props.name property:

function ChildComponent(props){
  props.name = 'Mark';
  return <p>Hello World! my name is {props.name}</p>
}

function ParentComponent() {
  return <ChildComponent name='John'/>
}

export default ParentComponent

But you'll get an error in the console as follows:

Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'

As you can see, React props can't be changed once you declare them. But what if your data needs to change as a user interacts with your application? This is where state comes to the rescue.

State in React

In React, states are arbitrary data that you can declare and manage in your components. To create a state in React, you need to call the useState hook as shown below:

import { useState } from 'react'

function ParentComponent() {
  const [name, setName] = useState('John')

}

export default ParentComponent

In React, hooks are functions that allow you to tap into the features provided by React. The useState hook is a function that enables you to put value into the state mechanism.

When calling the useState() function, you can pass an argument that will serve as the initial value of the state. The function then returns an array with two elements.

The first element holds the state value, and the second element is a function that allows you to change the state value. You need to use the destructuring array syntax to receive both elements as shown above

You can give any names to the variables returned by useState, but it's recommended to use [something, setSomething].

To render the state value, you can embed it into JSX as follows:

function ParentComponent() {
  const [name, setName] = useState('John')

  return <h1>Hello {name}</h1>
}

If you want to change the value of the name variable, you need to use the provided setName() function.

But you can't call setName() in the component's body, because React will refresh itself anytime you change the state value.

Instead, you can create a button that will change the value of name when you click it:

function ParentComponent() {
  const [name, setName] = useState('John')

  return (
    <>
      <h1>Hello {name}</h1>
      <button onClick={() => setName('Mark')}>Change Name</button>
    </>
  )
}

In the code above, we create a <button> element and add the onClick prop, which gets executed anytime we click on the button.

Inside the prop, we pass a function that simply calls the setName() function, changing the state value.

How to Pass State to a Child Component

You can pass the state into any child component. When you need to update the state from a child component, you need to pass the setSomething function received from the useState hook.

Here's an example of passing a state from ParentComponent to ChildComponent:

function ParentComponent() {
  const [name, setName] = useState('John')

  return <ChildComponent name={name} setName={setName} />
}

In the ChildComponent, you can call the setName() function from props like this:

function ChildComponent(props) {
  return (
    <>
      <h1>Hello {props.name}</h1>
      <button onClick={() => props.setName('Mark')}>Change Name</button>
    </>
  )
}

When the button on the ChildComponent is clicked, the value of the name state will change. Internally, React will refresh the application and reflect the changes in the user interface.

How to Use React DevTools to Inspect States and Props

To help ease your development, you can install the React Developer Tools (DevTools for short) to inspect the current state and props value of your components.

You can install React DevTool for Chrome here.

Once installed, open the developer tool and you should have two extra tabs called Components and Profiler as shown below:

Opening React DevTool

Similar to how you can inspect CSS rules applied to HTML elements, you can inspect the state and props of React components using the developer tools. Click the Components tab, and inspect one of the two components we created earlier.

Below, you can see the props and state of the ParentComponent, as well as other details:

Inspecting Components With React DevTool

When you click on the button, the state value will change accordingly. You can inspect the ChildComponent to view its details. These DevTools will come in handy when you develop React applications.

Chapter 5: React Conditional Rendering

You can control what output is being rendered by a component by implementing conditional rendering in your JSX code.

For example, let's say you want to switch between rendering the login and logout buttons, depending on the availability of the user state:

function App(props) {
  const { user } = props

  if (user) {
    return <button>Logout</button>
  }
  return <button>Login</button>
}

export default App

You don't need to add an else statement in the component because React will stop further processes once it reaches a return statement.

In the example above, React will render the logout button when the user value is truthy, and the login button when user is falsy.

Partial Rendering with a Regular Variable

When developing with React, there will be cases where you want to render a part of your UI dynamically in a component.

In the example below, the JSX element is stored in a variable called button, and that variable is used again in the return statement:

function App(props) {
  const { user } = props

  let button = <button>Login</button>

  if (user) {
    button = <button>Logout</button>
  }

  return (
    <>
      <h1>Hello there!</h1>
      {button}
    </>
  )
}

Instead of writing two return statements, you store the dynamic UI element inside a variable and use that variable in the return statement.

This way, you can have a component that has static and dynamic elements.

Inline Rendering with the && Operator

It's possible to render a component only if a certain condition is met and render null otherwise.

For example, let's say you want to render a dynamic message for users when they have new emails in their inbox:

function App() {
  const newEmails = 2

  return (
    <>
      <h1>Hello there!</h1>
      {newEmails > 0 &&
        <h2>
          You have {newEmails} new emails in your inbox.
        </h2>
      }
    </>
  )
}

In this example, the <h2> element only gets rendered when the newEmails count is greater than 0.

Inline Rendering with the Conditional (Ternary) Operator

It's also possible to use a ternary operator in order to render the UI dynamically.

Take a look at the following example:

function App(props) {
  const { user } = props

  return (
    <>
      <h1>Hello there!</h1>
      { user? <button>Logout</button> : <button>Login</button> }
    </>
  )
}

Instead of using a variable to hold the <button> element, you can simply use the ternary operator on the user value and render 'Logout' or 'Login' button according to the variable's value.

Chapter 6: How to Handle User Events

Under the hood, React has an internal event handler that connects to the native DOM event.

This is why we can add the onClick prop to buttons in the previous chapters, which gets executed in response to a click event.

When you call a function in response to events, the event object will be passed to the callback function as follows:

function App() {
  const handleClick = (event) => {
    console.log("Hello World!");
    console.log(event);
  }
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  )
}

When you click on the button above, the event variable will be logged as a SyntheticBaseEvent object in your console:

React's SyntheticBaseEvent Log

The SyntheticBaseEvent object is a built-in React object used to interact with the native DOM events. Different browsers have different implementations of the DOM event object, so the SyntheticBaseEvent makes React compatible with these browsers.

Whenever a DOM event is triggered, that synthetic event will be handled by React so that you can decide what to do with that event.

The use case for this Synthetic event is the same as the native DOM event. Three of the most common event handlers you're going to use are:

• onChange
• onClick
• onSubmit

You can respond to user interactions like clicking, hovering, focusing or typing on a form input, submitting a form, and so on.

How to Change the UI By Handling Events

In the previous chapter, you saw how conditional logic can be used to render different outputs.

By combining conditional logic with state, props, and event handlers, you can create a dynamic component that renders different outputs based on the data it currently holds.

For example, suppose you want to show or hide a <div> element with a button click. Here's how you do it:

import { useState } from 'react';

function App() {
  // State to hold the visibility status of the paragraph
  const [isParagraphVisible, setIsParagraphVisible] = useState(true);

  // Function to toggle the visibility status of the paragraph
  const toggleStatus = () => {
    setIsParagraphVisible(!isParagraphVisible);
  };

  return (
    <>
      <h1>Change UI based on click</h1>
      {isParagraphVisible && (
        <p>This paragraph will be shown/hidden on click</p>
      )}
      <button onClick={toggleStatus}>
        {isParagraphVisible ? 'Hide' : 'Show'} Paragraph
      </button>
    </>
  );
}

export default App;

First, you create a state to hold the visibility status of the paragraph using the useState hook. The default value of the state is true.

Next, a function named toogleStatus() is defined. This function will change the status value from true to false and vice versa.

Finally, a return statement is added to render the elements to the screen. When the button is clicked, the toogleStatus() function will be executed. This will show or hide the paragraph depending on the current status.

By using states, props, and event handlers, the code you write becomes a description of what the user interface should look like. React then takes that description and renders it on the browser.

Chapter 7: CSS in React

There are 4 common ways you can add CSS in a React application:

1. Inline styling
2. CSS files
3. CSS modules
4. Tailwind CSS

This chapter will explore these 4 different ways to write CSS in React components, and which one you should use when starting a React application.

React Inline Styling

React components are composed of JSX elements. But just because you're not writing regular HTML elements doesn't mean you can't use the old inline style method.

The only difference with JSX is that inline styles must be written as an object instead of a string. See the example below:

function App() {
  return (
    <h1 style={{ color: 'red' }}>Hello World</h1>
  );
}

In the style attribute above, the first set of curly brackets is used to write JavaScript expressions. The second set of curly brackets initializes a JavaScript object.

Style property names that have more than one word are written in camelCase instead of using the traditional hyphenated style. For example, the usual text-align property is written as textAlign in JSX:

function App() {
  return (
    <h1 style={{ textAlign: 'center' }}>Hello World</h1>
  );
}

Because the style attribute is an object, you can also separate the style by writing it as a constant. This way, you can reuse the style in other elements as needed:

const pStyle = {
  fontSize: '16px',
  color: 'blue'
}

export default function App() {
  return (
    <>
      <p style={pStyle}>Hello World!</p>
      <p style={pStyle}>The weather is sunny today.</p>
    </>
  )
}

If you need to extend your paragraph style further down the line, you can use the spread operator.

This will let you add inline styles to your already declared style object. See the <p> element below:

const pStyle = {
  fontSize: '16px',
  color: 'blue'
}

export default function App() {
  return (
    <p style={{ ...pStyle, color: 'green', textAlign: 'right' }}>
      When you go to work, bring your umbrella with you!
    </p>
  )
}

JSX inline styles allow you to write CSS directly into your component.

One of the benefits of using the inline style approach is that you will have a simple component-focused styling technique. When using an object for styling, you can extend your style by spreading the object.

But in a big and complex project where you have hundreds of React components to manage, this might not be the best choice for you.

You can't specify pseudo classes using inline styles. That means you can't define rules like :hover, :focus, :active, and so on.

Also, you can't specify media queries for responsive styling. Let's consider another way to style your React app.

CSS Files

Another way to add CSS in React is to use .css files. Vite already knows how to handle a .css file, so all you need to do is import the CSS file into your JSX file and add the right className prop to your component.

Let's create a style.css file in your project folder with the following content:

/* style.css */
.paragraph-text {
  font-size: 16px;
  color: #ff0000;
}

Now, let's import the CSS file into the App.jsx file and add the class prop to the component:

import './style.css';

function App() {
  return (
      <p className="paragraph-text">
        The weather is sunny today.
      </p>
  );
}

This way, the CSS will be separated from your JavaScript files, and you can just write CSS syntax as usual.

You can even include a CSS framework such as Bootstrap in React with this approach. All you need to do is import the CSS file in your root component.

This method will enable you to use all CSS features, including pseudo classes and media queries.

CSS Modules

A CSS module is a regular CSS file with all of its class and animation names scoped locally by default.

When applying this method, each React component will have its own CSS file, and you need to import that CSS file into your component.

To let React know you're using CSS modules, name your CSS file using the [name].module.css convention.

Here's an example:

/* App.module.css */
.BlueParagraph {
  color: blue;
  text-align: left;
}
.GreenParagraph {
  color: green;
  text-align: right;
}

Then import it to your component file:

import styles from "./App.module.css";

function App() {
  return (
    <>
      <p className={styles.BlueParagraph}>
        The weather is sunny today.
      </p>
      <p className={styles.GreenParagraph}>
        Still, don't forget to bring your umbrella!
      </p>
    </>
  )
}

When you build your app, Vite will automatically look for CSS files that have the .module.css name and process the class names to a new localized name.

Using CSS Modules ensures that your CSS classes are scoped locally, preventing CSS rules from colliding with each other.

Another advantage of using CSS Modules is that you can compose a new class by inheriting from other classes that you've written. This way, you'll be able to reuse CSS code that you've written previously, like this:

.MediumParagraph {
  font-size: 20px;
}
.BlueParagraph {
  composes: MediumParagraph;
  color: blue;
  text-align: left;
}
.GreenParagraph {
  composes: MediumParagraph;
  color: green;
  text-align: right;
}

But we're not going to explore every single feature of CSS modules here, only enough to get you familiar with them.

Tailwind CSS

Tailwind CSS is a modern utility-first CSS framework that allows you to style elements by combining a bunch of classes together.

CSS frameworks like Bootstrap and Bulma provide you with high-level components that you can immediately use in your project. When you need to style a button, you just need to apply the classes that contain the desired CSS properties:

<button className="btn btn-primary">Subscribe</button>

When using Bootstrap, the btn class provides a combination of CSS properties such as padding, color, opacity, font weight, and so on.

On the other hand, Tailwind gives you utility classes where each class has only one or two properties:

<button className='px-5 py-2 text-white bg-blue-500 border-2'>
  Subscribe
</button>

In the example above, the px-5 is short for padding padding-left and padding-right, while 5 is a specific size for the paddings. The text-white applies color: white, the bg-blue-500 applies the background-color property, and border applies border-width.

Which One Should You Use?

It depends on the method you feel comfortable with the most. If you're working with a team, you need to discuss and agree on the method you want to apply, because mixing the styles makes it hard to develop and maintain the application.

Remember: Always use only one way to style React components in a specific project to avoid confusion.

Chapter 8: How to Build Forms in React

One of the most common interfaces you're going to build as a web developer is a form. In React, you can create a form by using state as the single source of that form's data.

In this chapter, I will show you how to handle form input, form submission, and form validation using React.

How to Handle Form Input

For example, suppose you want to create a form with a single text input and a button.

You can first set up the state that will serve as the input value:

import { useState } from 'react';

function Form() {
  const [username, setUsername] = useState();
}

Next, add the return statement and define the form. On the <input> element, assign the username state as the value prop:

import { useState } from 'react';

function Form() {
  const [username, setUsername] = useState();
  return (
    <form>
      Username:
      <input type='text' name='username' value={username} />
    </form>
  );
}

Next, add the onChange prop to the <input> element. In that prop, assign the value of the text input as the value of the username state:

import { useState } from 'react';

function Form() {
  const [username, setUsername] = useState();
  return (
    <form>
      Username:
      <input
        type='text'
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
    </form>
  );
}

The e or event object is passed by the onChange prop to the callback function. From that object, we can get the value of the text input at event.target.value property.

Now whenever the input value changes, the state will be updated to reflect the changes.

How to Handle Form Submission

The next step is to submit the form. Let's create a function that handles the submit event called handleSubmit() as follows:

import { useState } from 'react';

function Form() {
  const [username, setUsername] = useState();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(username);
  }

  return (
    <form onSubmit={handleSubmit}>
      Username:
      <input
        type='text'
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button>Submit</button>
    </form>
  );
}

Here, the handleSubmit() function will stop the default form submission behavior, which will trigger a refresh, and then create an alert box to display the username value.

The function then gets passed to the onSubmit prop of the <form> element. A <button> is also added so that the user can submit the form.

How to Handle Form Validation

To handle form validation, you need to create another state that will store the error message. You can name this state usernameError as follows:

const [usernameError, setUsernameError] = useState();

Next, create a handleUsername() function that will run when the username input changes.

Inside this function, you can call the setUsername() function to update the state, and then write logic to validate the input value.

For example, suppose the username length must be longer than 6. Here's how you do it:

const handleUsername = e => {
  const { value } = e.target;
  setUsername(value);

  // Validate username value:
  if (value.length <= 6) {
    setUsernameError('Username length must be more than 6 characters');
  } else {
    setUsernameError();
  }
};

Now that you have some validation logic, you need to set the handleUsername() function as the onChange prop handler.

Also, add a paragraph below the <input> element that will show the error message as follows:

return (
  <form onSubmit={handleSubmit}>
    Username:
    <input type='text' value={username} onChange={handleUsername} />
    <p>{usernameError}</p>
    <button>Submit</button>
  </form>
);

Inside the handleSubmit() function, you can check if there's an error on the form by checking the usernameError state, then prevent the form from being submitted when there is an error:

const handleSubmit = (e) => {
  e.preventDefault();
  if(usernameError){
    alert('Unable to submit: Form contain errors');
  } else {
    alert(username);
  }
}

This way, the form won't be submitted until the error is fixed.

Here's the full source code of the form if you want to try it:

import { useState } from 'react';

function App() {
  const [username, setUsername] = useState();
  const [usernameError, setUsernameError] = useState();

  const handleSubmit = (e) => {
    e.preventDefault();
    if(usernameError){
      alert('Unable to submit: Form contain errors');
    } else {
      alert(username);
    }
  }

  const handleUsername = e => {
    const { value } = e.target;
    setUsername(value);

    // Validate username value:
    if (value.length <= 6) {
      setUsernameError('Username length must be more than 6 characters');
    } else {
      setUsernameError();
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      Username:
      <input
        type='text'
        value={username}
        onChange={handleUsername}
      />
      <p>{usernameError}</p>
      <button>Submit</button>
    </form>
  );
}

export default App;

A form can be as complex or as simple as required, but you'll use the pattern you see here no matter what form you build:

• State values are used as the source of form data and validation
• onChange prop as a way to update the state
• Validations are triggered by user inputs
• A handleSubmit() function is executed when the form is submitted

Using these building blocks, you can build any form required by your application.

Chapter 9: Network Requests in React

Modern web applications tend to have a modular architecture, where the back end is separated from the front end. The front end app will need to send an HTTP network request to a remote endpoint.

React doesn't tell you how you should send network requests. The library only focuses on rendering UI with data management using props and states.

To fetch data using React, you can use any valid JavaScript library like Axios, Superagent, and even the native Fetch API.

In this chapter, we're going to see how to do network requests using Fetch in React.

The useEffect Hook

When you create a React application that needs to synchronize with a system outside of React, you need to use the useEffect hook.

This hook allows you to run some code after rendering so that you can synchronize your component with some system outside of React.

When the hook has finished performing the data request, you can set the response into your component states and render the appropriate components based on the state values.

To show you an example, let's fetch data from https://jsonplaceholder.typicode.com/todos/1 which is a dummy end point:

function App() {
  const [title, setTitle] = useState('');

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const task = await response.json();
    console.log(task)
    setTitle(task.title);
  };

  return <h1>{title}</h1>;
}

In the code above, we create an App component that has a state called title, and we run the Fetch API to get a todo task from the API.

When a response is received, we parse the JSON string into a JavaScript object, log the object, and then set the title state to the task.title property value.

The response is as follows:

React useEffect Log

Here, you can see that the console.log() is called twice. This is because the <React.StrictMode> wrapper always runs a useEffect hook twice to help you in development.

If you remove the <React.StrictMode> wrapper in main.jsx, the useEffect hook will run only once.

The useEffect hook itself is a function that accepts two arguments:

• A callback function to run on every render
• An array of state variables to watch for changes. useEffect will be skipped if none of the variables are updated.

When you want to run useEffect only once, you can pass an empty array as the second argument to the function, as shown in the example above.

By using the useEffect hook, React can send HTTP requests and fetch data from any external system, then store that data in the component state.

Wrapping Up

Congratulations on finishing this handbook! I hope you found it useful and now feel that learning React is not impossible or confusing at all. All you need is a step-by-step guide that reveals the key concepts of React one by one.

If you're eager to dive deeper into React and expand your skills, I encourage you to check out my new book called Beginning React here:

The goal of this book is to help you see how to build an application using React. There are two projects included in this book that will give you the "experience" of building a web application using React.

You will see how React concepts like components, JSX, props, states, hooks, and Context API are used to create a dynamic front-end application.

Here's my promise: You will actually feel confident building web applications from scratch using React.

Thanks for reading!

This API enable users to send their location to a web application to enable relevant services, such as seeking a restaurant or hotel near the user.

In this article, I'm going to show you how to use the Geolocation API with JavaScript and display a user's current location using a map API.

Let's get started!

How to Access the Geolocation API

Browsers implement the geolocation API in the navigator.geolocation object. You can check if the browser you use supports this API as follows:

if ('geolocation' in navigator) {
  console.log('Geolocation is Available');
} else {
  console.log('Geolocation is NOT Available');
}

If the browser replies with 'Geolocation is Available', then you can use the methods of the geolocation object to get the user data.

The Geolocation API is only available under a secure HTTPS context, but modern browsers like Chrome and Firefox allow access to this API from localhost for development purposes.

There are two methods you can use to get user data:

• getCurrentPosition(): Returns the current position of the device.
• watchPosition(): Observes the position of the device continuously until the watcher is stopped.

Both methods above receive 3 arguments as follows:

• success: a callback function for when the geolocation data is retrieved (required).
• error: a callback function for when the method encounters an error (optional).
• options: an object defining extra parameters when running the method (optional).

When the Geolocation API is accessed for the first time, a permission request will pop up near the URL bar as shown below:

Requesting Permission to Access User's Location

You might be familiar with the pop up above. When you choose to block the request, then the error callback function will be executed by the API.

Otherwise, the success callback will be executed.

How to Get User's Current Position

To get the user's current position, you can call the getCurrentPosition() from the navigator.geolocation object as shown below:

function success(position) {
  console.log(position);
}

navigator.geolocation.getCurrentPosition(success);

The getCurrentPosition() method will send the position object to the success() function above.

The position object contains the location coordinates and timestamp showing when the location was retrieved.

Below is an example of the position object:

{
  coords: {
    latitude: 1.314,
    longitude: 103.84425
    altitude: null
  },
  timestamp: 1708674456885
}

Using the latitude and longitude information, you can pinpoint the user's location and provide relevant information and services.

For example, let's see how you can send a request to the OpenStreetMap website and pin the user's current location using the data from Geolocation API.

OpenStreetMap is an open source project providing a free geographic map of the whole earth.

You need to create an HTML document with the following body content:

<body>
  <button id="getLocation">Get Location</button>
  <br>
  <a id="locationResult" target="_blank"></a>
</body>

When the user clicks on the Get Location button above, we will access the Geolocation API, retrieve the user location, and provide a link to see the user's location on a map.

Next, create a <script> tag before the closing </body> tag and write the following JavaScript code:

<script>
  const locationResult = document.querySelector('#locationResult');
  document.querySelector('#getLocation').addEventListener('click', () => {
    locationResult.textContent = 'Retrieving User Location...'

    function success(position) {
      let { coords } = position;
      locationResult.textContent = 'See my location on a map';
      locationResult.href = `https://www.openstreetmap.org?mlat=${coords.latitude}&mlon=${coords.longitude}`;
    }

    navigator.geolocation.getCurrentPosition(success);
  });
</script>

When the button is clicked, we'll run the getCurrentPosition() method and set the href attribute of the <a> tag to the OpenStreetMap website, passing along the latitude and longitude data under the mlat and mlong query string.

Visiting the link would show a map of the current location as shown below:

The OpenStreetMap Website Pin On the Latitude and Longitude Data

And that's how you get the current location of the user. How to process the location information is up to you.

I've created a website where you can test this functionality at https://nathansebhastian.github.io/js-geolocation-api/

Next, let's learn about the watchPosition() method.

How to Watch User's Position

The watchPosition() method will continue watching the device position when called. It will run the success callback function each time the device location changes.

You can call the method as follows:

function success(position) {
  const { coords } = position;
  console.log('Latitude data: ' + coords.latitude);
  console.log('Longitude data: ' + coords.longitude);
}

navigator.geolocation.watchPosition(success);

The watchPosition() method returns an ID number that tracks the watcher. If you want to stop the watcher from sending location data, you need to call the clearWatch() method and pass the ID number:

function success(position) {
  const { coords } = position;
  console.log('Latitude data: ' + coords.latitude);
  console.log('Longitude data: ' + coords.longitude);
}

// Store the ID number in a variable
const watcherID = navigator.geolocation.watchPosition(success);

// Stop the watcher
navigator.geolocation.clearWatch(watcherID);

And that's all there is to the watchPosition() method.

How to Add the Options Object

Next, let's take a look at the optional options object that you can pass to getCurrentPosition() and watchPosition() methods.

The options object allows you to customize the behavior of the methods. There are three options you can set:

• enableHighAccuracy: a Boolean value that instructs the method to provide a more accurate position. This will increase power consumption. The default value is false.
• timeout: a number value representing how long the method waits for a response. The default value is Infinity, which means the method will wait until a location is available.
• maximumAge: a number value representing how long the Geolocation API can send the previous location data. The default value is 0, so the API always returns the latest location. If set to Infinity, then the API will always return the first location data retrieved.

You can use the options object when calling the geolocation methods.

For example:

const options = {
  enableHighAccuracy: true, // enable high accuracy
  timeout: 300000, // wait for 5 minutes
};

function success(position) {
  console.log(position);
}

function error(error) {
  console.log(error);
}

// Run the getCurrentPosition() method with custom options
navigator.geolocation.getCurrentPosition(
  success,
  error,
  options
);

In the code above, the getCurrentPosition() method will use high accuracy mode, and it will wait for 5 minutes for a response from the device.

Summary

The Geolocation API is a standard JavaScript API that allows a web application to access user location data.

Using the Geolocation data, you can provide services or content relevant to the user's location, such as the nearest public transport or hospital.

If you enjoyed this article and want to learn more from me, I recommend you check out my new book Beginning Modern JavaScript.

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide to help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

See you in other articles!

In this article, I'm going to show you how to make HTTP requests to external APIs using the JavaScript Fetch API. You're going to learn how to create GET, POST, PUT/PATCH, and DELETE requests using the Fetch API.

To get the most out of this article, you need to have a good understanding of JavaScript promises. You can read my JavaScript Promises article if you need a refresher.

• How the Fetch API Works
• How to Send a GET Request
• How to Send a POST Request
• How to Send a PUT Request
• How to Send a PATCH Request
• How to Send a DELETE Request
• How to Use Async/Await With the Fetch API
• Run Code Examples
• Summary

Let's get started!

How the Fetch API Works

To send a request similar to that of an HTML form, you only need to pass the URL where you want to send the data to as an argument to the fetch() function:

fetch('<Your URL>', {})

The fetch() function accepts two parameters:

1. The URL to send the request to (this is a required parameter).
2. The options to set in the request. You can set the request method here (this is an optional parameter).

Under the hood, the fetch() function returns a Promise, so you need to add the .then() and .catch() methods.

When the request returns a response, the then() method will be called. If the request returns an error, then the catch() method will be executed:

fetch('<Your URL>', {})
  .then(response => {
    // Handle Fetch response here.
  })
  .catch(error => {
    // If there's an error, handle it here
  })

Inside the .then() and .catch() methods, you pass a callback function to execute when the respective methods are called.

The .catch() method can be omitted from Fetch API. It's used only when Fetch can't make a request to the API, such as no network connection or the URL not found.

How to Send a GET Request Using the Fetch API

The GET request is an HTTP request used to ask for specific data from an API, such as when you need

In the following example, we're going to hit a dummy URL located at https://jsonplaceholder.typicode.com to request for a user registered on the site:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => console.log(response))
  .catch(error => console.log(error));

The code above will give the following response:

Fetch Request Response

Here, you can see that the body property contains a ReadableStream. To use the ReadableStream in our JavaScript application, we need to convert it to call the json() method:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(data => console.log(data))

The json() method converts the ReadableStream into a JavaScript object. The data variable above will be printed as follows:

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

Now that you have the data object, you can use this value in any way you want. For example, if you want to display the user name and email in HTML, here's how you do it:

<body>
  <h1 id='user-name'>Waiting for data</h1>
  <h2 id='user-email'>Waiting for data</h1>
  <script>
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => response.json())
      .then(data => {
        document.querySelector('#user-name').textContent = data.name
        document.querySelector('#user-email').textContent = data.email
      })
  </script>
</body>

In the above code, the Fetch API will run as soon as the browser loads the HTML document.

After processing the response into a data object, JavaScript will change the text of the <h1> and <h2> elements above to reflect the name and email of the user.

If you run the code above, you'll get the following output:

The Fetch Request Output Displayed in the Browser

And that's how you send a GET request using Fetch and display the returned data in HTML.

Note that depending on the request you are asking for, an API might return a different type of data.

In this example, the typicode API sends back an object, but you might also get an array when you request more than one unit of data.

If you access the URL at https://jsonplaceholder.typicode.com/users, you'll see that the API respond with an array of objects.

To handle an array of objects, you can iterate over the array and show the data in HTML as follows:

// example

You need to know the data type returned by the API to handle it correctly.

How to Send a POST Request Using the Fetch API

If you want to send a POST request instead of a GET request, you need to define the second argument when calling the function, which is the option object.

Inside the option object, define a method property as follows:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST', // Set method here
})
.then(response => response.json())
.then(data => console.log(data))

When you send a POST method, you need to set the request header and body properties to ensure a smooth process.

For the header, you need to add the Content-Type property and set it to application/json.

The data you want to send should be put inside the body property in a JSON format. See the example below:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Nathan Sebhastian',
    email: 'ns@mail.com'
  }),
}).then(response => response.json())
  .then(data => console.log(data))

In the example above, we sent a POST request to create a new user. In the body property, a regular JavaScript object was converted into a JSON string by calling the JSON.stringify() method.

JSON is one of the formats computers use to communicate with each other on the internet.

The response from the typicode.com API would be similar as follows:

{
  "name": "Nathan Sebhastian",
  "email": "ns@mail.com",
  "id": 11
}

This means that we successfully created a new user. Since typicode.com is a fake API, the user won't really be added, but it will pretend as if it was.

How to Send a PUT Request

A PUT request is used to create a new resource or update an existing one.

For example, if you want to update an existing user name and email data. You can use a PUT request to do so:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Nathan Sebhastian',
    email: 'nathan@mail.com'
  }),
}).then(response => response.json())
  .then(data => console.log(data))

The request above will receive the following response:

{
    "name": "Nathan Sebhastian",
    "email": "nathan@mail.com",
    "id": 1
}

Because user data with an id value of 1 already exists, the PUT request above updates that data.

Next, let's look at the PATCH request.

How to Send a PATCH Request

The PATCH request is sent when you need to update an existing request.

For example, if you want to change the name and username data from an existing user.

Here's an example of sending a PATCH request to typicode.com:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ 
    name: 'Nathan Sebhastian',
    username: 'nsebhastian'
  }),
}).then(response => response.json())
  .then(data => console.log(data))

The request above will give the following response:

{
    "id": 1,
    "name": "Nathan Sebhastian",
    "username": "nsebhastian",
    "email": "Sincere@april.biz",
    // ... the rest of user data
}

Above, you can see that the name and username property values are updated using the body of the PATCH request.

How to Send a DELETE Request

The DELETE request is used when you want to request that a resource be removed permanently from the server.

To run a DELETE request with Fetch, you only need to specify the URL for the resource to delete and the method: 'DELETE' property as follows:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'DELETE',
}).then(response => response.json())
  .then(data => console.log(data))

The request above will delete a user data that has an id value of 1.

The API might respond with some message to confirm that the resource has been removed. But since typicode.com is a dummy API, it will send back an empty JavaScript Object {} .

How to Use Async/Await With the Fetch API

Since Fetch returns a Promise object, this means that you can also use the async/await syntax to replace the .then() and .catch() methods.

Here's an example of sending a GET request using Fetch in async/await syntax:

try {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const json = await response.json();
  console.log(json);
} catch (error) {
  console.log(error);
}

Handling a Fetch response using async/await looks cleaner because you don't have to use the .then() and .catch() callbacks.

If you need a refresher on async/await, you can read my JavaScript Async/Await article.

Run Code Example

I've also created an example website that shows you how to run these 5 HTTP request protocols at https://nathansebhastian.github.io/js-fetch-api/

Check it out and study the returned data object. To know what API requests you can send to a specific API, you need to look at the documentation of that API project.

Summary

The Fetch API allows you to access APIs and perform a network request using standard request methods such as GET, POST, PUT, PATCH, and DELETE.

The Fetch API returns a promise, so you need to chain the function call with .then() and .catch() methods, or use the async/await syntax.

And that's how the Fetch API works! If you enjoyed this article, you might want to check out my Beginning Modern JavaScript book to level up your JavaScript skill:

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

See you in other articles!

In this tutorial, we will see how Map and Set work in detail and when to use them. We will also explore the Set object composition methods that were recently added to the JavaScript standard.

Table of Contents

• The Map Object Explained
• How to Create a Map Object
• Map Object Methods and Properties
• Other Ways to Create a Map Object
• Iterate Over Map Object Data
• When to Use the Map Object
• Set Object Explained
• How to create a Set Object
• Set Object Methods and Properties
• Set Composition Methods
• Iterate Over a Set Object
• When to Use the Set Object
• Conclusion

The Map Object Explained

The Map object stores data in a key/value pair structure, just like an Object. The main differences between a regular object and a Map are:

• A Map can have any type of data as the key value
• A Map maintains the order of data added to the object

How to Create a Map Object

To create a Map object, you can call the Map() constructor as follows:

const myMap = new Map();

The code above creates a new empty Map object.

Map Object Methods and Properties

A Map object has the following methods and properties:

• set(key, value) – Adds a key/value pair to a Map
• get(key) – Retrieves a value from a Map (returns undefined if key doesn't exist)
• has(key) – Checks if a Map has a specific key
• delete(key) – Removes a specific key from a Map
• clear() – Removes all items from a Map
• keys() – Returns all keys in a Map
• values() – Returns all values in a Map
• entries() – Returns all keys and values in a Map
• size – Returns the number of items in Map

To insert data into the Map object, you can use the set() method:

const myMap = new Map();

myMap.set(1, 'Jack');
myMap.set(2, 'Jill');
myMap.set('animal', 'Elephant');

The code above creates a Map object with 3 entries as follows:

Map(3)
0: {1 => "Jack"}
1: {2 => "Jill"}
2: {"animal" => "Elephant"}

To retrieve a value from the Map object, you need to use the get() method and pass the key as its argument:

console.log(myMap.get(1)); // Jack

console.log(myMap.get('animal')); // Elephant

To see how many key/value pairs a Map has, you can access the size property:

myMap.size; // 3

To see if a certain key exists in a Map object, you can use the has() method. See the example below:

myMap.has(1); // true

myMap.has(10); // false

To remove a key/value pair from a Map object, you can use the delete() method and pass the key of the pair you want to remove as follows:

myMap.delete(1);

console.log(myMap);
// 0: {2 => "Jill"}
// 1: {"animal" => "Elephant"}

If you want to remove all key/value pairs, you can use the clear() method instead:

myMap.clear();

console.log(myMap); // Map(0) {size: 0}

Other Ways to Create a Map Object

You can also create a Map object from an Array as follows:

const myMap = new Map([
  [1, 'Jack'],
  [2, 'Jill'],
  ['animal', 'Elephant'],
]);

When creating a Map from an Array, you need to create a two-dimensional array and specify two elements in each array.

The first element will be the key, the second element will be the value. Any extra value in the array will be ignored.

In the example below, the value 'Johnson' from the first array will be ignored by the Map() constructor:

const myMap = new Map([
  [1, 'Jack', 'Johnson'], // the value 'Johnson' is ignored
  [2, 'Jill'],
  ['animal', 'Elephant'],
]);

Because you can create a Map object from an array, you can also create one from an object. You need to transform the object into an array first using the Object.entries() method.

The following example shows how to use an object to create a Map:

const person = {
    'name': 'Jack',
    'age': 20,
}

const myMap = new Map(Object.entries(person));

console.log(myMap); // Map(2) { 'name' => 'Jack', 'age' => 20 }

Iterate Over Map Object Data

To iterate over a Map object data, you can use either the forEach() method or the for .. of loop:

const myMap = new Map([
  [1, 'Jack'],
  [2, 'Jill'],
  ['animal', 'Elephant'],
]);

// iterate using the forEach() method
myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// or using the for .. of loop

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}

Both methods give the same output:

1: Jack
2: Jill
animal: Elephant

When to Use the Map Object

You can think of the Map object as an upgraded version of the regular Object. It can use any type of data as the key value, while an object can only use string values as keys.

Under the hood, the Map object performs better when you need to add and remove keys, so you might consider using it when your data changes frequently.

Also, the Map object has many useful methods for data manipulation, such as has() to see if the Map contains a specific key, keys() to get all keys defined in the Map, values to get all values, and entries() to get all key/value pairs.

But if you only want to create an object without further manipulation, then you don't need to use the Map object.

One example is when you send a network request using the fetch() method. You would create an object and convert it into a JSON string, so using a Map object won't give any benefit.

Set Object Explained

The Set object allows you to store a collection of elements, just like an Array. The differences between a Set and an array are:

• A Set requires all elements to be unique
• A Set has fewer methods for data manipulation

How to Create a Set Object

To create a new Set object, you need to call the Set() constructor as follows:

const mySet = new Set();

The code above will create a new empty set.

Set Object Methods and Properties

A Set object has the following methods and properties:

• add(value) – Adds a value to a Set
• has(value) – Checks if a Set contains a specific value
• delete(value) – Removes a specific value from a Set
• clear() – Removes all items from a Set
• keys() – Returns all values in a Set
• values() – Returns all values in a Set
• entries() – Returns all values in a Set as [value, value] array
• size – Returns the number of items in Set

Note that the keys() and values() methods in a Set object return the same output.

There's also the entries() method which returns an array as follows:

const mySet = new Set(['Jack', 'Jill', 'John']);

console.log(mySet.entries());

Output:

[Set Entries] {
  [ 'Jack', 'Jack' ],
  [ 'Jill', 'Jill' ],
  [ 'John', 'John' ]
}

Notice how the values are repeated once in each array above. The entries() method is created to make Set similar to the Map object, but you probably don't need it.

There are extra methods that you can use to interact with another Set object. We'll discuss them in the next section.

To add an element to the Set object, you can use the add method:

const mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(3);

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

To get all values stored in a Set, call the values() method:

mySet.values(); // [Set Iterator] { 'Jack', 'Jill', 'John' }

To check if the Set has a specific value, use the has() method:

mySet.has('Jack'); // true

mySet.has('Michael'); // false

To remove a single value, call the delete() method. To remove all values, use the clear() method:

mySet.delete('Jill');

mySet.clear();

Set Composition Methods

Aside from the regular methods above, Set also has composition methods that you can use to perform various set theory operations such as difference, union, and intersection.

The following table is from MDN Set documentation:

A List of Set Composition Methods

For example, you can get a set containing the differences between two other sets as follows:

const setA = new Set([1, 2, 3, 4, 5]);

const setB = new Set([4, 5, 6, 7, 8]);

const diffsA = setA.difference(setB); // Set(3) {1, 2, 3}
const diffsB = setB.difference(setA); // Set(3) {6, 7, 8}

Here, the setA.difference(setB) returns a Set containing values unique to the setA object.

The opposite values are returned when you run setB.difference(setA) method.

Note that these methods are new additions to the JavaScript standard, and as of this writing, only Safari 17 and Chrome 122 support these methods.

Most likely, these methods will be included in Node.js soon.

Iterate Over a Set Object

To iterate over a Set object, you can use either the forEach() method or the for .. of loop:

const mySet = new Set(['Jack', 'Jill', 'John']);

// iterate using the forEach() method
mySet.forEach(value => {
  console.log(value);
});

// or using the for .. of loop

for (const value of mySet) {
  console.log(value);
}

Output:

Jack
Jill
John

When to Use the Set Object

You can think of the Set object as the alternative version of the regular Array.

Because a Set object ignores duplicate values, you can use this object to purge duplicates from an Array, then turn the Set object back to an Array:

const myArray = [1, 1, 2, 2, 3, 3];

const uniqueArray = [...new Set(myArray)];

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

Another reason you may want to use a Set is when you need to compose multiple set objects using the composition methods, such as union() and difference(). These methods are not available in an Array.

Conclusion

In this article, you've learned how the Map and Set objects work and when to use them in your code.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

See you later!

The data stored in the Web Storage use the key/value pair format, and both data will be stored as strings.

There are two types of storage introduced in the Web Storage API: Local Storage and Session Storage.

In this article, I’m going to show you how to use the Web Storage API and why it’s useful for web developers.

How the Web Storage API Works

The Web Storage API exposes a set of objects and methods that you can use to store data in the browser. The data you store in Web Storage is private, which means no other website can access it.

In Google Chrome, you can view Web Storage by opening the developer tools window and going to the Application tab as shown below:

The web storage location in Google Chrome

In the picture above, you can see that the Storage menu also has other storage types like Indexed DB, Web SQL, and cookies. The Web SQL standard has been deprecated, and IndexedDB is rarely used because it’s too complex. Any data you store in IndexedDB might better be stored on the server.

As for cookies, it’s a more traditional mechanism of storing data that only allows you to store a maximum of 4 KB of data. By contrast, the Local Storage capacity is 10 MB and the session storage has 5 MB capacity.

This is why we’re going to focus only on Local Storage and Session Storage in this article.

Local Storage and Session Storage Explained

Local Storage and Session Storage are the two standard mechanisms supported by the Web Storage API.

Web storage is domain specific, meaning data stored under one domain (netflix.com) can’t be accessed by another domain (www.netflix.com or members.netflix.com)

Web storage is also protocol specific. This means the data you store in a http:// site won’t be available under the https:// site.

The main difference between Local and Session Storage is that Local Storage will store your data forever. If you want to remove the data, you need to use the available method or clear it manually from the Applications tab.

By contrast, the data stored in session storage is only available during the page session. When you close the browser or the tab, the session storage for that specific tab is removed.

Both Local and Session Storage can be accessed through the window object under the variables localStorage and sesionStorage, respectively. Let’s see the methods and properties of these storage types next.

Methods and Properties of Local and Session Storage

Both Local and Session Storage have the same methods and properties. To set a new key/value pair in the Local Storage, you can use the setItem() method of the localStorage object:

localStorage.setItem('firstName', 'Nathan');

If you look into the Local Storage menu in the browser, you should see the data above saved into the storage as follows:

Storing a key/value pair in Local Storage

The key you used in localStorage must be unique. If you set another data with a key that already exists, then the setItem() method will replace the previous value with the new one.

To get the value out of local storage, you need to call the getItem() method and pass the key you used when saving the data. If the key doesn’t exist, then getItem() will return null back:

const firstName = localStorage.getItem('firstName');
console.log(firstName); // Nathan

const lastName = localStorage.getItem('lastName');
console.log(lastName); // null

To remove the data you have in local storage, call the removeItem() method and pass the key pointing to the data you want to remove:

localStorage.removeItem('firstName');

The removeItem() method will always return undefined. When the data you want to remove doesn’t exist, the method simply does nothing.

If you want to clear the storage, you can use the clear() method:

localStorage.clear();

The clear() method removes all key/value pairs from the storage object you are accessing.

Properties of Local and Session Storage

Both storage types have only one property, which is the length property that shows the amount of data stored in them.

sessionStorage.setItem('firstName', 'Nathan');
sessionStorage.setItem('lastName', 'Sebhastian');

console.log(sessionStorage.length); // 2

sessionStorage.clear();
console.log(sessionStorage.length); // 0

And that’s all the methods and properties you can access in localStorage and sessionStorage.

How to Store JSON Strings in Web Storage Storage

Since Web Storage always stores data as strings, you can store complex data as a JSON string, and then convert that string back into an object when you access it.

For example, suppose I want to store the following information about a user:

const user = {
  firstName: 'Nathan',
  lastName: 'Sebhastian',
  url: 'https://codewithnathan.com',
};

At first, I might store the data as a series of key/value pairs like this:

localStorage.setItem('firstName', user.firstName);
localStorage.setItem('lastName', user.lastName);
localStorage.setItem('url', user.url);

But a better way is to convert the JavaScript object into a JSON string, and then store the data under one key as follows:

const user = {
  firstName: 'Nathan',
  lastName: 'Sebhastian',
  url: 'https://codewithnathan.com',
};

const userData = JSON.stringify(user);

localStorage.setItem('user', userData);

Now the local storage will have only one key/value pair with the JSON string as its value. You can open the Applications tab to see this:

Storing a JSON string in Local Storage

When you need the data, call the getItem() and JSON.parse() methods as follows:

const getUser = JSON.parse(localStorage.getItem('user'));

console.log(getUser);
// {firstName: 'Nathan', lastName: 'Sebhastian', url: 'https://codewithnathan.com'}

Here, you can see that the data is returned as a regular JavaScript object.

Local Storage vs Session Storage – Which One to Use?

Based on my experience, localStorage is the preferred Web Storage mechanism because the data will persist as long as you need it to. When you don’t need the data, you can remove it using the removeItem() method.

sessionStorage is only used when you need to store temporary data, like tracking whether a popup box has been shown to the user or not.

But this is also open to discussion because you might not want to show a popup every time the user logs into your web application, but only once. In that case, you should use localStorage instead.

My rule of thumb is to use localStorage first, and sessionStorage when the situation needs it.

Benefits of Using the Web Storage API

Now that you know how the Web Storage API works, you can see that there are some benefits of using it:

1. Storing data on the browser reduces the need to make a server request for a piece of information. This can improve the performance of your web applications.
2. The simple key/value pair format allows you to store user preferences and local settings that should persist between sessions.
3. The Web Storage API is simple to use, providing only a few methods and one property. It’s simple to set and retrieve data using JavaScript
4. It has offline support. By storing necessary data locally, the Web Storage enables your web application to work offline.
5. The Web Storage is also a standardized API, meaning the code you write will work in many different browsers.

But of course, not all data should be stored in the Web Storage API. You still need a server database to keep records that are important for your application.

Conclusion

Web Storage is a useful API that allows you to quickly store and retrieve data from the browser. Using Web Storage, you can store the user’s preferences when accessing your application.

localStorage allows you to store data forever until it’s removed manually, while sessionStorage will persist as long as the browser or tab is open.

Some benefits of using the Web Storage API include reducing server requests, offline support, and a simple API that’s easy to use. It’s also standardized, so it will work on different browsers.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

See you later!

In this article, I will help you see and understand how to listen and respond to DOM events using JavaScript.

If you need a refresher on the DOM, I have written an article that explains what the DOM is and how JavaScript interacts with it.

What Are DOM Events and Why Are They Useful?

DOM events are signals exposed by the browser that you can use to run a piece of JavaScript code.

These DOM events occur when the user interacts with the application we've created, such as clicking a button or typing letters into an input field.

As a web developer, you can instruct JavaScript to listen for a specific event and do something in response to that event.

For example:

• When a button is clicked, do change the text of a paragraph.
• When a form is submitted, do a POST request using the Fetch API.

In this article, I will help you see and understand how to listen and respond to DOM events using JavaScript.

How to Listen to DOM Events

To listen for an event, you need to attach an event listener to an element by using the addEventListener() method.

The addEventListener() method accepts two parameters:

1. The event type to listen to
2. A function to run when the event is triggered

Element.addEventListener(type, function);

Back to the example, suppose you want to change the text of a paragraph when a button element is clicked. Here’s how you do it:

<body>
  <p id="myParagraph">This is an example paragraph</p>
  <button id="changeText">Change Text</button>
  <script>
    const button = document.querySelector('#changeText');

    function newText(event) {
      const p = document.querySelector('#myParagraph');
      p.innerText = 'The text has been changed';
    }

    button.addEventListener('click', newText);
  </script>
</body>

To insert JavaScript code into the HTML document, we need to use the script tag as shown above.

The button element is selected using document.querySelector() method, then the method addEventListener() is called on the element. This means you attach an event listener to the button.

First, you specify the type of event to listen to, which is a click event in this case. Next, you specify the function to run when that event happens.

In the code above, the newText function will be executed when the click event is triggered.

The event listener will also send an event object, which carries information about the event that was triggered. That’s why there’s an event parameter in the newText function above.

You can log the event to the console to see its details:

function newText(event) {
  console.log(event);
}

If you click on the button again, you will have the following output:

An example Event object log

Depending on what you want to do when an event is triggered, you may need to use the information contained inside the event object.

Here, all we want to do is to change the text of the paragraph, so the event object is not needed. We’ll see an example of using the event object later, when handling the keyboard events.

There are many events you can listen to in the browser. Here are some of the most common events you may need when developing a web application:

If you want to read the full list of DOM event types, you can visit this page.

The DOM Events are broken into several categories. Here we will just look at two of the most common events you might use in your project: keyboard and mouse events.

Keyboard Events

For the keyboard, you can track the keydown and keyup events, which run when you press and release a key, respectively.

To show you an example, run the following code from the console:

document.addEventListener('keydown', event => {
  console.log(`A key is pressed: ${event.key}`);
});

document.addEventListener('keyup', event => {
  console.log(`A key is released: ${event.key}`);
});

Once you run the code above, press a key on your keyboard slowly, then release it slowly.

You should see a log output as follows:

Logging keyup and keydown events

Notice how the 'keydown' log appears as soon as you press a key, and the 'keyup' log appears only when you release the key.

The keyboard events are usually attached to the document object instead of a specific element, because the whole website should be able to listen to that event.

Mouse Events

Aside from keyboard events, the DOM also provides a way to track any mouse events.

The most common mouse events that you can track are:

• mousedown – the mouse button was pressed
• mouseup – the mouse button was released
• click – a click event
• dblclick – a double click event
• mousemove – when the mouse is moved over the element
• contextmenu – when the context menu is opened, for example on a right mouse button click

Again, you can test these events by adding an event listener directly to the document object:

document.addEventListener('mousedown', event => {
  console.log(`The mouse is pressed`);
});

document.addEventListener('mouseup', event => {
  console.log(`The mouse is released`);
});

Run the code above, then click anywhere inside the browser. You should see the mousedown and mouseup events logged, respectively.

How to Remove Event Listeners

To remove an event listener attached to an element, you need to call the removeEventListener() method, passing the type of the event and the function you passed to the addEventListener() method as follows:

button.removeEventListener('click', newText);

The above code is enough to remove the 'click' event listener from the button element. Notice how you need to call the removeEventListener() method on the element while also passing the function newText to the method.

To correctly remove an event listener, you need to have a reference to the function attached to the event. If you pass a nameless function to the addEventListener() method, then that event can’t be removed:

button.addEventListener('click', function (event) {
  alert('Button save is clicked');
});

Without the function name as in the example above, you won’t be able to remove the event listener.

How to Listen to Events using HTML Attributes

Aside from using the addEventListener() method, you can also listen to events by adding the on[eventname] attribute to your HTML elements.

For example, suppose you want to listen to a button click. You can add the onclick attribute to your button as follows:

<body>
  <button onclick="handleClick()">Click Me!</button>
  <script>

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

In the button element above, we add the onclick property and pass the handleClick() function to it.

When we click on the button, the handleClick() function will be executed.

You can also add the onclick attribute using JavaScript as follows:

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');
    myBtn.onclick = handleClick;

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

Here, we assign a reference to the handleClick function to the onclick property using JavaScript.

To remove the onclick attribute, you can assign the property to null:

const myBtn = document.querySelector('#myBtn');
myBtn.onclick = null;

Which One Should You Use?

As you can see, there are two ways you can listen to DOM events: the addEventListener() method and the on[eventname] HTML attribute. Which one should you use?

The answer is that the addEventListener() method can be used when you need more extensibility, and the on[eventname] can be used when you prefer things to be simple.

When developing web applications, the .html file should only serve as the structure of the page, while the .js file should define any behavior the web application can have.

To make your application easier to maintain and extend, JavaScript should have access to HTML elements, but no HTML elements should be able to execute JavaScript functions. This is why addEventListener() should be the recommended method.

But addEventListener() doesn't come without a cost: you trade extensibility with verbosity, making your code quite cumbersome to read.

When using the on[eventname] attribute, you only need to specify the function name in your HTML element:

<body>
  <button onclick="handleClick()">Click Me!</button>
  <script>

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

But when you use the addEventListener() method, you need to query the element you need, call the method, then specify the event and the callback function to run:

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');
    myBtn.addEventListener('click', handleClick);

    function handleClick(event) {
      alert('The button is clicked!');
    }
  </script>
</body>

As you can see above, there are two additional lines that you don't need to write when you use the on[eventname] attribute.

While it might look insignificant, it will be a serious issue when you work on a large scale application with many HTML and JS files.

In addition, the addEventListener() method also allows you to attach multiple listeners to the same element as follows:

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');

    myBtn.addEventListener('click', handleClick);

    myBtn.addEventListener('click', handleClickTwo);

    function handleClick() {
      console.log('Run from handleClick function');
    }

    function handleClickTwo() {
      console.log('Run from handleClickTwo function');
    }
  </script>
</body>

When you click on the button above, JavaScript will execute both event listeners.

This is not possible with the onclick property because you can only assign one function as a reference at a time:

<body>
  <button id="myBtn">Click Me!</button>
  <script>
    const myBtn = document.querySelector('#myBtn');

    myBtn.onclick = handleClick;

    // when you assign a new function to onclick,
    // the old function is overwritten

    myBtn.onclick = handleClickTwo;

    function handleClick() {
      console.log('Run from handleClick function');
    }

    function handleClickTwo() {
      console.log('Run from handleClickTwo function');
    }
  </script>
</body>

But I never encountered a situation where I needed to listen to the same event twice, so this advantage might not be useful at all.

Conclusion

The DOM events exposed by the browser enable you to respond to user actions in the appropriate way.

This pattern of using event listeners to do specific tasks is known as event-driven programming, and you'll use this pattern a lot when developing a web application using JavaScript.

There are two ways you can listen to events: using the addEventListener() JavaScript method and the on[eventname] HTML attributes. Each has its advantages and disadvantages, so it's good to be familiar with both.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

First, let's recap what we know about HTML, CSS, and JavaScript.

How HTML, CSS, and JavaScript work

When you want to build a web application, you create an HTML document filled with HTML, CSS, and JavaScript.

These three technologies are used together like a team, each playing a different role in building what you see in your web browser.

HTML is a markup language used to define the structure and content of the page. The tags we use like <head>, <body>, and <button> have meanings, and the browser will process these tags, rendering the content of the document to the screen

What an HTML-only website looks like

But the HTML alone produces a very boring and generic-looking page. CSS was created to enable us to change the way the HTML tags are represented on the browser.

By using CSS, you can make a button displayed in a color of your choice, or a text input box with a rounded border, making them more appealing and modern.

A Website styled with CSS looks appealing and modern

HTML and CSS are great partners, but even then, a web page is still just a passive thing. Once the browser processes the content and renders it, you can’t edit the page in any way.

You can’t change the background and text color of the page (like switching to dark mode, for example). You can’t create cool animations, turn on the microphone or webcam, or retrieve data from another website to display on the page after a click.

JavaScript is the programming language that’s supported by the browser, and it fills this gap left open by HTML and CSS.

In short, JavaScript breathes life into static websites, turning them dynamic. It allows a website to interact with the user, respond to their actions, and dynamically update the content without requiring a page reload.

The DOM Explained

So how come JavaScript can do things that HTML and CSS can’t do? Well, the answer is that JavaScript can manipulate the Document Object Model, or the DOM for short.

The DOM is a hierarchical structure composed of objects that make up a web page. Web browsers then expose this DOM so that you can change the page structure, style, and content using JavaScript.

For example, suppose you have the following HTML content in your document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a paragraph element</p>
</body>
</html>

The DOM graph generated by the HTML document above is as follows. I’m going to explain what the graph means below:

Example of the DOM tree graph

The DOM looks like a tree structure with a set of connected nodes. These nodes are objects that you can access using JavaScript. The html node and its children are the content of your document.

For now, let’s focus on the window and document objects.

The Window Object

The window object is the root of the DOM tree, and this object is used to instruct the browser to do tasks like:

• Displaying an alert box or a prompt
• Log messages or errors to the console
• Access the browser’s local storage
• Access the document object

You can access the window object from the Console by typing window and pressing Enter. The browser will respond by showing you the methods and properties of the object as follows:

The Window object properties and methods

The window object provides both child objects and methods that you’re going to access to manipulate a web page.

For example, the window has the console object that you can use to log a message to the console.

Type the code below to the console and hit Enter:

window.console.log('Hello World!');

You’ll see the string 'Hello World!' logged into the console.

The window object is a global object, so you can omit it when calling its child object. To access the console object, just type console as follows:

console.log('Hello World!');

The same goes for when you access the document object. You can write document.propertyOrMethod instead of window.document.propertyOrMethod.

I won’t go too deep on the window object, because as a web developer, you’re going to interact more with the document object in your daily routine.

The Document Object

The document object is the entry point for all HTML elements that you write in your document. This object is also what gives the Document Object Model its name.

It’s not called the Window Object Model because we’re mostly going to work with the Document object instead of the Window object.

The Document Object is the child of the Window object

From the document object, you can retrieve any data related to the HTML content using JavaScript.

For example, you can get the Document title using the document.title property, and the URL using document.URL. The referrer is available in document.referrer, the domain in document.domain.

For the HTML document itself, you can access the whole HTML Element node using document.documentElement, the document head using the document.head property, or the body using document.body

You can try to access these elements from the console as shown below:

documentElement, head, and body properties of the Document object

You can see the documentation of all the properties and methods of the document object here (note that it might be overwhelming at first).

Of course, you can do much more than just read your document data. I've written another article that shows you how to manipulate the DOM using JavaScript.

Summary

The DOM is a tree-like structure generated from the HTML file that we created and loaded into the browser.

The browser then exposes this DOM as a set of JavaScript objects that we can access, such as the window and document objects.

It’s an important piece of technology that allows you to program the web browser to do specific tasks or change your HTML content.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

These three operators will help you write clearer and less error-prone code.

The Nullish Coalescing Operator

When you’re inspecting JavaScript code, you may find an expression using a double question mark (??), as in the code below:

console.log(username ?? "Guest");

The double question mark is a logical operator that returns the expression on the right-hand side of the mark when the expression on the left-hand side is null or undefined

This operator is also known as the nullish coalescing operator. It’s a new feature introduced in JavaScript ES2020 that allows you to check for null or undefined values in a more concise way.

Nullish Coalescing Operator Syntax

The syntax for the nullish coalescing operator is very simple. It consists of two question marks ?? placed between two operands.

Here’s an example:

let firstName = null;
let username = firstName ?? "Guest";
console.log(username); // "Guest"

The code above assigns the firstName variable value as the value of the username variable.

When the firstName value is null or undefined, then the value Guest will be assigned to the username variable instead:

Result of using the nullish coalescing operator

You can also write it this way:

let username = undefined ?? "Guest";
console.log(username); // "Guest"

As you can see, you don’t need an if-else statement to check for null or undefined values.

Why JavaScript Needs This Operator

The nullish coalescing operator was created as an improved alternative to the OR operator ||.

The OR operator was originally created to provide a default or fallback value when the left-hand expression is falsy, or evaluates to false.

But after some real-world uses, it’s clear that there are times when developers want to return values that are considered falsy, such as 0 and an empty string ("")

The use of the OR operator will prevent you from returning any falsy values at all. Consider the following example:

// empty string evaluates to false in JavaScript:
let firstName = "";
let username = firstName ?? "Guest";
console.log(username); // ""

// When you use OR operator:
username = firstName || "Guest";
console.log(username); // "Guest"

By using the nullish coalescing operator, you will only replace exactly null and undefined values with the right-hand value.

The nullish coalescing operator can be used with any type of value, including numbers, strings, and objects.

Nullish Coalescing Operator Use Cases

The nullish coalescing operator is useful in a variety of situations where you need to check for null or undefined values and provide a default value.

Here are several examples of common use cases:

Handling Missing Function Arguments

When a function is called, it’s possible that some of the arguments may be omitted.

The Nullish Coalescing Operator can be used to provide default values for a missing argument as follows:

function greet(name) {
  console.log(`Hello, ${name ?? "Guest"}!`);
}

greet(); // 'Hello, Guest!'
greet("John"); // 'Hello, John!'

Accessing Object Properties

When working with objects, it’s possible that a property may not exist or is undefined.

The Nullish Coalescing Operator can be used to safely access object properties and provide a default value when the property is missing:

let user = { name: "John Doe" };
let email = user.email ?? "N/A";
console.log(email); // 'N/A'

Choosing Between a Variable and a Constant

You may want to select a value from a variable or a constant if the variable is null or undefined:

let value = null;
const DEFAULT_VALUE = 'Default';

let result = value ?? DEFAULT_VALUE;

console.log(result); // 'Default'

As you can see, the Nullish Coalescing Operator is a great feature that can make your code more concise and reliable.

Using ?? with the || and && Operators

For safety reasons, the double question mark can’t be used together with JavaScript OR (||) and AND (&&) operators without parentheses () separating the operators.

For example, the following code tries to see if either firstName or lastName variable can be used as the value of username before using "Guest" as its value:

let firstName = "John";
let lastName = "Stone";
let username = firstName || lastName ?? "Guest";
// Error: Unexpected token '??'

console.log(username);

This is because JavaScript won’t be able to determine which operator it needs to evaluate first. You need to use parentheses to clearly indicate the priority of the evaluations.

The following code will first evaluate the expressions inside the parentheses:

let firstName = null;
let lastName = undefined;
let username = (firstName || lastName) ?? "Guest";

console.log(username); // "Guest"

And that’s how you combine the nullish coalescing operator with either AND or OR operator.

The Optional Chaining Operator

Like the nullish coalescing operator, the optional chaining operator is a modern addition to JavaScript that offers a better way to do things.

The optional chaining operator ?. gives you a safe way to access properties and methods of an object, avoiding an error in the process.

One of the most common problems in JavaScript is that you can get an error when you access a property of an undefined value.

For example, suppose you have a car object as follows:

const car = {};

console.log(car.manufacturer); // undefined
console.log(car.manufacturer.address); // ❌ TypeError!

In the example above, accessing the manufacturer property returns undefined, but when you try to access the address property of the manufacturer property, JavaScript returns an error.

Even though this is how JavaScript works, a better way to handle the non-existent property would be to just return an undefined back, just like when we try to access the manufacturer property.

This is why the optional chaining operator was created. The operator returns either the value of the property, or undefined when the property is null or undefined.

To use the operator, just add a question mark in front of the dot . notation:

const car = {};

console.log(car.manufacturer?.address); // undefined

The optional chaining operator can be added anytime you use the dot notation to access a property or method.

This operator allows you to avoid the TypeError that occurs when accessing a property or calling a method from a non-existent property:

const car = {};

console.log(car.manufacturer?.address); // undefined
console.log(car.manufacturer?.drive()); // undefined

Note that the optional chaining operator only checks the value before it. If the car variable can be null, then you need to add the operator after when accessing the car object as well.

See the following example:

const car = null;

console.log(car?.manufacturer?.address); // undefined
console.log(car.manufacturer?.address); // TypeError: Cannot read properties of null

And that’s how the optional chaining operator works. It’s really useful when you’re working with objects in your project.

Next, let’s learn about the destructuring assignment.

Destructuring Assignment Operator

The destructuring assignment is a special operator that allows you to "unpack" or "extract" the values of JavaScript arrays and objects. It has become one of the most useful features of JavaScript language for two reasons:

• It helps you to avoid code repetition.
• It keeps your code clean and easy to understand.

Let’s see how you can destructure an array and an object next.

Destructuring Arrays

Here’s how you normally assign an array values to variables:

const sampleArray = ['Jane', 'John'];

const firstIndex = sampleArray[0];
const secondIndex = sampleArray[1];

The code above works, but you need two lines of code to get two elements from an array. Using the destructuring assignment, you can assign array elements into variables in one short line:

const sampleArray = ['Jane', 'John'];

const [firstIndex, secondIndex] = sampleArray;

The above code will return the same value for firstIndex and secondIndex variable. No matter how many elements you have, the destructuring will start from the zero index.

To create a destructuring assignment, you need to add square brackets [] after the let/ const keyword. When you add square brackets after the assignment (=) operator, it’s an array. If you add them before the assignment operator, it’s a destructuring assignment.

You can also use the rest operator …​ to copy the rest of the values after your assignment. Take a look at the following example:

const sampleArray = ['Jane', 'John', 'Jack', 'Aston'];

const [one, two, ...rest] = sampleArray;

The rest variable will contain an array with values of ['Jack','Aston'].

You can also put default values for these variables when the extracted value is undefined:

const [a = 'Martin', b = 10] = [true];

// a will return true
// b will return 10

You can also immediately assign the return of a function into assignments. This is frequently used in libraries like React:

const [a, b] = myFunction();

function myFunction() {
  return ['John', 'Jack'];
}

The variable a will return "John" and b will return "Jack".

Finally, you can also ignore some variables by skipping the assignment for that index:

const [a, , b] = [1, 2, 3];

// a will return 1
// b will return 3

Destructuring assignment makes unpacking array values easier and shorter, with less repetition.

Object Destructuring

Just like arrays, you can destructure objects the same way, but instead of using the square brackets ([]) you need to use the curly brackets ({}):

const user = {
  firstName: 'Jack',
  lastName: 'Smith',
};

const { firstName, lastName } = user;

You can use the colon delimiter (:) to assign the property into a different name. The example below assign the value of firstName into name:

const user = {
  firstName: 'Jack',
  lastName: 'Smith',
};

const { firstName: name, lastName } = user;

Note that you still only create two variables: name and lastName. The firstName is assigned to name, so it won’t create a separate variable.

Just like arrays, you can destructure an object returned by a function immediately:

function myFunction() {
  return { firstName: 'Jack', lastName: 'Austin' };
}

const { firstName, lastName } = myFunction();

Also, you can destructure an object from the function parameters, exactly when you define the function:

function myFunction({ firstName, lastName }) {
  return firstName + ' ' + lastName;
}

const user = {
  firstName: 'Jack',
  lastName: 'Austin',
};

const name = myFunction(user);

The destructuring assignment is a useful addition to JavaScript that makes it easier to unpack values from objects and arrays. You’re going to use it frequently when you code using a library like React.

Conclusion

JavaScript is constantly improving every year, and the three operators explained in this article are a great addition that can help you produce more concise and readable code.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

If you don't know or need a refresher on JavaScript promises, you can read my previous article: How JavaScript Promises Work – Tutorial for Beginners.

You'll need to understand JavaScript promises well before learning the async/await syntax.

How async/await Works

The async/await syntax is a special syntax created to help you work with promise objects. It makes your code cleaner and clearer.

When handling a Promise, you need to chain the call to the function or variable that returns a Promise using then/catch methods.

When you have many promises, you will also need lots of then method chains. For example, here's how you might retrieve data using the fetch() function:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.log(error));

In the code above, the fetch() function returns a Promise, which we handle using the then() method. Inside the first then() method, we accept the response from the request and convert it into an object using the json() method.

In the second then() method, we receive the returned json data from the call to the json() method, then log that data to the console.

We also add the catch() method to handle any error that might happen when running the request.

The code is really not hard to understand, but we can make it even prettier by removing the .then() and .catch() chains, which also removes the callback functions.

The Await Keyword

The await keyword basically makes JavaScript wait until the Promise object is resolved or rejected. Instead of having to use the callback pattern inside the then() method, you can assign the fulfilled promise into a variable like this:

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const json = await response.json();
console.log(json)

The await keyword is placed before the call to a function or variable that returns a promise. It makes JavaScript wait for the promise object to settle before running the code in the next line.

Now if you run the code above, you might get an error like this:

SyntaxError: await is only valid in async functions and the top level bodies of modules

This error occurs because the await keyword must be used inside an asynchronous function or a module.

The Async Keyword

To create an asynchronous function, you need to add the async keyword before your function name. Take a look at line 1 in the example below:

async function runProcess() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const json = await response.json();
  console.log(json)
}

runProcess();

Here, we created an asynchronous function called runProcess() and put the code that uses the await keyword inside it. We can then run the asynchronous function by calling it, just like a regular function.

How to Handle Errors in Async/Await

To handle an error that might occur from the async/await syntax, you can use the try/catch block to catch any rejection from your promise.

See the example below:

async function runProcess() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.log(error);
  }
}

runProcess();

The try/catch block, put inside the runProcess() function, will handle the rejection that comes from the promise objects.

Now we have a complete async/await version of the standard Promise code we created earlier. Here's a comparison between the two:

Promise vs Async/Await Code Comparison

In the async/await version, the result of the promise is directly assigned to a variable. In the standard promise version, the result of the promise is passed as an argument to the .then() method.

Most developers prefer the async/await version as it looks more straightforward.

How to Use Async/Await in IIFE and Arrow Functions

An Immediately Invoked Function Expression (IIFE) is a technique used to execute a function immediately as soon as you define it.

Unlike regular functions and variables, IIFEs will be removed from the running process once they are executed.

Aside from the standard function, you can also make an asynchronous IIFE. This is useful when you need to run the asynchronous function only once:

(async function () {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.log(error);
  }
})();

You can also use the arrow syntax when creating an asynchronous function as follows:

const runProcess = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.log(error);
  }
};

runProcess();

Feel free to use the syntax you want in your code.

Why Use the async/await Syntax?

The async/await syntax enables you to handle promises without using .then() and .catch() method chaining, which also removes the need for nested callbacks.

This benefit is significant when you have a complex process after the promise is settled.

Going back to our example above, suppose you have a conditional statement inside the .then() method as follows:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => {
    if (json.userId == 1) {
      json.completed == false;
    } else {
      json.completed == true;
    }
  })
  .catch(error => console.log(error));

Here, you can see that the callback function that accepts the json data has an if/else block inside it.

This code is hard to reason with and modify when compared to the async/await version as follows:

(async function () {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    if (json.userId == 1) {
      json.completed == false;
    } else {
      json.completed == true;
    }
    console.log(json);
  } catch (error) {
    console.log(error);
  }
})();

By using the async/await syntax, you reduce the need for method chaining and nested callbacks. This impact the readability of your code, especially when you have nested code like if/else and a for loop block.

Conclusion

Now you've learned how the async/await syntax works. The syntax makes working with promises much easier by removing the need for .then() and .catch() method chaining, which also removes the need for nested callbacks.

Even though the await keyword can only be used inside an async function, you can use an IIFE to invoke the async function only once.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

Basically, each Element object in the DOM has properties and methods that you can use to interact with that element.

The following are the most common and practical ways you might want to manipulate the Element object:

1. Change the Content of an Element
2. Manipulate the Class Attribute
3. Setting CSS Styles Using JavaScript
4. Create, Add, and Remove Elements
5. Insert Element at a Specific Position
6. Manipulating Element Attributes
7. Manipulating Data Attributes

Manipulating the DOM seems complex in theory, but as you’ll see in this article, there are a few methods that you’ll use over and over again in many scenarios.

Once you know about these methods, you will have leveled up your skill in DOM manipulation. Let’s begin!

Change the Content of an Element

You can change the value or content of an element by setting the innerText property of that element.

For example, suppose you have a paragraph element as follows:

<p class="myParagraph">This is a paragraph</p>

Next, you select the element and change its innerText value like this:

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

p.innerText = 'A new day is dawning';

The p element would have its value changed as you see below:

<p class="myParagraph">A new day is dawning</p>

And that’s how you change the value of an element.

Manipulate the Class Attribute

You can add a new class attribute to an Element by using the add() method of the classList object:

Element.classList.add('myClass');

You can remove a class using the remove() method:

Element.classList.remove('myClass');

The classList object is a collection object that you can use to manipulate the class attribute of an Element.

You can’t directly edit the classList property because it’s a read-only property. But you can use its methods to change the element classes.

To replace an existing class with a new class, use the replace() method:

Element.classList.replace('oldClass', 'newClass');

There’s also the toggle() method, which works like a switch: adds a class if it’s not there, removes a class if it’s there.

Element.classList.toggle('myClass');

To check if an element contains a specific class, use the contains() method and pass the class you want to check as a string:

Element.classList.contains('myClass');

The method returns true when the class is specified. Otherwise it returns false.

Setting CSS Styles Using JavaScript

Since you’ve learned how to set and remove classes from an element, you can control the style of an element by adding or removing classes that change the style rules applied to an element.

For example, you might have the following style rules in your CSS code:

.color-primary {
  color: #007bff;
}

.color-secondary {
  color: #6c757d;
}

.bold {
  font-weight: 700;
}

If you have an element with the color-primary class applied, you can replace it with color-secondary class, or add the bold class.

Suppose you have a paragraph element as follows:

<p class="myParagraph">A new day is dawning</p>

Here’s how you change the style using classes:

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

// add a class to the element
p.classList.add('color-primary');

// replace a class
p.classList.replace('color-primary', 'color-secondary');

// remove a class
p.classList.remove('color-secondary');

At times, you might need to apply CSS directly to the DOM element you selected.

The Element object provides you with the style property which controls the inline style of the element.

For example, you can change the font weight of an element using the Element.style.fontWeight property like this:

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

p.style.fontWeight = '700'; // set font weight
p.style.textTransform = 'uppercase'; // set to uppercase
p.style.color = '#007bff'; // set color

You can change the border style of an element as follows:

p.style.border = '1px solid black';

The style property uses the camelCase instead of the hyphen-case, so font-weight becomes fontWeight and text-transform becomes textTransform.

And now you know how to set CSS styles using JavaScript. I would recommend that you change element styles by adding and removing classes because it’s more maintainable and follows the common approach.

Only access the style property if you won’t use the same style anywhere else.

Create, Add, and Remove Elements

Besides creating a DOM tree out of your HTML file, you also have the ability to create DOM elements programmatically using JavaScript.

This is possible because the document object also has the createElement() method, which allows you to create any Element object, which is essentially the tags you write in your HTML file.

For example, you can create a paragraph element like this:

const p = document.createElement('p');

After you create that element, you can add some content to it using the innerText property:

p.innerText = 'This paragraph is created using JavaScript';

Now you need to add it to the existing DOM tree so that it appears on the screen. You can attach the element anywhere inside your existing tree structure.

Suppose you want to add the paragraph to the body tag. Then you need to use the querySelector() method to select the body, and call the append() method on the element:

const p = document.createElement('p');

p.innerText = 'This paragraph is created using JavaScript';

const body = document.querySelector('body');

body.append(p);

The paragraph will be added as a child of the body tag as follows:

<body>
<p>This paragraph is created using JavaScript</p>
</body>

If you want to remove an element, you can call the remove() method from the element you want to remove.

This code will remove the paragraph element:

p.remove();

Insert Element at a Specific Position

The append() method that we explored above will insert a new element as the last child of the parent element.

If you want to insert the element at a specific position, you can use the insertBefore() method.

Let’s see an easy example. Suppose you have an HTML content as follows:

<body>
    <p id="first">The first paragraph</p>
</body>

To insert an element before the first paragraph, you need to call the insertBefore() method from the parent element (which is the body tag) and pass two arguments to it:

1. The new element you want to add
2. The sibling element before which the new element is inserted

Here’s an example of creating a second paragraph and inserting it before the first paragraph:

let p2 = document.createElement('p');

p2.innerText = 'The second paragraph';

let body = document.querySelector('body');
let p1 = document.querySelector('#first');

body.insertBefore(p2, p1);

As a result of running the script above, the second paragraph will be inserted before the first paragraph:

<body>
    <p>The second paragraph</p>
    <p id="first">The first paragraph</p>
</body>

Keep in mind that the DOM doesn’t provide an insertAfter method, because it’s not needed.

You use the append() method to insert an element at the last position, and if you want to control the position, use the insertBefore() method.

Manipulating Element Attributes

The classList object only provide methods to change the class of an element. If you want to change other attributes like id, href, or src, you can use the setAttribute() method.

The setAttribute() method accepts two arguments:

1. The name of the attribute to set
2. The value of the attribute to set

For example, here’s how to set the src attribute of an img tag:

<img id="profile-pic" src="feature-image.png" />

Select the img element using querySelector(), then call the setAttribute() method on the element:

const img = document.querySelector('#profile-pic');

img.setAttribute('src', 'new-image.jpg');

The src attribute value would be changed as follows:

<img id="profile-pic" src="new-image.jpg" />

If you want to the an attribute’s value, you can use the getAttribute() method.

Pass the attribute you want to check as an argument to the method. If the attribute is set, the method returns the value of that attribute as a string. If not, it returns null:

img.getAttribute('src'); // new-image.jpg
img.getAttribute('href'); // null

You can use both setAttribute() and getAttribute() methods to interact with any HTML attributes.

If you want to delete an attribute, use the removeAttribute() method:

const img = document.querySelector('#profile-pic');

// Delete the src attribute
img.removeAttribute('src');

Manipulating Data Attributes

The data attribute is used to store extra information on HTML elements. How you use the data is up to you.

Suppose you have an HTML tag as follows:

<div id="intro" data-attribute-theme="light" data-session="2022">
  Hello World!
</div>

You can access the data attributes from the dataset property of the element above like this:

// Select the div
let myDiv = document.querySelector('#intro');

// Access the dataset property
console.log(myDiv.dataset.session) // 2022

// Use camelCase when your data attribute is more than one word
console.log(myDiv.dataset.attributeTheme) // light

If you want to change the attribute value, you can reassign the right dataset property to a new value directly:

// Select the div
let myDiv = document.querySelector('#intro');

// Change the value of a data attribute
myDiv.dataset.session = '2023'

If you want to delete the data attribute, use the removeAttribute() method similar to how you delete a regular attribute:

let myDiv = document.querySelector('#intro');

// Remove data-session attribute
myDiv.removeAttribute('data-session');

// Remove data-attribute-theme attribute
myDiv.removeAttribute('data-attribute-theme');

And that’s how you manipulate the data attribute using JavaScript.

Conclusion

And that's all for now about DOM element manipulations. At this point, I hope you can see why JavaScript is required to build a modern web application. It allows you to interact and change the content that exists in your website.

This enables a whole lot of dynamic changes to the website you created.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

I’ll compare the arrow function with the regular function syntax, I'll show you how to convert a regular function into an arrow function easily, and I'll discuss why the arrow function syntax is recommended over the regular function.

Here's what we'll cover:

1. What Is the Arrow Function Syntax?
2. How to Convert a Regular Function to an Arrow Function Easily
3. Why Arrow Functions Are Recommended Over Regular Functions
4. Arrow Functions Are Better for Short Functions
5. Arrow Functions Have an Implicit Return Statement
6. Arrow Functions Don’t Have this Binding
7. When You Should Not Use Arrow Functions?
8. Conclusion

Let’s dive in!

What Is the Arrow Function Syntax?

When you need to create a function in JavaScript, the main method is to use the function keyword followed by the function name as shown below:

function greetings(name) {
  console.log(`Hello, ${name}!`);
}

greetings('John'); // Hello, John!

The arrow function syntax allows you to create a function expression that produces the same result as the code above.

Here’s the greetings() function again, but using the arrow function syntax:

const greetings = name => {
  console.log(`Hello, ${name}!`);
};

greetings('John'); // Hello, John!

When you declare a function with the arrow function syntax, you need to assign the declaration to a variable so that the function has a name.

Basically, the arrow function syntax looks as follows:

const myFunction = (param1, param2, ...) => {
  // function body
}

In the code above, the myFunction is the variable that holds the function. You can call the function as myFunction() later in your code.

(param1, param2, ...) are the function parameters. You can define as many parameters as required by the function.

Then you have the arrow => to indicate the beginning of the function. After that, you can write curly brackets {} to indicate the function body, or remove them if you have a single-line function. More on this later.

At first, the arrow function may seem weird as you are used to seeing the function keyword. But as you start using the arrow syntax, you will see that it’s very convenient and easier to write.

Let me show you an easy way to convert a regular function to an arrow function next.

How to Convert a Regular Function to an Arrow Function Easily

You can follow these three easy steps to convert a regular function to an arrow function:

1. Replace the function keyword with the variable keyword const
2. Add the = symbol after the function name and before the parentheses
3. Add the => symbol after the parentheses

Usually, a function is never changed after the declaration, so we use the const keyword instead of let.

The code below should help you visualize the steps:

function greetings(name) {
  return `Hello, ${name}!`;
}

// step 1: replace function with const
const greetings(name) {
  return `Hello, ${name}!`;
}

// step 2: add = after the function name
const greetings = (name) {
  return `Hello, ${name}!`;
}

// step 3: add => after the parentheses
const greetings = (name) => {
  return `Hello, ${name}!`;
}

The three steps above are enough to convert any old JavaScript function syntax to the new arrow function syntax.

When you have a single line function, there’s a fourth optional step to remove the curly brackets and the return keyword as follows:

// from this
const greetings = (name) => {
  return `Hello, ${name}!`;
};

// to this
const greetings = (name) => `Hello, ${name}!`;

When you have exactly one parameter, you can also remove the parentheses:

// from this
const greetings = (name) => `Hello, ${name}!`;

// to this
const greetings = name => `Hello, ${name}!`;

But the last two steps are optional. Only the first three steps are required to convert any JavaScript function created using the function keyword into the arrow function syntax.

Why Arrow Functions Are Recommended Over Regular Functions

The arrow function syntax offers improvements to the way you write a function in JavaScript, such as:

• You can write short functions in a more straightforward manner
• For single-line functions, the return statement can be implicit
• The this keyword is not bound to the function.

Let’s see how these improvements work with practical examples next.

Arrow Functions Are Better for Short Functions

Suppose you have a single-line function that prints a string to the console. Using the function keyword, here’s how you would write the function:

function greetings(name) {
  console.log(`Hello, ${name}!`);
}

If you use the arrow function syntax, you can omit the curly brackets, creating a single-line function as shown below:

const greetings = (name) => console.log(`Hello, ${name}!`);

Even more, you can remove the parentheses that surround the function parameters when you have exactly one parameter:

const greetings = name => console.log(`Hello, ${name}!`);

If your function has no parameter, then you need to pass empty parentheses between the assignment and the arrow syntax as shown below:

const greetings = () => console.log(`Hello, World!`);

When using the arrow function syntax, the curly brackets are required only when your function is more than a single line. For example:

const greetings = () => {
  console.log('Hello World!');
  console.log('How are you?');
};

When you use the regular function keyword, you can’t omit the curly brackets no matter what.

Arrow functions are also great for situations where you don’t need to name the function, such as callbacks:

const myArray = [1, 2, 3];

// From this:
myArray.forEach(function (item) {
  console.log(item);
});

// To this:
myArray.forEach(item => console.log(item));

Or when you need to create an Immediately Invoked Function Expression (IIFE):

// From this:
(function () {
  console.log('Hello World');
})();

// To this:
(() => console.log('Hello World'))();

As you can see, using the arrow function syntax makes your code much more clean and concise.

Arrow Functions Have an Implicit Return Statement

When you have a single-line arrow function, the return statement will be added implicitly by JavaScript. This means you shouldn't add the return keyword explicitly.

To show you what I mean, suppose you have a function that sums two numbers as follows:

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

When you write the function above using the arrow function syntax, you need to remove the curly brackets and the return keyword:

const sum = (a, b) => a + b;

If you didn’t remove the return keyword, then JavaScript will throw an error, saying an opening curly bracket { is expected.

When you use arrow functions, only write the return statement explicitly when you have multi-line statements:

const sum = (a, b) => {
  const result = a + b;
  return result;
};

When you remove the curly brackets, don’t forget to remove the return keyword if you use it.

Arrow Functions Don’t Have this Binding

One significant difference between the arrow function and the regular function syntax is in how they handle the this keyword.

In a regular function, the this keyword refers to the object from which you call the function. In an arrow function, the this keyword refers to the object from which you define the function.

To show you what I mean, suppose you have a person with the following properties and methods:

const person = {
  name: 'Nathan',
  skills: ['HTML', 'CSS', 'JavaScript'],

  showSkills() {
    this.skills.forEach(function (skill) {
      console.log(`${this.name} is skilled in ${skill}`);
    });
  },
};

person.showSkills();

If you run the code above, the result of calling the showSkills() method would be:

undefined is skilled in HTML
undefined is skilled in CSS
undefined is skilled in JavaScript

Here, the this keyword refers to the global Window object because we called the showSkills() method outside of the person object.

In the global object, the name property is undefined. Now, let’s rewrite the callback function using the arrow syntax:

const person = {
  name: 'Nathan',
  skills: ['HTML', 'CSS', 'JavaScript'],

  showSkills() {
    this.skills.forEach(skill => {
      console.log(`${this.name} is skilled in ${skill}`);
    });
  },
};

person.showSkills();

Run the code again, and the result would be:

Nathan is skilled in HTML
Nathan is skilled in CSS
Nathan is skilled in JavaScript

Here, the this keyword refers to the object from which the arrow function is defined, which is the person object.

This one behavior is what makes people prefer arrow functions, because it makes more sense to have this refer to the object from which you define that function rather than from which you call it.

When You Should Not Use Arrow Functions?

Arrow functions are typically preferred over standard functions, but there are a few situations when you shouldn't use the arrow function.

One of these situations is when you define an object method. Back to our person object example above, suppose you write the showSkills() method as an arrow function like this:

const person = {
  name: 'Nathan',
  skills: ['HTML', 'CSS', 'JavaScript'],

  showSkills: () => {
    this.skills.forEach(skill => {
      console.log(`${this.name} is skilled in ${skill}`);
    });
  },
};

person.showSkills();

Running the above code will cause an error:

TypeError: Cannot read properties of undefined (reading 'forEach')

When inside an object, the this keyword refers to the current object only when you declare the method using the standard syntax (methodName() or methodName: function(){ })

When you declare an object method using the arrow function, the this keyword refers to the global object, and the skills property is undefined there. Never use the arrow function when declaring a method.

Conclusion

And that's all about arrow functions. Now you’ve learned the differences between arrow functions and regular functions, how to convert a regular function into an arrow function, as well as when the arrow functions are recommended (and not recommended!).

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

I'm also going to show some examples that'll help you understand how and where you may want to use the method. Don’t worry! reduce() is actually simple once you understand how it works.

How the reduce() Method Works

The reduce() method got its name from the functionality it provides, which is to iterate and “reduce” an array's values into one value.

The easiest way to understand how the reduce() method works is through an example, so let’s see an easy one first.

Suppose you have an array of objects that contain a name and price property as follows:

const items = [
  { name: 'Apple', price: 1 },
  { name: 'Orange', price: 2 },
  { name: 'Mango', price: 3 },
];

Next, you are tasked to get the sum of the price property and get the total price. You can do this using the forEach() method as follows:

const items = [
  { name: 'Apple', price: 1 },
  { name: 'Orange', price: 2 },
  { name: 'Mango', price: 3 },
];

let totalPrice = 0;

items.forEach(item => {
  totalPrice += item.price;
})

console.log(totalPrice); // 6

First, we declare the totalPrice variable and assign 0 as its value. Next, we called the forEach() method to iterate over the items array, adding the price of each item to the totalPrice.

The code above works, but since we’re looking to get a single value from the array, the reduce() method would be more suited for the task.

The reduce() method works in a similar manner to the forEach() method, with the added ability to collect the result of each iteration as a single value.

Let’s try to get the total price using the reduce() method. First, you need to call the reduce() method and pass two parameters to the callback function: accumulator and item.

const totalPrice = items.reduce((accumulator ,item) => {
  return accumulator += item.price;
}, 0)

The accumulator parameter is the single value that will be returned by the reduce() method. It will contain the value returned by the callback function in each iteration.

The item parameter is simply the item from the array, which will change in each iteration just like in the forEach() method.

In the first iteration, the accumulator parameter will contain whatever value you passed as the second argument of the reduce() method. In the above case, it’s 0.

When we use the forEach() method, we do addition assignments += to the totalPrice variable, so we declare it using the let keyword. But when using the reduce() method, you can use the const keyword because we only assign a value to the totalPrice once.

And that’s basically how the reduce() method works. It iterates over each element in your array, and each iteration returns a single value, which is the accumulator.

When the iteration is finished, the accumulator value will be returned from the method.

When to Use the reduce() Method

As shown above, the reduce() method is recommended when you need to have a single value returned from iterating over your array.

This includes:

• Summarizing your values into a single value
• Grouping similar items together
• Removing duplicates from an array

The single value returned by the method can also be an array of objects, therefore containing multiple values.

You’ve seen how to sum values in the previous section, so let’s see some examples of grouping items and removing duplicates next.

How to Group Similar Items Together

Suppose you have an array of objects again, but this time, the objects have name and category properties:

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Onion', category: 'Vegetable' },
  { name: 'Orange', category: 'Fruit' },
  { name: 'Lettuce', category: 'Vegetable' },
];

Now, you want to group these items based on their category value. You can use the reduce() method and return a single object value.

First, you call the reduce method and pass an empty object {} as the initial accumulator value:

const groupedItems = items.reduce((accumulator, item) => {

}, {})

Next, you check if the accumulator object already has a property with the same name as the category from your item object.

If not, then declare that property as an empty array as follows:

const category = item.category;
if (!accumulator[category]) {
  accumulator[category] = []
}

After that, push the item.name property to the accumulator[category] property, and return the accumulator like this:

accumulator[category].push(item.name);
return accumulator

And that’s it. Now you have an object that groups the items based on the category value:

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Onion', category: 'Vegetable' },
  { name: 'Orange', category: 'Fruit' },
  { name: 'Lettuce', category: 'Vegetable' },
];

const groupedItems = items.reduce((accumulator, item) => {
  const category = item.category;
  if (!accumulator[category]) {
    accumulator[category] = []
  }
  accumulator[category].push(item.name);
  return accumulator
}, {})

console.log(groupedItems);
// { Fruit: [ 'Apple', 'Orange' ], Vegetable: [ 'Onion', 'Lettuce' ] }

Next, let’s see how to remove duplicates using the reducer() method:

How to Remove Duplicates Using the reduce() Method

To remove duplicates using the reduce() method, you need to declare an array as the accumulator value.

In each iteration, check if the item is already included in the accumulator using the includes() method.

If the item isn’t already included, push the item into the accumulator. See the example below:

const items = [1, 2, 3, 1, 2, 3, 7, 8, 7];

const noDuplicateItems = items.reduce((accumulator, item) => {
  if (!accumulator.includes(item)) {
    accumulator.push(item);
  }
  return accumulator;
}, []);

console.log(noDuplicateItems); 
// [ 1, 2, 3, 7, 8 ]

Here, you can see that the reduce() method returns an array (without any duplicates) instead of a single value.

Why the Initial Accumulator Value is Important

In all the examples above, you’ve seen how we added an initial value for the accumulator as the second argument passed to the reduce() method.

If you don’t add the initial accumulator value, then reduce() will take the first item in your array as the initial accumulator value.

You can test this by logging the accumulator value inside the callback function as follows:

const items = [
  { name: 'Apple', price: 1 },
  { name: 'Orange', price: 2 },
  { name: 'Mango', price: 3 },
];

const totalPrice = items.reduce((accumulator ,item) => {
  console.log(accumulator); // log the accumulator
  return accumulator += item.price;
}, 0)

Run the code above, and you’ll get the following result:

0
1
3

In the first iteration, the accumulator uses the initial value we passed as the second argument to the reduce() method, which is a 0.

If you remove 0 from the code, then the output will be:

{ name: 'Apple', price: 1 }
[object Object]2

Because we didn’t provide an initial value for the accumulator, the method takes whatever value we placed at index 0 as the initial value of the accumulator.

Depending on the content of your array, the initial value can be an object, an array, or a single value. Relying on the value of the array as the initial accumulator value is considered bad practice as it can lead to bugs, so you should always define the initial accumulator value.

Full reduce() Callback Parameters

One more thing before we conclude the article. In all examples above, we define 2 parameters for the callback function, but the reduce() method actually passes 4 arguments to the callback function:

• The accumulator value
• The item value
• The index of the current item in iteration
• The array from which you call the method itself

The full syntax of the method is as follows:

Array.reduce((accumulator, item, index, array) => {
  // TODO: Define the process for each iteration here
}, initialAccumulatorValue)

In most cases, you only need the first two parameters, but if you somehow need the index and array values, they are always available.

Conclusion

And there you have it! At first sight, the reduce() method looks more complicated than other JavaScript array methods like forEach() and filter(). But once you understand the concept of reducer and accumulator, the method is actually quite simple.

In programming terms, a “reducer” function always returns a single value, so the reduce() method iterates over the values defined in your array and reduces them into a single value.

Inside the callback function of the reduce() method, you can do any kind of operation you need to achieve a certain result, such as summarizing and grouping certain values, or removing duplicates.

This is done with the help of the “accumulator”, which stores the value returned from the previous iteration. You set the initial value of the accumulator by passing a second argument to the reduce() method.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

Here's what we'll cover:

1. How a Promise Works
2. Callbacks vs Promises
3. When to Use Promises Instead of Callbacks
4. Promises and the Fetch API
5. The Promise.all() Method
6. The Promise.allSettled() Method
7. The Promise.any() Method
8. The Promise.race() Method
9. Conclusion

How a Promise Works

Basically, a Promise object represents a “pending state” in the most common sense: the promise will eventually be fulfilled at a later date.

To give you an illustration, suppose you want to buy a new phone to replace your old phone, so you open a messaging app to contact a phone store. This is similar to how you access a variable or a function that returns a promise:

Illustration 1: Sending a message to a store is like how you access a Promise object in JavaScript

After you send a message explaining what you want, you get an automated message saying that a representative will answer your message shortly. This is similar to receiving a Promise object:

Illustration 2: An automated message from the store you contacted before. This is the Promise object that you receive in JavaScript

A minute later, you get a new message from a human representative, saying that the phone model you want to buy is available for purchase. This is when the Promise was resolved:

Illustration 3: A store representative replied to your message. This is like when a Promise gets resolved

Or, in a completely different scenario, the representative tells you that the store doesn’t sell phones, because the store is a food store and not a phone store. This means the Promise was rejected:

Illustration 4: The representative replied that the store doesn't sell phones. This is like when a Promise gets rejected

This illustration shows how the Promise object in JavaScript works:

• A Promise is like the automated message that we saw earlier. It represents a pending state that must be fulfilled at some point later.
• The human representative saying that the phone model is available is similar to the resolve() method, which shows that the Promise is fulfilled.
• The representative telling you that you’re contacting the wrong store is like the reject() method, which is the method used to show that the Promise can’t be fulfilled because of an error.

A typical promise implementation looks like this:

let p = new Promise((resolve, reject) => {
  let isTrue = true;
  if (isTrue) {
    resolve('Promise resolved');
  } else {
    reject('Promise rejected');
  }
});

When creating a new Promise object, we need to pass a callback function that will be called immediately with two arguments: the resolve() and reject() functions.

Depending on the result of the Promise, either the resolve() or the reject() function will be called to end the pending state.

To handle the Promise object, you need to chain the function call with the then() and catch() functions as shown below:

let p = new Promise((resolve, reject) => {
  let isTrue = true;
  if (isTrue) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

p
.then(message => console.log(`Promise resolved: ${message}`))
.catch(message => console.log(`Promise rejected: ${message}`));

The resolve() function corresponds to the then() function, while reject() corresponds to the catch() function. You can change the isTrue value to false to test this.

Here’s an illustration of the promise process:

The Process happening inside a Promise. Depending on the code run inside the Promise, it will settle as resolved or rejected.

Using the promise pattern, you can call your functions sequentially by placing the next process inside the then() or catch() methods.

Callbacks vs Promises

The promise pattern was created to replace the use of callbacks in certain situations. By using promises, the code we write is more intuitive and maintainable.

Going back to the messaging illustration, let’s create an example of using callbacks to handle the situation.

First, we declare the two variables required for this situation, called isPhoneStore and isPhoneAvailable:

const isPhoneStore = true;
const isPhoneAvailable = true;

Next, we write a function that will process incoming messages. This function will mimic the promise pattern, and it will resolve only when isPhoneStore and isPhoneAvailable are true:

function processMessage(resolveCallback, rejectCallback) {
  if (!isPhoneStore) {
    rejectCallback({
      name: 'Wrong store',
      message: 'Sorry, this is a food store!',
    });
  } else if (!isPhoneAvailable) {
    rejectCallback({
      name: 'Out of stock',
      message: 'Sorry, the X phone is out of stock!',
    });
  } else {
    resolveCallback({
      name: 'OK',
      message: 'The X phone is available! How many you want to buy?',
    });
  }
}

Here, you can see that the function processMessage accepts two callback functions: resolveCallback and rejectCallback.

When we call the function, we need to provide the callback functions, similar to how we need to chain the then() and catch() methods when accessing a promise:

processMessage(
  value => console.log(value),
  reason => console.log(reason)
);

In the call to processMessage above, the first argument is the resolveCallback() function, and the second argument is the rejectCallback() function.

If you run the code above, then the resolveCallback() function will be called. You can change one of the two variables to false to trigger the rejectCallback() function.

Now that we have a working callback example, let’s rewrite the code using a promise as follows:

const isPhoneStore = true;
const isPhoneAvailable = true;

function processMessage() {
  return new Promise((resolve, reject) => {
    if (!isPhoneStore) {
      reject({
        name: 'Wrong store',
        message: 'Sorry, this is a food store!',
      });
    } else if (!isPhoneAvailable) {
      reject({
        name: 'Out of stock',
        message: 'Sorry, the X phone is out of stock!',
      });
    } else {
      resolve({
        name: 'OK',
        message: 'The X phone is available! How many you want to buy?',
      });
    }
  });
}

processMessage()
  .then(response => console.log(response))
  .catch(error => console.log(error));

Here, you can see that the processMessage() function returns a Promise object that gets resolved only when both isPhoneStore and isPhoneAvailable are true.

When one of the two variables is false, then the Promise object will be rejected.

Here you can see that you don’t need to add two extra parameters to the processMessage() function just for the callbacks. Also, when calling the function, you use the then() and catch() methods to handle the result of the promise.

The use of a promise makes the code easier to understand. Here’s the comparison of the two side by side:

Callbacks vs Promises code comparison

I don’t know about you, but I sure love writing and reading the promise pattern more than the callback pattern. 😉

When to Use Promises Instead of Callbacks

As I've mentioned before, the promise object is created to replace callback functions in certain situations.

And if you examine the code for the promise object above closely, you'll see that even promises use callbacks inside the then() and catch() methods. This means Promises don't eliminate the need for callbacks.

Promises are used when you need to wait for a certain task to finish before running the next process.

For example, suppose you have three functions that need to run sequentially from one to three.

Each function runs for a few seconds. We simulate this using the setTimeout() method:

function stepOne(value){
  setTimeout(() => {
    console.log(value);
  }, 3000);
}

function stepTwo(value){
  setTimeout(() => {
    console.log(value);
  }, 2000);
}

function stepThree(value){
  setTimeout(() => {
    console.log(value);
  }, 1000);
}

Using callbacks, you can define parameters on the stepOne() and stepTwo() functions, then call those functions sequentially like this:

function stepOne(value, callback) {
  setTimeout(() => {
    console.log(value);
    callback();
  }, 3000);
}

function stepTwo(value, callback) {
  setTimeout(() => {
    console.log(value);
    callback();
  }, 2000);
}

function stepThree(value, callback) {
  setTimeout(() => {
    console.log(value);
    callback();
  }, 1000);
}

// Run the functions sequentially with callbacks
stepOne(1, () => {
  stepTwo(2, () => {
    stepThree(3, () => {
      console.log("All steps completed.");
    });
  });
});

The nested callbacks where you pass the next function inside the previous function is famously known as the "callback hell". This code pattern is hard to read and it's messy.

With promises, you can rewrite the code above as follows:

function stepOne(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 3000);
  });
}

function stepTwo(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 2000);
  });
}

function stepThree(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 1000);
  });
}

// Run the functions sequentially with Promises
stepOne(1)
  .then(() => stepTwo(2))
  .then(() => stepThree(3))
  .then(() => {
    console.log("All steps completed.");
  });

Here, you can see that each function returns a promise that resolves when the timeout is finished. The function calls using then() methods maintain a clear order of steps.

In a real-world project where you have many lines of code inside the callback functions, using Promises provides a massive gain in your ability to read, extend, and maintain the code.

But if you're running code that doesn't have to wait for certain processes, then you can use callbacks just fine.

For example, the array methods like forEach() use callbacks, so there's no need for promises there:

const myArray = [1, 2, 3, 4];

myArray.forEach(value => console.log(value + 5));

Another use of promises is when you use the Fetch API, which is used to run network requests. Let's see how that works now.

Promises and the Fetch API

The Fetch API always returns a Promise object, so you need to handle it using the then() and catch() methods as shown below:

fetch('<Your API URL>')
  .then(response => console.log(response))
  .catch(error => console.log(error));

If you run a fetch() function and assign the result to a variable, the variable will contain a Promise object:

const response = fetch('<Your API URL>');
console.log(response); // Promise {<pending>}

As you can see, the Promise object is assigned to the response variable in a pending state. If you wait a while and then log the object again, the output will be fulfilled:

Promise {<fulfilled>: Response}

The Fetch API will return a Response object when the promise is fulfilled. This is also why I usually name the parameter inside the then() method as response . Feel free to name the response as message , value , or anything your team agreed on.

Now that you’ve learned how the Promise object works, it’s time to learn some extra methods related to this object.

The Promise.all() method

More than just replacing the callback pattern, JavaScript also provides some methods that you can use to work with Promise objects. For example, suppose you deal with three different promises in your project like this:

const p1 = Promise.resolve('Success');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Now, suppose you need all three promises to resolve before moving to the next step. Knowing what we know about promises, we can chain the promises using the then() method like this:

p1.then(message1 => {
  return p2.then(message2 => {
    return p3.then(message3 => {
      return [message1, message2, message3];
    });
  });
}).then(messages => {
  console.log(messages);
});

In this example, each then() method returns another promise, creating nested callbacks. When the p3 promise is resolved, the messages are returned as a single array.

The last then() method would then log the messages array returned by the promises. This approach works, but this is exactly the type of code we want to avoid when using promises.

Instead of using nested callbacks, we can use the Promise.all() method instead. See the example below:

const p1 = Promise.reject('Error From Promise One');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Promise.all([p1, p2, p3])
  .then(messages => console.log(messages))
  .catch(error => console.log(error));

The Promise.all() method accepts an array of promises, and when all promises are resolved, the method will pass the messages returned by the promises as an array and pass it to the then() method.

If one of the promises is rejected, then the method returns the first rejection it encounters and stops any further process.

This method enables you to work with many promises without having to create nested callbacks. You should use this method when you need all promises to resolve.

The Promise.allSettled() method

The Promise.allSettled() method is similar to the Promise.all() method, but instead of proceeding to catch() when one of the promises got rejected, the method will store the reject result and continue processing other promises.

When all promises are settled, the method will return an array of objects that contains the details of each promise. For example, suppose you run the following code:

const p1 = Promise.reject('Error From Promise One');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Promise.allSettled([p1, p2, p3]).then(response => {
  console.log(response);
});

Then the result would be:

[
  { status: 'rejected', reason: 'Error From Promise One' },
  { status: 'fulfilled', value: 200 },
  { status: 'fulfilled', value: 'Finished' }
]

As you can see, the response variable is an array of objects showing the status and the value or reason for that status. When calling this method, you don't need to chain the catch() method.

You should use this method when you always need to know the result of each promise.

The Promise.any() method

The Promise.any() method is similar to the Promise.all() method, except that it returns only a single value from any promise that calls the resolve() function first. If you try the method as follows:

const p1 = Promise.reject('Error From Promise One');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Promise.any([p1, p2, p3]).then(response => {
  console.log(response);
});

The output will be:

200

This is because the first promise is rejected, and once the second promise is resolved, the any() method stops any further execution of promises and returns the resolved value.

This method returns an error only when all promises are rejected. You should use this method only when you need to get a single promise resolved out of many promises.

The Promise.race() method

The Promise.race() method is like the Promise.any() method, with one difference: the promise is settled when any promise is resolved or rejected:

const p1 = Promise.reject('Error From Promise One');
const p2 = Promise.resolve(200);
const p3 = Promise.resolve('Finished');

Promise.race([p1, p2, p3])
  .then(response => console.log(response))
  .catch(reason => console.log(reason));

Since p1 returns a rejection, then the Promise.race() method returns the rejection instead of continuing the process:

Error From Promise One

You should use this method only when you need to get a single promise to settle, no matter if the result is resolved or rejected.

As you can see, these four methods of the Promise object provides you with a powerful composition tool that helps you decide how to handle multiple promises in your project.

Conclusion

And now you’ve learned how the Promise object works in JavaScript. A promise is easy to understand when you grasp the three states that can be generated by the promise: pending, resolved, and rejected.

You’ve also learned how promises can be used to replace callbacks, when to use promises instead of callbacks, and how to use promise methods when you need to handle many promises in your project.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

In this handbook, you'll learn how to work with arrays in JavaScript. We'll cover the specific rules you need to follow when creating an array, as well as how to use array methods to manipulate and transform your array as desired.

Table of Contents

1. How Arrays Work in JavaScript
2. How to Create an Array in JavaScript
3. How to Access an Array's Elements
4. The Array length Property
5. How to Add Elements to an Array
6. How to Remove an Element from an Array
7. How To Check If a Variable is an Array
8. How to Iterate or Loop Over an Array
9. How to Convert an Array into a String
10. How to Compare Two Arrays
11. How to Copy an Array
12. How to Merge Two Arrays as One
13. How to Search an Array
14. How to Sort an Array
15. How to Create Multi-dimensional Arrays
16. JavaScript Array Methods Cheat Sheet
17. Wrapping Up

How Arrays Work in JavaScript

In JavaScript, an array is implemented as an object that can have a group of items, elements, or values as an ordered collection. This means you can access an array's element using its position in the collection. You'll see why this is important in the next section.

An array can hold elements of different data types, and the size of the array is not fixed. This means that you can add as many elements to an array as you want.

How to Create an Array in JavaScript

There are two ways you can create an array in JavaScript:

• Using the square brackets []
• Using the Array() constructor

The square brackets [] is a literal notation used to create an array. The array elements are defined inside the brackets, with each element separated using a comma ,.

The following example shows how to create an array named myArray that has three elements of different types: a Number, a String, and a Boolean.

let myArray = [29, 'Nathan', true];

And here's how to create an array with 3 number elements:

let myNumbers = [5, 10, 15];

You can specify as many elements as you want inside the square brackets.

Another way to create an array is to use the Array() constructor, which works like the square brackets:

let myArray = Array(29, 'Nathan', true);

// or
let myNumbers = new Array(5, 10, 15);

Note that the constructor function can be called with or without the new operator. Both create an array object just fine.

In most code examples and codebases, you'll most likely see developers use the square brackets to create an array instead of using the constructor. This is because it's faster to type [] instead of Array().

How to Access an Array's Elements

As I've said before, an array is an ordered collection, so you can access an element from its position (also known as index number) in the array.

To access an array's element, you need to specify the array name followed by square brackets. Inside the square brackets, specify the index of the element you want to access.

For example, here's how you access the first element of myArray:

let myArray = [29, 'Nathan', true];

console.log(myArray[0]); // 29
console.log(myArray[1]); // Nathan
console.log(myArray[2]); // true

The array index number starts from 0 and increases by 1 for each element added to the array.

If you try to access an index number that hasn't been assigned any value yet, JavaScript will return undefined as shown below:

let myArray = [29, 'Nathan', true];

console.log(myArray[3]); // undefined
console.log(myArray[4]); // undefined
console.log(myArray[100]); // undefined

You can also replace an element on a certain index number with a new element by using the assignment = operator.

The following example shows how to replace the third element (boolean) with a string:

let myArray = [29, 'Nathan', true];

// Replace the third element
myArray[2] = 'Sebhastian';

console.log(myArray); // [ 29, 'Nathan', 'Sebhastian' ]

In the example above, you can see that the true boolean value is replaced with the string 'Sebhastian'. Next, let's take a look at the length property.

The Array length Property

The length property shows how many elements an array has. You can access this property using the dot . notation as shown below:

let myArray = [29, 'Nathan', true];

console.log(myArray.length); // 3

let animals = ['Dog', 'Cat'];

console.log(animals.length); // 2

The length property is updated each time you add or remove elements from an array.

How to Add Elements to an Array

To add one or more elements to an array, you can use the array push() and unshift() methods.

The push() method adds new elements to the end of the array, while the unshift() method inserts new elements at the start of the array:

let animals = ['Dog', 'Cat'];

animals.push('Horse', 'Fish');

console.log(animals);
// [ 'Dog', 'Cat', 'Horse', 'Fish' ]

animals.unshift('Bird');

console.log(animals);
// [ 'Bird', 'Dog', 'Cat', 'Horse', 'Fish' ]

Here, notice that you can use a comma to separate the elements you want to add to the array.

Next, let's see how you can remove elements from an array.

How to Remove an Element from an Array

To remove an element from an array, you can use the shift() and pop() methods, depending on the position of the element you want to remove.

Use the shift() method to remove the first element, and use pop() to remove the last element in the array:

let animals = ['Dog', 'Cat', 'Horse', 'Fish'];

animals.shift();

console.log(animals);
// [ 'Cat', 'Horse', 'Fish' ]

animals.pop();

console.log(animals);
// [ 'Cat', 'Horse' ]

Both shift() and pop() can only remove one element at a time. If you want to remove an element in the middle of an array, you need to use the splice() method.

How to Use splice() to Remove or Add Element(s)

The array splice() method is used to remove or add elements at specific positions. You use this method when push, pop, shift, and unshift can't get the job done.

To remove elements using the splice() method, you need to specify two arguments: the index number to start array manipulation, and the number of elements to delete.

For example, suppose you want to delete two elements at index 1 and 2 in the animals array. Here's how you do it:

let animals = ['Dog', 'Cat', 'Horse', 'Fish'];

animals.splice(1, 2);

console.log(animals);
// [ 'Dog', 'Fish' ]

The splice(1, 2) means start array manipulation at index 1, then delete 2 elements from there.

To add elements using splice(), you need to specify the elements to add after the second argument.

For example, here I add a string value 'Bird' and 'Squid' at index 1:

let animals = ['Dog', 'Cat'];

animals.splice(1, 0, 'Bird', 'Squid');

console.log(animals);
// [ 'Dog', 'Bird', 'Squid', 'Cat' ]

If you don't want to delete any elements, you can pass 0 as the second argument to the splice() method. You then specify the elements you want to add.

The splice() method can be confusing the first time you see it, but don't worry! You'll memorize how it works with more practice.

How to Check if a Variable is an Array

To check if a variable is an array, you can use the Array.isArray() method which tests whether the argument given to the method is an array or not.

This method returns true when you pass an array to it, and false for anything else:

let myArray = [1, 2, 3];
let notAnArray = 'Hello!';

console.log(Array.isArray(myArray)); // true
console.log(Array.isArray(notAnArray)); // false

Note that you need to specify the Array class when calling the isArray() method.

This is because isArray() is a static method, so you can only call it directly from the class that defines the method.

How to Iterate or Loop Over an Array

There are 4 ways you can iterate over an array in JavaScript, depending on the method you use:

1. Using a for loop
2. Using a while loop
3. Using the for...in loop
4. Using the for...of loop
5. Using the forEach() method

Let's learn how to use these 4 methods with examples.

1. How to use a for loop

To iterate over an array using a for loop, you need to use the array length as the condition expression.

In the following example, a for loop will continue to run as long as the variable i is less than the array's length:

let animals = ['dog', 'bird', 'cat', 'horse'];

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

You can manipulate the elements of the array inside the for loop's body.

2. How to use a while loop

Another way to iterate over an array is to use a while loop. You need to use a variable and the array's length to control when the iteration stops, like the for loop previously:

let animals = ['dog', 'bird', 'cat', 'horse'];

let i = 0;

while (i < animals.length) {
  console.log(animals[i]);
  i++;
}

Inside the while loop, you need to increment the i variable by one to avoid an infinite loop.

3. How to use a for...in loop

The for...in loop is another syntax that you can use to iterate over an array. This loop returns the index position of the array, so you can use it like this:

let animals = ['dog', 'bird', 'cat', 'horse'];

for (i in animals) {
  console.log(animals[i]);
}

The for...in loop is more concise when compared to a for or while loop, but it's better to use a for...of loop when iterating over an array.

4. How to use a for...of loop

The for...of loop can be used to iterate over an array. It returns the array's element in each iteration:

let animals = ['dog', 'bird', 'cat', 'horse'];

for (element of animals) {
  console.log(element);
}

While the for...in loop returns the index position, the for...of loop returns the element directly.

5. How to use the forEach() method

The JavaScript array object itself has a method called forEach() that you can use to iterate over an array from position 0 to the last position.

The method accepts a callback function that gets executed in each iteration. For each iteration, the method also passes the array's element and index position. Here's an example of using the method:

let animals = ['dog', 'bird', 'cat', 'horse'];

animals.forEach(function (element, index) {
  console.log(`${index}: ${element}`);
});

The output will be:

0: dog
1: bird
2: cat
3: horse

And that's how you iterate over an array using the forEach() method. You can use any method you like best.

How to Convert an Array into a String

To convert an array into a string, you can use the toString() or join() method.

The toString() method converts a given array into a string, with the elements separated by a comma:

const animals = ['cat', 'bird', 'fish'];

console.log(animals.toString()); // "cat,bird,fish"

The join() method also converts an array into a string, but you can pass a specific string separator as its argument.

The following example shows how to use a slash / and an empty string as the string separator:

const animals = ['cat', 'bird', 'fish'];

console.log(animals.join()); // "cat,bird,fish"

console.log(animals.join('/')); // "cat/bird/fish"

console.log(animals.join('')); // "catbirdfish"

Behind the scenes, the toString() method actually calls the join() method to create the string.

How to Compare Two Arrays

JavaScript arrays are treated as objects. So when you compare two arrays, the comparison will look to the reference — that is, the address to the memory location that stores that array — instead of the actual values.

The comparison of two arrays will return false even when they contain the same elements:

let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];

console.log(arrayOne === arrayTwo); // false

This is because arrayOne and arrayTwo are different objects stored in different memory locations.

The only way an array comparison would return true is when both variables refer to the same array object. In the example below, the arrayTwo variable is a reference to arrayOne:

let arrayOne = [7, 8, 9];
let arrayTwo = arrayOne;

console.log(arrayOne === arrayTwo); // true

But this won't work when you need to compare two arrays from different references. One way to compare arrays is by converting the array to a JSON object.

Compare arrays by converting them to JSON object

Before comparing two different arrays, you need to convert them into JSON objects by calling the JSON.stringify() method.

You can then compare the two serialized strings as follows:

let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];

console.log(JSON.stringify(arrayOne) === JSON.stringify(arrayTwo)); // true

But this solution compares the arrays indirectly, and having the same values in different orders will return false instead of true.

To compare the elements of two arrays programmatically, you need to use another solution.

How to compare arrays with the every() method

Another way you can compare two arrays is by using the combination of the length property and the every() method.

First, you compare the length of the arrays so the comparison doesn't return true when the second array contains more elements than the first array.

After that, you test if the element on the first array is equal to the element on the second array, at the same index position. Use the && operator to join the comparison as shown below:

let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];

let result =
  arrayOne.length === arrayTwo.length &&
  arrayOne.every(function (element, index) {
    // compare if the element matches in the same index
    return element === arrayTwo[index];
  });

console.log(result); // true

This way, you compare if the element at a specific index is really equal or not.

Still, this solution requires both arrays to have equal elements at a certain index in order to return true.

If you don't care about the order and only want both arrays to have the same elements, you need to use the includes() method instead of the equality === operator.

How to compare arrays with the includes() method

In order to compare array elements that are out of order, you can use the combination of the every() and includes() methods.

The includes() method tests whether an array has a specific element you specified as its argument:

let arrayOne = [7, 8, 9];
let arrayTwo = [9, 7, 8];

let result =
  arrayOne.length === arrayTwo.length &&
  arrayOne.every(function (element) {
    return arrayTwo.includes(element);
  });

console.log(result); // true

Another alternative to the includes() method is to use the indexOf() method, which returns the index of the specified element.

When the element isn't found, the indexOf() method returns -1. This means you need to make every() return true when indexOf(element) !== -1 as shown below:

let arrayOne = [7, 8, 9];
let arrayTwo = [9, 7, 8];

let result =
  arrayOne.length === arrayTwo.length &&
  arrayOne.every(function (element) {
    return arrayTwo.indexOf(element) !== -1;
  });

console.log(result); // true

As you can see, comparing arrays is not straightforward. You need to use the methods provided by the array object creatively.

But don't worry! Most of the time you don't need to compare array objects when developing a web application. Next, let's learn how you can copy an array.

How to Copy an Array

One way to copy an array is to use the slice() method, which is provided exactly for copying an array.

You only need to call the method and assign the returned array to a new variable like this:

let arrayOne = [7, 8, 9];
let arrayTwo = arrayOne.slice();

console.log(arrayOne); // [ 7, 8, 9 ]
console.log(arrayTwo); // [ 7, 8, 9 ]

But keep in mind that the slice() method returns a shallow copy, which means that the values of the copy are references to the original array.

A shallow copy won't cause a problem when your array contains primitive values like strings, numbers, or booleans. But it might become an issue when you copy an array of objects.

To show you what I mean, see the example below:

let arrayOne = [{ name: 'Jack', age: 25 }];
let arrayTwo = arrayOne.slice();

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Jack', age: 25 } ]

arrayTwo[0].name = 'Nathan';

console.log(arrayOne); // [ { name: 'Nathan', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Nathan', age: 25 } ]

Do you notice what's wrong? The code above modifies only the name property of arrayTwo, but it changes both arrays!

This is because arrayTwo is a shallow copy of arrayOne. To prevent this behavior, you need to perform a deep copy so that arrayTwo values are disconnected from the original array.

How to create a deep copy of an array

To create a deep copy of an array, you need to copy the array by using the JSON.parse() and JSON.stringify() methods instead of using the slice() method.

The JSON.stringify() transforms the array into a JSON string, and JSON.parse() converts that string back into an array.

Because the copy is created from a JSON string, there's no connection to the original array anymore:

let arrayOne = [{ name: 'Jack', age: 25 }];
let arrayTwo = JSON.parse(JSON.stringify(arrayOne));

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Jack', age: 25 } ]

arrayTwo[0].name = 'Nathan';

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Nathan', age: 25 } ]

Here, you can see that changing the property of arrayTwo doesn't change the same property in arrayOne. Nice work!

How to Merge Two Arrays into One

JavaScript provides the concat() method that you can use to merge two or more arrays into one. The following example shows how to merge the cats and birds arrays as one array named animals:

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = cats.concat(birds);

console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle' ]
console.log(cats); // [ 'tiger', 'cat' ]
console.log(birds); // [ 'owl', 'eagle' ]

At first glance, the syntax of the concat() method seems to merge the birds array into the cats array. But as you can see from the console logs, the cats array is actually unchanged.

To make the code more intuitive, you can call the concat() method from an empty array instead of from the cats array:

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = [].concat(cats, birds);

Although this syntax is more intuitive, you will most likely encounter the cats.concat(birds) syntax in many JavaScript source code. Which syntax to use? That's for you and your team to decide.

The concat() method allows you to merge as many arrays as you need. The following example merges three arrays as one:

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];
let dogs = ['wolf', 'dog'];

let animals = [].concat(cats, birds, dogs);
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle', 'wolf', 'dog' ]

You've now learned how to merge arrays using the concat() method. Let's look at how you can merge arrays with the spread operator next.

How to merge arrays with the spread operator

The spread operator ... can be used to expand elements of the arrays you want to merge. You need to put the expanded elements in one new array as follows:

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = [...cats, ...birds];
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle' ]

Here, you can see that the elements from cats and birds arrays are expanded into another array, and that array is assigned as the value of the animals variable.

Both the concat() method and the spread operator can be used to merge multiple arrays just fine.

How to Search an Array

There are three ways you can search an array, depending on the result you want to achieve:

1. Find whether an element exists in an array
2. Find the index position of an element in an array
3. Find the value that meets certain criteria in an array

Let's learn all three ways to search an array together. Don't worry, they are simple.

1. How to find whether an element exists in an array

If you only want to know if a certain element exists in an array, you can use the includes() method. The following example searches for the string value 'e' in an array of strings:

let letters = ['a', 'b', 'c', 'd'];

console.log(letters.include('e')); // false

The includes() method returns true when the element is found, or false when it isn't.

2. How to find the index position of an element in an array

Other times, you might want to get the index position of the element. You need to use the indexOf() method in that case:

let letters = ['a', 'b', 'c', 'd'];

console.log(letters.indexOf('c')); // 2

Here, the indexOf() method is called on the letters array to search for the index of the value 'c'. The method returns -1 when the element isn't found, but in this case it returns 2 as the letter c is at the 2nd index (remember, JS uses zero-based indexing, meaning the count starts from 0, not 1).

3. How to find elements that meet certain criteria in an array

To find elements that meet certain criteria, you need to use the filter() method.

The filter() method is a built-in method available for JavaScript array objects that can help you in filtering an array. The syntax of the method is as follows:

arrayObject.filter(callback, thisContext);

The method has two parameters:

• callback (Required) – The filtering function that will be executed for each array value
• thisContext (Optional) – The value of this keyword inside the callback

The thisContext parameter is optional and usually not needed. You only need to define the callback function, which will accept three arguments:

• The currentElement being processed into the method
• The index of the element that starts from 0
• and the array object where you call filter()

filterCallback(currentElement, index, array){
  // ...
}

The callback function must include a validation pattern that returns either true or false.

Filter method examples

Let's see an example of filter() in action. Let's say you have an array called stockPrices as follows:

let stockPrices = [3, 7, 2, 15, 4, 9, 21, 14];

You want to filter the prices to include only those greater than 5.

Here's how you do it with the filter() method:

let stockPrices = [3, 7, 2, 15, 4, 9, 21, 14];

let filteredPrices = stockPrices.filter(function (currentElement) {
  return currentElement > 5;
});

console.log(filteredPrices); // [7, 15, 9, 21, 14]

The filter() method evaluates the currentElement and returns either true or false.

If your callback function returns true, the currentElement will be added to the result array:

• During the first iteration, the currentElement is 3 so the callback returns false
• During the second iteration, the currentElement is 7 so the callback returns true and the value is pushed into the result array
• The iteration will continue to the last element
• The resulting array is assigned to the filteredPrices variable

And that's how the method works. Next, let's see how to use the filter() method to filter an array of objects.

How to filter an array of objects

The filter() method can also be used on an array of objects.

Suppose you have an array of objects containing imaginary stock prices and their symbols as shown below:

let stocks = [
  {
    code: 'GOOGL',
    price: 1700,
  },
  {
    code: 'AAPL',
    price: 130,
  },
  {
    code: 'MSFT',
    price: 219,
  },
  {
    code: 'TSLA',
    price: 880,
  },
  {
    code: 'FB',
    price: 267,
  },
  {
    code: 'AMZN',
    price: 3182,
  },
];

Now you need to filter the array to contain only stocks with price value less than 1000. Here's how you do it:

let filteredStocks = stocks.filter(function (currentElement) {
  return currentElement.price < 1000;
});

The value of filteredStocks will be as follows:

0: {code: "AAPL", price: 130}
1: {code: "MSFT", price: 219}
2: {code: "TSLA", price: 880}
3: {code: "FB", price: 267}

Finally, you can also write the callback function using the arrow function syntax like this:

let filteredStocks = stocks.filter(
  currentElement => currentElement.price < 1000
);

When you have simple filter criteria, using the arrow function syntax can help you write cleaner code.

How to Sort an Array

To sort an array, you can use the provided sort() method, which sorts an array in ascending order by default:

let numbers = [5, 2, 4, 1];

numbers.sort();

console.log(numbers); // [ 1, 2, 4, 5 ]

If you want to sort an array in descending order, you can call the reverse() method after the sort() method as shown below:

let numbers = [5, 2, 4, 1];

numbers.sort().reverse();

console.log(numbers); // [ 5, 4, 2, 1 ]

The reverse() method will reverse the array, so the first array element becomes the last, the last becomes the first, and so on.

How to Create Multi-dimensional Arrays

A multi-dimensional array is an array that contains another array. To create one, you need to write an array inside an array literal (the square bracket)

The following example shows how you can create a two-dimensional array:

let numbers = [[5, 6, 7]];

To access the array, you just need to call the variable with two array indices. The first index is for the outer array, and the second index is for the inner array:

let numbers = [[5, 6, 7]];
console.log(numbers[0][0]); // 5
console.log(numbers[0][1]); // 6
console.log(numbers[0][2]); // 7

As you can see from the example above, the array [5, 6, 7] is stored inside index 0 of the outer [] array. You can add more elements inside the array as follows:

let numbers = [[5, 6, 7], [10], [20]];
console.log(numbers[1][0]); // 10
console.log(numbers[2][0]); // 20

A multi-dimensional array is not required to have the same array length, as can be seen above. Although you can create even a three or four-dimensional array, it's not recommended to create more than a two-dimensional array because it will be confusing.

Notice how difficult it is to read and access the value [23] inside the three-dimensional array below:

let numbers = [[5, 6, 7, [23]]];
console.log(numbers[0][3][0]); // 23

Finally, you can still use JavaScript Array object methods like push(), shift(), and unshift() to manipulate the multi-dimensional array:

let numbers = [[5, 6, 7, [23]]];
numbers.push([50]);
console.log(numbers); // [[5, 6, 7, [23]], [50]]

numbers.shift();
console.log(numbers); // [[50]]

numbers.unshift('13');
console.log(numbers); // ["13", [50]]

A multi-dimensional array has no unique methods compared to a one-dimensional array. Often, it's used to store a group of related data as one array.

The following example shows how to group name and age values under a multi-dimensional array:

let users = [
  ['Nathan', 28],
  ['Jack', 23],
  ['Alex', 30],
];

Unless you have to use an array, it's better to use an array of objects to store a group of related data:

let users = [
  { name: 'Nathan', age: 28 },
  { name: 'Jack', age: 23 },
  { name: 'Alex', age: 30 },
];

Ideally, you should use only one-dimensional arrays in your project. Use two-dimensional structure if you really need to, but never go beyond that or you'll have a hard time manipulating the array later.

JavaScript Array Methods Cheat Sheet

Beginners are usually overwhelmed by the number of methods an array has, so I've prepared a cheat sheet that can help you get a quick lookup at what a method does.

The cheat sheet contains a short description and a quick example of what a method does. You can download it here:

Wrapping Up

Congratulations on finishing this JavaScript Array Guide. I hope this tutorial has helped you understand how to create, copy, and manipulate an array in JavaScript.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

This article will show you how to perform the following date validations:

1. Check if a string is a valid date
2. Validate a string in the DD/MM/YYYY format
3. Check if the date is in the past or future

Validating a date value helps you prevent users from entering an incorrect date. Let's start with validating the input itself.

How to Check if a String is a Valid Date with JavaScript

To validate if a string is a valid date input, you need to call the Date() constructor and pass the string as its argument.

If the string is a valid date, the constructor returns a Date object holding the same value as the string:

let dateInput = "2019/05/15"; // YYYY/MM/DD format

let dateObj = new Date(dateInput);

console.log(dateObj); // 2019-05-15T00:00:00.000Z

If you pass an invalid date, the constructor returns an Invalid Date object:

let dateInput = "2019/15/15"; // YYYY/MM/DD format

let dateObj = new Date(dateInput);

console.log(dateObj); // Invalid Date

Note that the Date() constructor requires you to pass a date in the format of YYYY/MM/DD or MM/DD/YYYY. If you pass a date in DD/MM/YYYY format, the contructor also returns an Invalid Date.

Now that you have a Date object representing the string, you can use the isNaN() function to check if the object is valid.

You can create a function to check the validity of the Date object as follows:

function isDateValid(dateStr) {
  return !isNaN(new Date(dateStr));
}

// DD/MM/YYYY
console.log(isDateValid("15/05/2019")); // false

// MM/DD/YYYY
console.log(isDateValid("05/15/2019")); // true

// YYYY/MM/DD
console.log(isDateValid("2019/05/15")); // true

Here, we reverse the value returned by the isNaN() function so that a valid Date returns true. You can call the isDateValid() function anytime you need to check if a string returns a valid date.

Next, let's see how to handle a date string in DD/MM/YYYY format.

How to Validate a Date and Convert it to DD/MM/YYYY Format

If you want to format the date as a DD/MM/YYYY string, you need to use a combination of getDate(), getMonth(), and getFullYear() methods to manually create the date string.

First, you validate the string in the YYYY/MM/DD format by passing it to the Date() constructor.

Next, you check if the Date value is not NaN using an if statement:

let dateInput = "2019/05/15"; // YYYY/MM/DD format

let dateObj = new Date(dateInput);

if (!isNaN(dateObj)) {
  // Convert dateObj to DD/MM/YYYY
}

When the Date isn't a NaN, you can extract the date, month, and year of the object using the getDate(), getMonth(), and getFullYear() methods:

let dateInput = "2019/05/15"; // YYYY/MM/DD format

let dateObj = new Date(dateInput);

if (!isNaN(dateObj)) {
  let day = dateObj.getDate();
  day = day < 10 ? "0" + day : day;
  let month = dateObj.getMonth() + 1;
  month = month < 10 ? "0" + month : month;
  const year = dateObj.getFullYear();

  const resultDate = `${day}/${month}/${year}`;
  console.log(resultDate);  // 15/05/2019
}

Here, you can see that the date "2019/05/15" is converted into "15/05/2019". Notice how you need to modify the day and month variables to add 0 in front of the values if those values are single digits.

The getMonth() method returns a number between 0 and 11 that represents the month of the date. You need to increment the returned value by 1 to get the correct date.

What if I get the Date in DD/MM/YYYY Format?

As I said before, JavaScript doesn't support converting a string in DD/MM/YYYY format into a valid Date object.

If you have a date string in DD/MM/YYYY format, then you need to swap the date and year position before calling the Date() constructor.

You can do so by using the split() method to convert the string into an array, then swap the position of date and year at index 0 and 2.

Pass the separator / as the argument to the split method as shown below:

let dateInput = "15/05/2019"; // DD/MM/YYYY format

let dateArray = dateInput.split("/");

let newDate = `${dateArray[2]}/${dateArray[1]}/${dateArray[0]}`;

console.log(newDate); // 2019/05/15 (YYYY/MM/DD)

The newDate variable has the value of dateInput but in YYYY/MM/DD format. You can pass newDate into the Date() constructor to see if it's a valid date.

How to Check if a Date is in the Past or Future

To check if a date is in the past or future, you can use the less than < operator to compare the input date with the current date.

When the result is true, then the input date is in the past:

// The date you want to check
const inputDate = new Date('2023-08-20'); 

// Get the current date
const currentDate = new Date();

// Compare the input date with the current date
if (inputDate < currentDate) {
  console.log('The input date is in the past.');
} else {
  console.log('The input date is in the future.');
}

JavaScript knows how to compare Date objects, so you don't need to extract the values and compare them manually.

Conclusion

Now you've learned how to validate if a string is a valid date, how to convert a date into a DD/MM/YYYY format, and how to check if a date is in the past or future.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!