Let’s Learn

JS SKILLS

Ready to get started

Courses Details

Table of Contents

Free Javascript Materials and Resources

Module 1: Introduction to JavaScript

Objective: Understand the fundamentals of JavaScript, its role in web development, and how to set up and use JavaScript in your projects.

1. What is JavaScript?

JavaScript is a programming language that allows you to implement dynamic features on websites, such as:

  • Interactive elements (e.g., forms, buttons).
  • Dynamic updates (e.g., updating content without refreshing the page).
  • Advanced functionality (e.g., creating animations, games, or single-page applications).

Key Features:

  1. Client-side: Runs in the browser, making web pages interactive.
  2. Cross-platform: Works on all major browsers and platforms.
  3. Versatile: Can be used for frontend and backend (Node.js) development.

2. Setting Up Your Environment

Before writing JavaScript, you need a proper setup:

A. Text Editor or IDE

  • VS Code (Recommended): Free, lightweight, and powerful.
  • Other options: Sublime Text, Atom, WebStorm.

B. Browser

  • Modern browsers like Google Chrome, Firefox, or Edge come with built-in developer tools for JavaScript debugging.

C. Developer Tools

  1. Open the Developer Tools in your browser (Shortcut: Ctrl + Shift + I or Cmd + Option + I).
  2. Go to the Console tab to write and test JavaScript.

3. Adding JavaScript to Your Web Page

There are three main ways to include JavaScript in your project:

A. Inline JavaScript

  • Add JavaScript directly inside an HTML element.
<button onclick="alert('Hello, JavaScript!')">Click Me</button>

B. Internal JavaScript

  • Add JavaScript inside a <script> tag within the HTML file.
<!DOCTYPE html>
<html>
<head>
  <title>Internal JavaScript</title>
</head>
<body>
  <h1>Welcome to JavaScript!</h1>
  <script>
    console.log("Hello, JavaScript!");
  </script>
</body>
</html>

C. External JavaScript

  • Save JavaScript in a separate .js file and link it to your HTML.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>External JavaScript</title>
</head>
<body>
  <h1>Using External JavaScript</h1>
  <script src="script.js"></script>
</body>
</html>

script.js:

console.log("This is an external JavaScript file!");

4. Basic JavaScript Syntax

A. Writing Your First Code

console.log("Hello, world!"); // Logs output to the console

B. Comments

  • Single-line comment: Use // for single-line comments.
    // This is a comment
  • Multi-line comment: Use /* */ for multi-line comments.
    /*
 This is a
 multi-line comment.
*/

5. JavaScript in Action

Here’s a simple example to see JavaScript in action:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript in Action</title>
</head>
<body>
  <h1 id="greeting">Hello!</h1>
  <button onclick="changeText()">Click Me</button>

  <script>
    function changeText() {
      document.getElementById("greeting").innerText = "Welcome to JavaScript!";
    }
  </script>
</body>
</html>

Explanation:

  • The button triggers the changeText function.
  • The function changes the text inside the <h1> element.

6. JavaScript Rules and Best Practices

  1. Case-Sensitivity:

    • JavaScript is case-sensitive. For example, myVariable and myvariable are different.

  2. Semicolons:

    • Semicolons (;) are optional but recommended to avoid errors.

  3. File Naming:

    • Use .js as the file extension for JavaScript files.

  4. Indentation and Formatting:

    • Follow consistent formatting to improve readability.

7. Practical Exercises

Exercise 1: Console Log

Write a script that logs your name and favorite hobby to the console.

console.log("My name is John, and I love coding!");

Exercise 2: Adding Inline JavaScript

Create a button that shows an alert when clicked.

<button onclick="alert('You clicked me!')">Click Me</button>

Exercise 3: Changing Content

Use JavaScript to change the content of a paragraph when a button is clicked.

HTML:

<p id="text">Original text</p>
<button onclick="changeText()">Change Text</button>

JavaScript:

function changeText() {
  document.getElementById("text").innerText = "Text changed!";
}

8. Recommended Resources

A. Documentation and Guides

  1. MDN Web Docs: JavaScript:
    • Comprehensive guide for learning JavaScript.
  2. W3Schools JavaScript Tutorial:
    • Beginner-friendly examples and explanations.

B. Practice Platforms

  1. freeCodeCamp:
    • Interactive JavaScript lessons and challenges.
  2. CodeWars:
    • Solve coding challenges to improve your skills.

9. Summary

Key Takeaways:

  1. JavaScript is a versatile, client-side programming language that makes websites dynamic and interactive.
  2. You can include JavaScript in your HTML using inline, internal, or external scripts.
  3. Practice writing JavaScript in your browser console to test and debug.

 

Module 2: JavaScript Basics

Objective: Understand the fundamental building blocks of JavaScript, including variables, data types, operators, and basic syntax. This module sets the foundation for all advanced JavaScript concepts.

  • Variables (var, let, const).
  • Data types and operators.
  • Functions and scope.

1. Variables

Variables are used to store data values in JavaScript. You can think of them as containers for information.

A. Declaring Variables

JavaScript provides three keywords to declare variables:

  • var (older, rarely used now)
  • let (block-scoped, modern)
  • const (block-scoped, immutable)

Syntax:

let variableName = value; // Declares a variable with a value
const constantName = value; // Declares a constant

Examples:

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

console.log(name); // Output: Alice
console.log(age);  // Output: 25

B. Rules for Variable Names

  1. Must start with a letter, _, or $.
  2. Cannot use reserved keywords (e.g., let, if, function).

2. Data Types

JavaScript has two main types of data: primitive and object.

A. Primitive Data Types

  1. String: Text enclosed in quotes.
    let message = "Hello, World!";
  2. Number: Integers or decimals.
    let number = 42;
let price = 99.99;
  3. Boolean: true or false.
    let isAvailable = true;
  4. Undefined: A variable declared but not assigned a value.
    let x;
console.log(x); // Output: undefined
  5. Null: Represents no value or empty.
    let y = null;
  6. Symbol: Unique identifier (used in advanced concepts).

B. Non-Primitive Data Types

  1. Object: A collection of key-value pairs.

    let person = {
  name: "Alice",
  age: 25
};

  2. Array: Ordered collection of values.

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

3. Operators

Operators are used to perform actions on variables or values.

A. Arithmetic Operators

OperatorDescriptionExample
+Addition5 + 3 = 8
-Subtraction5 - 3 = 2
*Multiplication5 * 3 = 15
/Division6 / 2 = 3
%Modulus (remainder)5 % 2 = 1

B. Comparison Operators

OperatorDescriptionExample
==Equal (loose)5 == "5" (true)
===Strict equal5 === "5" (false)
!=Not equal5 != 4 (true)
<Less than5 < 10 (true)
>Greater than10 > 5 (true)

C. Logical Operators

OperatorDescriptionExample
&&ANDtrue && false (false)
` `
!NOT!true (false)

4. Strings

Strings represent text and can be manipulated using various methods.

A. Concatenation

Combine strings using + or template literals.

let name = "Alice";
let greeting = "Hello, " + name + "!";
console.log(greeting); // Output: Hello, Alice!

// Using template literals
let age = 25;
console.log(`I am ${name} and I am ${age} years old.`);

B. Common String Methods

MethodDescriptionExample
.lengthReturns the string length"hello".length (5)
.toUpperCase()Converts to uppercase"hello".toUpperCase()
.toLowerCase()Converts to lowercase"HELLO".toLowerCase()
.indexOf()Finds the first occurrence of text"hello".indexOf("e") (1)
.slice()Extracts part of a string"hello".slice(1, 3) (“el”)

5. Functions

Functions are blocks of reusable code.

A. Defining Functions

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

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

B. Arrow Functions

A shorthand for defining functions.

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Bob")); // Output: Hello, Bob!

6. Control Flow

A. Conditional Statements

Use if, else if, and else to control the flow of the program.

let age = 18;

if (age < 18) {
  console.log("Too young to vote.");
} else if (age === 18) {
  console.log("Congratulations on your first vote!");
} else {
  console.log("You are eligible to vote.");
}

B. Switch Statements

Used for multiple conditions.

let color = "red";

switch (color) {
  case "red":
    console.log("You chose red.");
    break;
  case "blue":
    console.log("You chose blue.");
    break;
  default:
    console.log("Color not recognized.");
}

7. Loops

Loops help perform repetitive tasks.

A. For Loop

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

B. While Loop

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

8. Practical Exercises

Exercise 1: Sum of Two Numbers

Write a function that takes two numbers as arguments and returns their sum.

function add(a, b) {
  return a + b;
}
console.log(add(5, 3)); // Output: 8

Exercise 2: Check Even or Odd

Write a script that checks whether a number is even or odd.

let number = 7;
if (number % 2 === 0) {
  console.log(`${number} is even.`);
} else {
  console.log(`${number} is odd.`);
}

Exercise 3: Loop through an Array

Create an array of fruits and log each fruit to the console.

let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}

9. Summary

Key Takeaways:

  1. JavaScript variables store data using let, const, or var.
  2. There are primitive (string, number, etc.) and non-primitive (object, array) data types.
  3. Operators perform calculations and comparisons.
  4. Loops and control flow structures help handle repetitive tasks and conditions.

Module 3: Control Flow and Loops

Objective: Learn how to control the flow of your JavaScript programs using conditional statements and loops to handle repetitive tasks effectively.

1. Conditional Statements

Conditional statements help execute specific blocks of code based on a condition.

