Modern JavaScript puts you in the center of an enormously powerful language and ecosystem. As a result, the fundamentals of the language are lastingly important, and there is always more to learn.

The core language is magnificently refined and intricate. Mastering universal programming fundamentals like variables, collections, and paradigms gives you the ability to confidently navigate the language. From this base, you can fluently engage with the vast array of client- and server-side tools and platforms that comprise the JavaScript landscape.

If you put in the time to learn the fundamentals, JavaScript will serve as a powerful vehicle for your programs and your career. Here are nine of the most important concepts in modern JavaScript.

1. Navigating collections: Functional programming and the arrow operator

An essential area where programming basics and modern JavaScript come together is in collections. JavaScript still mainly uses arrays for modeling collections of data, but it also now supports Set objects.

Arrays are simple:

let books = ["The Supreme Yoga", "The Transcendent Unity of Religions", "The Tao of Physics"];

We can iterate over this collection using functional programming and an arrow function:

books.map(x => x.length);

This creates a new array showing the length of some of my favorite book titles. We can use the map operation and siblings like filter and forEach to iterate over the collection without describing the loop imperatively.

The arrow operator is one of the most useful and important syntax enhancements in contemporary JavaScript. It lets you define a function in a very compact form that is incredibly well-suited for a functional operation.

2. Scope and closures

When you use the arrow operator as the argument to a functional operation, you are creating an anonymous function. That is, a function without a name. You can also use it to create a named function:

let bookList = (book) = > console.log(book.length);

This named function is equivalent to the following:

let bookList = function (book) { console.log(book.length) }

In both cases, as well as the anonymous version, we are creating a closure. That means the function will have access to the variables defined by the code containing it, rather than whatever may be in scope when it is called.

For example, we could create a function that produces another function, called a higher-order function in functional programming:

const createBookFilter = (bookCollection) => { 
  return (searchQuery) => { 
    return bookCollection.filter(book => book.includes(searchQuery)); 
  }; 
};

Now we can create a reference to the function produced:

const filterMetaphysics = createBookFilter(books);

This contains a reference to the inner function returned by createBookFilter(). The key point to notice here is that that function retains its reference to bookCollection, even when called in a different context:

const results = filterMetaphysics ("Unity");  
// Output: [ "The Transcendent Unity of Religions" ]

3. Context and this

Another benefit of the arrow operator is its predictable and sensible resolution of the this keyword. Once upon a time, you would have to assign this to another variable to hold onto it. Now we can use the arrow operator to handle the keyword instead.

This is common for example on UI component event handlers, where this would resolve to the DOM element instead of the component. Here’s a (fictional) example:

class MyComponent {
  constructor() {
    this.name = 'Component';
    this.button = document.getElementById('my-button');

    this.button.addEventListener('click', () => {
      console.log(`Hello from ${this.name}`);
    });
  }
}

The click handler will correctly resolve this to the component, and have access to this.name. Using the keyword function to declare it resolves this to the button element.

4. Components and reactivity

The idea of modeling the UI in components is not new, but when united with reactivity, it provides the central pillar of modern client-side architecture.

Reactivity at its heart is a simple idea. It says: Wire a variable to the code that responds to it when it changes. That is, bind the state to the behavior. That puts the details of managing that relationship on the framework, instead of the developer.

For example, in React we declare a state variable and some behavior like so:

import { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    

      
You clicked {count} times
      
        Click me
      
    
  );
}

This is the fundamental pattern of reactivity, and universal to all frameworks. As an example, here it is in Svelte:

You clicked {count} times


  Click me

The count variable is the state, the markup defines the component’s view, and the function defines the behavior. The framework is then responsible for tying them together and displaying the results.

5. Full-stack frameworks and build chains

In the modern world of reactive frameworks and enterprise JavaScript, most applications rely on a build chain for development and deployment. Among other things, this setup enables the transformation of reactive frameworks into a form consumable by browsers, optimized for web applications. Popular tools in this arena include webpack and Vite.

The build-chain has become so ubiquitous that frameworks started introducing their own full-stack versions. They also added new capabilities, such as the ability to define a server-side API alongside the front-end that uses it. Next.js was the first to really popularize that idea, followed by others like Nuxt and SvelteKit. Angular has integrated its take on the idea directly into its framework.

The main concept here is that enterprise JavaScript entails a lot of infrastructure. Understanding that infrastructure begins with the language itself, but broadens to incorporate a wide range of other tooling.

6. CI/CD and serverless deployments

CI is continuous integration and CD is continuous deployment. In general, these practices (CI/CD) automate the way that software is built and deployed. Specifically, continuous integration means that when developers check in their code, it is integrated into a build and run through automated test suites. Continuous deployment takes that a step further, creating streamlined processes for pushing builds to deployment environments like production. Such process pipelines are a fact of life in modern JavaScript.

Deployment environments like Vercel and Netlify—aka serverless platforms—have refined the idea of automated processes into managed services where you can define and orchestrate your projects from a web console or CLI. These platforms make it relatively painless to transform a code repository into running software with a streamlined process.

For applications built on a pure JavaScript stack, a serverless deployment platform significantly reduces the friction in infrastructure. Of course, they’re not silver bullets, and there is always nuance and non-standard configuration, especially as projects grow more complex and long-lived. Still, serverless platforms are a key factor in modern JavaScript.

7. Server-side JavaScript

JavaScript is a major language on the server, so it’s vital to know how server-side JavaScript works. To start, it’s important to note that Node.js isn’t your only viable option for serverless JavaScript. Deno and Bun are two alternatives that bring a lot to the table. It is worth exploring all three platforms to understand their differences and what they each offer. You’ll also come to understand how they relate to serverless runtimes.

While there are a variety of package managers, NPM and its package.json manifest file are still the standard.

No matter what runtime you are in, JavaScript uses an event-loop on the server. That has implications for application scalability and how asynchronous operations work. Understand the difference between parallel programming (asynchronous operations) and concurrency (operations that can proceed in tandem).

It’s also essential to understand the basics of HTTP requests/response, JSON, and how APIs are mapped in servers like Express:

app.get('/', (req, res) => { res.json({ message: 'Hello, InfoWorld!' }); });

Each component is fairly easy to understand on its own. Put together, they will illuminate a big part of the web landscape for you.

8. ECMAScript

Because JavaScript is always evolving, it is key to stay on top of its development. The best way to do that for the core language is to keep an eye on the ECMAScript specification. A new spec comes out every year, with front matter describing the changes that were added that year. I recently wrote a breakdown of this year’s edition.

A highlight of ECMAScript 25 is the new global Iterator object:

Iterator.from()

This lets you wrap arrays in a more performant version of the Iterator, so that the functional operators like mapand filter are lazy-evaluated. It also lets you turn other iterators into the same thing, taking advantage of the performance as well as the functional operators.

Iterator is the kind of advancement that could slip past your notice if you were not watching the specification. Keeping up with ECMAScript ensures you are aware of the most recent improvements to the core language.

9. JavaScript and AI

Artificial intelligence is now an inescapable fact of life for developers. Using AI to assist in development is standard in many shops, and we’re also integrating AI into our apps. Fortunately, JavaScript has plenty of support for AI-driven development.

Possibly the most prominent and extensive JavaScript API for AI is TensorFlow.js, with bindings for using the best-in-class TensorFlow framework. TensorFlow supports a wide range of neural network styles, pre-trained models, and extensive customization.

There are many other JavaScript APIs for AI, and some of them, like Brain.js, work on both the client and server. (Also see my recent introduction to Roo Code, bringing together a JavaScript-compatible coding assistant with VS Code.)

Conclusion

I suppose the most key concept of all is this: If you combine an appreciation for JavaScript itself with the willingness to master it and explore all the avenues it opens up, you will net lasting benefits.