An Introduction to Modern JavaScript: ES6 and Beyond

Quick Summary (TL;DR)

Modern JavaScript is defined by the features introduced in ECMAScript 2015 (ES6) and subsequent yearly updates. These changes make the language more powerful, readable, and enjoyable to work with. Key features you must know are: let and const for block-scoped variables, arrow functions for a more concise function syntax, template literals for easier string interpolation, default parameters for functions, and destructuring for easily extracting values from objects and arrays.

Key Takeaways

let and const replaced var: let and const provide block-level scoping, which is more intuitive and less error-prone than the function-level scoping of var.
Arrow Functions are Concise: Arrow functions (=>) provide a shorter syntax for writing functions and lexically bind the this value, which solves a common source of bugs.
Template Literals Simplify Strings: Use backticks (`) to create strings that can embed variables directly (${myVar}) and span multiple lines.
Destructuring is a Powerful Shorthand: Destructuring allows you to unpack values from arrays or properties from objects into distinct variables, leading to cleaner code.

1. `let` and `const` vs. `var`

Before ES6, var was the only way to declare a variable. var is function-scoped, which can lead to confusing behavior.

let and const are block-scoped, meaning they are only accessible within the {} block they are defined in (e.g., inside an if statement or a for loop). This is how most other programming languages work.

const: Use for variables that will not be reassigned. This is the preferred way to declare variables.
let: Use for variables that you expect to reassign, like a counter in a loop.

// `var` is function-scoped
function varTest() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1 (x is accessible outside the if block)
}

// `let` is block-scoped
function letTest() {
  if (true) {
    let y = 1;
  }
  // console.log(y); // ReferenceError: y is not defined
}

2. Arrow Functions

Arrow functions provide a more concise syntax for writing functions.

// Traditional Function
function add(a, b) {
  return a + b;
}

// Arrow Function
const addArrow = (a, b) => a + b;

// Arrow function with multiple lines
const subtract = (a, b) => {
  const result = a - b;
  return result;
};

One of their most important features is that they do not have their own this context. They inherit this from the surrounding code, which helps avoid common bugs in event handlers and callbacks.

3. Template Literals

Template literals make working with strings much easier. They are enclosed in backticks (`) instead of single or double quotes.

const name = 'World';

// Old way
const greetingOld = 'Hello, ' + name + '! You have ' + (5 + 5) + ' messages.';

// New way with template literals
const greetingNew = `Hello, ${name}! You have ${5 + 5} messages.`;

console.log(greetingNew); // "Hello, World! You have 10 messages."

4. Default Parameters

You can now provide default values for function parameters directly in the function definition.

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

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

5. Destructuring

Destructuring is a powerful syntax that allows you to extract data from arrays and objects into their own variables.

Object Destructuring

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

// Extract properties into variables
const { firstName, age } = person;

console.log(firstName); // "John"
console.log(age); // 30

Array Destructuring

const numbers = [10, 20, 30, 40];

// Extract values into variables
const [first, second] = numbers;

console.log(first); // 10
console.log(second); // 20

Common Questions

Q: Should I stop using var completely? Yes. In modern JavaScript development, there is virtually no reason to use var. Using let and const makes your code more predictable and easier to debug.

Q: When should I use a regular function instead of an arrow function? Arrow functions are the default choice for most scenarios. However, you should use a traditional function expression when you need a function to have its own this binding, such as for object methods that need to refer to the object itself, or for constructor functions.

Need Help With Implementation?

Mastering modern JavaScript is the first step to building high-quality web applications. Built By Dakic offers expert JavaScript development and consulting services to help your team adopt best practices and build scalable, maintainable frontend and backend systems. Get in touch for a free consultation.