A. if, else if, and else

Syntax:

if (condition) {
  // Executes if condition is true
} else if (anotherCondition) {
  // Executes if anotherCondition is true
} else {
  // Executes if no conditions are true
}

Example:

let age = 18;

if (age < 18) {
  console.log("Too young to vote.");
} else if (age === 18) {
  console.log("You can vote for the first time!");
} else {
  console.log("You are eligible to vote.");
}

B. Logical Operators in Conditions

OperatorDescriptionExample
&&Logical ANDx > 0 && y > 0
` `
!Logical NOT (negates the value)!(x > 0)

Example:

let score = 85;

if (score > 90 && score <= 100) {
  console.log("Grade: A");
} else if (score > 75 || score <= 90) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

C. switch Statement

The switch statement is used to handle multiple conditions more cleanly.

Syntax:

switch (expression) {
  case value1:
    // Code to execute if expression === value1
    break;
  case value2:
    // Code to execute if expression === value2
    break;
  default:
    // Code to execute if no cases match
}

Example:

let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Invalid day");
}

2. Loops

Loops allow repetitive execution of code blocks.

A. for Loop

A for loop is used when the number of iterations is known.

Syntax:

for (initialization; condition; increment) {
  // Code to execute
}

Example:

for (let i = 0; i < 5; i++) {
  console.log(`Iteration ${i}`);
}

B. while Loop

A while loop runs as long as the condition is true.

Syntax:

while (condition) {
  // Code to execute
}

Example:

let count = 0;

while (count < 5) {
  console.log(`Count: ${count}`);
  count++;
}

C. do-while Loop

A do-while loop is similar to while, but it guarantees at least one execution.

Syntax:

do {
  // Code to execute
} while (condition);

Example:

let count = 0;

do {
  console.log(`Count: ${count}`);
  count++;
} while (count < 5);

D. for...of Loop

The for...of loop iterates over iterable objects (e.g., arrays, strings).

Syntax:

for (let element of iterable) {
  // Code to execute
}

Example:

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

for (let fruit of fruits) {
  console.log(fruit);
}

E. for...in Loop

The for...in loop iterates over the keys of an object.

Syntax:

for (let key in object) {
  // Code to execute
}

Example:

let person = {
  name: "Alice",
  age: 25,
  city: "New York"
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

3. Break and Continue

A. break

Stops the loop immediately.

Example:

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Exit loop
  }
  console.log(i);
}

B. continue

Skips the current iteration and moves to the next.

Example:

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue; // Skip iteration
  }
  console.log(i);
}

4. Practical Exercises

Exercise 1: Even or Odd

Write a loop to check if numbers from 1 to 10 are even or odd.

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(`${i} is even`);
  } else {
    console.log(`${i} is odd`);
  }
}

Exercise 2: Multiplication Table

Write a for loop to generate a multiplication table for 5.

for (let i = 1; i <= 10; i++) {
  console.log(`5 x ${i} = ${5 * i}`);
}

Exercise 3: Looping Through an Object

Write a script to loop through an object and log the keys and values.

let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

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

Exercise 4: Sum of Array

Write a loop to calculate the sum of numbers in an array.

let numbers = [1, 2, 3, 4, 5];
let sum = 0;

for (let num of numbers) {
  sum += num;
}

console.log(`Sum: ${sum}`);

Exercise 5: Reverse a String

Use a for loop to reverse a string.

let str = "JavaScript";
let reversed = "";

for (let i = str.length - 1; i >= 0; i--) {
  reversed += str[i];
}

console.log(`Reversed: ${reversed}`);

5. Summary

Key Takeaways:

  1. Use conditional statements (if, else, switch) to control program flow.
  2. Loops (for, while, do-while, for...of, for...in) are essential for repetitive tasks.
  3. break and continue provide additional control over loop execution.
  4. Choosing the right loop depends on the data structure and problem.

Module 4: DOM Manipulation

Objective: Learn how to interact with and manipulate the Document Object Model (DOM) to create dynamic, interactive web pages.

1. What is the DOM?

The DOM (Document Object Model) is a tree-like structure that represents the elements of an HTML document. Using JavaScript, you can:

  • Select HTML elements.
  • Modify content and styles.
  • Respond to user interactions.

2. Selecting Elements

A. getElementById

Selects an element by its id.

Syntax:

document.getElementById("id");

Example:

<div id="welcome">Hello!</div>
<script>
  let element = document.getElementById("welcome");
  console.log(element); // Logs the div with id="welcome"
</script>

B. querySelector

Selects the first element that matches a CSS selector.

Syntax:

document.querySelector("selector");

Example:

<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>
<script>
  let element = document.querySelector(".text");
  console.log(element); // Logs the first paragraph
</script>

C. querySelectorAll

Selects all elements matching a CSS selector and returns a NodeList.

Syntax:

document.querySelectorAll("selector");

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<script>
  let items = document.querySelectorAll("li");
  console.log(items); // Logs a NodeList of all <li> elements
</script>

3. Modifying Content and Styles

A. Changing Content

You can change the text or HTML inside an element using innerText, innerHTML, or textContent.

Examples:

<div id="message">Original Text</div>
<script>
  let message = document.getElementById("message");

  // Change text content
  message.innerText = "Updated Text";

  // Add HTML content
  message.innerHTML = "<strong>Updated Text with Bold</strong>";
</script>

B. Changing Styles

Use the .style property to apply inline CSS.

Example:

<p id="text">Change my color!</p>
<script>
  let text = document.getElementById("text");
  text.style.color = "blue";
  text.style.fontSize = "20px";
</script>

Commonly Used Style Properties:

PropertyJavaScript Equivalent
background-colorbackgroundColor
font-sizefontSize
text-aligntextAlign

4. Event Handling

Events are actions (e.g., clicks, keystrokes) that occur on the webpage. Event handlers allow you to respond to these actions.

A. Adding Event Listeners

Use the .addEventListener() method to attach an event listener to an element.

Syntax:

element.addEventListener("event", function);

Example:

<button id="myButton">Click Me!</button>
<script>
  let button = document.getElementById("myButton");
  button.addEventListener("click", () => {
    alert("Button clicked!");
  });
</script>

B. Event Types

EventDescription
clickTriggered when an element is clicked
mouseoverTriggered when hovering over an element
keydownTriggered when a key is pressed
submitTriggered when a form is submitted

C. Event Object

The event object provides details about the event (e.g., the element triggering it).

Example:

<button id="myButton">Click Me!</button>
<script>
  let button = document.getElementById("myButton");
  button.addEventListener("click", (event) => {
    console.log(event.target); // Logs the button element
  });
</script>

5. Putting It All Together

Here’s a complete example demonstrating DOM manipulation and event handling:

Example: Interactive Counter

<div>
  <button id="decrease">-</button>
  <span id="counter">0</span>
  <button id="increase">+</button>
</div>
<script>
  let counter = 0;
  const counterElement = document.getElementById("counter");
  const decreaseButton = document.getElementById("decrease");
  const increaseButton = document.getElementById("increase");

  decreaseButton.addEventListener("click", () => {
    counter--;
    counterElement.innerText = counter;
  });

  increaseButton.addEventListener("click", () => {
    counter++;
    counterElement.innerText = counter;
  });
</script>

6. Practical Exercises

Exercise 1: Change Background Color

Create a button that changes the background color of a div when clicked.

HTML:

<div id="box" style="width: 100px; height: 100px; background-color: lightgray;"></div>
<button id="changeColor">Change Color</button>

JavaScript:

let box = document.getElementById("box");
let button = document.getElementById("changeColor");

button.addEventListener("click", () => {
  box.style.backgroundColor = "blue";
});

Exercise 2: Show/Hide Content

Create a button that toggles the visibility of a paragraph.

HTML:

<p id="text">This is a paragraph.</p>
<button id="toggle">Show/Hide</button>

JavaScript:

let text = document.getElementById("text");
let button = document.getElementById("toggle");

button.addEventListener("click", () => {
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
});

Exercise 3: Create a To-Do List

Write a script to allow users to add items to a to-do list.

HTML:

<input id="todoInput" type="text" placeholder="Enter a task">
<button id="addTask">Add Task</button>
<ul id="todoList"></ul>

JavaScript:

let input = document.getElementById("todoInput");
let button = document.getElementById("addTask");
let list = document.getElementById("todoList");

button.addEventListener("click", () => {
  let task = input.value;
  if (task) {
    let listItem = document.createElement("li");
    listItem.innerText = task;
    list.appendChild(listItem);
    input.value = ""; // Clear the input field
  }
});

7. Summary

Key Takeaways:

  1. Use methods like getElementById and querySelector to select DOM elements.
  2. Modify element content with innerText or innerHTML and styles with .style.
  3. Attach event listeners using .addEventListener() to respond to user interactions.
  4. Combine DOM manipulation and event handling to build interactive web applications.

Module 5: Arrays and Objects

Objective: Learn how to use arrays and objects, their methods, and how to iterate through them to work with data efficiently in JavaScript.

1. Arrays

An array is a collection of ordered elements, such as numbers, strings, or objects.

A. Creating Arrays

// Array of strings
let fruits = ["apple", "banana", "cherry"];

// Array of numbers
let numbers = [1, 2, 3, 4, 5];

// Mixed array
let mixed = ["hello", 42, true];

B. Common Array Methods

1. push()

Adds an element to the end of the array.

let fruits = ["apple", "banana"];
fruits.push("cherry");
console.log(fruits); // ["apple", "banana", "cherry"]

