Content updated
By the end, you can…
- Shorter syntax should make data flow clearer. Translate it back into familiar steps when learning.
- Predict the example's result, change one part, and verify the behavior in your own script.
One idea at a time
You already use several features introduced with ES2015, often called ES6: let, const, and arrow functions. Modern JavaScript continues to evolve beyond that edition. This lesson collects useful everyday syntax, including a few later additions, so you can recognize the intent rather than memorize a bundle of shortcuts.
A template literal inserts expression values into text. A default parameter supplies a value when an argument is missing or undefined. Destructuring reads selected values from an object or array into bindings. Spread expands values into another literal. Each feature has a specific job; none of them automatically recomputes a value when the original data changes.
What to remember first
Shorter syntax should make data flow clearer. Translate it back into familiar steps when learning.
Read the code before trying it
`Hello, ${name}!`Insert a value into text- Use backticks. The expression inside ${} is evaluated when this string is created.
function greet(name = "friend")Supply a default input- The default is used for undefined or a missing argument, but not for null or an empty string.
const { name } = learnerRead a named property- This creates a name binding from learner.name; it does not connect that binding to later property updates.
{ name, describe }Use property shorthand- When a property key and an existing variable have the same name, write the name once. This means { name: name, describe: describe }.
const [first] = topicsRead an array position- The first binding receives index zero. Missing positions give undefined unless you add a default.
[...topics, next]Build a new outer array- Spread inserts the current items. Objects inside remain shared references, not deep copies.
settings?.theme ?? "light"Handle a missing value- Optional chaining stops at null or undefined; nullish coalescing supplies a fallback. These arrived after ES2015.
Walk through an example
function greet(name = "friend") {
return `Hello, ${name}!`;
}
const learner = { name: "Mia", completed: 2 };
const { name } = learner;
console.log(greet(name));
console.log(greet());Destructuring reads Mia from learner into name. The first call passes that value and creates Hello, Mia! The second supplies no argument, so the default parameter becomes friend. Template interpolation happens separately during each call; it is not a permanent link to the object.
See it happen: try a small change
Predict the result, choose a version, then compare the code and output. Try the controls when the example has them. Each version starts fresh.
Code to notice
const greet = (name = "friend") => `Hello, ${name}!`;
console.log(greet());
console.log(greet(""));Live result
What changed: The missing argument uses friend; an explicit empty string is kept.
Look a little closer
Arrow functions with an expression body return that expression. With braces, write return when a value is needed. A concise arrow is useful for a small array transformation; a named function may be easier to read for a longer task. Arrow functions do not create their own this binding, which matters for methods in the next lesson.
Optional chaining avoids an error for an expected missing intermediate value. It should not replace checking a required piece of data. Nullish coalescing preserves false, zero, and empty strings, unlike a || fallback. Always decide which missing or empty values your interface is actually supposed to accept before selecting an operator.
Try it in your own project
Run greet with no argument, a name, and an empty string. Then test the separate array example. Change the new array and compare lengths; do not assume copying an array also copies any nested objects.
The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.
A common wrong turn
A default parameter does not replace every falsy value. Passing an empty string deliberately keeps it. Also remember that spread copies one level: changing a nested object through a copied array can still change the original item. Short code is only helpful when you understand those boundaries.
Your turn: read modern JavaScript syntax
Create a greeting with a default name and extend a topic array without mutating the original.
Try this in your own HTML and JavaScript files, then open the page in a browser. There is no separate checked practice for this task yet.
- Write greet with a friend default and compare no argument, Mia, and an empty string.
- Destructure the first topic from an array and insert it into a template literal.
- Create a new array with spread and one extra topic. Log both arrays to confirm the original length stays unchanged.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.