Modern JavaScript Essentials: A Beginner's Guide to Cleaner Code

Arrow functions, destructuring, and modules in everyday JavaScript

Modern JavaScript gives you shorter ways to write functions, extract values from data, and split code across files. This guide covers three ES6+ features that you will see in current projects:

• 🔹 Arrow functions
• 🔹 Destructuring
• 🔹 Modules

The final examples combine these features into patterns that are easier to maintain.

🔹 Arrow Functions: A Simpler Way to Write Functions

Arrow functions provide a compact function syntax. They also handle this differently from regular functions, which matters in callbacks and object methods.

✏️ Old way:

function greet(name) {
  return 'Hello, ' + name;
}

✅ Modern way:

const greet = (name) => `Hello, ${name}`;

Arrow functions inherit this from the surrounding scope. That behaviour is useful in callbacks such as this timer:

Example: Timer with arrow function

const timer = {
  count: 0,
  start() {
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
};

timer.start();

🔗 MDN: Arrow functions

🔹 Destructuring: A Cleaner Way to Work with Data

Destructuring extracts selected values from an object or array into variables. It can remove repetitive property access when the names remain clear.

✏️ Old way:

const person = { name: 'Helen', age: 30 };
const name = person.name;
const age = person.age;

✅ Modern way:

const { name, age } = person;

In function parameters:

function displayUser({ name, email }) {
  console.log(`${name}'s email is ${email}`);
}

Array destructuring:

const [first, second] = ['HTML', 'CSS', 'JavaScript'];

🔗 JavaScript.info: Destructuring assignment

🔹 Modules: Building Blocks for Better Code

Modules let you separate code by responsibility and explicitly choose what each file exports. Other files can then import only what they need.

Exporting multiple named functions:

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Importing named functions:

import { add, subtract } from './utils.js';

console.log(add(2, 3)); // 5

Default export:

// math.js
export default function multiply(a, b) {
  return a * b;
}

import multiply from './math.js';

🔗 MDN: JavaScript modules

Putting the features together

These examples combine modern syntax in small tasks. Change the data and function names to test how each pattern behaves.

1. Getting Data from an API (The Modern Way)

const fetchUser = async (id) => {
  const response = await fetch(`/api/users/${id}`);
  const { name, email } = await response.json();
  return { name, email };
};

2. Object shorthand + defaults

const createUser = ({ name = 'Guest', email }) => ({
  name,
  email,
  createdAt: new Date()
});

3. Optional chaining + nullish coalescing (ES2020)

const street = user?.address?.street ?? 'Unknown street';

🔗 MDN: Optional chaining

🔗 MDN: Nullish coalescing operator

Quick reference

Further reading

• 📚 JavaScript.info Full Tutorial
• 🛠️ ES6 Features Overview
• 🧑‍💻 Frontend Masters: ES6 for Everyone
• 🎓 MDN: ES6 In Depth Series

Try the patterns

Use one of these features in a small script, then compare it with the version you would have written before. Share your experiment or question in the comments, or connect with the GraphitEdge community on LinkedIn or Bluesky.