2. pop()

Removes the last element from the array.

fruits.pop();
console.log(fruits); // ["apple", "banana"]

3. shift()

Removes the first element from the array.

fruits.shift();
console.log(fruits); // ["banana"]

4. unshift()

Adds an element to the beginning of the array.

fruits.unshift("mango");
console.log(fruits); // ["mango", "banana"]

5. map()

Creates a new array by applying a function to each element.

let numbers = [1, 2, 3, 4];
let squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

6. filter()

Creates a new array with elements that pass a condition.

let numbers = [1, 2, 3, 4, 5];
let even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

7. reduce()

Reduces the array to a single value by applying a function to each element.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

8. slice()

Extracts a portion of the array.

let fruits = ["apple", "banana", "cherry", "mango"];
let sliced = fruits.slice(1, 3); // Start at index 1, end before index 3
console.log(sliced); // ["banana", "cherry"]

9. splice()

Adds or removes elements at a specific index.

let fruits = ["apple", "banana", "cherry"];
fruits.splice(1, 1, "mango", "orange"); // Remove 1 element at index 1 and add "mango" and "orange"
console.log(fruits); // ["apple", "mango", "orange", "cherry"]

2. Objects

An object is a collection of key-value pairs.

A. Creating Objects

let person = {
  name: "Alice",
  age: 25,
  city: "New York"
};

B. Accessing Object Properties

  • Dot notation:
    console.log(person.name); // Alice
  • Bracket notation:
    console.log(person["age"]); // 25

C. Adding, Updating, and Deleting Properties

let person = { name: "Alice" };

// Add a property
person.age = 25;

// Update a property
person.name = "Bob";

// Delete a property
delete person.age;

console.log(person); // { name: "Bob" }

D. Methods in Objects

Objects can have methods (functions as properties).

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

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

3. Iterating Through Arrays and Objects

A. Iterating Through Arrays

1. Using for Loop

let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

2. Using for...of

for (let fruit of fruits) {
  console.log(fruit);
}

3. Using forEach()

fruits.forEach(fruit => console.log(fruit));

B. Iterating Through Objects

1. Using for...in

let person = { name: "Alice", age: 25, city: "New York" };
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

2. Using Object.keys()

Returns an array of the object’s keys.

let keys = Object.keys(person);
keys.forEach(key => console.log(`${key}: ${person[key]}`));

3. Using Object.values()

Returns an array of the object’s values.

let values = Object.values(person);
values.forEach(value => console.log(value));

4. Using Object.entries()

Returns an array of key-value pairs.

let entries = Object.entries(person);
entries.forEach(([key, value]) => console.log(`${key}: ${value}`));

4. Practical Exercises

Exercise 1: Add and Remove from an Array

Write a script to add “grape” to an array and remove “banana”.

let fruits = ["apple", "banana", "cherry"];
fruits.push("grape");
fruits.splice(fruits.indexOf("banana"), 1);
console.log(fruits); // ["apple", "cherry", "grape"]

Exercise 2: Filter Even Numbers

Write a script to filter even numbers from an array.

let numbers = [1, 2, 3, 4, 5];
let even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

Exercise 3: Object Manipulation

Write a script to add a new property to an object and log all key-value pairs.

let car = { brand: "Toyota", model: "Corolla" };
car.year = 2020;

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

Exercise 4: Summing Array Elements

Write a script to calculate the total price of items in a cart.

let cart = [10, 20, 15, 30];
let total = cart.reduce((acc, curr) => acc + curr, 0);
console.log(`Total: $${total}`);

Exercise 5: Find Maximum in an Array

Write a script to find the largest number in an array.

let numbers = [3, 7, 2, 8, 5];
let max = Math.max(...numbers);
console.log(`Max: ${max}`);

5. Summary

Key Takeaways:

  1. Arrays are ordered collections; use methods like push, pop, map, and filter for manipulation.
  2. Objects store data in key-value pairs; you can add, update, and delete properties dynamically.
  3. Use loops like for, for...of, for...in, and array methods (forEach, map) to iterate through arrays and objects.

 

Module 6: Functions and Advanced Concepts

Objective: Learn how to write more advanced and reusable JavaScript code using callback functions, closures, higher-order functions, and arrow functions.

1. Callback Functions

A callback function is a function passed as an argument to another function. It is executed after the completion of the outer function.

A. Why Use Callback Functions?

Callbacks allow you to:

  • Execute code asynchronously.
  • Reuse functions as arguments.

B. Example: Basic Callback Function

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

function processUserInput(callback) {
  const name = "Alice";
  callback(name);
}

processUserInput(greet); // Output: Hello, Alice!

C. Example: Asynchronous Callback

setTimeout(() => {
  console.log("This runs after 2 seconds.");
}, 2000);

2. Closures

A closure is a function that has access to its own scope, the scope of the outer function, and the global scope even after the outer function has returned.

A. How Closures Work

When a function is returned from another function, it “remembers” the variables from its outer scope.

B. Example: Basic Closure

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log(`Outer: ${outerVariable}, Inner: ${innerVariable}`);
  };
}

const closureFunc = outerFunction("outside");
closureFunc("inside"); // Output: Outer: outside, Inner: inside

C. Practical Use Case: Creating Private Variables

function counter() {
  let count = 0; // Private variable
  return {
    increment: () => count++,
    getCount: () => count
  };
}

const myCounter = counter();
myCounter.increment();
console.log(myCounter.getCount()); // Output: 1

3. Higher-Order Functions

A higher-order function is a function that takes another function as an argument or returns a function.

A. Example: Passing Functions

