A quick reference guide to modern JavaScript syntax

Many times, the code samples are using the latest JavaScript features. Sometimes, it is difficult to distinguish those functions from the framework functions. For example, this often happens in React, which encourages a very modern JavaScript approach.

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

Sometimes, it is difficult to distinguish those functions from the framework functions. For example, this often happens with React, which encourages a very "modern" JavaScript approach.

This article aims to explain all the little things that might trip you up, especially if you come from a pre-ES6 JavaScript background, or start from scratch.

The goal is to make you at least realize which structures are regular JavaScript and which structures are part of the framework. I will not explain in depth how these things work, on the contrary, if you want to learn more, I will give some instructions.

Arrow function

Arrow functions have the following syntax:

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

Slightly different from regular functions:

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

Just like regular functions, () can carry parameters. Sometimes, when there is only one statement in the function, the parentheses will be completely removed, which is an implicit return value (no need for the return keyword):

const myFunction = i => 3 * i

More information about arrow functions

Spread operator

If you see

const c = [...a]

This statement copies an array.

You can also add items to the array using the following command

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

This...Known as the spread operator. You can also use it on objects:

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

More information about spread operators

Destruction work

You can extractsomeUse the following syntax to come from the properties of the object:

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

const { firstName: name, age } = person

You will now have two const valuesnamewithage.

This syntax also applies to arrays:

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

Template text

If you see a string in the backtick, it is the template text:

const str = `test`

In it, you can use the following commands to place variables and execute javascript${...}Fragment:

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

Moreover, you can span the string across multiple lines:

const string3 = `Hey
this

string
is awesome!`

Download mine for freeJavaScript beginner's manual


More js tutorials: