Home » Archives for utmoker71
Author

utmoker71

Basics

JavaScript Operator Precedence

written by utmoker71

Operator Precedence Table

This table ranks JavaScript operators by their precedence, with the higher-precedence operators (executed first) at the top.

Operator Precedence Operator Description Associativity Example
1 () Grouping L -> R (expression)
2 . Member of object L -> R Object_name.property
2 () Function call L -> R Test()
2 new To create objects R -> L New example()
2 [] Member of object L -> R Object[“property”]
3 — Postfix decrement – p–;
3 ++ Postfix increment – p++
4 — Prefix decrement R -> L –p;
4 ++ Prefix increment R -> L ++p;
4 typeof To get the variable type R -> L typeof a;
4 ! Logical not R -> L !a;
4 ~ Bitwise not R -> L ~p
4 – Unary minus R -> L -p
4 + Unary plus R -> L +p
4 delete To delete object property R -> L Delete arr[0]
4 void Evaluates void R -> L Void(1)
5 ** Exponentiation operator R -> L p ** q
6 * Multiplication L -> R p * q
6 / Division L -> R p / q
6 % modulo L -> R p % q
7 + Addition or plus operator L -> R p + q
7 – Subtraction operator L -> R p – q
8 << Left shift L -> R p << 2
8 >> Signed right shift L -> R p >> 2
8 >>> Unsigned right shift L -> R p >>> 2
9 in Property in object L -> R x in y
9 instanceof Instance of object L -> R p instanceof Object
9 < Less than L -> R p < q
9 <= Less than or equal to L -> R p <= q
9 > Greater than L -> R p > q
9 >= Greater than or equal to L -> R p >= q
10 == Equality L -> R p == q
10 != Inequality L -> R p != q
10 === Strict equality L -> R p === q
10 !== Strict inequality L -> R p !== q
11 & Bitwise AND L -> R p & q
12 ^ Bitwise XOR L -> R p ^ q
13 | Bitwise OR L -> R p | q
14 && Logical AND L -> R p && q
15 || Logical OR L -> R p || q
16 ?? Nullish Coalescing R -> L p ?? q
17 = Assignment R -> L p = q
17 : Colon assignment R -> L p : q
17 += Addition assignment R -> L p += q
17 -= Subtraction assignment R -> L p -= q
17 *= Multiplication assignment R -> L p *= q
17 /= Division assignment R -> L p /= q
17 %= Modulo assignment R -> L p %= q
17 **= Exponentiation assignment R -> L p **= q
17 <<= Left shift assignement R -> L p <<= q
17 >>= Right shift assignment R -> L p >>= q
17 >>>= Unsigned right shift assignment R -> L p >>>= q
17 &= Bitwise AND assignment R -> L p &= q
17 ^= Bitwise XOR assignment R -> L p ^= q
17 |= Bitwise OR assignment R -> L p |= q
17 &&= Logical AND assignment R -> L p &&= q
17 ||= Logical OR assignement R -> L p ||= q
17 => Arrow operator – (a, b )=> { // function code}
17 … Spread operator – [… arr]
18 yield Pause / Resume R -> L yield p;
19 , Comma operator L -> R (5, 10, 15)
0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Reserved Keywords

written by utmoker71

In JavaScript, reserved keywords are terms that are set aside by the language for its internal use. These words cannot be used as identifiers (like variable names, function names, etc.).

Using them as identifiers can result in errors or unexpected behavior.

Here is a list of reserved keywords in JavaScript:

JavaScript Reserved Keywords (ES5 and ES6)

  1. break – Terminates a loop or switch statement.
  2. case – Defines a case in a switch statement.
  3. catch – Defines the block of code to handle errors in try/catch.
  4. class – Declares a class (ES6).
  5. const – Declares a block-scoped, read-only variable (ES6).
  6. continue – Skips the current iteration of a loop and continues with the next.
  7. debugger – Invokes debugging.
  8. default – Specifies the default block in a switch statement.
  9. delete – Deletes an object’s property.
  10. do – Executes a block of code once, and then repeats the loop while a condition is true.
  11. else – Specifies the block of code to execute if a condition is false.
  12. export – Exports a module (ES6).
  13. extends – Extends a class or function (ES6).
  14. finally – Executes code after try/catch regardless of the result.
  15. for – Starts a for loop.
  16. function – Declares a function.
  17. if – Specifies a block of code to execute if a condition is true.
  18. import – Imports a module (ES6).
  19. in – Tests whether an object has a specific property.
  20. instanceof – Tests whether an object is an instance of a constructor.
  21. let – Declares a block-scoped variable (ES6).
  22. new – Creates a new instance of an object.
  23. return – Returns a value from a function.
  24. super – Refers to the parent class (ES6).
  25. switch – Evaluates an expression against multiple cases.
  26. this – Refers to the current object.
  27. throw – Throws an exception.
  28. try – Tests a block of code for errors.
  29. typeof – Returns the type of a variable.
  30. var – Declares a variable.
  31. void – Discards the expression's return value.
  32. while – Starts a while loop.
  33. with – Extends the scope chain for a block of code (deprecated).
  34. yield – Pauses and resumes a generator function (ES6).

Future Reserved Keywords (ES6+)

These keywords are reserved for potential future use and should be avoided:

  1. enum
  2. await (reserved for use within async functions)
  3. implements
  4. interface
  5. package
  6. private
  7. protected
  8. public
  9. static

Reserved in Strict Mode

When using strict mode in JavaScript ("use strict";), the following keywords are also reserved:

  1. arguments
  2. eval

Contextual Keywords

Some words in JavaScript are only reserved in certain contexts (such as in classes or modules):

  1. async – Used in async functions.
  2. await – Pauses async function execution until a Promise is resolved.
  3. of – Used in for...of loops.

These reserved words are part of the core syntax of JavaScript, and it is important to avoid using them as identifiers to prevent conflicts or unexpected behaviors.

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Syntax Tutorial with Examples

written by utmoker71

JavaScript syntax refers to the set of rules that defines how JavaScript code is written and structured. Understanding JavaScript syntax is crucial for writing correct and efficient programs.

This tutorial will cover the most important aspects of JavaScript syntax, including variables, data types, operators, conditionals, loops, functions, and objects.

In this tutorial, you’ll learn:

Variables and Constants
Data Types
Operators
Conditionals (if/else statements)
Loops
Functions
Objects
Arrays
Template Literals

1. Variables and Constants

In JavaScript, variables are used to store data. You can declare variables using the let, const, or var keywords.

let: Allows you to declare variables that can be reassigned later.
const: Declares constants whose value cannot be changed once assigned.
var: The old way of declaring variables, which has function-scoped behavior. It’s better to use let and const in modern JavaScript.

Example 1: Variable Declaration

let name = "Alice";    // Declaring a variable
const age = 30;        // Declaring a constant
var city = "New York"; // Declaring a variable using var (old syntax)

console.log(name, age, city);

In this example:

name is declared with let, and its value can be changed.
age is declared with const, meaning it cannot be reassigned.
city is declared with var, which behaves similarly to let but is function-scoped.

2. Data Types

JavaScript supports multiple data types, including:

Number: Represents numeric values (integers and floats).
String: Represents text data.
Boolean: Represents logical values (true or false).
Object: Represents collections of key-value pairs.
Array: A special type of object used for storing ordered lists of values.
Undefined: A variable that has been declared but has not been assigned a value.
Null: Represents an intentional absence of value.

Example 2: Basic Data Types

let age = 25;                    // Number
let name = "Alice";               // String
let isStudent = true;             // Boolean
let city;                         // Undefined
let emptyValue = null;            // Null

console.log(typeof age);          // Output: number
console.log(typeof name);         // Output: string
console.log(typeof isStudent);    // Output: boolean
console.log(typeof city);         // Output: undefined
console.log(typeof emptyValue);   // Output: object (null is treated as an object in JavaScript)

3. Operators

JavaScript provides a wide range of operators to perform various operations on variables and values:

Arithmetic operators: +, -, *, /, %
Assignment operators: =, +=, -=, *=, /=
Comparison operators: ==, ===, !=, !==, <, >, <=, >=
Logical operators: &&, ||, !

Example 3: Using Operators

let x = 10;
let y = 5;

let sum = x + y;              // Arithmetic
let isEqual = (x === y);      // Comparison (strict equality)
let isGreater = (x > y);      // Comparison

let isBothTrue = (x > 0 && y > 0);  // Logical AND
let isEitherTrue = (x < 0 || y > 0);  // Logical OR

console.log(sum, isEqual, isGreater, isBothTrue, isEitherTrue);

In this example:

Arithmetic operators are used to calculate sum.
Comparison operators check for equality and inequality.
Logical operators (&&, ||) are used to evaluate conditions.

4. Conditionals (if/else statements)

Conditional statements in JavaScript allow you to execute different blocks of code based on conditions.

Example 4: Basic if/else Statement

let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

In this example:

The if statement checks if age is greater than or equal to 18.
If the condition is true, the first block is executed; otherwise, the else block is executed.

Example 5: if/else if/else Statement

let score = 85;

if (score >= 90) {
    console.log("Grade A");
} else if (score >= 80) {
    console.log("Grade B");
} else {
    console.log("Grade C");
}

5. Loops

Loops are used to repeatedly execute a block of code as long as a certain condition is met.

Example 6: for Loop

for (let i = 0; i < 5; i++) {
    console.log("Number:", i);
}

In this example:

The for loop runs 5 times, with the variable i incrementing by 1 in each iteration.

Example 7: while Loop

let i = 0;
while (i < 5) {
    console.log("Number:", i);
    i++;
}

In this example:

The while loop runs as long as the condition i < 5 is true.

6. Functions

Functions allow you to encapsulate code in reusable blocks. Functions can take input values (parameters) and return results.

Example 8: Function Declaration

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice"));  // Output: Hello, Alice!

In this example:

The greet function takes a name parameter and returns a greeting message.

Example 9: Function Expression (Anonymous Function)

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

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

7. Objects

Objects are key-value pairs that store data in a structured way. You can define methods (functions) inside objects.

Example 10: Defining and Accessing Object Properties

let person = {
    name: "Alice",
    age: 30,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

console.log(person.name);  // Accessing properties
person.greet();            // Output: Hello, my name is Alice

In this example:

The object person has properties (name, age) and a method (greet).

8. Arrays

Arrays are ordered lists of values and are a special type of object in JavaScript.

Example 11: Declaring and Accessing Arrays

let fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);  // Output: apple
console.log(fruits.length);  // Output: 3

fruits.push("grape");  // Adding an element to the array
console.log(fruits);  // Output: ["apple", "banana", "orange", "grape"]

9. Template Literals

Template literals provide a way to embed expressions and variables inside strings using backticks (`).

Example 12: Using Template Literals

let name = "Alice";
let age = 30;

let greeting = `Hello, my name is ${name}, and I am ${age} years old.`;
console.log(greeting);  // Output: Hello, my name is Alice, and I am 30 years old.

In this example:

Template literals allow variables to be easily embedded within strings using ${}.

Conclusion

This tutorial covers the fundamental syntax of JavaScript, including variables, data types, operators, conditionals, loops, functions, objects, arrays, and template literals. Here's a summary of what you've learned:

Variables store data, and you can declare them with let, const, or var.
Data types include numbers, strings, booleans, objects, arrays, and more.
Operators allow you to perform arithmetic, comparison, and logical operations.
Conditionals like if/else help execute code based on conditions.
Loops like for and while are used to repeat code.
Functions encapsulate reusable blocks of code.
Objects and arrays store collections of data.
Template literals make it easier to work with strings.

By mastering these essential elements of JavaScript syntax, we will cover these and many other topics in greater detail on this site.

0 comment
0 FacebookTwitterPinterestEmail
Classes

JavaScript Mixins Tutorial with Examples

written by utmoker71

Mixins in JavaScript are a flexible way to reuse code across multiple classes without using traditional inheritance.

A mixin is an object or function that provides reusable methods, which can be mixed into other classes.

Mixins help share behavior among classes in a more modular way, especially when you want to avoid deep inheritance hierarchies.

In this tutorial, you'll learn:

What are mixins in JavaScript?
Why use mixins?
Creating and applying mixins
Using mixins with ES6 classes
Practical examples of using mixins in JavaScript

1. What Are Mixins in JavaScript?

A mixin is a class, object, or function that contains methods and properties that can be added (mixed in) to other classes. Mixins allow you to share functionality between multiple classes without requiring inheritance.

Instead of creating a deep class hierarchy, you can define methods in mixins and apply them selectively to different classes.

Mixins are not native to JavaScript, but they are commonly implemented using functions that copy methods or properties from one object to another.

2. Why Use Mixins?

Mixins are useful when:

You want to share functionality between multiple classes, but these classes don’t share a common ancestor.
You want to avoid a rigid, deep inheritance hierarchy.
You want to compose behavior from multiple sources (instead of inheriting from just one class).
You need to add reusable functionality across many unrelated classes.

3. Creating and Applying Mixins

Mixins can be created using objects or functions that hold reusable logic, and then applied to other classes by copying properties and methods.

Example 1: Simple Mixin with Object.assign()

In this example, we create a mixin that adds logging functionality to any class.

// Mixin object
const loggerMixin = {
    log() {
        console.log(`${this.name} is logging...`);
    }
};

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

// Apply mixin using Object.assign
Object.assign(User.prototype, loggerMixin);

// Usage
const user = new User('Alice');
user.log();  // Output: Alice is logging...

In this example:

We define a loggerMixin object with a log method.
Using Object.assign(), we copy the methods from loggerMixin to the prototype of User, adding the log method to the class.
Now the User class has access to the log method, even though it wasn't defined directly in the class.

4. Using Mixins with ES6 Classes

In ES6, classes can use mixins to gain additional behavior. Mixins allow us to compose classes with behavior from different sources, avoiding complex inheritance hierarchies.

Example 2: Mixin for Event Handling

Let’s create a mixin that allows any class to handle events (similar to a basic version of the EventEmitter pattern).

// Mixin to add event handling capabilities
const eventMixin = {
    on(event, handler) {
        if (!this._eventHandlers) this._eventHandlers = {};
        if (!this._eventHandlers[event]) {
            this._eventHandlers[event] = [];
        }
        this._eventHandlers[event].push(handler);
    },

    off(event, handler) {
        let handlers = this._eventHandlers?.[event];
        if (!handlers) return;
        this._eventHandlers[event] = handlers.filter(h => h !== handler);
    },

    trigger(event, ...args) {
        if (!this._eventHandlers?.[event]) return;
        this._eventHandlers[event].forEach(handler => handler.apply(this, args));
    }
};

// Base class
class Button {
    constructor(label) {
        this.label = label;
    }
    
    click() {
        console.log(`${this.label} button clicked.`);
        this.trigger('click');
    }
}

// Apply the eventMixin to the Button class
Object.assign(Button.prototype, eventMixin);

// Usage
const button = new Button('Submit');

// Add event listeners using mixin methods
button.on('click', () => console.log('Button was clicked!'));

// Trigger the click event
button.click();
// Output:
// Submit button clicked.
// Button was clicked!

In this example:

The eventMixin adds on, off, and trigger methods, giving the Button class event-handling capabilities.
We use Object.assign() to mix the methods into the Button class prototype.
The Button class can now handle custom events (click event in this case).

5. Multiple Mixins with Classes

One of the advantages of mixins is that you can apply multiple mixins to a single class, composing various behaviors.

Example 3: Combining Multiple Mixins

Let’s create another mixin for formatting data and combine it with our previous eventMixin.

// Mixin for formatting
const formatMixin = {
    format() {
        return `${this.label}: formatted`;
    }
};

// Base class
class InputField {
    constructor(label) {
        this.label = label;
    }

    input() {
        console.log(`Inputting text in ${this.label} field.`);
    }
}

// Apply both mixins to the InputField class
Object.assign(InputField.prototype, eventMixin, formatMixin);

// Usage
const input = new InputField('Username');

// Using methods from both mixins
input.on('input', () => console.log('Input event triggered.'));
input.input();  // Output: Inputting text in Username field.
console.log(input.format());  // Output: Username: formatted

input.trigger('input');  // Output: Input event triggered.

In this example:

We create a new formatMixin that provides a format method.
We apply both eventMixin and formatMixin to the InputField class.
The InputField class now has methods from both mixins, making it more versatile.

6. Practical Examples of Mixins in JavaScript

Example 4: Mixins for Reusability Across Unrelated Classes

Let’s say we want to add logging and validation behavior to two different classes: Product and User. Using mixins, we can easily share this behavior.

// Logging mixin
const loggingMixin = {
    log() {
        console.log(`Logging info for ${this.name || this.title}`);
    }
};

// Validation mixin
const validationMixin = {
    validate() {
        if (this.price < 0) {
            console.log(`Validation failed for ${this.title}: Price cannot be negative.`);
        } else {
            console.log(`Validation passed for ${this.title}.`);
        }
    }
};

// Product class
class Product {
    constructor(title, price) {
        this.title = title;
        this.price = price;
    }
}

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

// Apply mixins to both classes
Object.assign(Product.prototype, loggingMixin, validationMixin);
Object.assign(User.prototype, loggingMixin);

// Using the mixed-in methods
const product = new Product('Laptop', 1500);
product.log();       // Output: Logging info for Laptop
product.validate();  // Output: Validation passed for Laptop

const user = new User('John', 25);
user.log();  // Output: Logging info for John

In this example:

Both Product and User classes share the log method via loggingMixin.
The Product class also uses the validate method from validationMixin.
Mixins allow us to share behavior between different, unrelated classes without inheritance.

7. Class Factory Mixins

Another pattern is to use a class factory function to return a class with mixed-in behavior. This approach is useful when you need to dynamically generate classes with specific behavior.

Example 5: Class Factory Mixin

// Class factory that mixes in logging behavior
function withLogging(BaseClass) {
    return class extends BaseClass {
        log() {
            console.log(`Logging info for ${this.name || this.label}`);
        }
    };
}

// Base class
class Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
}

// Apply logging mixin dynamically
const LoggedProduct = withLogging(Product);

const laptop = new LoggedProduct('Laptop', 1200);
laptop.log();  // Output: Logging info for Laptop

In this example:

The withLogging function takes a BaseClass and returns a new class that extends the base class, adding the log method.
This technique allows you to dynamically add mixins to classes without modifying the class directly.

Conclusion

Mixins provide a flexible, reusable way to share behavior across classes in JavaScript. They allow you to avoid deep inheritance hierarchies and create modular, composable code. Here's a summary of what you've learned:

Mixins allow you to share behavior between unrelated classes.
You can use Object.assign() to apply mixins to class prototypes.
Multiple mixins can be combined to add different behaviors to a class.
Class factory functions provide a way to dynamically mix behavior into classes.
Mixins are especially useful for adding functionality like logging, event handling, and validation.

By mastering mixins, you can write cleaner, more maintainable code in JavaScript, with less duplication and more flexibility!

0 comment
0 FacebookTwitterPinterestEmail
Misc

JavaScript Template Literals Tutorial with Examples

written by utmoker71

Template literals (also called template strings) in JavaScript are a powerful feature introduced in ES6 (ECMAScript 2015).

They allow you to create multi-line strings, embed variables and expressions into strings, and make string concatenation easier and more readable.

In this tutorial, you'll learn:

What are template literals?
Basic syntax of template literals
Embedding expressions with template literals
Multi-line strings with template literals
Tagged template literals
Practical examples of template literals in JavaScript

1. What Are Template Literals?

Template literals are string literals that allow embedded expressions. They are enclosed by backticks (`) rather than regular quotes (” or ‘). Template literals provide several key benefits:

Easier string interpolation (inserting variables/expressions directly in strings).
Multi-line string support.
Tagged template literals for more advanced use cases.

2. Basic Syntax of Template Literals

The basic syntax for template literals uses backticks (`) instead of single or double quotes. You can embed expressions inside ${}.

Example 1: Basic Template Literal

let name = "Alice";
let greeting = `Hello, ${name}!`;

console.log(greeting);  //

Output:

 Hello, Alice!

In this example:

The variable name is embedded into the string using ${}.
The string is enclosed in backticks (`), which allows for easier and more readable interpolation.

Example 2: Expression Embedding

You can embed any valid JavaScript expression inside a template literal.

let x = 10;
let y = 20;

let result = `The sum of ${x} and ${y} is ${x + y}.`;
console.log(result);  //

Output:

 The sum of 10 and 20 is 30.

In this example:

The expression ${x + y} evaluates to 30, and the result is inserted into the string.

3. Embedding Expressions with Template Literals

You can embed any type of expression inside a template literal, including variables, function calls, and even ternary operations.

Example 3: Function Call Inside a Template Literal

function getGreeting(name) {
    return `Hello, ${name}!`;
}

let message = `${getGreeting('Bob')}, welcome to the site.`;
console.log(message);  //

Output:

 Hello, Bob!, welcome to the site.

Here, the function getGreeting() is called inside the template literal, and the result is embedded directly into the string.

Example 4: Ternary Operator in Template Literal

let isMember = true;

let welcomeMessage = `Welcome ${isMember ? 'back' : 'to the membership'}!`;
console.log(welcomeMessage);  //

Output:

 Welcome back!

In this example:

A ternary operator is used inside the template literal to decide which part of the string to display based on the isMember variable.

4. Multi-Line Strings with Template Literals

Before ES6, creating multi-line strings required awkward concatenation or escaping newlines. With template literals, you can easily create multi-line strings without using special characters.

Example 5: Multi-Line String

let poem = `Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!`;

console.log(poem);

Output:

Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!

In this example:

The backticks allow the string to span multiple lines naturally, making it easier to write and read multi-line text.

5. Tagged Template Literals

Tagged template literals allow you to call a function (a tag) before the string is processed. This is useful for advanced use cases like escaping user input or custom formatting.

A tagged template literal is written by placing a function name (tag) before the template literal. The tag function receives the literal strings and embedded expressions as arguments.

Example 6: Tagged Template Literal

function highlight(strings, ...values) {
    return strings.map((str, i) => `${str}<strong>${values[i] || ''}</strong>`).join('');
}

let name = "Alice";
let age = 25;

let result = highlight`My name is ${name} and I am ${age} years old.`;
console.log(result);  // <strong>Output:</strong> My name is <strong>Alice</strong> and I am <strong>25</strong> years old.

In this example:

The highlight function is used as a tag. It receives the string parts and embedded expressions, then processes them to add HTML tags around the expressions.
The highlight function customizes how the template literal is outputted.

6. Practical Examples of Template Literals in JavaScript

Example 7: Generating HTML Content

Template literals can be used to generate HTML content dynamically.

let name = "John";
let age = 30;
let job = "Developer";

let htmlContent = `
  <div>
    <h1>${name}</h1>
    <p>Age: ${age}</p>
    <p>Job: ${job}</p>
  </div>
`;

console.log(htmlContent);

Output:

<div>
  <h1>John</h1>
  <p>Age: 30</p>
  <p>Job: Developer</p>
</div>

 

In this example:

Template literals are used to dynamically generate an HTML snippet, making it easy to insert variables into the structure.

Example 8: Logging with Template Literals

Template literals are helpful for creating more readable log messages.

let fileName = "report.pdf";
let fileSize = 1.5; // in MB

console.log(`File ${fileName} is ${fileSize} MB in size.`);

Output:

File report.pdf is 1.5 MB in size.

In this example:

Template literals simplify the construction of the log message by directly embedding variables into the string.

Example 9: Creating SQL Queries with Template Literals

Template literals are useful for building SQL queries dynamically.

let tableName = "users";
let userId = 123;
let query = `SELECT * FROM ${tableName} WHERE id = ${userId};`;

console.log(query);  //

Output:

 SELECT * FROM users WHERE id = 123;

In this example:

A dynamic SQL query is generated using template literals, which makes it easy to insert table names and parameters into the query string.

Conclusion

JavaScript template literals provide a powerful and flexible way to work with strings. They simplify string interpolation, make multi-line strings easier to handle, and offer advanced features like tagged templates. Here's a summary of what you've learned:

Template literals are enclosed in backticks (`) and allow embedded expressions with ${}.
You can use template literals to embed variables, functions, and expressions into strings.
Template literals support multi-line strings without the need for concatenation or escape characters.
Tagged template literals allow you to customize the output of a template literal by passing it through a function.

By using template literals, you can write more concise, readable, and maintainable code in JavaScript!

0 comment
0 FacebookTwitterPinterestEmail
Classes

JavaScript Classes Tutorial with Examples

written by utmoker71

In JavaScript, classes are a way to define blueprints for creating objects. While JavaScript has been an object-oriented language from the start, ES6 (ECMAScript 2015) introduced the class keyword, which simplifies working with object-oriented programming (OOP) concepts such as inheritance, encapsulation, and polymorphism.

Though classes in JavaScript are syntactic sugar over prototypes, they provide a more intuitive and structured way to create and manage objects.

In this tutorial, you’ll learn:

What is a class in JavaScript?
Basic syntax of JavaScript classes
Creating and using class instances
Class constructors
Class methods (instance methods and static methods)
Inheritance in classes
Using super in derived classes
Practical examples of JavaScript classes

1. What is a Class in JavaScript?

A class in JavaScript is a blueprint for creating objects with shared properties and methods. Classes help you define objects more systematically, making it easier to create and reuse objects that share the same structure and behavior.

Before ES6, objects were created using constructor functions and prototypes. The class syntax simplifies this process.

2. Basic Syntax of JavaScript Classes

A JavaScript class is defined using the class keyword, followed by the class name, and a set of methods inside a block.

Syntax:

class ClassName {
    // Constructor
    constructor(parameters) {
        // Initialization
    }

    // Instance methods
    method1() {}
    method2() {}

    // Static methods
    static staticMethod() {}
}

3. Creating and Using Class Instances

You can create an instance of a class using the new keyword. Each instance of the class can have its own properties and methods.

Example 1: Basic Class and Instance

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

    // Instance method
    greet() {
        console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
    }
}

// Creating an instance of the Person class
const person1 = new Person('Alice', 30);

// Calling the instance method
person1.greet();  // Output: Hello, my name is Alice, and I am 30 years old.

In this example:

We define a class Person with a constructor to initialize name and age.
We create an instance person1 using new Person(), and we call the greet method to print the person's details.

4. Class Constructors

The constructor method is a special method in a class that gets called automatically when a new instance of the class is created. It’s used to initialize the object's properties.

Example 2: Constructor in a Class

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

    getCarInfo() {
        return `${this.brand} ${this.model}, ${this.year}`;
    }
}

const myCar = new Car('Toyota', 'Corolla', 2021);
console.log(myCar.getCarInfo());  // Output: Toyota Corolla, 2021

In this example:

The constructor takes brand, model, and year as parameters and initializes the instance's properties.
The getCarInfo method returns a string describing the car.

5. Class Methods (Instance Methods and Static Methods)

There are two types of methods in a JavaScript class:

Instance methods: These are methods that can be called on an instance of the class.
Static methods: These are methods that belong to the class itself and cannot be called on class instances.

Example 3: Instance Methods

Instance methods are defined without the static keyword. They are called on the instances of the class.

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    // Instance method to calculate area
    getArea() {
        return this.width * this.height;
    }
}

const rect = new Rectangle(10, 20);
console.log(rect.getArea());  // Output: 200

In this example:

The getArea method is an instance method that calculates the area of the rectangle.

Example 4: Static Methods

Static methods are defined using the static keyword and are called on the class itself, not on an instance.

class MathUtil {
    // Static method to calculate the square of a number
    static square(x) {
        return x * x;
    }
}

console.log(MathUtil.square(5));  // Output: 25

In this example:

The square method is a static method that can be called on the MathUtil class itself. It cannot be called on an instance of the class.

6. Inheritance in Classes

Inheritance allows a class to extend another class, inheriting its properties and methods. The class that inherits is called the subclass or derived class, while the class being inherited from is called the superclass or base class.

Example 5: Class Inheritance

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

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

// Dog is a subclass that inherits from Animal
class Dog extends Animal {
    constructor(name, breed) {
        super(name);  // Call the parent class constructor
        this.breed = breed;
    }

    speak() {
        console.log(`${this.name} the ${this.breed} barks.`);
    }
}

const dog = new Dog('Max', 'Golden Retriever');
dog.speak();  // Output: Max the Golden Retriever barks.

In this example:

The Dog class extends the Animal class and inherits the speak method.
The super(name) call invokes the constructor of the Animal class, initializing the name property.
The Dog class overrides the speak method with its own implementation.

7. Using super in Derived Classes

The super keyword is used to call the constructor or methods of a parent class in the subclass. It helps in reusing the parent class's logic.

Example 6: Using super to Call Parent Methods

class Employee {
    constructor(name, position) {
        this.name = name;
        this.position = position;
    }

    describe() {
        return `${this.name} works as a ${this.position}.`;
    }
}

class Manager extends Employee {
    constructor(name, position, department) {
        super(name, position);  // Call the parent class constructor
        this.department = department;
    }

    describe() {
        return `${super.describe()} They manage the ${this.department} department.`;
    }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.describe());
// Output: Alice works as a Manager. They manage the Sales department.

In this example:

The Manager class extends Employee and calls the parent constructor using super.
The describe method in Manager calls the parent’s describe method using super.describe() and then adds additional information.

8. Practical Examples of JavaScript Classes

Example 7: Shopping Cart System

Let’s implement a simple shopping cart using JavaScript classes.

class Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }

    getInfo() {
        return `${this.name} - $${this.price}`;
    }
}

class Cart {
    constructor() {
        this.items = [];
    }

    addItem(product) {
        this.items.push(product);
        console.log(`${product.name} added to the cart.`);
    }

    getTotalPrice() {
        return this.items.reduce((total, product) => total + product.price, 0);
    }

    checkout() {
        console.log("Checking out...");
        console.log(`Total: $${this.getTotalPrice()}`);
    }
}

const cart = new Cart();
const product1 = new Product("Laptop", 1000);
const product2 = new Product("Phone", 600);

cart.addItem(product1);  // Output: Laptop added to the cart.
cart.addItem(product2);  // Output: Phone added to the cart.
cart.checkout();         // Output: Total: $1600

In this example:

The Product class represents a product with a name and price.
The Cart class manages a list of items, allowing you to add products and calculate the total price.
The checkout method prints the total price of all items in the cart.

Conclusion

JavaScript classes provide a powerful way to implement object-oriented programming principles such as encapsulation, inheritance, and polymorphism. Here's a summary of what you've learned:

Classes are blueprints for creating objects with shared properties and methods.
Constructors are used to initialize new objects.
Instance methods are called on class instances, while static methods belong to the class itself.
Inheritance allows you to create new classes based on existing ones.
The super keyword is used to access the parent class's constructor and methods.

By understanding and using JavaScript classes effectively, you can write cleaner, reusable, and more maintainable code!

0 comment
0 FacebookTwitterPinterestEmail
Classes

JavaScript Encapsulation Tutorial with Examples

written by utmoker71

Encapsulation is a key concept in object-oriented programming (OOP) that focuses on bundling the data (properties) and the methods (functions) that operate on that data into a single unit, usually a class or an object.

Encapsulation helps in controlling access to the internal state of an object by hiding its data and providing methods to interact with it. This makes your code more secure, maintainable, and modular.

In this tutorial, you’ll learn:

What is encapsulation in JavaScript?
How to implement encapsulation with objects and functions
Encapsulation using ES6 classes and private fields
Using getter and setter methods
Practical examples of encapsulation in JavaScript

1. What is Encapsulation in JavaScript?

Encapsulation refers to the practice of restricting direct access to the internal state of an object and only allowing controlled interaction through public methods. This concept allows you to:

Hide the internal state of an object (private variables).
Expose only necessary functionalities (public methods).
Protect the object’s state from unintended modification.
In JavaScript, encapsulation is typically achieved using:

Functions and closures.
ES6 classes with private fields and methods.

2. Implementing Encapsulation with Objects and Functions

Before ES6, encapsulation was commonly achieved using objects and functions. You can use closures to create private variables and expose public methods to interact with them.

Example 1: Encapsulation Using Closures

function Person(name, age) {
    // Private variables
    let _name = name;
    let _age = age;

    return {
        // Public method to access private data
        getDetails: function() {
            return `${_name} is ${_age} years old.`;
        },

        // Public method to update private data
        setAge: function(newAge) {
            if (newAge > 0) {
                _age = newAge;
            } else {
                console.log("Age must be positive.");
            }
        }
    };
}

const person = Person("Alice", 30);
console.log(person.getDetails());  // Output: Alice is 30 years old.
person.setAge(35);
console.log(person.getDetails());  // Output: Alice is 35 years old.

In this example:

The variables _name and _age are private because they are declared within the function scope.
The user can only access or modify these private variables through public methods like getDetails and setAge.
The internal state of the object is protected, and only the provided methods can interact with it.

3. Encapsulation Using ES6 Classes and Private Fields

With the introduction of ES6 classes and private fields (introduced in ES2020), JavaScript provides a more structured and native way to achieve encapsulation. Private fields are prefixed with a #, and they cannot be accessed or modified from outside the class.

Example 2: Encapsulation with ES6 Classes and Private Fields

class Person {
    // Private fields
    #name;
    #age;

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

    // Public method to access private fields
    getDetails() {
        return `${this.#name} is ${this.#age} years old.`;
    }

    // Public method to update private fields
    setAge(newAge) {
        if (newAge > 0) {
            this.#age = newAge;
        } else {
            console.log("Age must be positive.");
        }
    }
}

const person = new Person("Bob", 25);
console.log(person.getDetails());  // Output: Bob is 25 years old.
person.setAge(28);
console.log(person.getDetails());  // Output: Bob is 28 years old.

console.log(person.#age);  // SyntaxError: Private field '#age' must be declared in an enclosing class

In this example:

The fields #name and #age are private fields that cannot be accessed directly from outside the class.
You must use the public methods getDetails and setAge to interact with the private fields.
Attempting to access a private field like person.#age will throw a syntax error.

4. Using Getter and Setter Methods

In JavaScript, you can define getter and setter methods that provide a controlled way to access and modify the private state of an object. This is especially useful when you want to add additional logic (e.g., validation) before accessing or modifying the data.

Example 3: Using Getter and Setter Methods

class Person {
    // Private fields
    #name;
    #age;

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

    // Getter for name
    get name() {
        return this.#name;
    }

    // Setter for name
    set name(newName) {
        if (newName.length > 0) {
            this.#name = newName;
        } else {
            console.log("Name cannot be empty.");
        }
    }

    // Getter for age
    get age() {
        return this.#age;
    }

    // Setter for age with validation
    set age(newAge) {
        if (newAge > 0) {
            this.#age = newAge;
        } else {
            console.log("Age must be positive.");
        }
    }
}

const person = new Person("Charlie", 40);
console.log(person.name);  // Output: Charlie
console.log(person.age);   // Output: 40

person.name = "David";  // Updates the name
console.log(person.name);  // Output: David

person.age = -5;  // Output: Age must be positive.
console.log(person.age);  // Output: 40 (unchanged)

In this example:

Getter methods allow you to access the private fields without exposing them directly.
Setter methods allow you to modify the private fields while adding validation logic (e.g., checking if the new age is positive).
You can access and modify the fields using properties like person.name and person.age, but the actual fields are protected by encapsulation.

5. Practical Examples of Encapsulation in JavaScript

Example 4: Bank Account System

Let’s create a bank account system that encapsulates the account balance and only allows modification through specific methods.

class BankAccount {
    // Private fields
    #balance;

    constructor(initialBalance) {
        this.#balance = initialBalance;
    }

    // Public method to deposit money
    deposit(amount) {
        if (amount > 0) {
            this.#balance += amount;
            console.log(`Deposited: $${amount}`);
        } else {
            console.log("Deposit amount must be positive.");
        }
    }

    // Public method to withdraw money
    withdraw(amount) {
        if (amount > 0 && amount <= this.#balance) {
            this.#balance -= amount;
            console.log(`Withdrew: $${amount}`);
        } else {
            console.log("Invalid withdrawal amount or insufficient balance.");
        }
    }

    // Getter for balance (read-only access)
    get balance() {
        return this.#balance;
    }
}

const account = new BankAccount(100);
console.log(account.balance);  // Output: 100

account.deposit(50);  // Output: Deposited: $50
console.log(account.balance);  // Output: 150

account.withdraw(30);  // Output: Withdrew: $30
console.log(account.balance);  // Output: 120

account.withdraw(200);  // Output: Invalid withdrawal amount or insufficient balance.

In this example:

The #balance field is private and cannot be accessed directly.
The user can interact with the balance only through public methods like deposit, withdraw, and the getter method balance (which provides read-only access).
Encapsulation ensures that the internal state of the account (the balance) is protected from direct modification.

Example 5: Encapsulation in a Shopping Cart

Let’s create a shopping cart system that encapsulates the cart's internal items and provides methods to add, remove, and calculate the total price.

class ShoppingCart {
    #items = [];

    // Add item to the cart
    addItem(item, price) {
        this.#items.push({ item, price });
        console.log(`Added ${item} for $${price}`);
    }

    // Remove item from the cart
    removeItem(item) {
        const index = this.#items.findIndex((i) => i.item === item);
        if (index !== -1) {
            this.#items.splice(index, 1);
            console.log(`Removed ${item}`);
        } else {
            console.log(`${item} not found in the cart.`);
        }
    }

    // Calculate total price
    getTotalPrice() {
        return this.#items.reduce((total, item) => total + item.price, 0);
    }

    // Getter to list all items
    get items() {
        return this.#items.map((i) => i.item);
    }
}

const cart = new ShoppingCart();
cart.addItem("Laptop", 1200);  // Output: Added Laptop for $1200
cart.addItem("Phone", 800);    // Output: Added Phone for $800
console.log(cart.items);       // Output: ['Laptop', 'Phone']
console.log(cart.getTotalPrice());  // Output: 2000

cart.removeItem("Phone");  // Output: Removed Phone
console.log(cart.items);   // Output: ['Laptop']
console.log(cart.getTotalPrice());  // Output: 1200

In this example:

The #items array is private and cannot be accessed or modified directly.
The public methods addItem, removeItem, and getTotalPrice provide controlled access to the cart.
The internal state of the cart (items and prices) is encapsulated, ensuring that it can only be modified through the provided methods.

Conclusion

Encapsulation is a fundamental concept in JavaScript that helps in hiding internal implementation details and exposing only necessary functionalities through a clean interface.

Here’s a summary of what you’ve learned:

Encapsulation can be implemented using functions (closures) and objects.
ES6 introduced classes and private fields (prefixed with #) that provide a more structured way to achieve encapsulation.
Getter and setter methods allow controlled access to private data.
Encapsulation promotes data protection, code modularity, and easier maintenance.

By using encapsulation effectively in JavaScript, you can build more secure, robust, and maintainable applications!

0 comment
0 FacebookTwitterPinterestEmail
Classes

JavaScript Inheritance Tutorial with Examples

written by utmoker71

Inheritance is a core concept in object-oriented programming (OOP) that allows one class to inherit the properties and methods of another class.

In JavaScript, inheritance enables code reuse and provides a way to create hierarchical class structures where subclasses (derived classes) inherit and possibly override behavior from their parent (base) classes.

In this tutorial, you'll learn:

What is inheritance in JavaScript?
Prototypal inheritance in JavaScript
Inheritance using ES6 classes
Overriding methods in subclasses
Calling parent class methods using super
Practical examples of inheritance in JavaScript

1. What is Inheritance in JavaScript?

Inheritance is a mechanism where one object can acquire the properties and methods of another object. In JavaScript, this is commonly done via prototypes or ES6 classes.

he primary purpose of inheritance is to promote code reuse and create a hierarchy where child objects or classes can inherit behavior from parent objects or classes.

JavaScript supports two types of inheritance:

Prototypal inheritance (using prototype chains).
Class-based inheritance (introduced in ES6 with class and extends keywords).

2. Prototypal Inheritance in JavaScript

JavaScript is a prototype-based language, which means that objects can inherit directly from other objects. Each object has an internal property called [[Prototype]] (commonly accessed using __proto__ or Object.getPrototypeOf()), which points to its prototype object.

Example 1: Basic Prototypal Inheritance

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound.`);
};

function Dog(name) {
    Animal.call(this, name);  // Call the Animal constructor
}

Dog.prototype = Object.create(Animal.prototype);  // Inherit from Animal
Dog.prototype.constructor = Dog;  // Reset the constructor to Dog

Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};

const dog = new Dog("Rex");
dog.speak();  // Output: Rex barks.

In this example:

We define a constructor function Animal with a method speak in its prototype.
The Dog constructor inherits from Animal using Object.create(Animal.prototype), which sets up the inheritance chain.
We override the speak method in the Dog prototype to provide a more specific behavior for Dog.

3. Inheritance Using ES6 Classes

With ES6 (ECMAScript 2015), JavaScript introduced class syntax, which provides a more structured way to define and manage inheritance using extends and super.

Example 2: Inheritance Using ES6 Classes

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

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

class Dog extends Animal {
    constructor(name) {
        super(name);  // Call the parent class constructor
    }

    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog("Buddy");
dog.speak();  // Output: Buddy barks.

In this example:

The Animal class defines a base class with a constructor and a speak method.
The Dog class extends Animal using the extends keyword, inheriting all properties and methods from Animal.
The super(name) call inside the Dog constructor calls the parent class's constructor to initialize name.
The speak method is overridden in the Dog class.

4. Overriding Methods in Subclasses

In JavaScript, a subclass can override methods inherited from a parent class to provide more specific functionality. The subclass can provide its own implementation while still retaining access to the parent's methods.

Example 3: Overriding Methods in Subclasses

class Vehicle {
    constructor(brand) {
        this.brand = brand;
    }

    move() {
        console.log(`${this.brand} vehicle is moving.`);
    }
}

class Car extends Vehicle {
    move() {
        console.log(`${this.brand} car is driving.`);
    }
}

const myCar = new Car("Toyota");
myCar.move();  // Output: Toyota car is driving.

In this example:

The Vehicle class defines a move method.
The Car class inherits from Vehicle and overrides the move method with its own behavior.
When move() is called on the myCar object, it uses the overridden method from the Car class.

5. Calling Parent Class Methods Using super

The super keyword is used to access the parent class's methods or constructor from the subclass. This is useful when you want to extend or enhance the functionality of a parent method rather than completely overriding it.

Example 4: Using super to Call Parent Methods

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

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

class Dog extends Animal {
    constructor(name, breed) {
        super(name);  // Call the parent class constructor
        this.breed = breed;
    }

    speak() {
        super.speak();  // Call the parent class's speak method
        console.log(`${this.name} is a ${this.breed} and barks.`);
    }
}

const dog = new Dog("Max", "Golden Retriever");
dog.speak();
// Output: Max makes a sound.
//         Max is a Golden Retriever and barks.

In this example:

The super.speak() call in the Dog class allows the speak method from the Animal class to be executed first, followed by the Dog class's specific behavior.

6. Practical Examples of Inheritance in JavaScript

Example 5: Inheritance in a Shape System

Consider a system where different shapes (e.g., circle, rectangle) share some common properties but have different implementations for calculating area.

class Shape {
    constructor(color) {
        this.color = color;
    }

    getArea() {
        return 0;  // Default implementation (abstract)
    }

    describe() {
        console.log(`This is a ${this.color} shape.`);
    }
}

class Circle extends Shape {
    constructor(radius, color) {
        super(color);
        this.radius = radius;
    }

    getArea() {
        return Math.PI * this.radius ** 2;
    }
}

class Rectangle extends Shape {
    constructor(width, height, color) {
        super(color);
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }
}

const circle = new Circle(5, "red");
console.log(`Circle area: ${circle.getArea()}`);  // Output: Circle area: 78.53981633974483
circle.describe();  // Output: This is a red shape.

const rectangle = new Rectangle(4, 6, "blue");
console.log(`Rectangle area: ${rectangle.getArea()}`);  // Output: Rectangle area: 24
rectangle.describe();  // Output: This is a blue shape.

In this example:

Shape is a base class that provides a default getArea method and a common describe method for all shapes.
Circle and Rectangle inherit from Shape and override the getArea method to provide their specific calculations.
The describe method is inherited and used as-is from the Shape class.

Example 6: Inheritance in a User Management System

In a user management system, you may have different types of users (e.g., Admin, Guest) with different permissions, but they share common properties.

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

    getInfo() {
        return `${this.name} (${this.email})`;
    }
}

class Admin extends User {
    constructor(name, email, role) {
        super(name, email);
        this.role = role;
    }

    getInfo() {
        return `${super.getInfo()} - Role: ${this.role}`;
    }
}

class Guest extends User {
    constructor(name, email) {
        super(name, email);
    }

    getInfo() {
        return `${super.getInfo()} - Guest User`;
    }
}

const admin = new Admin("Alice", "alice@example.com", "Administrator");
console.log(admin.getInfo());  // Output: Alice (alice@example.com) - Role: Administrator

const guest = new Guest("Bob", "bob@example.com");
console.log(guest.getInfo());  // Output: Bob (bob@example.com) - Guest User

In this example:

User is the base class that holds common user information.
Admin and Guest are specialized user types that inherit from User but override the getInfo method to provide additional information.

Conclusion

Inheritance is a powerful feature in JavaScript that allows classes to reuse code and share behavior. Here's a summary of what you've learned:

Prototypal inheritance: The core of inheritance in JavaScript, where objects inherit properties and methods from other objects.
ES6 class-based inheritance: Provides a more familiar syntax for creating classes and handling inheritance using extends and super.
Overriding methods: Subclasses can override parent class methods to provide their own specific behavior.
Calling parent methods: Using super allows a subclass to call methods from its parent class.

By mastering inheritance, you can write more modular, reusable, and maintainable code in JavaScript!

0 comment
0 FacebookTwitterPinterestEmail
Classes

JavaScript Abstraction Tutorial with Examples

written by utmoker71

Abstraction is one of the key principles of object-oriented programming (OOP). It helps in hiding complex implementation details from the user and exposes only what is necessary for interacting with an object or system.

In JavaScript, abstraction allows you to create reusable, simplified interfaces to your code while keeping the underlying complexity hidden.

In this tutorial, you'll learn:

What is abstraction in JavaScript?
How to achieve abstraction using functions and objects
Abstract classes in JavaScript (ES6 classes)
Abstracting complexity using modules
Practical examples of abstraction in JavaScript

1. What is Abstraction in JavaScript?

Abstraction refers to the concept of hiding the internal details of how something works while exposing a simpler interface that allows the user to perform necessary tasks. The idea is to reduce complexity by providing a higher-level interface without revealing the implementation details.

In JavaScript, abstraction can be achieved in different ways:

Through functions that encapsulate specific logic.
Using objects to hide implementation details behind methods.
Using ES6 classes with private fields and methods.

2. Achieving Abstraction Using Functions and Objects

One of the simplest ways to achieve abstraction is by using functions to hide complexity. Functions encapsulate logic and expose a simple interface for performing a task.

Example 1: Abstraction Using Functions

function calculateAreaOfCircle(radius) {
    return Math.PI * radius * radius;
}

console.log(calculateAreaOfCircle(5));  // Output: 78.53981633974483

In this example:

The user only needs to call calculateAreaOfCircle and pass a radius. They don’t need to understand how the area is calculated internally.
The formula for calculating the area of a circle is hidden inside the function.

Example 2: Abstraction Using Objects

You can use objects to hide implementation details behind methods that users interact with.

const circle = {
    radius: 5,
    
    getArea() {
        return Math.PI * this.radius * this.radius;
    },

    getCircumference() {
        return 2 * Math.PI * this.radius;
    }
};

console.log(circle.getArea());  // Output: 78.53981633974483
console.log(circle.getCircumference());  // Output: 31.41592653589793

In this example:

The object circle hides the details of how the area and circumference are calculated. The user interacts only with the getArea and getCircumference methods.
The complexity of the mathematical calculations is abstracted away.

3. Abstract Classes in JavaScript (ES6 Classes)

JavaScript doesn't have explicit abstract classes like some other programming languages (e.g., Java). However, you can achieve abstraction using ES6 classes by providing base classes that contain common functionality, which derived classes can extend.

You can create classes that are not intended to be instantiated directly but are meant to be inherited and extended by other classes. These can serve as abstract classes in JavaScript.

Example 3: Abstract Class Using ES6 Classes

class Shape {
    constructor(type) {
        if (this.constructor === Shape) {
            throw new Error("Cannot instantiate abstract class Shape");
        }
        this.type = type;
    }

    getArea() {
        throw new Error("Abstract method must be implemented in derived class");
    }
}

class Circle extends Shape {
    constructor(radius) {
        super('Circle');
        this.radius = radius;
    }

    getArea() {
        return Math.PI * this.radius * this.radius;
    }
}

class Rectangle extends Shape {
    constructor(width, height) {
        super('Rectangle');
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }
}

const circle = new Circle(5);
console.log(circle.getArea());  // Output: 78.53981633974483

const rectangle = new Rectangle(4, 6);
console.log(rectangle.getArea());  // Output: 24

In this example:

The Shape class acts as an abstract class. It cannot be instantiated directly (trying to instantiate it will throw an error).
The Circle and Rectangle classes inherit from Shape and provide their own implementations of the getArea method.
The user can create instances of Circle or Rectangle and call getArea without worrying about how the area is calculated internally.

4. Abstracting Complexity Using Modules

Another way to achieve abstraction in JavaScript is through modules. By using modules, you can organize and hide the internal implementation of certain functionalities while exposing a simpler, higher-level API for interacting with the module.

Example 4: Using Modules for Abstraction

Consider an example where we create a module to manage a bank account's balance:

const BankAccount = (() => {
    let balance = 0;  // Private variable

    function deposit(amount) {
        if (amount > 0) {
            balance += amount;
            console.log(`Deposited: $${amount}`);
        } else {
            console.log("Deposit amount must be positive.");
        }
    }

    function withdraw(amount) {
        if (amount > 0 && amount <= balance) {
            balance -= amount;
            console.log(`Withdrew: $${amount}`);
        } else {
            console.log("Insufficient funds or invalid amount.");
        }
    }

    function getBalance() {
        return balance;
    }

    // Expose the public methods
    return {
        deposit,
        withdraw,
        getBalance
    };
})();

// Usage:
BankAccount.deposit(100);  // Output: Deposited: $100
BankAccount.withdraw(30);  // Output: Withdrew: $30
console.log(BankAccount.getBalance());  // Output: 70

In this example:

The module pattern is used to encapsulate and hide the internal details of the balance variable.
The user can only interact with the public methods (deposit, withdraw, getBalance) exposed by the module. The balance variable is private and not directly accessible from outside the module.
This allows for better abstraction, security, and encapsulation of the logic.

5. Practical Examples of Abstraction in JavaScript

Example 5: Abstracting API Requests

Abstraction can be useful when working with APIs. Instead of writing repetitive code for API calls, you can abstract the logic into reusable functions.

function makeRequest(url, method, data = null) {
    return fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json'
        },
        body: data ? JSON.stringify(data) : null
    })
    .then(response => response.json())
    .catch(error => console.error('Error:', error));
}

// Using the abstracted function to make GET and POST requests
makeRequest('https://api.example.com/data', 'GET')
    .then(data => console.log('GET Data:', data));

makeRequest('https://api.example.com/data', 'POST', { name: 'John' })
    .then(data => console.log('POST Data:', data));

In this example:

The makeRequest function abstracts the logic for making HTTP requests using fetch. It handles both GET and POST requests, allowing you to reuse the same function for different types of API calls.
The user doesn’t need to know the internal details of how the requests are made—they only need to provide the URL, method, and optional data.

Example 6: Abstracting User Authentication

You can abstract user authentication logic into a module to simplify login and logout functionality.

const Auth = (() => {
    let isLoggedIn = false;  // Private variable to track login status

    function login(username, password) {
        if (username === "admin" && password === "password123") {
            isLoggedIn = true;
            console.log("Login successful!");
        } else {
            console.log("Invalid credentials.");
        }
    }

    function logout() {
        isLoggedIn = false;
        console.log("Logged out.");
    }

    function getStatus() {
        return isLoggedIn ? "Logged in" : "Logged out";
    }

    // Exposing public methods
    return {
        login,
        logout,
        getStatus
    };
})();

// Usage:
Auth.login("admin", "password123");  // Output: Login successful!
console.log(Auth.getStatus());  // Output: Logged in
Auth.logout();  // Output: Logged out

In this example:

The Auth module abstracts the login and logout functionality. The internal logic and the isLoggedIn variable are hidden from external access.
The user interacts with the module via the login, logout, and getStatus methods, while the complexity is abstracted away.

Conclusion

Abstraction in JavaScript helps in simplifying code by hiding complex logic and exposing only the necessary parts through simple, reusable interfaces.

Here’s a summary of what you’ve learned:

Functions and objects are simple ways to achieve abstraction by encapsulating logic.
Abstract classes can be created using ES6 class syntax to provide base functionality that subclasses can extend.
Modules allow you to encapsulate logic and expose only the necessary public methods.
Abstraction makes code more maintainable, reusable, and easier to work with, especially when dealing with complex systems.

By using abstraction effectively, you can improve the design of your JavaScript applications, making them more robust and easier to manage!

0 comment
0 FacebookTwitterPinterestEmail
Classes

JavaScript Polymorphism Tutorial with Examples

written by utmoker71

Polymorphism is a fundamental concept in object-oriented programming (OOP), which allows different objects to be treated in a similar way based on shared behaviors or interfaces.

In JavaScript, polymorphism is often achieved through inheritance and method overriding, where objects of different types respond to the same method in their own specific way.

In this tutorial, you'll learn:

What is polymorphism?
How polymorphism works in JavaScript
Polymorphism through method overriding
Polymorphism using interfaces (duck typing)
Practical examples of polymorphism in JavaScript

1. What is Polymorphism?

Polymorphism allows objects of different types to be accessed through the same interface, usually by calling methods that behave differently depending on the object type.

This makes code more flexible and reusable since you can work with different types of objects using a uniform interface.

Polymorphism can be achieved in different ways:

Method overriding: A subclass provides its own implementation of a method that is already defined in its superclass.
Interfaces or duck typing: Objects are treated polymorphically based on the methods they implement, regardless of their actual class or type.

2. How Polymorphism Works in JavaScript

JavaScript, as a loosely-typed language, implements polymorphism primarily through prototypal inheritance and method overriding.

Since JavaScript is not a class-based language in the traditional sense, polymorphism is implemented through object prototypes or ES6 classes.

Example 1: Basic Polymorphism Using Prototypes

Let’s create a basic example of polymorphism using prototypes.

function Animal() {}

Animal.prototype.speak = function() {
    console.log("The animal makes a sound.");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype); // Inheriting from Animal
Dog.prototype.speak = function() {
    console.log("The dog barks.");
};

function Cat() {}
Cat.prototype = Object.create(Animal.prototype); // Inheriting from Animal
Cat.prototype.speak = function() {
    console.log("The cat meows.");
};

const animals = [new Dog(), new Cat()];

animals.forEach((animal) => {
    animal.speak();
});

Output:

The dog barks.
The cat meows.

In this example:

We define a speak method in the Animal prototype.
Dog and Cat inherit from Animal but override the speak method to provide their specific implementations.
This allows us to treat both Dog and Cat polymorphically when calling speak.

3. Polymorphism Through Method Overriding

One common way to achieve polymorphism in JavaScript is through method overriding. When a subclass provides a specific implementation for a method that is already defined in its superclass, we override the parent method to achieve polymorphism.

Example 2: Polymorphism with ES6 Classes

In ES6 (ECMAScript 2015), JavaScript introduced class syntax that makes object-oriented programming more explicit. Let’s see how to use polymorphism with ES6 classes.

class Animal {
    speak() {
        console.log("The animal makes a sound.");
    }
}

class Dog extends Animal {
    speak() {
        console.log("The dog barks.");
    }
}

class Cat extends Animal {
    speak() {
        console.log("The cat meows.");
    }
}

const animals = [new Dog(), new Cat()];

animals.forEach((animal) => {
    animal.speak(); // Each object calls its specific version of the speak method
});

Output:

The dog barks.
The cat meows.

In this example:

The Animal class has a generic speak method.
The Dog and Cat classes inherit from Animal but override the speak method.
When we call speak() on instances of Dog and Cat, JavaScript automatically invokes the correct method, demonstrating polymorphism.

4. Polymorphism Using Interfaces (Duck Typing)

JavaScript does not have interfaces like other languages (e.g., Java or TypeScript), but it supports duck typing, a type of polymorphism. Duck typing allows objects to be treated as instances of a particular class if they implement the same methods or properties, regardless of their actual class.

Duck typing means that an object is considered to be of a certain type if it “walks like a duck and quacks like a duck” (i.e., it has the same methods as the expected type).

Example 3: Duck Typing in JavaScript

class Car {
    drive() {
        console.log("The car is driving.");
    }
}

class Bicycle {
    drive() {
        console.log("The bicycle is being pedaled.");
    }
}

function startJourney(vehicle) {
    vehicle.drive(); // We don't care what type vehicle is, as long as it has a 'drive' method
}

const car = new Car();
const bicycle = new Bicycle();

startJourney(car);      //

Output:

 The car is driving.
startJourney(bicycle);  //

Output:

 The bicycle is being pedaled.

In this example:

Both Car and Bicycle have a drive method, but they belong to different classes.
The startJourney function treats both Car and Bicycle polymorphically because both implement the drive method.
This is an example of duck typing in JavaScript, where the actual class of the object doesn’t matter as long as it behaves like the expected type (i.e., has the required method).

5. Practical Examples of Polymorphism in JavaScript

Example 4: Polymorphism in a Payment System

Let’s implement a polymorphic payment system that processes payments through different payment methods (e.g., credit card, PayPal, or cryptocurrency). Each payment method has its own implementation of a processPayment method.

class Payment {
    processPayment() {
        console.log("Processing a generic payment.");
    }
}

class CreditCardPayment extends Payment {
    processPayment() {
        console.log("Processing a credit card payment.");
    }
}

class PayPalPayment extends Payment {
    processPayment() {
        console.log("Processing a PayPal payment.");
    }
}

class CryptoPayment extends Payment {
    processPayment() {
        console.log("Processing a cryptocurrency payment.");
    }
}

function handlePayment(payment) {
    payment.processPayment();
}

const payments = [new CreditCardPayment(), new PayPalPayment(), new CryptoPayment()];

payments.forEach((payment) => handlePayment(payment));

Output:

Processing a credit card payment.
Processing a PayPal payment.
Processing a cryptocurrency payment.

In this example:

The Payment class is the base class, and it has a default processPayment method.
The CreditCardPayment, PayPalPayment, and CryptoPayment classes override processPayment to provide specific implementations for each payment method.
The handlePayment function processes payments polymorphically, calling the correct method for each object.

Example 5: Shape Example Using Polymorphism

Let’s create a polymorphic example with different geometric shapes (circle and rectangle), each with its own implementation of a getArea method.

class Shape {
    getArea() {
        return 0; // Default area
    }
}

class Circle extends Shape {
    constructor(radius) {
        super();
        this.radius = radius;
    }

    getArea() {
        return Math.PI * this.radius ** 2;
    }
}

class Rectangle extends Shape {
    constructor(width, height) {
        super();
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }
}

function printArea(shape) {
    console.log("The area is: " + shape.getArea());
}

const circle = new Circle(5);
const rectangle = new Rectangle(4, 6);

printArea(circle);     //

Output:

 The area is: 78.53981633974483
printArea(rectangle);  //

Output:

 The area is: 24

In this example:

The Shape class provides a default getArea method.
The Circle and Rectangle classes override getArea with their specific implementations.
The printArea function treats both Circle and Rectangle polymorphically and calculates the correct area for each shape.

Conclusion

Polymorphism is a powerful concept that allows objects of different types to be treated uniformly based on shared methods or interfaces. Here's a summary of what you've learned:

Method overriding: Subclasses override methods of a superclass to provide specific implementations.
Duck typing: Objects are treated based on the methods they implement, regardless of their class.
Practical examples: You can implement polymorphism in real-world scenarios like payment systems or geometric shapes.

By mastering polymorphism in JavaScript, you can write more flexible and maintainable code that works with a variety of object types in a consistent manner!

0 comment
0 FacebookTwitterPinterestEmail
Newer Posts
Older Posts