Demystifying arrow functions, destructuring, and modules—because modern JavaScript should be accessible to everyone

Remember when JavaScript felt like a maze of function() {} statements and global variables? Don't worry—you're not alone. JavaScript has evolved to become more intuitive and beginner-friendly, and in this guide, we'll explore three powerful features that will make your code cleaner and more manageable.

Whether you're just starting out or filling in knowledge gaps, we'll walk through three game-changing ES6+ features that every developer should know:

• 🔹 Arrow functions
• 🔹 Destructuring
• 🔹 Modules

And we’ll round out with real-world modern JavaScript patterns that make your code more maintainable.

🔹 Arrow Functions: A Simpler Way to Write Functions

Remember the clunky function() {} syntax? Arrow functions are like its cooler, more streamlined cousin. They not only help you write less code but also make it easier to read. And hey—if they feel strange at first, that's totally normal! Let's break them down step by step.

✏️ Old way:

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

✅ Modern way:

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

One cool thing about arrow functions is how they handle something called this. Don't worry if that term is new to you—the main thing to know is that arrow functions make it easier to work with timers and events. Let's see how:

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

Think of destructuring like unpacking a suitcase—instead of digging through the whole thing to find what you need, you can pull out exactly what you want in one go. Let's explore how this makes your code more organized and easier to manage.

✏️ 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

Remember when all your JavaScript code lived in one giant file? Modules are like organizing your code into neat, labeled boxes. They help keep your code tidy and make it easier to share with others. Let's explore how they work!

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 It All Together: Real Examples You Can Use

Now comes the fun part! Let's see how these features work together in real situations. Feel free to experiment with these patterns—they're more like recipes than rules. Try modifying them for your own needs!

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 Guide

📘 Ready to Explore Further?

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

💬 Let's Learn Together

We've covered a lot, and it's okay if some concepts still feel fuzzy—that's part of the learning process! What modern JavaScript features are you excited to try? Having trouble with any particular concept? Share your experiments or questions in the comments, or connect with our community on LinkedIn or Bluesky. Remember, every developer started somewhere, and we're here to help you grow!