Scribd
Upload
13 views

Syntax Changes & Additions Cheat Sheet

The document provides a summary of syntax changes in ES6 including strict mode, let and const, arrow functions, default arguments, literal notation extensions, rest and spread operators, for-of loops, template literals, and destructuring.

Uploaded by

poonia.praveen.alt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Syntax Changes & Additions Cheat Sheet

The document provides a summary of syntax changes in ES6 including strict mode, let and const, arrow functions, default arguments, literal notation extensions, rest and spread operators, for-of loops, template literals, and destructuring.

Uploaded by

poonia.praveen.alt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Cheat Sheet – Syntax Changes

Strict Mode
Using strict mode is the default in ES6 Modules, therefore specifying “use
strict” is not required.

let & const


In ES6, you may declare your variables with var, let or const. Which one
should you choose?
const should be chosen if you’re not planning on changing the value of this
variable (which then becomes a constant). This should be your default
choice unless you absolutely need to re-assign it during runtime. Why
should it be the default? Because it keeps your code explicit and clear.
let should be your second choice – use it whenever you need to re-assign
variables. This will mostly be the case in mathematical alogrithms or loops.
var should probably never be chosen. When using it, you may have a
constant or a variable – but no one knows! Therefore, use const or let
instead.

Function / Arrow Functions


There were two major additions regarding functions: (Fat) Arrow
Functions ( () => {} ) and default arguments ( doSmth(arg = 1) ).

Fat Arrow Functions allow you to use a shorter syntax to create functions:
const fn = (arg1, arg2) => return arg1 + arg2
You may leave out the parenthesis around the arguments if only one
argument is passed. If no argument is passed, empty parentheses are
required. The function body may be written inline and without curly braces
if you’re only writing a return statement (return then also may be left out).
Besides the shorter syntax, fat arrow functions also change the behavior of
the this keyword. Inside a fat arrow function, the this keyword will always
refer to the context of the function instead of the caller of the function.

Default parameters allow you specify default values for parameters passed
to functions.
function fn(arg1 = ‘default string’, arg2 = 23) { return arg1 + arg2 }
More info on Arrow Functions:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functio
ns/Arrow_functions
More info on Default Parameters:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functio
ns/Default_parameters

Literal Notation Extensions


There are some improvements to Literal Notation syntax.
let width = 10;
let length = 50;

let lengthField = 'length';


rectangle = {
width, // width is automatically assigned => takes above value
[lengthField]: length, // Dynamic field name using variable
"outputSize"() { // shorter syntax + possibility of string name
console.log(this.width * this.length); // this refers to object
}
};
More information may be found here: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Rest & Spread Operators (…)


ES6 added two important new operators: Rest and Spread. Technically
they look the same ( … => three dots) but they are used in different places.

Rest:
function sumUp(start, ...toAdd) {}
Transforms a list of arguments (1, 2, 3) into an array ([1, 2, 3]) which may be
used inside the function. This behavior is triggered when used inside of a
function argument list.

Spread:
let ids = [1, 2, 3, 4, 5, 6];
console.log(Math.max(...ids)); // prints 6
Transforms an array into a list of arguments. This behavior is triggered
when used outside of a function argument list.
More information on Rest:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functio
ns/rest_parameters
More information on Spread:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operato
rs/Spread_operator
For-of Loop
A new loop was added: The for-of loop which allows you to loop through an
array of items.
let testResults = [5.30, 2.84, 9.11, 1.01, 3.99];

for (let testResult of testResults) {


if (testResult > 5) {
console.log(testResult); // prints 5.30, 9.11
}
}
More information may be found here:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Stateme
nts/for...of

Template Literals
Template literals allow you to easily write more complex text in strings (e.g.
including line breaks) as well as to output variables in a string.
let name = 'Max';
description = `
This is a description, which may wrap across multiple lines.
Written by ${name}.
`;
Template literals are used by starting and ending the string with backticks
( `) instead of quotation marks.
More information can be found here:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Templat
e_literals

Destructuring
Destructuring is a cool new feature which allows you to easily extract
values from an object or an array.
Array:
let numbers = [1, 2, 3, 4, 5];
let [a, b] = numbers; // a => 1, b => 2
Object:
let person = {
name: 'Max',
age: 27
};
let {name, age} = person; // Notice the {} instead of []
More information may be found here:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operato
rs/Destructuring_assignment

You might also like