JAVASCRIPT - Part 7

The Codex (from Beginner to Pro)

Mastering Modern ES6+ JavaScript Features

ES6+ introduced powerful features that made JavaScript cleaner, faster, and more professional.

Instead of writing long, repetitive code, developers can now use modern syntax to make programs more readable and scalable.

These features are used daily in real-world applications like React, Vue, Node.js, and modern APIs.

Ternary Operator

A shortcut for if...else statements.

Syntax:

condition ? valueIfTrue : valueIfFalse;

Example:

const age = 18;

const result = age >= 18 ? "Adult" : "Minor";

Multiple Ternary Operators

Used for multiple conditions.

Example:

const score = 75;

const grade =
  score >= 90 ? "A"
  : score >= 80 ? "B"
  : score >= 70 ? "C"
  : score >= 60 ? "D"
  : "F";

parseInt Function

The parseInt() function converts a string into an integer.

Get Tochukwu Mezue’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

It reads from left to right and stops when it hits a non-numeric value.

parseInt(string, radix);

Example:

parseInt("42");        // 42
parseInt("42px");      // 42
parseInt("10", 2);     // binary → 2
parseInt("10", 10);    // decimal → 10

Example:

function getAge(input) {
  const age = parseInt(input, 10);
  return isNaN(age) ? "Invalid age" : age;
}

Mutate an Array Declared with const

const prevents reassignment, not mutation.

Example:

const fruits = ["apple", "banana"];

fruits.push("mango"); // allowed
fruits[0] = "orange"; // allowed

Prevent Object Mutation

Use Object.freeze() to stop changes.

Example:

const config = Object.freeze({
  api: "https://api.com",
  timeout: 5000
});

config.api = "changed"; // ignored

Arrow Functions

A shorter way to write functions.

Example:

const add = (a, b) => a + b;
const greet = () => "Hello";

With arrays:

const nums = [1, 2, 3];

const doubled = nums.map(n => n * 2);

Default Parameters

Set default values for function arguments.

Example:

function greet(name = "Guest") {
  return `Hello, ${name}`;
}

Rest Operator

Collects multiple values into an array.

Example:

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

Spread Operator

Expands arrays or objects.

Example:

const a = [1, 2];
const b = [3, 4];

const combined = [...a, ...b];

Destructuring Assignment

Extract values easily from arrays or objects.

Example:

const user = { name: "Teejay", age: 25 };

const { name, age } = user;

Template Literals

Cleaner way to write strings.

Example:

const name = "Teejay";

console.log(`Hello, ${name}!`);

Simple Fields (Shorthand Properties)

Skip repetition in objects.

Example:

const name = "Teejay";
const age = 25;

const user = { name, age };

Declarative Functions (Concise Methods)

Shorter method syntax in objects.

Example:

const calculator = {
  add(a, b) {
    return a + b;
  }
};

class Syntax

Modern way to create objects and reuse logic.

Example:

class Animal {
  constructor(name) {
    this.name = name;
  }

speak() {
    return `${this.name} makes a sound`;
  }
}

Getters and Setters

Control how values are accessed and updated.

Example:

class User {
  constructor(name) {
    this._name = name;
  }

get name() {
    return this._name;
  }
  set name(value) {
    this._name = value;
  }
}

import and export

Used to split code into multiple files.

Example:

// math.js
export const add = (a, b) => a + b;
export default function subtract(a, b) {
  return a - b;
}

// app.js
import subtract, { add } from "./math.js";

Medium-Level Task

ES6 Feature Practice

Create a program that:

• Stores 5 numbers in an array
• Uses arrow functions to calculate total
• Uses spread operator to copy the array
• Uses destructuring to extract first two values
• Uses template literals to display result

Conclusion

ES6+ JavaScript is the foundation of modern development.

These features help you:

• Write cleaner and shorter code
• Improve readability and maintainability
• Build scalable applications
• Work with frameworks like React, Vue, and Node.js
• Think like a professional developer

Once you master ES6+, your JavaScript stops being basic logic and becomes modern software engineering.

👉 Next up: Part 8- Understanding the JavaScript Math Object