Skip to content
PrepMint

JavaScript

JavaScript ES6 Features

The ES6 features modern JavaScript is built on — let/const, arrow functions, destructuring, template literals, modules, Promises and classes.

3 questions
Medium· 3

Recommended

JavaScript ES6 Features — Timed Test (3 questions)

TimedMedium3 questions · 3 min
Start test

No account needed. Answers and explanations arrive when you submit.

JavaScript ES6 Features — the theory

ES6 (also called ECMAScript 2015) was a major update to the JavaScript language that introduced a range of features still central to how modern JavaScript is written today.

`let` and `const`. ES6 introduced let and const as alternatives to the older var keyword for declaring variables. let declares a variable that can be reassigned, while const declares a variable that cannot be reassigned after its initial value is set. Both have block scope (limited to the enclosing block of code, like inside an if statement or loop), unlike var, which has function scope — a difference that eliminates a common category of bugs from the earlier syntax.

Arrow functions. Arrow functions provide a more concise syntax for writing functions, using => instead of the function keyword, like (x) => x * 2. Beyond brevity, arrow functions also handle the this keyword differently than traditional functions — they inherit this from their surrounding context rather than defining their own, which resolves a common source of confusion in earlier JavaScript when using this inside callbacks.

Template literals. Template literals, written with backticks instead of quotes, allow embedding expressions directly inside a string using ${expression} syntax, and support multi-line strings without special escape characters. This is generally more readable than concatenating strings with the + operator, especially when combining multiple variables into a single string.

Destructuring. Destructuring allows extracting values from arrays or objects into individual variables in a single, concise statement, rather than accessing each value separately by index or key. This is widely used for extracting specific properties from an object or specific items from an array in a way that's both shorter and clearer about intent than repeated individual accesses.

Default parameters. ES6 allows function parameters to have default values specified directly in the function definition, used automatically when a caller doesn't provide a value for that parameter — replacing older, more verbose patterns for handling optional parameters.

Modules. ES6 introduced a standardized module system using import and export statements, allowing code to be organized across multiple files with explicit, clear dependencies between them — replacing a variety of inconsistent, non-standard module patterns that existed before.

Promises. ES6 introduced Promises as a standardized way of handling asynchronous operations, representing a value that may not be available yet but will be at some point (or will fail with an error) — a significant improvement over earlier callback-based patterns for asynchronous code, and the direct foundation for the async/await syntax covered in more depth elsewhere.

Classes. ES6 introduced class syntax for defining objects and inheritance in a way that's more familiar to developers coming from other object-oriented languages, though under the hood it's built on JavaScript's existing prototype-based inheritance model rather than replacing it entirely.

Spread and rest. ES6 also introduced the three-dot ... syntax, which plays two complementary roles. As the spread operator, it expands an array or object into its individual elements — copying an array with [...items], merging objects, or passing an array's elements as separate function arguments. As rest syntax, it does the reverse, collecting remaining values into an array — as in a function that accepts any number of arguments with (...args), or destructuring that captures "everything else." Together they replaced a family of clumsy older patterns and are now everywhere in modern code.

Shorthand object syntax. ES6 made object literals lighter: when a property name matches the variable holding its value, { name } works in place of { name: name }; methods can be written without the function keyword; and property names can be computed from expressions inside square brackets. Small conveniences individually, but they account for much of the visual difference between pre- and post-ES6 code.

`for...of` and iterables. ES6 standardized a protocol for iteration and a matching loop: for...of walks directly over the values of any iterable — arrays, strings, Maps, Sets — without index bookkeeping, and it is the natural companion to the new collection types ES6 added: Map, which holds key-value pairs with keys of any type, and Set, which holds unique values and makes deduplication and membership checks straightforward.

Reading older code. Because so much JavaScript predates ES6, recognizing the older equivalents remains useful: var where let/const now belong, function expressions where arrows would be used, string concatenation where template literals would serve, and callback pyramids where Promises now stand. Being able to read both styles — and to modernize the old one confidently — is a routine part of working in long-lived JavaScript codebases, where files from different eras sit side by side.

Why ES6 matters today. Even though JavaScript has continued to evolve with newer yearly updates since ES6, the ES6 feature set remains foundational to how modern JavaScript is written and taught — most contemporary JavaScript code, tutorials, and frameworks assume familiarity with let/const, arrow functions, destructuring, and modules as baseline knowledge rather than advanced or optional features.

Sample questions

Three questions from this topic, with the answer and the reasoning shown.

Q1MediumHow do arrow functions differ from traditional functions regarding `this`?
  • Arrow functions inherit `this` from their surrounding context rather than defining their ownCorrect
  • Arrow functions cannot access `this` under any circumstances
  • Traditional functions always inherit `this` from arrow functions
  • There is no difference in how `this` behaves

Explanation

Arrow functions inherit this from their surrounding context, resolving a common source of confusion with this inside callbacks.

Open this question on its own page

Q2MediumWhat did ES6 introduce for handling asynchronous operations?
  • PromisesCorrect
  • The var keyword
  • HTML template tags
  • CSS grid layout

Explanation

ES6 introduced Promises as a standardized way to handle asynchronous operations, improving on earlier callback-based patterns.

Open this question on its own page

Q3MediumWhat is a key difference between `let` and `var` in JavaScript?
  • `let` has block scope, while `var` has function scopeCorrect
  • `var` was introduced in ES6 and `let` was not
  • `let` cannot hold numeric values
  • There is no functional difference between them

Explanation

let is block-scoped (limited to its enclosing block), while var is function-scoped — a key ES6 improvement that reduces common bugs.

Open this question on its own page