1.1 · Modern JavaScript reminders (ES6+)

Level 1 · JavaScript & Node basics

1.1Modern JavaScript reminders (ES6+)

Goal: master modern JavaScript (const/let, arrow functions, destructuring, template literals, spread, map/filter/reduce) — the prerequisite for all Node development.
Estimated time: 11 min · self-paced reading · If you only have 5 min: read “The essentials in 30s” + the diagram.

The essentials in 30 seconds

  • const by default, let when needed, never var: const for what you don't reassign, let for what changes — both block-scoped, predictable.
  • The syntax you actually write: arrow functions, destructuring (const { nom } = obj), template literals (`Bonjour ${nom}`), spread/rest (...).
  • Functional collections: map (transform), filter (keep), reduce (aggregate) — without fluent modern JS, all of Node seems confusing.

Running mini-case — Salim, junior developer in Algiers

Salim, a junior developer at a startup in Algiers, picks up an old script written with var and nested for loops: variables “leak” out of blocks and nobody understands what the code computes. He rewrites the script in modern JavaScript — const by default, arrow functions, destructuring the objects received from the API, and a filter/map chain to extract the names of active users. The code goes from 40 obscure lines to 12 readable lines.

This same case returns in the lesson, the diagram, the script and the 48h challenge — and continues in 1.2, 1.3 and 1.4.

1. const, let, never var

Node runs JavaScript: mastering modern JS (ES6+) is the prerequisite for everything. To declare a variable: const (non-reassignable, preferred by default since most variables never change reference), let (reassignable, for counters and accumulators), and never var (confusing function scope, a source of bugs). const and let are block-scoped (limited to braces), far more predictable. The modern reflex: const by default, let if reassignment is needed, never var.

Salim replaces every var in his old script with const, except the loop counter changed to let: variables stop “leaking” out of if blocks and half the strange behaviours disappear.

2. The syntax you actually write

Everyday essentials: arrow functions ((a, b) => a + b, ideal for the callbacks omnipresent in Node, with no own this), destructuring (const { nom, age } = personne — omnipresent for imports and data), template literals (`Bonjour ${nom}` instead of concatenating with +), spread/rest (... to merge or gather).

Salim displays his users with a template literal and extracts nom and email via destructuring: no more user.name repeated ten times and unreadable concatenations.

3. map / filter / reduce: thinking in intentions

Array methods are the modern, functional way to process collections: map transforms each element (new array of the same size), filter keeps those matching a condition, reduce aggregates everything into one value (sum, grouping). Each expresses a readable-at-a-glance intention — and all modern Node code uses them constantly.

Salim replaces his for loop with users.filter(u => u.actif).map(u => u.nom): the line reads like a sentence (“keep the active ones, take their names”) and his colleague understands it without a comment.

Common misinterpretation: “const makes objects immutable” or “var, let and const are interchangeable”. No. const prevents reassignment of the variable, but the content of an object or array declared with const stays modifiable (arr.push works). And var has function scope with tricky hoisting, whereas let/const have predictable block scope: it's not just a style question, it's a bug question.
Modern JavaScript, the prerequisite for Node Three reflexes to lock in Variables const by default, letwhen needed, never varSyntax Arrow functions,destructuring, template literalsCollections map / filter /reduce (functional)
Three reflexes to lock in
Text version of the diagram (SEO / screen readers / translation): 1) Variables: Salim declares everything with const except what is reassigned (let) and bans var — block scope, predictable behaviour. 2) Syntax: arrow functions for callbacks, destructuring to extract, template literals to display. 3) Collections: filter to keep active users, map to take their names, reduce to aggregate — each line expresses an intention. Lesson: without fluent modern JS, everything else in Node seems confusing.

🔎 Concrete example — 🔎 Concrete example — map, filter, reduce

Express an intention, like Salim for his users.

const users = [{ nom: "Amine", actif: true }, { nom: "Sara", actif: false }];
const noms = users.filter(function (u) { return u.actif; }).map(function (u) { return u.nom; });
console.log(noms); // ["Amine"]
const total = [1, 2, 3].reduce(function (s, n) { return s + n; }, 0);
console.log(total); // 6
const { nom } = users[0];
console.log("Bonjour " + nom);

Reading: “keep the active ones, take their names” reads at a glance, with no index to manage.

Lesson: const by default; map/filter create new arrays instead of modifying the original.

Section vocabulary

const / let (vs var)
const: non-reassignable variable, preferred by default. let: reassignable variable. Both block-scoped; var is to be avoided (confusing function scope).

Simple example: The const users and the let counter in the script rewritten by Salim.

What it is not: a var declared inside an if that “leaks” outside the block.

Reflex: const by default, let if reassignment, never var.

Arrow function
Concise syntax for writing functions, widely used for callbacks; it has no own this, which avoids many pitfalls.

Simple example: The u => u.actif passed to filter by Salim.

What it is not: a classic function with a this that changes depending on the call.

Reflex: short callbacks = arrows.

