Skip to content

A quick reference guide to Modern JavaScript Syntax

Many times, code samples are using the latest JavaScript features available. Sometimes those features can be hard to be distinguished from a framework features. It happens frequently with React for example, which encourages a very modern approach to JavaScript.

Many times, code samples are using the latest JavaScript features available.

Sometimes those features can be hard to be distinguished from a framework features. It happens frequently with React for example, which encourages a very “modern” approach to JavaScript.

This post aims to explain all the little things that might trip you up, especially if you come from a pre-ES6 JavaScript background, or also if you’re starting from zero.

The goal is to make you at least recognize which constructs are regular JavaScript, and which ones are part of a framework. I’m not going deep into explaining how those things work, and instead I’ll give some pointers if you want to know more.

Arrow functions

Arrow functions have this syntax:

const myFunction = () => {
  //...
}

A bit different than regular functions:

const myFunction = function() {
  //...
}

The () can host parameters, just like in regular functions. Sometimes the brackets are removed entirely when there’s just one statement in the function, and that’s an implicit return value (no return keyword needed):

const myFunction = i => 3 * i

More on Arrow Functions

The spread operator

If you see

const c = [...a]

This statement copies an array.

You can add items to an array as well, using

const c = [...a, 2, 'test']

The ... is called spread operator. You can use it on objects as well:

const newObj = { ...oldObj } //shallow clone an object

More on the spread operator

Destructuring assignments

You can extract just some properties from an object using this syntax:

const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 54 //made up
}

const { firstName: name, age } = person

You will now have two const values name and age.

The syntax also works on arrays:

const a = [1,2,3,4,5]
[first, second, , , fifth] = a

Template literals

If you see strings enclosed in backticks, it’s a template literal:

const str = `test`

Inside this, you can put variables and execute javascript, using ${...} snippets:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

And also, you can span a string over multiple lines:

const string3 = `Hey
this

string
is awesome!`
→ Get my JavaScript Beginner's Handbook

I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

  • C Handbook
  • Command Line Handbook
  • CSS Handbook
  • Express Handbook
  • Git Cheat Sheet
  • Go Handbook
  • HTML Handbook
  • JS Handbook
  • Laravel Handbook
  • Next.js Handbook
  • Node.js Handbook
  • PHP Handbook
  • Python Handbook
  • React Handbook
  • SQL Handbook
  • Svelte Handbook
  • Swift Handbook

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list