function repeatAction(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeatAction(3, console.log);
// Output:
// 0
// 1
// 2

B. Example: Returning Functions

function createMultiplier(multiplier) {
  return function (num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

C. Built-In Higher-Order Functions

  1. map(): Transforms each element in an array.

    const nums = [1, 2, 3];
const doubled = nums.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

  2. filter(): Filters elements based on a condition.

    const nums = [1, 2, 3, 4];
const evens = nums.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

  3. reduce(): Reduces an array to a single value.

    const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

4. Arrow Functions

Arrow functions provide a shorter syntax for writing functions. They do not bind their own this or arguments.

A. Syntax

const add = (a, b) => a + b;
console.log(add(3, 4)); // Output: 7

B. Shorter Syntax for Single Parameters

const greet = name => `Hello, ${name}!`;
console.log(greet("Alice")); // Output: Hello, Alice!

C. Implicit Return

If the function body is a single expression, the value is returned implicitly.

const square = num => num * num;
console.log(square(5)); // Output: 25

5. Arrow Functions and this

Arrow functions do not have their own this. Instead, they inherit this from their surrounding context.

A. Example: Regular Function vs Arrow Function

function Person(name) {
  this.name = name;

  this.greetRegular = function () {
    console.log(`Hello, my name is ${this.name}.`);
  };

  this.greetArrow = () => {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

const person = new Person("Alice");
person.greetRegular(); // Output: Hello, my name is Alice.
person.greetArrow();   // Output: Hello, my name is Alice.

B. this in a Regular Function

In regular functions, this depends on how the function is called:

function sayHello() {
  console.log(this);
}

sayHello(); // `this` refers to the global object

6. Practical Examples

Example 1: Delay Execution with a Callback

Write a function that accepts a callback to execute after 2 seconds.

function delay(callback) {
  setTimeout(callback, 2000);
}

delay(() => console.log("Executed after 2 seconds!"));

Example 2: Increment with Closures

Create a closure-based function to track increments.

function createCounter() {
  let count = 0;
  return () => ++count;
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

Example 3: Filter Numbers Using a Higher-Order Function

Filter an array to get numbers greater than 5.

const nums = [3, 6, 8, 2];
const greaterThanFive = nums.filter(num => num > 5);
console.log(greaterThanFive); // [6, 8]

Example 4: Arrow Function and this

Show the difference between regular and arrow functions.

const obj = {
  value: 42,
  regularFunction: function () {
    console.log(this.value);
  },
  arrowFunction: () => {
    console.log(this.value);
  }
};

obj.regularFunction(); // Output: 42
obj.arrowFunction();   // Output: undefined (arrow function doesn't bind `this`)

7. Exercises

Exercise 1: Create a Reusable Function

Write a higher-order function that accepts a multiplier and returns a function to multiply any number.

function createMultiplier(multiplier) {
  return num => num * multiplier;
}

const triple = createMultiplier(3);
console.log(triple(5)); // Output: 15

Exercise 2: Callback Simulation

Create a function that logs a message, then calls a callback function.

function logMessage(callback) {
  console.log("Logging message...");
  callback();
}

logMessage(() => console.log("Callback executed!"));

Exercise 3: Counter with Closures

Create a closure-based counter with reset functionality.

function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    reset: () => (count = 0)
  };
}

const counter = createCounter();
console.log(counter.increment()); // Output: 1
console.log(counter.increment()); // Output: 2
counter.reset();
console.log(counter.increment()); // Output: 1

8. Summary

Key Takeaways:

  1. Callback Functions: Enable asynchronous behavior and function reuse.
  2. Closures: Allow functions to “remember” variables from their outer scope.
  3. Higher-Order Functions: Accept or return other functions, enabling reusable, functional programming.
  4. Arrow Functions: Provide concise syntax and do not bind their own this.

 

Module 7: ES6+ Features

Objective: Learn the modern JavaScript features introduced in ES6+ (ECMAScript 2015 and beyond), including template literals, destructuring, spread/rest operators, and modules.

1. Template Literals

Template literals provide a cleaner and more powerful way to create strings, allowing for multi-line strings and embedded expressions.

A. Basic Syntax

Use backticks (`) instead of quotes (' or "):

const name = "Alice";
const message = `Hello, ${name}! Welcome to ES6.`;
console.log(message); // Output: Hello, Alice! Welcome to ES6.

B. Multi-Line Strings

No need for \n to create new lines:

const multiline = `
This is a multi-line
string in ES6.
`;
console.log(multiline);

C. Expression Interpolation

You can embed any JavaScript expression:

const a = 5;
const b = 10;
console.log(`The sum of ${a} and ${b} is ${a + b}.`); // Output: The sum of 5 and 10 is 15.

2. Destructuring and Spread/Rest Operators

A. Destructuring

Destructuring simplifies extracting values from arrays or objects.

1. Array Destructuring

const fruits = ["apple", "banana", "cherry"];
const [first, second] = fruits;

console.log(first);  // Output: apple
console.log(second); // Output: banana

  • Skipping values:

    const [first, , third] = fruits;
console.log(third); // Output: cherry

  • Default values:

    const [first, second, third = "grape"] = ["apple"];
console.log(third); // Output: grape

2. Object Destructuring

const person = { name: "Alice", age: 25, city: "New York" };
const { name, age } = person;

console.log(name); // Output: Alice
console.log(age);  // Output: 25

  • Renaming variables:

    const { name: fullName, city } = person;
console.log(fullName); // Output: Alice

  • Default values:

    const { country = "USA" } = person;
console.log(country); // Output: USA

B. Spread Operator

The spread operator (...) allows you to expand an array or object into individual elements.

1. Array Usage

  • Combine arrays:

    const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4]

  • Copy arrays:

    const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // Output: [1, 2, 3]

2. Object Usage

  • Combine objects:

    const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3 };
const combined = { ...obj1, ...obj2 };
console.log(combined); // Output: { a: 1, b: 2, c: 3 }

  • Copy objects:

    const original = { a: 1, b: 2 };
const copy = { ...original };
console.log(copy); // Output: { a: 1, b: 2 }

C. Rest Operator

The rest operator (...) collects multiple elements into an array or object.

1. In Functions

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // Output: 6

2. Array Destructuring

const [first, ...rest] = [1, 2, 3, 4];
console.log(rest); // Output: [2, 3, 4]

3. Object Destructuring

const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(rest); // Output: { b: 2, c: 3 }

3. Modules (Import and Export)

Modules allow you to split JavaScript code into reusable files.

A. Exporting

1. Named Exports

Export multiple items from a file:

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

2. Default Exports

Export a single default item:

export default function multiply(a, b) {
  return a * b;
}

B. Importing

1. Named Imports

Import specific items:

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

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

2. Default Imports

Import the default item:

import multiply from './math.js';

console.log(multiply(5, 3)); // Output: 15

3. Renaming Imports

import { add as addition } from './math.js';

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

4. Import All

Import everything as an object:

import * as math from './math.js';

console.log(math.add(5, 3));       // Output: 8
console.log(math.subtract(5, 3)); // Output: 2

4. Practical Examples

Example 1: Template Literals

Create a function that generates a user profile.

function createProfile(name, age) {
  return `Name: ${name}, Age: ${age}`;
}

console.log(createProfile("Alice", 25)); // Output: Name: Alice, Age: 25

Example 2: Destructuring

Extract values from an object and use them in a function.

const person = { name: "Alice", age: 25, city: "New York" };

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

console.log(greet(person)); // Output: Hello, Alice from New York!

Example 3: Spread Operator

Merge two objects with the spread operator.

const defaults = { theme: "light", notifications: true };
const userSettings = { theme: "dark" };

const settings = { ...defaults, ...userSettings };
console.log(settings); // Output: { theme: "dark", notifications: true }

Example 4: Rest Operator

Create a function to calculate the average of multiple numbers.

function average(...numbers) {
  const sum = numbers.reduce((acc, curr) => acc + curr, 0);
  return sum / numbers.length;
}

console.log(average(10, 20, 30)); // Output: 20

Example 5: Modules

math.js:

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default (a, b) => a * b;

main.js:

import multiply, { add, subtract } from './math.js';

console.log(add(5, 3));       // Output: 8
console.log(subtract(5, 3));  // Output: 2
console.log(multiply(5, 3));  // Output: 15

5. Summary

Key Takeaways:

  1. Template Literals:
    • Simplify string concatenation and support multi-line strings.
  2. Destructuring:
    • Extract values from arrays or objects for cleaner code.
  3. Spread/Rest Operators:
    • Spread expands arrays/objects, and rest collects remaining values.
  4. Modules:
    • Use import and export to organize and reuse code efficiently.

Module 8: Asynchronous JavaScript

Objective: Learn how to handle asynchronous operations in JavaScript using promises, async/await, and the Fetch API for working with APIs. Understand error handling in asynchronous code.

1. Promises

A Promise is an object that represents the eventual completion or failure of an asynchronous operation.

A. States of a Promise

  1. Pending: The operation is still in progress.
  2. Fulfilled: The operation is completed successfully.
  3. Rejected: The operation failed.

B. Creating a Promise

const myPromise = new Promise((resolve, reject) => {
  let success = true; // Simulate success or failure

  if (success) {
    resolve("Operation was successful!");
  } else {
    reject("Operation failed!");
  }
});

myPromise
  .then(result => console.log(result)) // Executes on resolve
  .catch(error => console.error(error)) // Executes on reject
  .finally(() => console.log("Promise completed.")); // Executes in both cases

C. Chaining Promises

Promises can be chained to handle sequential asynchronous operations.

Example:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data fetched"), 1000);
});

fetchData
  .then(data => {
    console.log(data); // Output: Data fetched
    return "Processing data";
  })
  .then(processedData => console.log(processedData)) // Output: Processing data
  .catch(error => console.error(error));

2. Async/Await

The async and await keywords simplify working with promises, making asynchronous code look and behave like synchronous code.

A. Basic Syntax

  1. async: Marks a function as asynchronous.
  2. await: Pauses execution until the promise resolves.

Example:

async function fetchData() {
  try {
    const result = await new Promise(resolve => resolve("Data fetched"));
    console.log(result); // Output: Data fetched
  } catch (error) {
    console.error(error);
  }
}

fetchData();

B. Sequential Async/Await

Example:

async function processTasks() {
  const task1 = await new Promise(resolve => setTimeout(() => resolve("Task 1 completed"), 1000));
  console.log(task1);

  const task2 = await new Promise(resolve => setTimeout(() => resolve("Task 2 completed"), 1000));
  console.log(task2);
}

processTasks();
// Output:
// Task 1 completed (after 1s)
// Task 2 completed (after another 1s)

3. Fetch API

The Fetch API is used to make HTTP requests to servers.

A. Basic Fetch Request

Example:

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json()) // Parse JSON data
  .then(data => console.log(data))
  .catch(error => console.error("Error fetching data:", error));

B. Fetch with Async/Await

Example:

async function fetchPost() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error fetching post:", error);
  }
}

fetchPost();

C. Fetch POST Request

Send data to a server using the Fetch API.

Example:

async function createPost() {
  const post = {
    title: "My New Post",
    body: "This is the content of the post.",
    userId: 1,
  };

  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(post),
    });
    const data = await response.json();
    console.log("Post created:", data);
  } catch (error) {
    console.error("Error creating post:", error);
  }
}

createPost();

4. Error Handling in Asynchronous Code

Handling errors is critical to ensure applications behave predictably.

A. Using try...catch

Example:

async function fetchData() {
  try {
    const response = await fetch("https://invalid-url");
    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Fetch error:", error);
  }
}

fetchData();

B. Catching Promise Errors

Errors can be caught using .catch() in promise chains.

Example:

fetch("https://invalid-url")
  .then(response => response.json())
  .catch(error => console.error("Fetch error:", error));

C. Default Fallback with finally

The finally() method executes after a promise is settled (fulfilled or rejected).

Example:

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .catch(error => console.error("Error:", error))
  .finally(() => console.log("Fetch attempt finished."));

5. Practical Examples

Example 1: Parallel Fetch Requests

Fetch multiple resources in parallel using Promise.all.

async function fetchMultiple() {
  try {
    const [post, user] = await Promise.all([
      fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json()),
      fetch("https://jsonplaceholder.typicode.com/users/1").then(res => res.json()),
    ]);

    console.log("Post:", post);
    console.log("User:", user);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

fetchMultiple();

Example 2: Retry Logic for Fetch

Retry a fetch request up to 3 times if it fails.

async function fetchWithRetry(url, retries = 3) {
  while (retries > 0) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error("Fetch failed");
      return await response.json();
    } catch (error) {
      retries--;
      console.log(`Retrying... (${retries} attempts left)`);
    }
  }
  throw new Error("All retries failed");
}

fetchWithRetry("https://jsonplaceholder.typicode.com/posts/1")
  .then(data => console.log(data))
  .catch(error => console.error(error));

Example 3: Handling API Response Errors

Handle HTTP errors using response status codes.

async function fetchWithErrorHandling() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/invalid");
    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchWithErrorHandling();

6. Exercises

Exercise 1: Fetch a List of Posts

Fetch and display a list of posts from an API.

async function fetchPosts() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  posts.slice(0, 5).forEach(post => console.log(post.title));
}

fetchPosts();

Exercise 2: Simulate Delayed Response

Write a function to simulate a delayed operation using setTimeout and promises.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedOperation() {
  console.log("Starting...");
  await delay(2000);
  console.log("Finished after 2 seconds.");
}

delayedOperation();

Exercise 3: Handle API Error Gracefully

Write a function to fetch data and log a custom error message if the request fails.

async function fetchData() {
  try {
    const response = await fetch("https://invalid-url");
    if (!response.ok) throw new Error("Failed to fetch data.");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Custom Error: Could not retrieve data.");
  }
}

fetchData();

7. Summary

Key Takeaways:

  1. Promises:
    • Represent the result of an asynchronous operation.
    • Use .then, .catch, and .finally for handling.
  2. Async/Await:
    • Simplifies working with promises.
    • Use try...catch for error handling.
  3. Fetch API:
    • Use for making HTTP requests.
    • Combine with async/await for clean code.
  4. Error Handling:
    • Always handle errors in asynchronous operations to ensure application stability.

Module 9: Object-Oriented Programming (OOP)

Objective: Understand the fundamentals of Object-Oriented Programming (OOP) in JavaScript, including classes, inheritance, encapsulation, abstraction, and polymorphism.

1. Classes and Constructors

A class is a blueprint for creating objects, providing a structure to define properties and methods.

A. Creating a Class

Classes are defined using the class keyword.

Example:

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

  greet() { // Method
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 25);
person1.greet(); // Output: Hello, my name is Alice and I'm 25 years old.

B. Adding Methods

Methods are functions defined within a class.

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

  subtract(a, b) {
    return a - b;
  }
}

const calc = new Calculator();
console.log(calc.add(5, 3)); // Output: 8

C. Static Methods

Static methods are called on the class itself, not on instances.

class MathUtils {
  static square(num) {
    return num * num;
  }
}

console.log(MathUtils.square(4)); // Output: 16

2. Prototypes and Inheritance

Inheritance allows one class (child) to derive properties and methods from another class (parent).

A. Prototypes

All JavaScript objects have a prototype, which is used for inheritance.

Example:

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

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

const dog = new Animal("Dog");
dog.speak(); // Output: Dog makes a sound.

B. Class-Based Inheritance

Classes can extend other classes to inherit properties and methods.

Example:

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

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

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

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

3. Encapsulation, Abstraction, and Polymorphism

A. Encapsulation

Encapsulation is about restricting direct access to certain components of an object and only exposing essential methods.

Example: Private Fields (Introduced in ES2022)

class BankAccount {
  #balance; // Private property

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

  deposit(amount) {
    this.#balance += amount;
    console.log(`Deposited: $${amount}`);
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field

B. Abstraction

Abstraction focuses on exposing only relevant details while hiding the complex implementation.

Example:

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

  draw() {
    throw new Error("Draw method must be implemented");
  }
}

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

  draw() {
    console.log(`Drawing a ${this.color} circle with radius ${this.radius}`);
  }
}

const circle = new Circle("red", 5);
circle.draw(); // Output: Drawing a red circle with radius 5

C. Polymorphism

Polymorphism allows a method to have different implementations based on the object that calls it.

Example:

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

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

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

const animals = [new Dog(), new Cat(), new Animal()];
animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.
// Animal makes a sound.

4. Practical Exercises

Exercise 1: Create a Class

Write a Car class with properties for make, model, and year. Add a method to display the car’s details.

Solution:

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

  displayDetails() {
    console.log(`Car: ${this.make} ${this.model} (${this.year})`);
  }
}

const car = new Car("Toyota", "Corolla", 2020);
car.displayDetails(); // Output: Car: Toyota Corolla (2020)

Exercise 2: Class Inheritance

Create a Person class and a Student class that extends Person. Add a study method for the Student.

Solution:

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

  introduce() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  }
}

class Student extends Person {
  study() {
    console.log(`${this.name} is studying.`);
  }
}

const student = new Student("Alice", 20);
student.introduce(); // Output: Hi, I'm Alice and I'm 20 years old.
student.study();     // Output: Alice is studying.

Exercise 3: Polymorphism

Write a Shape class with a draw method, then create Rectangle and Circle classes that override draw.

Solution:

class Shape {
  draw() {
    console.log("Drawing a shape.");
  }
}

class Rectangle extends Shape {
  draw() {
    console.log("Drawing a rectangle.");
  }
}

class Circle extends Shape {
  draw() {
    console.log("Drawing a circle.");
  }
}

const shapes = [new Rectangle(), new Circle(), new Shape()];
shapes.forEach(shape => shape.draw());
// Output:
// Drawing a rectangle.
// Drawing a circle.
// Drawing a shape.

Exercise 4: Encapsulation

Create a User class with a private field for the password. Add methods to update the password and verify it.

Solution:

class User {
  #password;

  constructor(username, password) {
    this.username = username;
    this.#password = password;
  }

  updatePassword(newPassword) {
    this.#password = newPassword;
    console.log("Password updated.");
  }

  verifyPassword(inputPassword) {
    return this.#password === inputPassword;
  }
}

const user = new User("Alice", "12345");
console.log(user.verifyPassword("12345")); // Output: true
user.updatePassword("67890");
console.log(user.verifyPassword("12345")); // Output: false

5. Summary

Key Takeaways:

  1. Classes and Constructors:
    • Use class and constructor to define reusable object blueprints.
  2. Prototypes and Inheritance:
    • Share properties and methods across objects using inheritance.
  3. Encapsulation:
    • Use private fields to restrict direct access to object properties.
  4. Abstraction:
    • Hide complex implementation details and expose only essential behavior.
  5. Polymorphism:
    • Implement methods differently based on the calling object.

Module 10: Advanced JavaScript Concepts

Objective: Delve into advanced JavaScript concepts, including closures and currying, understanding the event loop and asynchronous behavior, and techniques for performance optimization and memory management.

1. Closures and Currying

A. Closures

A closure is a function that retains access to variables from its lexical scope even after the outer function has returned.

Key Points:

  • Closures allow for data privacy.
  • They are created when functions are defined inside other functions.

Example: Basic Closure

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log(`Outer Variable: ${outerVariable}`);
    console.log(`Inner Variable: ${innerVariable}`);
  };
}

const closureFunc = outerFunction("outside");
closureFunc("inside");
// Output:
// Outer Variable: outside
// Inner Variable: inside

Example: Counter with Closures

function createCounter() {
  let count = 0;

  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count,
  };
}

const counter = createCounter();
console.log(counter.increment()); // Output: 1
console.log(counter.increment()); // Output: 2
console.log(counter.decrement()); // Output: 1

B. Currying

Currying is a technique of transforming a function with multiple arguments into a sequence of functions, each taking one argument.

Example: Curried Function

function multiply(a) {
  return function (b) {
    return function (c) {
      return a * b * c;
    };
  };
}

console.log(multiply(2)(3)(4)); // Output: 24

Practical Use Case: Partial Application

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

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

2. Event Loop and Asynchronous Behavior

The event loop is the mechanism that allows JavaScript to handle asynchronous operations (e.g., setTimeout, Promises, fetch) in a single-threaded environment.

A. How the Event Loop Works

  1. Call Stack: Executes synchronous code, one frame at a time.
  2. Web APIs: Handles asynchronous operations like timers, DOM events, and HTTP requests.
  3. Task Queue: Queues callbacks for execution after the call stack is empty.

Example: Event Loop in Action

console.log("Start");

setTimeout(() => {
  console.log("Timeout Callback");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise Callback");
});

console.log("End");

// Output:
// Start
// End
// Promise Callback
// Timeout Callback

B. Microtasks vs. Macrotasks

  • Microtasks: Include Promises and MutationObserver. Executed before macrotasks.
  • Macrotasks: Include setTimeout, setInterval, and I/O operations.

Example: Microtask Precedence

setTimeout(() => console.log("Macrotask: setTimeout"), 0);

Promise.resolve().then(() => console.log("Microtask: Promise"));

console.log("Synchronous: Start");
// Output:
// Synchronous: Start
// Microtask: Promise
// Macrotask: setTimeout

3. Performance Optimization and Memory Management

Efficient performance and memory usage are crucial for robust JavaScript applications.

A. Performance Optimization

1. Debouncing

Debouncing delays the execution of a function until after a specified time has passed since the last invocation.

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
}

const logInput = debounce((input) => console.log(input), 300);
logInput("Hello");
logInput("World"); // Only "World" will be logged after 300ms

2. Throttling

Throttling ensures a function is executed at most once in a specified time period.

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

const logScroll = throttle(() => console.log("Scroll event"), 1000);
window.addEventListener("scroll", logScroll);

3. Lazy Loading

Load resources (e.g., images) only when needed.

<img data-src="image.jpg" class="lazy" alt="Lazy Loaded Image">

<script>
  const lazyImages = document.querySelectorAll(".lazy");
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(img => observer.observe(img));
</script>

B. Memory Management

1. Avoid Memory Leaks

Memory leaks occur when objects are no longer needed but cannot be garbage-collected.

Common Causes of Memory Leaks:

  1. Global Variables:

    window.leak = "This won't be garbage-collected!";

  2. Unclosed Event Listeners:

    const button = document.querySelector("button");
button.addEventListener("click", () => {
  console.log("Button clicked");
});
// Remove listeners when no longer needed:
button.removeEventListener("click", handler);

  3. Timers:

    const timer = setInterval(() => console.log("Timer"), 1000);
clearInterval(timer); // Always clear intervals when done

C. Garbage Collection

JavaScript automatically manages memory using garbage collection, which removes objects that are no longer reachable.

Best Practices:

  1. Minimize global variables.
  2. Clear timers and event listeners.
  3. Avoid circular references in objects.

4. Practical Exercises

Exercise 1: Create a Debounced Function

Write a function that limits the frequency of a search input update.

Solution:

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
}

const updateSearch = debounce((query) => console.log(`Searching for: ${query}`), 500);
updateSearch("JavaScript");
updateSearch("JavaScript Debounce");

Exercise 2: Understand Event Loop

Predict the order of console logs in this example:

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");
// Output:
// Start
// End
// Promise
// Timeout

Exercise 3: Create a Curried Function

Write a function to calculate the volume of a box using currying.

const volume = (length) => (width) => (height) => length * width * height;
console.log(volume(2)(3)(4)); // Output: 24

Exercise 4: Optimize Scrolling Event

Throttle a function that logs the user’s scroll position.

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

const logScrollPosition = throttle(() => {
  console.log(window.scrollY);
}, 100);

window.addEventListener("scroll", logScrollPosition);

5. Summary

Key Takeaways:

  1. Closures:
    • Allow access to variables from an outer function.
    • Useful for creating private variables.
  2. Currying:
    • Transforms a function with multiple arguments into a series of functions.
  3. Event Loop:
    • Handles asynchronous code using the call stack, web APIs, and task queues.
  4. Performance Optimization:
    • Use techniques like debouncing, throttling, and lazy loading to improve performance.
  5. Memory Management:
    • Avoid memory leaks by clearing timers, event listeners, and unused variables.

Module 11: Working with APIs

Objective: Learn how to interact with REST APIs using HTTP methods and build a simple application to fetch and display API data.

1. REST APIs and HTTP Methods

A. What is a REST API?

A REST API (Representational State Transfer Application Programming Interface) is a set of web services that allow you to interact with server-side data using HTTP methods.

Key Features:

  • Stateless: Each request is independent.
  • Resource-based: URLs represent resources (e.g., /users, /posts).
  • Standard HTTP methods are used.

B. HTTP Methods

1. GET

  • Purpose: Retrieve data from a server.
  • Example: Fetch a list of users.
fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => console.log(data));

2. POST

  • Purpose: Create new data on the server.
  • Example: Add a new user.
fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice", email: "[email protected]" })
})
  .then(response => response.json())
  .then(data => console.log(data));

3. PUT

  • Purpose: Update an existing resource.
  • Example: Update user information.
fetch("https://jsonplaceholder.typicode.com/users/1", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice Updated", email: "[email protected]" })
})
  .then(response => response.json())
  .then(data => console.log(data));

4. DELETE

  • Purpose: Remove a resource.
  • Example: Delete a user.
fetch("https://jsonplaceholder.typicode.com/users/1", { method: "DELETE" })
  .then(response => console.log("Deleted:", response.status));

2. Building a Simple Application with API Data

In this example, we’ll create a simple application that fetches and displays data from a REST API.

A. Application Overview

We will:

  1. Fetch a list of users from an API.
  2. Display the user data in a list.
  3. Allow the user to add new entries via a form.

B. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API Application</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .user-list {
      margin: 20px 0;
    }
    .user {
      padding: 10px;
      border: 1px solid #ddd;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Users</h1>
  <div id="user-list" class="user-list"></div>

  <h2>Add New User</h2>
  <form id="user-form">
    <label>
      Name:
      <input type="text" id="name" required>
    </label>
    <br><br>
    <label>
      Email:
      <input type="email" id="email" required>
    </label>
    <br><br>
    <button type="submit">Add User</button>
  </form>

  <script src="app.js"></script>
</body>
</html>

C. JavaScript (Fetching and Displaying Data)

Step 1: Fetch Users from API

const userList = document.getElementById("user-list");

async function fetchUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();

    userList.innerHTML = ""; // Clear existing users
    users.forEach(user => {
      const userDiv = document.createElement("div");
      userDiv.classList.add("user");
      userDiv.innerHTML = `<strong>${user.name}</strong> (${user.email})`;
      userList.appendChild(userDiv);
    });
  } catch (error) {
    console.error("Error fetching users:", error);
    userList.innerHTML = "Failed to load users.";
  }
}

fetchUsers();

Step 2: Add New User

const userForm = document.getElementById("user-form");

userForm.addEventListener("submit", async (event) => {
  event.preventDefault(); // Prevent form submission

  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;

  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, email })
    });

    const newUser = await response.json();
    console.log("New user added:", newUser);

    // Add the new user to the list
    const userDiv = document.createElement("div");
    userDiv.classList.add("user");
    userDiv.innerHTML = `<strong>${newUser.name}</strong> (${newUser.email})`;
    userList.appendChild(userDiv);

    // Clear the form
    userForm.reset();
  } catch (error) {
    console.error("Error adding user:", error);
  }
});

D. Complete Code

HTML + JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API Application</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .user-list {
      margin: 20px 0;
    }
    .user {
      padding: 10px;
      border: 1px solid #ddd;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Users</h1>
  <div id="user-list" class="user-list"></div>

  <h2>Add New User</h2>
  <form id="user-form">
    <label>
      Name:
      <input type="text" id="name" required>
    </label>
    <br><br>
    <label>
      Email:
      <input type="email" id="email" required>
    </label>
    <br><br>
    <button type="submit">Add User</button>
  </form>

  <script>
    const userList = document.getElementById("user-list");

    async function fetchUsers() {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        const users = await response.json();

        userList.innerHTML = ""; // Clear existing users
        users.forEach(user => {
          const userDiv = document.createElement("div");
          userDiv.classList.add("user");
          userDiv.innerHTML = `<strong>${user.name}</strong> (${user.email})`;
          userList.appendChild(userDiv);
        });
      } catch (error) {
        console.error("Error fetching users:", error);
        userList.innerHTML = "Failed to load users.";
      }
    }

    fetchUsers();

    const userForm = document.getElementById("user-form");

    userForm.addEventListener("submit", async (event) => {
      event.preventDefault(); // Prevent form submission

      const name = document.getElementById("name").value;
      const email = document.getElementById("email").value;

      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ name, email })
        });

        const newUser = await response.json();
        console.log("New user added:", newUser);

        // Add the new user to the list
        const userDiv = document.createElement("div");
        userDiv.classList.add("user");
        userDiv.innerHTML = `<strong>${newUser.name}</strong> (${newUser.email})`;
        userList.appendChild(userDiv);

        // Clear the form
        userForm.reset();
      } catch (error) {
        console.error("Error adding user:", error);
      }
    });
  </script>
</body>
</html>

3. Summary

Key Takeaways:

  1. REST APIs:
    • Use GET for fetching data, POST for creating resources, PUT for updating, and DELETE for removing.
  2. Fetch API:
    • Use fetch() to make HTTP requests and handle responses with .then() or async/await.
  3. Building Applications:
    • Fetch API data and display it dynamically.
    • Use forms to allow users to interact with and modify data.

Module 12: JavaScript in the Real World

Objective: Learn practical JavaScript concepts and techniques for building real-world applications, including interactive forms, data storage, and leveraging popular libraries.

1. Building Interactive Forms

Forms are a cornerstone of interactive web applications. JavaScript allows validation, dynamic field updates, and handling user input effectively.

A. Client-Side Validation

Basic Example: Required Fields

<form id="user-form">
  <label>
    Name: <input type="text" id="name" required>
  </label>
  <br><br>
  <label>
    Email: <input type="email" id="email" required>
  </label>
  <br><br>
  <button type="submit">Submit</button>
  <p id="error" style="color: red;"></p>
</form>

<script>
  const form = document.getElementById("user-form");
  const errorMessage = document.getElementById("error");

  form.addEventListener("submit", (event) => {
    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();

    if (!name || !email) {
      event.preventDefault(); // Prevent form submission
      errorMessage.textContent = "All fields are required!";
    }
  });
</script>

B. Dynamic Field Updates

Example: Adding Fields Dynamically

<form id="dynamic-form">
  <div id="fields">
    <label>Item 1: <input type="text" name="item[]"></label>
  </div>
  <button type="button" id="add-field">Add Field</button>
  <button type="submit">Submit</button>
</form>

<script>
  const fields = document.getElementById("fields");
  const addFieldButton = document.getElementById("add-field");

  addFieldButton.addEventListener("click", () => {
    const newField = document.createElement("label");
    newField.innerHTML = `Item ${fields.children.length + 1}: <input type="text" name="item[]">`;
    fields.appendChild(newField);
  });
</script>

2. Local Storage and Session Storage

Modern browsers provide two storage mechanisms for persisting data:

  • Local Storage: Data persists until explicitly removed.
  • Session Storage: Data is cleared when the browser tab is closed.

A. Local Storage

1. Set and Get Data

// Store data
localStorage.setItem("name", "Alice");

// Retrieve data
const name = localStorage.getItem("name");
console.log(name); // Output: Alice

2. Remove Data

localStorage.removeItem("name");

// Clear all storage
localStorage.clear();

B. Session Storage

1. Set and Get Data

// Store data
sessionStorage.setItem("sessionKey", "Session Value");

// Retrieve data
const sessionData = sessionStorage.getItem("sessionKey");
console.log(sessionData); // Output: Session Value

C. Example: Save Form Data to Local Storage

<form id="save-form">
  <label>
    Name: <input type="text" id="name" value="">
  </label>
  <br><br>
  <label>
    Email: <input type="email" id="email" value="">
  </label>
  <br><br>
  <button type="submit">Save</button>
</form>

<script>
  const nameInput = document.getElementById("name");
  const emailInput = document.getElementById("email");

  // Load saved data
  nameInput.value = localStorage.getItem("name") || "";
  emailInput.value = localStorage.getItem("email") || "";

  // Save data on form submit
  document.getElementById("save-form").addEventListener("submit", (event) => {
    event.preventDefault();
    localStorage.setItem("name", nameInput.value);
    localStorage.setItem("email", emailInput.value);
    alert("Data saved to local storage!");
  });
</script>

3. Working with Libraries

JavaScript libraries simplify common tasks and add advanced functionality. Here, we explore Lodash and Moment.js.

A. Lodash

Lodash is a utility library for working with arrays, objects, and strings.

1. Chunk an Array

const _ = require("lodash");

const array = [1, 2, 3, 4, 5];
const chunks = _.chunk(array, 2);
console.log(chunks); // Output: [[1, 2], [3, 4], [5]]

2. Debounce a Function

const logInput = _.debounce(() => console.log("Input logged!"), 300);
document.addEventListener("input", logInput);

B. Moment.js

Moment.js simplifies working with dates and times.

1. Formatting Dates

const moment = require("moment");

const now = moment();
console.log(now.format("MMMM Do YYYY, h:mm:ss a")); // Output: October 10th 2024, 4:23:12 pm

2. Relative Time

console.log(moment("2024-11-01").fromNow()); // Output: "27 days ago"

3. Adding/Subtracting Time

const nextWeek = moment().add(7, "days");
console.log(nextWeek.format("MMMM Do YYYY")); // Output: October 17th 2024

C. Example: Using Lodash and Moment.js Together

const _ = require("lodash");
const moment = require("moment");

const tasks = [
  { title: "Task 1", dueDate: "2024-12-01" },
  { title: "Task 2", dueDate: "2024-11-10" },
  { title: "Task 3", dueDate: "2024-11-05" },
];

// Sort tasks by due date
const sortedTasks = _.sortBy(tasks, task => moment(task.dueDate));
console.log(sortedTasks);

4. Practical Exercises

Exercise 1: Interactive Form

Create a form that dynamically displays a summary of the user’s input.

Solution:

<form id="summary-form">
  <label>Name: <input type="text" id="name"></label>
  <br><br>
  <label>Age: <input type="number" id="age"></label>
  <br><br>
  <button type="button" id="show-summary">Show Summary</button>
</form>
<p id="summary"></p>

<script>
  document.getElementById("show-summary").addEventListener("click", () => {
    const name = document.getElementById("name").value;
    const age = document.getElementById("age").value;
    document.getElementById("summary").textContent = `Name: ${name}, Age: ${age}`;
  });
</script>

Exercise 2: Save to Local Storage

Build a simple note-taking app that saves and retrieves notes from local storage.

Solution:

<textarea id="note" placeholder="Write your note here..."></textarea>
<br>
<button id="save-note">Save Note</button>
<p>Saved Note: <span id="saved-note"></span></p>

<script>
  const note = document.getElementById("note");
  const savedNote = document.getElementById("saved-note");

  // Load saved note
  savedNote.textContent = localStorage.getItem("note") || "";

  // Save note
  document.getElementById("save-note").addEventListener("click", () => {
    localStorage.setItem("note", note.value);
    savedNote.textContent = note.value;
    alert("Note saved!");
  });
</script>

5. Summary

Key Takeaways:

  1. Interactive Forms:
    • Use JavaScript to validate user input and dynamically modify form fields.
  2. Local and Session Storage:
    • Store small amounts of data locally for persistence between sessions.
  3. Libraries:
    • Use Lodash for utility functions and Moment.js for date/time manipulation.

Module 13: Testing JavaScript

Objective: Learn the importance of testing in JavaScript development, how to write unit tests, and how to use popular testing frameworks like Jest and Mocha.

1. Writing Unit Tests

Unit tests focus on testing small, individual pieces of code (e.g., functions) to ensure they work as expected.

A. What is Unit Testing?

  • Unit testing ensures the smallest testable parts of an application (units) work as intended.
  • A unit is often a single function, method, or class.

B. Example: Writing a Simple Unit Test

Function to Test

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

Manual Test

console.log(add(2, 3) === 5 ? "Pass" : "Fail"); // Pass
console.log(add(-1, 1) === 0 ? "Pass" : "Fail"); // Pass

Automated Test Example

Using assertions to automate testing:

function testAdd() {
  console.assert(add(2, 3) === 5, "Test Case 1 Failed");
  console.assert(add(-1, 1) === 0, "Test Case 2 Failed");
  console.assert(add(0, 0) === 0, "Test Case 3 Failed");
}

testAdd(); // No output means all tests passed

C. Key Concepts in Unit Testing

  1. Assertions:

    • Statements that check whether the output matches the expected result.
    • Example:
      console.assert(add(2, 3) === 5, "Expected 2 + 3 to equal 5");

  2. Test Cases:

    • Independent tests for specific scenarios.
    • Example:
      // Test Case 1
console.assert(add(2, 3) === 5);

// Test Case 2
console.assert(add(-1, -1) === -2);

  3. Test Suites:

    • Groups of related tests.
    • Example:
      function testAdd() {
  console.assert(add(1, 1) === 2);
  console.assert(add(0, 0) === 0);
}

2. Testing Frameworks

JavaScript testing frameworks simplify writing and running tests. Popular ones include:

A. Jest

1. What is Jest?

  • A powerful testing framework developed by Facebook.
  • Features:
    • Zero-config setup.
    • Built-in assertion library.
    • Snapshot testing.

2. Installing Jest

npm install --save-dev jest

3. Writing a Test with Jest

Function to Test:

function multiply(a, b) {
  return a * b;
}

module.exports = multiply;

Test File (multiply.test.js):

const multiply = require("./multiply");

test("multiplies 2 and 3 to equal 6", () => {
  expect(multiply(2, 3)).toBe(6);
});

test("multiplies -1 and 5 to equal -5", () => {
  expect(multiply(-1, 5)).toBe(-5);
});

Run Tests:

npx jest

Output:

 PASS  ./multiply.test.js
  ✓ multiplies 2 and 3 to equal 6 (2 ms)
  ✓ multiplies -1 and 5 to equal -5

B. Mocha

1. What is Mocha?

  • A flexible JavaScript test framework.
  • Often paired with an assertion library like Chai.

2. Installing Mocha and Chai

npm install --save-dev mocha chai

3. Writing a Test with Mocha and Chai

Function to Test:

function divide(a, b) {
  if (b === 0) throw new Error("Division by zero");
  return a / b;
}

module.exports = divide;

Test File (divide.test.js):

const divide = require("./divide");
const { expect } = require("chai");

describe("divide function", () => {
  it("should divide 6 by 2 to equal 3", () => {
    expect(divide(6, 2)).to.equal(3);
  });

  it("should throw an error when dividing by zero", () => {
    expect(() => divide(6, 0)).to.throw("Division by zero");
  });
});

Run Tests:

npx mocha

Output:

  divide function
    ✓ should divide 6 by 2 to equal 3
    ✓ should throw an error when dividing by zero

C. Key Differences: Jest vs. Mocha

FeatureJestMocha
SetupZero-configRequires setup
AssertionBuilt-inRequires Chai or similar
PerformanceFastDepends on setup
PopularityHighHigh

3. Best Practices for Writing Tests

A. Organizing Test Files

  • Place test files in a tests directory or next to source files using a .test.js suffix.

Example directory structure:

src/
  add.js
  divide.js
tests/
  add.test.js
  divide.test.js

B. Writing Clear Tests

  1. Use Descriptive Test Names:

    test("adds 1 and 2 to return 3", () => {
  expect(add(1, 2)).toBe(3);
});

  2. Test Edge Cases:

    • Example for a divide function:
      test("throws error when dividing by zero", () => {
  expect(() => divide(6, 0)).toThrow("Division by zero");
});

  3. Keep Tests Independent:

    • Avoid dependencies between tests.

C. Testing Different Scenarios

  1. Positive Cases:

    • Test valid inputs and expected outcomes.

  2. Negative Cases:

    • Test invalid inputs or error scenarios.

  3. Boundary Cases:

    • Test limits of the functionality (e.g., empty arrays, large numbers).

4. Practical Example: Testing a To-Do Application

A. Code for To-Do Application

class ToDo {
  constructor() {
    this.tasks = [];
  }

  addTask(task) {
    this.tasks.push(task);
    return this.tasks;
  }

  removeTask(task) {
    this.tasks = this.tasks.filter(t => t !== task);
    return this.tasks;
  }

  getTasks() {
    return this.tasks;
  }
}

module.exports = ToDo;

B. Test File (todo.test.js)

Using Jest:

const ToDo = require("./todo");

let todo;

beforeEach(() => {
  todo = new ToDo();
});

test("adds a task to the list", () => {
  todo.addTask("Learn JavaScript");
  expect(todo.getTasks()).toContain("Learn JavaScript");
});

test("removes a task from the list", () => {
  todo.addTask("Learn JavaScript");
  todo.removeTask("Learn JavaScript");
  expect(todo.getTasks()).not.toContain("Learn JavaScript");
});

test("retrieves all tasks", () => {
  todo.addTask("Task 1");
  todo.addTask("Task 2");
  expect(todo.getTasks()).toEqual(["Task 1", "Task 2"]);
});

Run Tests:

npx jest

5. Summary

Key Takeaways:

  1. Unit Testing:
    • Write tests for individual functions or units of code.
    • Use assertions to compare expected vs. actual outcomes.
  2. Jest:
    • A zero-config testing framework with built-in assertions.
  3. Mocha:
    • A flexible testing framework, often paired with Chai.
  4. Best Practices:
    • Organize test files, write descriptive test names, and cover edge cases.

 

Module 14: Frameworks and Libraries

Objective: Gain an understanding of modern JavaScript frameworks like React, Angular, and Vue.js, along with a brief overview of legacy libraries like jQuery.

1. Introduction to React

React is a popular JavaScript library for building user interfaces, developed by Facebook.

A. Key Features

  • Component-Based Architecture: Build encapsulated, reusable components.
  • Virtual DOM: Efficient updates to the UI.
  • Declarative Syntax: Write predictable and maintainable code.

B. Setting Up a React Project

1. Install Node.js

Ensure you have Node.js installed for npm (Node Package Manager).

2. Create a React Application

Use create-react-app to set up a project quickly.

npx create-react-app my-app
cd my-app
npm start

C. Basic React Component

Example: Functional Component

import React from 'react';

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

Rendering a Component

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(<Greeting />, document.getElementById('root'));

D. Handling State with React

React’s useState allows components to manage local state.

Example: Counter App

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

2. Introduction to Angular

Angular is a full-fledged framework for building dynamic, scalable web applications. It’s maintained by Google.

A. Key Features

  • Two-Way Data Binding: Automatic synchronization between model and view.
  • Dependency Injection: Manage services efficiently.
  • TypeScript-Based: Built on TypeScript for better code quality.

B. Setting Up an Angular Project

1. Install Angular CLI

npm install -g @angular/cli

2. Create an Angular Application

ng new my-app
cd my-app
ng serve

C. Basic Angular Component

Angular components consist of HTML, CSS, and TypeScript files.

Example: Greeting Component

greeting.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: '<h1>Hello, Angular!</h1>',
  styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {}

Including the Component

Add the component selector to the main app.component.html:

<app-greeting></app-greeting>

D. Handling Data in Angular

Use property binding and event binding for interactivity.

Example: Counter Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

3. Introduction to Vue.js

Vue.js is a progressive framework for building user interfaces, designed for simplicity and flexibility.

A. Key Features

  • Declarative Rendering: Simplify the creation of dynamic views.
  • Component-Based: Modular and reusable components.
  • Reactivity System: Automatically update the UI when data changes.

B. Setting Up a Vue Project

1. Install Vue CLI

npm install -g @vue/cli

2. Create a Vue Application

vue create my-app
cd my-app
npm run serve

C. Basic Vue Component

Vue components are written in a single .vue file.

Example: Greeting Component

Greeting.vue

<template>
  <h1>Hello, Vue!</h1>
</template>

<script>
export default {
  name: 'Greeting',
};
</script>

<style>
h1 {
  color: blue;
}
</style>

Including the Component

Add the component in App.vue:

<template>
  <Greeting />
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  components: { Greeting },
};
</script>

D. Handling State with Vue

Vue’s data object is used for reactive state management.

Example: Counter Component

Counter.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

4. Using Legacy Libraries: jQuery

Although modern frameworks like React, Angular, and Vue have replaced jQuery in many cases, it is still useful for older projects.

A. Including jQuery

Add jQuery via a CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

B. Example: DOM Manipulation with jQuery

<button id="click-me">Click Me</button>
<p id="output"></p>

<script>
  $('#click-me').on('click', function () {
    $('#output').text('Button clicked!');
  });
</script>

C. Example: AJAX Request with jQuery

<div id="data"></div>

<script>
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    method: 'GET',
    success: function (data) {
      $('#data').html(`<h1>${data.title}</h1><p>${data.body}</p>`);
    },
    error: function () {
      console.error('Error fetching data.');
    },
  });
</script>

5. Comparison of Frameworks

FeatureReactAngularVue.js
Learning CurveModerateSteepEasy
Core LanguageJavaScriptTypeScriptJavaScript
Use CaseDynamic UIsFull-fledged appsLightweight UIs
PerformanceFast (Virtual DOM)FastFast

6. Summary

Key Takeaways:

  1. React:
    • Ideal for building interactive UIs with reusable components.
  2. Angular:
    • Best suited for large-scale enterprise applications.
  3. Vue.js:
    • Offers simplicity and flexibility for small to medium projects.
  4. jQuery:
    • Useful for legacy projects requiring lightweight DOM manipulation.

 

Module 15: Building a Project – Task Manager Application

Objective: Build a Task Manager Application to integrate concepts from JavaScript, DOM manipulation, asynchronous APIs, storage, and frameworks/libraries. This project demonstrates a practical approach to combining the skills learned.

1. Project Overview

The Task Manager Application will allow users to:

  1. Add tasks.
  2. Edit tasks.
  3. Mark tasks as completed.
  4. Delete tasks.
  5. Persist tasks using Local Storage.

2. Setting Up the Project

A. Folder Structure

project/
  index.html
  style.css
  script.js

B. Basic HTML Structure

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Manager</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Task Manager</h1>
    <form id="task-form">
      <input type="text" id="task-input" placeholder="Enter a new task" required>
      <button type="submit">Add Task</button>
    </form>
    <ul id="task-list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

C. Styling the Application

style.css:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 400px;
}

h1 {
  text-align: center;
}

form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #5cb85c;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #4cae4c;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
}

li.completed {
  text-decoration: line-through;
  color: #888;
}

.actions button {
  margin-left: 5px;
  border: none;
  background: none;
  cursor: pointer;
}

3. Writing JavaScript Logic

script.js:

// Select DOM Elements
const taskForm = document.getElementById("task-form");
const taskInput = document.getElementById("task-input");
const taskList = document.getElementById("task-list");

// Retrieve Tasks from Local Storage
function getTasks() {
  const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  return tasks;
}

// Save Tasks to Local Storage
function saveTasks(tasks) {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

// Render Tasks
function renderTasks() {
  const tasks = getTasks();
  taskList.innerHTML = ""; // Clear existing tasks

  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.className = task.completed ? "completed" : "";
    li.innerHTML = `
      <span>${task.name}</span>
      <div class="actions">
        <button onclick="toggleTask(${index})">${task.completed ? "Undo" : "Complete"}</button>
        <button onclick="deleteTask(${index})">Delete</button>
      </div>
    `;
    taskList.appendChild(li);
  });
}

// Add New Task
taskForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const taskName = taskInput.value.trim();
  if (taskName === "") return;

  const tasks = getTasks();
  tasks.push({ name: taskName, completed: false });
  saveTasks(tasks);
  renderTasks();
  taskForm.reset(); // Clear the input
});

// Toggle Task Completion
function toggleTask(index) {
  const tasks = getTasks();
  tasks[index].completed = !tasks[index].completed;
  saveTasks(tasks);
  renderTasks();
}

// Delete Task
function deleteTask(index) {
  const tasks = getTasks();
  tasks.splice(index, 1); // Remove task at index
  saveTasks(tasks);
  renderTasks();
}

// Initial Render
renderTasks();

4. Features and Functionality

  1. Adding Tasks:

    • Enter a task in the input field and click “Add Task.”
    • The task will be displayed in the list and saved to Local Storage.

  2. Marking Tasks as Completed:

    • Click the “Complete” button to mark a task as completed (strikethrough text).
    • Click “Undo” to revert the task.

  3. Deleting Tasks:

    • Click the “Delete” button to remove a task from the list and Local Storage.

  4. Persistence:

    • Tasks are saved in Local Storage and reloaded when the page is refreshed.

5. Additional Features

A. Editing a Task

Add functionality to edit an existing task:

function editTask(index) {
  const tasks = getTasks();
  const newTaskName = prompt("Edit Task", tasks[index].name);
  if (newTaskName !== null && newTaskName.trim() !== "") {
    tasks[index].name = newTaskName.trim();
    saveTasks(tasks);
    renderTasks();
  }
}

Add an Edit button:

<button onclick="editTask(${index})">Edit</button>

B. Filter Tasks

Filter tasks by status (e.g., All, Completed, Pending):

function filterTasks(filter) {
  const tasks = getTasks();
  const filteredTasks = tasks.filter(task =>
    filter === "completed" ? task.completed :
    filter === "pending" ? !task.completed :
    true
  );
  taskList.innerHTML = "";

  filteredTasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.className = task.completed ? "completed" : "";
    li.innerHTML = `
      <span>${task.name}</span>
      <div class="actions">
        <button onclick="toggleTask(${index})">${task.completed ? "Undo" : "Complete"}</button>
        <button onclick="deleteTask(${index})">Delete</button>
      </div>
    `;
    taskList.appendChild(li);
  });
}

6. Summary

Key Takeaways:

  1. DOM Manipulation:
    • Dynamically render tasks and update UI based on user actions.
  2. Local Storage:
    • Persist tasks for a seamless user experience across sessions.
  3. Interactive UI:
    • Enable user interaction through buttons (e.g., Complete, Delete, Edit).
  4. Scalable Design:
    • Modularize code for adding new features like filters.

 

© 2024 NexHer. Designed by NexHer Team