JavaScript Essentials: Understanding Functions, Classes, and Objects

Introduction to JavaScript Essentials

JavaScript Essentials 2025 – JavaScript is one of the most widely used programming languages for building websites and web applications. It helps make web pages interactive, dynamic, and user-friendly.

To write efficient JavaScript code, it is important to understand key concepts like functions, objects, and classes. These three elements play a crucial role in structuring and organizing code.

Functions allow you to reuse code and perform tasks efficiently, objects help store and manage data in a structured way, and classes provide a blueprint for creating multiple objects with similar properties. By mastering these concepts, developers can write clean, organized, and scalable JavaScript code for real-world applications.

JavaScript Functions: A Complete Guide

Introduction

JavaScript is one of the most popular programming languages, and functions play a crucial role in making code reusable and efficient

What is a Function in JavaScript?

A function is a block of code designed to perform a specific task. Instead of writing the same code multiple times, we can define a function once and call it whenever needed.

Real-Life Example:

Think of a coffee machine. Every time you press a button, it makes coffee. Similarly, a function in JavaScript performs a task whenever it is called.

How to Declare a Function

In JavaScript, we declare a function using the function keyword. Here’s a simple example:

function greet() {
    console.log("Hello, welcome to JavaScript functions!");
}

Here, greet is the function name, and when we call greet();, it prints a message to the console.

Function with Parameters

Functions can accept inputs, called parameters, to perform specific tasks.

function addNumbers(a, b) {
    return a + b;
}

console.log(addNumbers(5, 10)); // Output: 15

Here, a and b are parameters, and we pass values 5 and 10 when calling the function.

Function with Default Parameters

We can also set default values for function parameters.

function greetUser(name = "Guest") {
    console.log("Hello, " + name + "!");
}

greetUser(); // Output: Hello, Guest!

If we don’t provide a value, the function uses the default value “Guest.”

Function Returning a Value

Functions can return results using the return keyword.

function multiply(x, y) {
    return x * y;
}

let result = multiply(4, 3);
console.log(result); // Output: 12

Anonymous Functions

An anonymous function is a function without a name.

let sum = function(x, y) {
    return x + y;
};

console.log(sum(3, 7)); // Output: 10

Arrow Functions (ES6 Feature)

Arrow functions provide a shorter syntax.

const multiplyNumbers = (x, y) => x * y;
console.log(multiplyNumbers(6, 2)); // Output: 12

Function Expressions

We can assign functions to variables.

const greet = function(name) {
    return "Hello, " + name;
};

console.log(greet("John"));

Callback Functions

A function passed as an argument to another function is called a callback function.

function showMessage(message, callback) {
    console.log(message);
    callback();
}

function greetUser() {
    console.log("Have a great day!");
}

showMessage("Welcome!", greetUser);

IIFE (Immediately Invoked Function Expression)

An IIFE runs as soon as it is defined.

(function() {
    console.log("This function runs immediately!");
})();

Higher-Order Functions

Functions that take other functions as parameters or return functions are called higher-order functions.

function operate(a, b, operation) {
    return operation(a, b);
}

function add(x, y) {
    return x + y;
}

console.log(operate(5, 3, add)); // Output: 8

Recursion

A function calling itself is called recursion.

function countdown(n) {
    if (n <= 0) {
        console.log("Done!");
        return;
    }
    console.log(n);
    countdown(n - 1);
}

countdown(5);

FAQs

JavaScript Classes: A Beginner’s Guide

Introduction

JavaScript classes provide a structured way to create objects and define their behavior. If you’ve ever worked with object-oriented programming in other languages like Java or Python, JavaScript classes will feel familiar.

What is a Class in JavaScript?

A class is a blueprint for creating objects. Instead of defining individual objects one by one, a class allows us to create multiple objects with the same properties and methods.

Real-Life Example:

Think of a car manufacturing company. Instead of designing each car separately, they create a blueprint (class) and use it to produce multiple cars (objects). Each car will have properties like color, model, and engine type, and functions like start, stop, and accelerate.

How to Declare a Class

We can create a class in JavaScript using the class keyword. Here’s a simple example:

class Car {
    constructor(brand, model) {
        this.brand = brand;
        this.model = model;
    }
}

const myCar = new Car("Toyota", "Corolla");
console.log(myCar.brand); // Output: Toyota
console.log(myCar.model); // Output: Corolla

Constructor Method

The constructor method initializes object properties when a new object is created.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

const person1 = new Person("Alice", 25);
console.log(person1.name); // Output: Alice
console.log(person1.age); // Output: 25

Adding Methods to a Class

We can add functions inside a class to define behaviors.

class Animal {
    constructor(name, sound) {
        this.name = name;
        this.sound = sound;
    }
    makeSound() {
        console.log(`${this.name} says ${this.sound}`);
    }
}

const dog = new Animal("Dog", "Woof");
dog.makeSound(); // Output: Dog says Woof

Class Inheritance

Inheritance allows a class to inherit properties and methods from another class.

class Vehicle {
    constructor(type, wheels) {
        this.type = type;
        this.wheels = wheels;
    }
    displayInfo() {
        console.log(`This is a ${this.type} with ${this.wheels} wheels.`);
    }
}

