JS | Notion

As every web app, ours rely on a bunch of JS lines of code

🏠 HOME

THE TEAM

CONCERNS

OUR STACK

Ruby on Rails

JS

OUR TOOLS

THE WEB FOUNDATIONS

TUTORIALS

JOINING US

We favor ECMAScript 6 (ES6) syntax.

ES6 Useful Features

Default parameters

In ES6, we can put the default values right in the signature of the functions.

var calculateArea = function(height = 50, width = 80) {  
    // write logic
    ...
}

Template Literals

We can use a new syntax ${PARAMETER} inside of the back-ticked string.

var name = `Your name is ${firstName} ${lastName}.`

Multi-line Strings in ES6

Just use back-ticks.

let lorem = `Lorem ipsum dolor sit amet, 
             consectetur adipiscing elit. 
             Nulla pellentesque feugiat nisl at lacinia.`

Arrow Functions

Arrow functions – also called fat arrow functions, are a more concise syntax for writing function expressions. They utilize a new token, =>, that looks like a fat arrow. Arrow functions are anonymous and change the way this binds in functions.

There are a variety of syntaxes available in arrow functions, of which MDN has a thorough list.

Basic Syntax with Multiple Parameters (from MDN)

// (param1, param2, paramN) => expression

// ES5
var multiplyES5 = function(x, y) {
  return x * y;
};

// ES6
const multiplyES6 = (x, y) => { return x * y };

Curly brackets and return aren’t required if only one expression is present. The preceding example could also be written as:

const multiplyES6 = (x, y) => x * y;

Parentheses are optional when only one parameter is present but are required when no parameters are present.

//ES5
var phraseSplitterEs5 = function phraseSplitter(phrase) {
  return phrase.split(' ');
};

//ES6
const phraseSplitterEs6 = phrase => phrase.split(" ");

//ES5
var docLogEs5 = function docLog() {
    console.log(document);
};

//ES6
var docLogEs6 = () => { console.log(document); };

<aside> <img src="/icons/playback-previous_lightgray.svg" alt="/icons/playback-previous_lightgray.svg" width="40px" /> Tips and tricks

</aside>

<aside> <img src="/icons/playback-next_lightgray.svg" alt="/icons/playback-next_lightgray.svg" width="40px" /> Block Scoped let & const

</aside>

</aside>

</aside>