JavaScript Explained: A Modern Developer's Overview

According to the Stack Overflow Developer Survey, JavaScript consistently ranks as one of the most popular programming languages. It's also evolved significantly from the language it was several years ago. Almost everything has changed for the better, from where it can run to the actual syntax of the language. As we move forward, here's a look at modern JavaScript, explained in just a few minutes.

How JavaScript Works on the Web

When you load any page on the internet, your computer receives a folder of files, including at least one HTML file. This HTML file can load JavaScript using a script tag, sourcing the code from either the same folder or elsewhere on the internet.

JavaScript is the primary client-side language, which means it waits to execute code until it's on your computer, running within a program called the browser. Each browser has its own engine that executes the code. Among other things, this client-side code can manipulate the display, send data, or fetch more data from a server.

You might have heard of various client-side frameworks like React, Angular, or Vue. These build on top of JavaScript and make writing client-side code significantly easier and more maintainable, a topic for another article.

Performance and Backend Capabilities

Traditionally, JavaScript is an interpreted language, meaning the code is read line by line rather than going through a compile step where it's converted to machine code. However, modern browsers have implemented Just-In-Time (JIT) compilers to speed up their engines. While JavaScript was once known as a slow language, today's computers are so fast that this is hardly the case anymore.

JavaScript is doing pretty much everything these days, from running servers to machine learning and more. We can now perform numerous backend tasks with the JavaScript runtime environment known as Node.js. This means we can write APIs, interact with databases, and communicate with other servers, all using JavaScript. Node.js uses the same V8 engine as Google Chrome, making it lightning fast. Still, for highly performance-intensive tasks, languages like Go or C++ might be a better choice.

Core Language Concepts

Let's dive into the language itself. Variables hold either single-cell primitives or compound data. Primitives are typically numbers, booleans, or strings of text, while compound data is held by arrays and objects.

• Variables: In modern JavaScript, we use the keywords let and const to declare variables. If you plan to reassign the variable later, use let; otherwise, use const.
• Arrays: Also known as lists in other languages, these are multi-celled, ordered clusters of data.
• Objects: Similar to dictionaries in other languages, these are key-value pairs. For example, if you provide the key name, it might retrieve a corresponding value.

The DOM, or Document Object Model, is one of the most important objects in client-side JavaScript. It's a JavaScript representation of the structure of your HTML and is available in the global document variable when a page loads. The document object contains numerous element objects. Through the DOM, we can search for specific elements, add event listeners for user interactions, or dynamically change how the page looks. This is all possible through a set of methods called the Browser API.

Control Flow and Functions

JavaScript is a C-like language, meaning it borrowed much of its syntax from C. This includes if statements, for loops, while loops, and more. Speaking of loops, we most commonly use a for...in loop to iterate over an object's properties and a for...of loop to iterate over the values in an array.

Functions are blocks of code designed to be used more than once. We declare them with the function keyword, followed by a name and a list of parameters (or inputs). You can think of parameters as variables that are set when the function is called. A function can also return a value, which serves as its output. We call a function by using its name and passing in the required arguments.

Methods are the same as functions, except they are attached to specific data types (like objects or arrays). We call these methods using dot notation.

Functions can also be written using a more concise syntax known as arrow functions. In an arrow function, the parameters are on the left side of the =>, and if the function is a single line, it returns the result automatically. Here is an example:

const add = (a, b) => a + b;

Arrow functions are frequently used with array methods, which often take a function as an argument and execute it for every item in the array.

Asynchronous Programming and Beyond

Another huge part of JavaScript is asynchronous programming, which involves performing non-deterministic operations like a network request to a server for more data. We don't know when the request will return or if it will fail, so our code must handle both of these cases.

Asynchronous programming has evolved significantly over the years in JavaScript, and the current standard is async/await. It's a powerful feature. All you have to do is add the await keyword before a promise (like a network request), and it will pause your function's execution until that request either resolves or fails, making the code much cleaner and easier to read.

While not technically JavaScript, it's important to mention TypeScript. It's a superset of JavaScript that compiles into plain JavaScript. Vanilla JavaScript has dynamic types (or no types), whereas TypeScript introduces static typing. This means we must be specific about what kind of value a variable can hold. While this might seem like extra work, it helps catch a vast number of potential errors during development.

Finally, let's talk about npm, the Node Package Manager. Chances are, if you need a specific piece of functionality, someone else has already written it. You can download it as a module from the npm registry, and these packages are often well-tested and bug-free.