Learning Objectives

By the end of this lesson, you should be comfortable with:

ES6+ syntax (let/const, arrow functions, destructuring)
Array methods (map, filter, reduce, find)
Async/Await and Promises
Modules (import/export)
Optional chaining and nullish coalescing

Prerequisites

This lesson assumes you have basic JavaScript knowledge. If you're completely new to JavaScript, please review:

1. Modern Variable Declarations

const and let

JavaScript introduced const and let in ES6 to replace the problematic var keyword. These provide better scoping and help prevent accidental reassignments.

// const - for values that won't be reassigned
const API_URL = 'https://api.example.com';
const user = { name: 'John', age: 25 };

// You CAN modify object properties
user.age = 26; // This works
// user = {}; // This would throw an error

// let - for values that will change
let count = 0;
count = count + 1; // This works

// Avoid var - it has function scope issues

When to use which?

const by default - Use for most declarations
let - Only when you need to reassign the variable

2. Arrow Functions

Arrow functions provide a shorter syntax for writing functions. They're especially useful for callbacks and one-liner operations. The => syntax replaces the function keyword.

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function - same thing, shorter syntax
const add = (a, b) => a + b;

// With single parameter (no parentheses needed)
const double = n => n * 2;

// With function body - use braces when you need multiple statements
const processUser = (user) => {
  const fullName = `${user.firstName} ${user.lastName}`;
  return { ...user, fullName };
};

// Arrow functions in callbacks - cleaner than anonymous functions
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

Key Difference: `this` binding

Arrow functions don't have their own this - they inherit from the parent scope. This is important when working with object methods and event handlers.

const obj = {
  name: 'RizPay',
  // Regular function - has its own 'this'
  greet: function() {
    console.log(`Hello from ${this.name}`);
  },
  // Arrow function - inherits 'this' from parent
  greetArrow: () => {
    console.log(`Hello from ${this.name}`); // 'this' is undefined
  }
};

3. Destructuring

Destructuring lets you extract values from objects and arrays into separate variables. This makes your code cleaner and avoids repetitive property access.

Object Destructuring

You can pull out specific properties from an object into standalone variables. This is heavily used in React for props and state.

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
  address: {
    city: 'Lagos',
    country: 'Nigeria'
  }
};

// Basic destructuring - extract name and email into variables
const { name, email } = user;
console.log(name); // 'John Doe'

// With renaming - use different variable names
const { name: userName, email: userEmail } = user;

// With default values - provide fallback if property doesn't exist
const { phone = 'N/A' } = user;

// Nested destructuring - reach into nested objects
const { address: { city } } = user;
console.log(city); // 'Lagos'

// In function parameters - destructure directly in the function signature
function displayUser({ name, email }) {
  console.log(`${name} - ${email}`);
}
displayUser(user);

Array Destructuring

Array destructuring works by position. The first variable gets the first element, second gets the second, and so on.

const colors = ['red', 'green', 'blue'];

// Basic - first two elements
const [first, second] = colors;
console.log(first); // 'red'

// Skip elements - use empty commas to skip positions
const [, , third] = colors;
console.log(third); // 'blue'

// Rest pattern - collect remaining elements into an array
const [primary, ...rest] = colors;
console.log(rest); // ['green', 'blue']

// Common use: useState in React returns an array of [value, setter]
const [count, setCount] = useState(0);

4. Spread Operator

The spread operator (...) expands arrays or objects into individual elements. It's useful for copying, merging, and passing multiple arguments.

// Arrays - merge multiple arrays into one
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Objects - merge objects, later properties override earlier ones
const user = { name: 'John', age: 25 };
const updatedUser = { ...user, age: 26 }; // { name: 'John', age: 26 }

// Copying - create shallow copies without reference issues
const userCopy = { ...user };
const arrCopy = [...arr1];

// Function arguments - spread array elements as separate arguments
const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 3

5. Template Literals