Destructuring
Extracting values from objects or arrays in one line: const { nom } = obj or const [a, b] = arr.

Simple example: Salim extracts nom and email from each user received from the API.

What it is not: repeating user.name and user.email over ten lines.

Reflex: extract in one line, name clearly.

Template literal
String between backticks for cleanly embedding variables, with no concatenation using +.

Simple example: Salim's display of users without concatenating pieces of strings.

What it is not: "Bonjour " + nom + ", tu as " + age + " ans".

Reflex: as soon as a variable enters a string, backticks.

map / filter / reduce
Modern array methods: transform (map), keep according to a condition (filter), aggregate into one value (reduce) — functionally.

Simple example: Salim's filter + map for the names of active users.

What it is not: a for loop with index, initialised array and manual pushes.

Reflex: one intention per method, chained readably.

In practice — Hands-on — Consolidate modern JavaScript

  1. Declare variables with const (by default) and let (if reassignment); observe block scope. Ban var.
  2. Write arrow functions and use them as callbacks; compare with the classic function syntax.
  3. Practise destructuring (const { a, b } = obj) and template literals on concrete examples.
  4. Process an array with map (transform), filter (filter) and reduce (aggregate) rather than classic for loops.
You master modern JavaScript (const/let, arrow functions, destructuring, template literals, spread, map/filter/reduce) — the prerequisite for all Node development.

Ready-to-say script — justify rewriting in modern JS (30 s)

“I suggest we rewrite this script in modern JavaScript: const by default, arrow functions, and filter/map instead of for loops. The code will be twice as short, each line will express its intention, and we'll eliminate the scope bugs caused by var.”

To say in code review; show the before/after on a real excerpt of the project.

Copy-paste template — modern JS snippet

const users = [
  { nom: "Amine", actif: true },
  { nom: "Sara", actif: false }
];
const nomsActifs = users
  .filter(function (u) { return u.actif; })
  .map(function (u) { return u.nom; });
console.log(nomsActifs);
const total = [10, 20, 30].reduce(function (s, n) { return s + n; }, 0);
console.log(total);

Old script to take over

Don't rewrite everything at once: replace var with const/let first, then convert one for loop into filter/map — like Salim, in small steps verified with node.

API data in Algiers

Salim destructures the objects received from the API (const { nom, email } = user): the fields used are visible at a glance at the top of each function.

Clean console output

As soon as a message contains a variable, switch to template literals: no more concatenations with + that break log readability.

Large arrays in preparation

Getting used to chaining filter/map/reduce directly prepares section 1-2: these methods will be everywhere in processing asynchronous results.

✓ Best practices

  • const by default, let if reassignment.
  • One intention per method (filter/map).
  • Test each snippet with node.

✗ Common pitfalls

  • Believing const = immutable object.
  • Keeping var “out of habit”.
  • For loops where filter/map suffice.

Key takeaways

  • MODERN JS (ES6+) = prerequisite for Node. Variables: const by default, let if reassignment, NEVER var (block scope, predictable).
  • ARROW FUNCTIONS: concise, ideal for the callbacks omnipresent in Node; with no own this.
  • DESTRUCTURING, TEMPLATE LITERALS, SPREAD/REST: the syntax actually written today.
  • ARRAY METHODS (map/filter/reduce) = modern, functional processing of collections.

48h challenge — apply tomorrow

Rewrite an old piece of code (template above): var → const/let, one for loop → filter/map, one concatenation → template literal. Run it with node and check the result. 20 minutes is enough.

Section exit checklist
  • I can explain const vs let vs var (block scope).
  • I can write arrow functions, destructuring and template literals.
  • I converted a for loop into filter/map.
Self-assessment 1-5: do I write const by reflex rather than var?do my array operations express their intention (map/filter/reduce)?

Frequently asked questions

const, let or var: which one to use, and why avoid var?

The modern rule, to apply systematically: const by default, let if you must reassign, never var. const expresses that the reference won't change, protects against accidental reassignments (error raised early) and makes code readable. Nuance: const prevents reassignment, but the content of an object or array stays modifiable (arr.push(1) works). let is for values that change (counters, accumulators). var is to be avoided: function scope (a var declared inside an if “leaks” out of the block) and tricky hoisting — whereas const/let have a predictable, safe block scope.

Do I really need to master map/filter/reduce, or are for loops enough?

For loops work, but map/filter/reduce are the modern and idiomatic style — and you must at least understand them because they are everywhere in real Node code. map transforms each element (new array of the same size), filter keeps those matching a condition, reduce aggregates everything into one value. Advantages: expressiveness (users.filter(u => u.actif).map(u => u.nom) reads like a sentence), fewer errors (no index to manage), and they create new arrays instead of modifying the original. Like Salim, convert your loops one by one: the readability gain is immediate.

Check your understanding

Which reflex to adopt for declaring variables in modern JS?

Additional resources (optional, to go further)

Level 1 examFresh, harder questions to test what you've learned