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.

⭐️ 👀 2023 WEB DEVELOPMENT BOOTCAMP starting in days! Join the waiting list to reserve your spot in my 10-weeks cohort course and learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much much more! 👀 ⭐️

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!`

One more thing! ⚠️ ✋

At the end of January I will organize the Web Development Bootcamp.

It's a 10-weeks long cohort online course where I will guide you to becoming a Web Developer.

It's not "just a course". It's a big event I organize once a year.

We'll start from zero, learn the fundamentals of Web Development, HTML CSS, JavaScript, Tailwind, Git, using the command line, VS Code, GitHub, Node.js, we'll then learn React, JSX, how to use PostgreSQL, Astro, Next.js, Prisma, deploying on Netlify/DigitalOcean/Fly/Vercel and much more! 

At the end of the first 10 weeks you'll know how to create web sites and web applications and I'll unlock you the 2nd phase of the Bootcamp: you will get access to a large number of projects exclusive to the Bootcamp graduates, so you can follow my instructions to build things like private areas with authentication, clones of popular sites like Twitter YouTube Reddit, create e-commerce sites, and much much more.

Because once you got the fundamentals, you only learn by working on real, exciting projects.

To find out more, visit bootcamp.dev