Template literals use backticks (`) instead of quotes. They allow string interpolation with ${expression} and multi-line strings without concatenation.

const name = 'RizPay';
const amount = 5000;

// String interpolation - embed variables and expressions directly
const message = `Welcome to ${name}! Your balance is ₦${amount}`;

// Multi-line strings - no need for \n or string concatenation
const html = `
  <div class="card">
    <h2>${name}</h2>
    <p>Amount: ₦${amount}</p>
  </div>
`;

// Expressions inside - you can put any JavaScript expression
const price = 100;
const quantity = 5;
const total = `Total: ₦${price * quantity}`;

6. Array Methods

Array methods let you transform and filter data without writing manual loops. They return new arrays (except reduce), leaving the original unchanged.

map() - Transform each element

Use map() when you want to transform every item in an array. It returns a new array with the same length.

const users = [
  { id: 1, name: 'John', active: true },
  { id: 2, name: 'Jane', active: false },
  { id: 3, name: 'Bob', active: true }
];

// Get array of names - extract one property from each object
const names = users.map(user => user.name);
// ['John', 'Jane', 'Bob']

// Transform to new structure - reshape each object
const userCards = users.map(user => ({
  label: user.name,
  status: user.active ? 'Active' : 'Inactive'
}));

filter() - Select elements matching condition

Use filter() to keep only items that pass a test. It returns a new array with fewer or equal items.

// Get only active users - keep items where condition is true
const activeUsers = users.filter(user => user.active);
// [{ id: 1, name: 'John', active: true }, { id: 3, name: 'Bob', active: true }]

// Chain with map - filter first, then transform the results
const activeNames = users
  .filter(user => user.active)
  .map(user => user.name);
// ['John', 'Bob']

find() - Get first matching element

Use find() to get a single item that matches a condition. It returns the item itself, not an array.

// Find by id - returns the first match or undefined
const user = users.find(u => u.id === 2);
// { id: 2, name: 'Jane', active: false }

// Returns undefined if not found
const notFound = users.find(u => u.id === 99);
// undefined

reduce() - Accumulate to single value

Use reduce() to combine all items into one value. The accumulator carries the result through each iteration.

const transactions = [
  { type: 'credit', amount: 1000 },
  { type: 'debit', amount: 500 },
  { type: 'credit', amount: 2000 }
];

// Sum all amounts - accumulator starts at 0, adds each amount
const total = transactions.reduce((sum, tx) => sum + tx.amount, 0);
// 3500

// Group by type - accumulator is an object that collects items by category
const grouped = transactions.reduce((acc, tx) => {
  acc[tx.type] = acc[tx.type] || [];
  acc[tx.type].push(tx);
  return acc;
}, {});

Other useful methods

These methods are great for quick checks and lookups without needing to write full loops.

const numbers = [1, 2, 3, 4, 5];

// some() - returns true if at least one element passes the test
numbers.some(n => n > 3); // true

// every() - returns true only if ALL elements pass the test
numbers.every(n => n > 0); // true

// includes() - checks if a specific value exists in the array
numbers.includes(3); // true

// findIndex() - like find(), but returns the position instead of the item
numbers.findIndex(n => n > 3); // 3

7. Async/Await and Promises

JavaScript uses Promises to handle operations that take time (like API calls). Async/await makes Promise code look synchronous and easier to read.

Promises

A Promise represents a value that will be available later. It can resolve (success) or reject (failure).

// Creating a Promise - wrap async operation in new Promise()
const fetchUser = (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: 'John' });
      } else {
        reject(new Error('Invalid ID'));
      }
    }, 1000);
  });
};

// Using Promise - .then() for success, .catch() for errors
fetchUser(1)
  .then(user => console.log(user))
  .catch(error => console.error(error));

Async/Await (Preferred)

Async/await is syntactic sugar over Promises. Mark a function as async, then use await to pause until a Promise resolves.

// Async function - the 'async' keyword allows using 'await' inside
async function getUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    const user = await response.json();
    return user;
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw error;
  }
}

// Arrow function version - same thing with arrow syntax
const getUser = async (id) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

// Multiple async operations - you can run them sequentially or in parallel
async function loadDashboard(userId) {
  try {
    // Sequential (one after another) - second waits for first
    const user = await getUser(userId);
    const transactions = await getTransactions(userId);

    // Parallel (at the same time) - both start immediately
    const [user, transactions] = await Promise.all([
      getUser(userId),
      getTransactions(userId)
    ]);

    return { user, transactions };
  } catch (error) {
    console.error('Dashboard load failed:', error);
  }
}

8. Modules (Import/Export)

Modules let you split code into separate files. Each file can export values and import from others. This keeps code organized and reusable.

Named Exports

Named exports let you export multiple values from a file. When importing, you must use the exact same names (or rename with as).

// utils.js - export multiple functions/values
export const formatCurrency = (amount) => `₦${amount.toLocaleString()}`;
export const formatDate = (date) => new Date(date).toLocaleDateString();

export function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// main.js - import specific named exports with curly braces
import { formatCurrency, formatDate } from './utils';
// or import all as a namespace object
import * as utils from './utils';
utils.formatCurrency(5000);

Default Export

Each file can have one default export. When importing, you can use any name you want (no curly braces needed).

// Button.js - export default for the main thing the file provides
export default function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

// main.js - import with any name, no curly braces
import Button from './Button'; // No curly braces needed
import MyButton from './Button'; // Can use any name

Mixed Exports

You can combine default and named exports in the same file. This is common for modules with a main export plus utilities.

// api.js - one default export plus named exports
export const API_URL = 'https://api.rizpay.app';
export const fetchData = async (endpoint) => { /* ... */ };

export default class ApiClient {
  // ...
}

// main.js - import default and named together
import ApiClient, { API_URL, fetchData } from './api';

9. Optional Chaining & Nullish Coalescing

These operators help you safely access nested properties and provide default values. They prevent "Cannot read property of undefined" errors.

Optional Chaining (?.)

The ?. operator stops evaluation and returns undefined if any part of the chain is null or undefined. No more long && chains.

const user = {
  name: 'John',
  address: {
    city: 'Lagos'
  }
};

// Without optional chaining - verbose and repetitive
const country = user && user.address && user.address.country;

// With optional chaining - clean and safe
const country = user?.address?.country; // undefined (no error)

// With arrays - safely access elements that might not exist
const firstItem = arr?.[0];

// With functions - safely call methods that might not exist
const result = obj?.someMethod?.();

Nullish Coalescing (??)

The ?? operator provides a default value only when the left side is null or undefined. Unlike ||, it doesn't treat 0 or '' as falsy.

// Returns right side only if left is null or undefined
const name = user.name ?? 'Guest';

// Different from || which checks for any falsy value
const count = 0;
console.log(count || 10); // 10 (0 is falsy)
console.log(count ?? 10); // 0 (0 is not null/undefined)

// Combining with optional chaining - safely access and provide default
const city = user?.address?.city ?? 'Unknown';

10. Short-circuit Evaluation

JavaScript evaluates && and || from left to right and stops as soon as the result is determined. This enables concise conditional patterns.

The && operator returns the first falsy value, or the last value if all are truthy. The || operator returns the first truthy value, or the last value if all are falsy.

// && - returns first falsy or last truthy
const user = { name: 'John' };
const greeting = user && `Hello, ${user.name}`; // 'Hello, John'

// Common React pattern - render component only if condition is true
{isLoggedIn && <Dashboard />}

// || - returns first truthy or last falsy
const name = userName || 'Guest';

// Set default values - if name is falsy, use 'Guest'
function greet(name) {
  name = name || 'Guest';
  console.log(`Hello, ${name}`);
}

Assignment

Task: Build a Transaction Processor

Create a file called transaction-processor.js that:

Define sample data:

const transactions = [
  { id: 1, type: 'airtime', amount: 500, status: 'completed', date: '2025-01-01' },
  { id: 2, type: 'data', amount: 1000, status: 'pending', date: '2025-01-02' },
  { id: 3, type: 'electricity', amount: 5000, status: 'completed', date: '2025-01-02' },
  { id: 4, type: 'airtime', amount: 200, status: 'failed', date: '2025-01-03' },
  { id: 5, type: 'cable', amount: 3500, status: 'completed', date: '2025-01-03' },
];

Implement these functions:

// 1. Get total amount of completed transactions
const getTotalCompleted = (transactions) => { /* ... */ };

// 2. Group transactions by type
const groupByType = (transactions) => { /* ... */ };

// 3. Get summary statistics
const getStats = (transactions) => {
  // Return: { total, completed, pending, failed, totalAmount }
};

// 4. Format transaction for display
const formatTransaction = (tx) => {
  // Return: "Airtime - ₦500 (Completed)"
};

// 5. Async function to simulate fetching and processing
const processTransactions = async (userId) => {
  // Simulate API call with setTimeout
  // Return processed transactions
};

Use these JavaScript features:

Arrow functions
Destructuring
Array methods (map, filter, reduce)
Template literals
Async/await
Optional chaining

Expected Output

console.log(getTotalCompleted(transactions)); // 9000
console.log(groupByType(transactions));
// { airtime: [...], data: [...], electricity: [...], cable: [...] }
console.log(getStats(transactions));
// { total: 5, completed: 3, pending: 1, failed: 1, totalAmount: 10200 }

Additional Resources

Next Lesson: React Fundamentals Refresher