New JavaScript Elements

Let’s learn about important new elements that have been introduced to JS in ECMAScript 2015+, also known as ES6.

Block-scope variable declarations

ES5 didn’t allow variables delimited by a pair of curly braces, { and }, to be declared or defined by a for loop. Rather, all variables declared with var, even if declared within a block, have either a function scope or a global scope. The new feature of block-scope variable declarations with let and const allows the declaration of local variables with a finer-grained scope. Ultimately, this new feature helps avoid unintended variable duplications and leads to more modular code.

There’s only one difference in meaning between let and const. Variables declared with const are frozen or immutable and, in this sense, remain constant while let variables are not. It’s preferable to use const for all variables that aren’t supposed to have changes in their values. It’s not always clear (or known) if variables will change in value. Usually, let is used to declare block-scoped variables, and var is used to declare global or function-scoped variables.

Arrow functions

Compared to classical JS functions, arrow functions (=>) provide a more concise function expression syntax, which can be seen in “Example 1” below. Arrow functions also allow the use of JavaScript’s this variable from the function’s outer environment (or closure) in their function body, which we’ll see in “Example 2.”

Example 1

Get hands-on with 1400+ tech skills courses.