JavaScript has evolved dramatically since the ES6 (ES2015) release, gaining features that make code more expressive, readable, and maintainable. This first part covers some of the foundational modern features every developer should know.
#let and const
The var keyword has largely been replaced by let and const, which are block-scoped rather than function-scoped.
1const PI = 3.14159; // cannot be reassigned
2let count = 0; // can be reassigned
3count += 1;
Use const by default and reach for let only when you genuinely need to reassign a variable. This signals intent and prevents accidental mutations.
#Arrow Functions
Arrow functions provide a concise syntax and lexically bind this, avoiding common pitfalls with traditional function expressions.
1// Traditional
2const double = function (n) {
3 return n * 2;
4};
5
6// Arrow
7const double = (n) => n * 2;
Because they don't rebind this, arrow functions are especially handy in callbacks and class methods.
1class Timer {
2 constructor() {
3 this.seconds = 0;
4 setInterval(() => this.seconds++, 1000); // `this` refers to the Timer instance
5 }
6}
#Template Literals
Template literals use backticks and allow string interpolation and multi-line strings without messy concatenation.
1const name = "Ada";
2const greeting = `Hello, ${name}!
3Welcome aboard.`;
You can embed any expression inside ${ }, including function calls and arithmetic.
#Destructuring
Destructuring lets you unpack values from arrays or properties from objects into distinct variables.
1// Array destructuring
2const [first, second] = [10, 20];
3
4// Object destructuring
5const user = { id: 1, username: "ada", role: "admin" };
6const { username, role } = user;
You can also set default values and rename variables:
1const { role = "guest", username: handle } = user;
#Spread and Rest Operators
The ... syntax serves two related purposes. As a spread operator it expands iterables; as a rest operator it collects remaining values.
1// Spread: combining arrays
2const a = [1, 2];
3const b = [3, 4];
4const combined = [...a, ...b]; // [1, 2, 3, 4]
5
6// Spread: copying and merging objects
7const defaults = { theme: "light", fontSize: 14 };
8const settings = { ...defaults, fontSize: 16 };
9
10// Rest: gathering function arguments
11function sum(...numbers) {
12 return numbers.reduce((total, n) => total + n, 0);
13}
14sum(1, 2, 3, 4); // 10
#Default Parameters
Functions can declare default values for parameters, reducing the need for manual checks.
1function createUser(name, role = "member") {
2 return { name, role };
3}
4
5createUser("Ada"); // { name: "Ada", role: "member" }
6createUser("Grace", "admin"); // { name: "Grace", role: "admin" }
#Shorthand Object Properties
When a variable name matches the property name, you can omit the value.
1const id = 42;
2const title = "Modern JS";
3
4// Instead of { id: id, title: title }
5const post = { id, title };
Method definitions can be shortened too:
1const calculator = {
2 add(a, b) {
3 return a + b;
4 },
5};
#Wrapping Up
These features form the backbone of modern JavaScript and appear in nearly every contemporary codebase. Mastering them makes your code cleaner and prepares you for the more advanced topics — promises, async/await, modules, and iterators — coming in Part 2.