class Bike extends Vehicle {
    constructor(type, wheels, brand) {
        super(type, wheels);
        this.brand = brand;
    }
    showBrand() {
        console.log(`This bike is a ${this.brand}.`);
    }
}

const myBike = new Bike("Bike", 2, "Yamaha");
myBike.displayInfo(); // Output: This is a Bike with 2 wheels.
myBike.showBrand(); // Output: This bike is a Yamaha.

Getters and Setters

We can use getters and setters to control access to class properties.

class Employee {
    constructor(name, salary) {
        this.name = name;
        this._salary = salary;
    }
    get salary() {
        return `$${this._salary}`;
    }
    set salary(newSalary) {
        if (newSalary > 0) {
            this._salary = newSalary;
        } else {
            console.log("Salary must be positive.");
        }
    }
}

const emp = new Employee("John", 5000);
console.log(emp.salary); // Output: $5000
emp.salary = 6000;
console.log(emp.salary); // Output: $6000

Static Methods

Static methods belong to the class itself, not its instances.

class MathHelper {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathHelper.add(5, 10)); // Output: 15

Private Properties (ES2020+)

Private properties are accessible only within the class.

class BankAccount {
    #balance;
    constructor(initialBalance) {
        this.#balance = initialBalance;
    }
    getBalance() {
        return this.#balance;
    }
}

const account = new BankAccount(1000);
console.log(account.getBalance()); // Output: 1000

FAQs

JavaScript Objects: A Complete Beginner’s Guide

Introduction

In JavaScript, objects are one of the most important concepts. They help us store and organize data efficiently. Whether you’re working with user data, product details, or even game characters, objects make it easy to manage and manipulate information.

What is an Object in JavaScript?

An object in JavaScript is a collection of key-value pairs. It can store multiple related values in a single entity.

Real-Life Example:

Think of a person. A person has a name, age, and job. Instead of storing each detail separately, we can use an object to group all information together.

const person = {
    name: "John Doe",
    age: 30,
    job: "Software Developer"
};

console.log(person.name); // Output: John Doe
console.log(person.age);  // Output: 30
console.log(person.job);  // Output: Software Developer

Creating an Object

There are different ways to create objects in JavaScript:

1. Using Object Literal

This is the simplest and most commonly used method.

const car = {
    brand: "Toyota",
    model: "Corolla",
    year: 2022
};

2. Using the new Object() Syntax

This is another way to create an object but is less commonly used.

const laptop = new Object();
laptop.brand = "Dell";
laptop.model = "XPS 15";
laptop.year = 2023;

Accessing Object Properties

You can access object properties using dot notation (.) or bracket notation ([]).

console.log(car.brand);  // Output: Toyota
console.log(car["model"]);  // Output: Corolla

Adding and Removing Properties

You can add new properties to an object or delete existing ones.

car.color = "Red";  // Adding a new property
console.log(car.color);  // Output: Red

delete car.year;  // Removing a property
console.log(car.year);  // Output: undefined

Object Methods

An object method is a function stored as a property.

const person2 = {
    name: "Alice",
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

person2.greet();  // Output: Hello, my name is Alice

Using this in Objects

The this keyword refers to the object it belongs to.

const student = {
    name: "Emma",
    age: 20,
    introduce() {
        console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
    }
};

student.introduce();  // Output: Hi, I'm Emma and I'm 20 years old.

Looping Through an Object

We can loop through object properties using for...in.

for (let key in car) {
    console.log(key + ": " + car[key]);
}

Object Nesting

Objects can contain other objects.

const employee = {
    name: "David",
    position: "Manager",
    contact: {
        email: "david@example.com",
        phone: "123-456-7890"
    }
};

console.log(employee.contact.email);  // Output: david@example.com

Object Destructuring

Destructuring allows us to extract values from objects easily.

const { brand, model } = car;
console.log(brand);  // Output: Toyota
console.log(model);  // Output: Corolla

Object Spread and Rest Operators

We can use the spread operator (...) to copy objects.

const newCar = { ...car, color: "Blue" };
console.log(newCar);

Object.freeze() and Object.seal()

• Object.freeze(obj): Prevents modifications.
• Object.seal(obj): Allows modifying existing properties but prevents adding new ones.

Object.freeze(car);
car.brand = "Honda"; // This won't work
console.log(car.brand); // Output: Toyota

JSON and Objects

Objects can be converted to JSON format using JSON.stringify() and back to objects using JSON.parse().

const jsonString = JSON.stringify(car);
console.log(jsonString);

const carObject = JSON.parse(jsonString);
console.log(carObject);

FAQs

JavaScript Essentials 2025 – Summary

JavaScript functions, classes, and objects are important parts of the language. Functions are reusable code blocks that perform specific tasks and can accept inputs and return outputs. Objects store related data in key-value pairs, making information easier to manage. Classes act as templates for creating multiple objects with similar properties and behaviors, helping organize code better. These three concepts work together to make JavaScript code more efficient, reusable, and easy to maintain for real-world applications.

Understanding JavaScript Data Types: A Simple Guide with Examples