Front-end Web Development

Fundamentals-II
JavaScript Concepts

Faculty : Surya kartheek

Semester : Second Sem

Department : BTech Module : 1st

Recap of Topics
• Variables, data types, Functions, Conditionals, loops,
• DOM manipulation, Event listeners.
• ES6 part I and II.
• Function types
• Nested data structures
 ES6 part I and II
ES6 Released in 2015, ECMAScript 6 (ES6) revolutionized JavaScript, fixing limitations of its
predecessor, ES5.

• Better Variable Handling: Replacing the unpredictable var with let and const.
• Enhanced Features: Introduction of arrow functions, template literals, and destructuring.
• Improved Performance: Optimizations for faster execution.
• Modern Development Support: Meeting the demands of powerful web applications.
 ES6 part I and II
1. let and const
Say goodbye to the quirks of var! With let and const, you can declare variables with block scope,
preventing sneaky bugs.

2. Arrow Functions
No more verbose anonymous functions! Arrow functions make your code concise and bind this
automatically. EX: let hello=(name)=>console.log(name); hello(svyasa);

3. Template Literals
Creating dynamic strings has never been easier! Use backticks and embed variables or expressions
directly: EX console.log(`hello ${name}`);
 ES6 part I and II
4. De-structuring:
Simplify your code by extracting values from arrays or objects, and we can store in variables. 1.

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

let { name, age } = person;
console.log(name); // "John"
console.log(age); // 25

5. Spread & Rest Operators (...)

• The Spread Operator (...) allows you to "spread out" elements from arrays or objects.
• The Rest Operator (...) lets you group multiple elements into an array.
• Spread Example:
Spread & Rest Operators (...)

let numbers = [1, 2, 3];

let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers];

console.log(allNumbers); // [1, 2, 3, 4, 5, 6]

Let [a,b,c,…rest]=[1,2,3,4,5];
Console.log(a); // 1
Console.log(rest); // [4,5]

Why it’s useful: Spread helps combine or copy arrays/objects. Rest helps handle unlimited
arguments easily.
 ES6 part I and II
6.Default Parameters
Default parameters let you set a default value for a function argument , in case it’s not provided.

function greet(name = "friend", greeting = "Hi") {

console.log(`${greeting}, ${name}!`);
};
greet(); // "Hi, friend!"
greet("Alice"); // "Hi, Alice!"
greet("Bob", "Hello"); // "Hello, Bob!"

7.Method:
Methods are functions that are associated with objects. They are used to perform actions or
operations on the object's data. Methods can be defined as part of an object or added to an object
later. Below is a detailed explanation of methods in JavaScript,
7.Method:
const person = {
name: 'John',
age: 30,
greet: function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
};

person.greet(); // Output: Hello, my name is John and I am 30 years old

The greet method is defined as a function inside the person object.

It uses this to access the object's properties (name and age).

This keyword refers new object. that is instance

8.Classes:
• Classes in JavaScript are a cleaner way to create objects and reuse code and we can tell it as
Template for object.
• More structured way to create objects.
• JavaScript classes support inheritance, allowing you to create a new class that extends an
existing class.

9.Constructor:

• Constructor is a special function used to create and initialize objects. Constructors are typically
used in conjunction with classes or function constructors to set up new instances of objects with
specific properties and methods.
• The constructor function returns the new object
Class, Constructor, This keyword
// Define a class
class Person {
// Constructor method
constructor(name, age) {
this.name = name;
this.age = age;
}

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

// Create an instance of the class

const person1 = new Person(‘kartheek’, 25);

person1.greet(); // Output: Hello, my name is kartheek and I am 25 years old.

Console.log(person1); // {name:kartheek, age:25}

 JS Prototypal Inheritance

After this lesson, you will understand:

• Constructor Functions
• Prototype
• Prototypal Inheritance
Introduction
• Prototype inheritance in JavaScript allows objects to inherit properties and methods
from other objects. Each object in JavaScript has an internal link to another object called
its prototype. This chain of prototypes forms the prototype chain.
• Objects inherit properties and methods directly from other objects

• When you access a property or method on an object, JavaScript first checks the object
itself. If the property or method isn’t found, it moves up the prototype chain until it finds
the property or reaches the end of the chain (null).
• Enables code reusability and efficiency
CONSTRUCTOR FUNCTION

A constructor function is defined like a regular function but is typically

named with an uppercase first letter (by convention) to indicate that it should
be used with the new keyword.
Example:
function Person(name, age) {
this.name = name;
this.age = age;
}
• This keyword in JavaScript refers to the object that is currently executing
the function. However, its value depends on how and where the function
is called.
• When this is used in the global scope, it refers to the global object:
• In browsers, this refers to window.
• In Node.js, this refers to global.
2. This Inside a Function (Regular Function Call)
In a regular function, this refers to the global object (window in browsers or global in
Node.js).
function show()
{
console.log(this);
} show(); // In browser: window
However, in strict mode ("use strict"), this becomes undefined inside a function.
"use strict";
function show() {
console.log(this);
}show(); // Output: undefined
This Inside an Object Method
When this is used inside an object method, it refers to the object itself.
const robot = {
name: "Robo1",
greet: function() {
console.log(`Hello, I am ${this.name}`);
}
};
robot.greet(); // Output: Hello, I am Robo1
Here, this.name refers to robot.name.
Step-by-Step Breakdown

Function Definition:

The function Person is defined with two parameters: name and age.

These parameters represent the properties that every object created from this constructor will have.

Using the This Keyword:

this.name = name; → Assigns the value of name to the name property of the object.

this.age = age; → Assigns the value of age to the age property of the object.

The this keyword inside a constructor function refers to the newly created object.

Creating an Object Using new Keyword:

The new keyword is used to create a new instance of the Person object.
 How the new Keyword Works
Creating an Object Using new Keyword (instance):
When new Person("Alice", 25); is executed, the following happens
The new keyword is used to create a new instance of internally:
the Person object. • A new empty object {} is created.
• The constructor function is called with this set to the new object.
.
• The properties (name and age) are added to the new object.

Example:
let person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 30);
This creates two objects:
"Alice", age: 25 }
person2 = { name: "Bob", age: 30 }
The new object is returned
11️⃣Global Context (this in the global scope)

• In a browser, when this is used in the global scope, it refers to the window object.

console.log(this); // In browser: window object

• In strict mode ("use strict"), this in the global context is undefined.

"use strict";

console.log(this); // undefined
2️⃣Inside a Function
🔹 Object Method
🔹 Regular Function
• If a function is called as a method of an object,
• When this is used inside a regular function, it
refers to: this refers to that object.

• The global object (window in browsers, const obj = {

global in Node.js) in non-strict mode. name: "JavaScript",
• undefined in strict mode. showThis: function() {
function showThis() { console.log(this);
console.log(this); }
}
showThis(); // In browser: window (or undefined
};
in strict mode)

obj.showThis(); // Logs obj

3️⃣Arrow Functions (this is Lexical)
• Arrow functions do not have their own this. Instead, they inherit this from the surrounding
scope.
const obj = {
name: "JavaScript",
showThis: () => {
console.log(this);
}
};
obj.showThis(); // Logs window (not obj)

👉 Unlike regular functions, this inside an arrow function does not refer to the calling object. Instead,
it inherits this from the parent scope.
 What is a Prototype?
• In JavaScript, every function and object has a
prototype, which is an object from which other
objects inherit properties and methods. This forms
the basis of prototypal inheritance, allowing
objects to share functionality efficiently.

• Prototype will have in-built functions that we use

it.
 2 Function (Local) Scope
2️⃣
11️⃣Global Scope • Variables declared inside a function are only accessible within that
•Variables declared outside any function or block have function.
global scope. • They are not accessible outside the function.
•They can be accessed anywhere in the code. function myFunction() {
let globalVar = "I am global"; function example() let localVar = "I am local";
{ console.log(globalVar); // Accessible } console.log(localVar); // Accessible
console.log(globalVar); // Accessible };console.log(localVar); // ❌ Error: localVar is not defined

3️⃣Block Scope (let and const)

• Variables declared with let or const inside a block {} are only accessible
within that block.
• var does not have block scope, meaning it can be accessed outside the block.
{
let blockVar = "Inside block";
console.log(blockVar); // Accessible inside
}
console.log(blockVar); // ❌ Error: blockVar is not defined
However, var is not block-scoped:
Uses of Scope in JavaScript
1. Avoids Variable Conflicts → Prevents global and local variables from interfering with each other.

2. Controls Access (Encapsulation) → Variables inside a function/block cannot be accessed outside, keeping data

secure.

3. Saves Memory → Local variables are removed from memory after function execution, improving performance.

4. Supports Closures → Inner functions remember variables from their outer functions, even after execution.

5. Organizes Code → Helps structure code properly by defining where variables and functions should be accessible.

6. Prevents Unwanted Changes → Protects variables from accidental modifications by limiting their scope.

Scope makes JavaScript code more secure, efficient, and manageable! 🚀

 Understanding Prototypes
Every JavaScript object has an internal property called [[Prototype]], which can be accessed using
Object.getPrototypeOf(obj) or obj.__proto__.

const obj = {};

console.log(Object.getPrototypeOf(obj)); // Logs the prototype object
console.log(obj.__proto__); // Equivalent, but not recommended for use
By default:
•Objects inherit from Object.prototype
•Arrays inherit from Array.prototype
•Functions inherit from Function.prototype
 Prototype Chain
When you access a property or method on an object, JavaScript first checks if the property exists on that object. If it
doesn’t, it searches in the prototype chain.

const animal = { eats: true };

const rabbit = Object.create(animal); // `rabbit` inherits from `animal`
console.log(rabbit.eats); // true (inherited from `animal`)
console.log(rabbit.__proto__ === animal); // true
Prototype Lookup
If rabbit.eats is accessed:
1.JavaScript looks for eats in rabbit → Not found
2.It checks rabbit.__proto__ (which is animal) → Found
 Adding Methods to a Prototype
You can add methods to an object's prototype so that all instances inherit them.
function Person(name) {
this.name = name;
}
// Adding a method to the prototype
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
const john = new Person("John");
john.greet(); // "Hello, my name is John"
const alice = new Person("Alice");
alice.greet(); // "Hello, my name is Alice"
Here, greet() is stored in the prototype, not in each object, saving memory.
In Simple Words
•__proto__ is a hidden link to an object’s prototype.
•It allows objects to inherit methods and properties.
•Instead of modifying __proto__, use Object.create() or Object.getPrototypeOf().
•JavaScript searches up the prototype chain when looking for properties/methods.
🔹 What is Prototypal Inheritance?

• Prototypal inheritance is a feature in JavaScript where objects can inherit properties and methods
from another object. Instead of using class-based inheritance (like in Java, C++, or Python),
JavaScript uses prototype chains to enable inheritance.

• Every JavaScript object has a hidden [[Prototype]] property (accessible via __proto__) that points to
another object, forming a prototype chain.
1 Creating Prototypal Inheritance using Object.create()
1️⃣
The Object.create() method allows you to create an object that directly inherits from another object.
const animal = {
eats: true,
🔹 Prototype Chain in Action
sleep() {
When accessing dog.eats, JavaScript:
console.log("Sleeping...");
} • Checks if eats exists in dog → ❌ Not found
}; • Looks up dog.__proto__ (which is animal) → ✅
// Creating a new object that inherits from `animal`
Found
const dog = Object.create(animal);
dog.barks = true;
console.log(dog.eats); // true (inherited from `animal`)
console.log(dog.barks); // true (own property)
dog.sleep(); // "Sleeping..." (inherited)
function Student(name, age, major) {
Person.call(this, name, age);
this.major = major;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
const student1 = new Student("Bob", 20, "Computer Science");
console.log(student1.name); // Output: "Bob"
console.log(student1.age); // Output: 20
console.log(student1.major); // Output: "Computer Science"
student1.greet(); // Output: "Hello, my name is Bob"
 function Student(name, age, major) {

This example demonstrates **prototypal inheritance** in JavaScript using Person.call(this, name, age);
this.major = major;
constructor functions. }
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

The `Student` function inherits from `Person` by calling `Person.call(this, name, const student1 = new Student("Bob", 20, "Computer
Science");
age)`, ensuring `Student` instances get `name` and `age` properties. console.log(student1.name); // Output: "Bob"
console.log(student1.age); // Output: 20
console.log(student1.major); // Output: "Computer Science"

To establish inheritance, `Student.prototype = Object.create(Person.prototype)` sets student1.greet(); // Output: "Hello, my name is Bob"

`Student`'s prototype to inherit from `Person`. The `constructor` is then restored with
`Student.prototype.constructor = Student`.

When `student1.greet()` is called, JavaScript looks up the prototype chain and finds
`greet()` in `Person.prototype`.

This approach enables code reusability and method sharing between objects.
 JS Async
By the end of this lesson, you will:
• Understand setTimeout() and setInterval().
• Differentiate between Asynchronous and Synchronous Programming.
JavaScript Asynchronous Programming (JS Async)
JavaScript is single-threaded, meaning it executes one operation at a time.
Asynchronous programming allows JavaScript to handle tasks like fetching data,
reading files, or waiting for user input without blocking the execution of other
code.
🎡 Amusement Park Ride Analogy 🎢
1. Synchronous Approach (One Ride at a Time)

Imagine you’re at an amusement park, and there’s only one roller coaster. Here's how it works:
• You get in line for the ride.
• You wait until the ride finishes before anyone else can board.
• Once the ride is done, the next person in line can enter.

🔴 Problem? Everyone has to wait in line doing nothing until the previous ride finishes!
2. Asynchronous Approach (Multiple Rides Running)

Now, imagine the amusement park has multiple rides running at the same time:
• You get in line for one ride and get a ticket.
• While you wait for your turn, you can explore the park, buy snacks, or go on another ride.
• When it’s your turn, the park sends you a notification (callback), and you go enjoy the ride.

✅ Advantage? You don’t waste time standing in line—you can do other things while waiting!
How This Relates to JavaScript

• Synchronous: Tasks execute one at a time, and JavaScript waits for each task to complete
before moving to the next.
• Asynchronous: JavaScript can handle multiple tasks simultaneously, like fetching data from an
API while allowing the user to interact with a webpage.

Just like in an amusement park, asynchronous programming makes sure that JavaScript doesn’t
block the main flow and efficiently handles multiple tasks at once!
1. Synchronous Programming
• Code is executed line by line in a blocking manner.
• Each operation waits for the previous one to complete before executing the next.
• If a task takes time (e.g., fetching data), it halts further execution.
Example: Synchronous Code

console.log("Start");
console.log(“Middle");
console.log(“lower middle");
console.log("End");

// it will be executed in order

2. Asynchronous Programming
• Code does not block execution; it moves to the next task while waiting.
• Useful for tasks like API calls, file reading, and timers.
 Callbacks
 Promises
 Async/Await
Example: Asynchronous Code using setTimeout
OUTPUT:
>> Start
console.log("Start");
>> End
setTimeout(() => { >> Task Complete
console.log("Task Complete");}, 2000); // Simulates a 2-second delay

console.log("End"); Non-blocking: The program does not wait for

setTimeout to finish.
 setTimeout()
1 setTimeout() - Delaying a Task Once
1️⃣

Imagine you're at a restaurant, and you place an order for a dish that takes 20 minutes to prepare. Here's how
it relates to setTimeout:

console.log("Placing order..."); // You place the order

Placing order...
setTimeout(() => {
console.log("Your dish is served!"); // The dish is ready after 20 minutes Chatting with friends...
}, 20000); // 20,000 milliseconds = 20 seconds
Your dish is served! (after 20 seconds)
console.log("Chatting with friends..."); // You continue doing other things
setInterval() - Repeating a Task at Intervals
Imagine an alarm that rings every morning at 7 AM to wake you up. It keeps ringing every day at the same time
unless you turn it off.
Example: A Clock Updating Every Second
🔍 Explanation:
• setInterval() runs every 1 second.
• It prints how many seconds have passed.
let count = 0;
• After 5 seconds, clearInterval() stops the interval.
const intervalId = setInterval(() => {
count++;
console.log(`⏳ Reminder: ${count} seconds passed...`);
Why are we using === (Strict Equality)in this
if (count === 5) { case?
clearInterval(intervalId); // Stop after 5 times
console.log("✅ Stopping reminders!");
1 Ensures the Correct Condition is Met
1️⃣
} • count === 5 ensures that the condition is met only
when count is exactly 5.
}, 1000); // 1000ms = 1 second • If we used ==, JavaScript might perform type
coercion, which could lead to unexpected results.
Digital Clock (Updates Every Second using setInterval()) Output (Updates Every Second):
10:15:23 PM
function displayClock() { setInterval(() => { const now = new Date(); 10:15:24 PM
10:15:25 PM
const time = now.toLocaleTimeString(); ...

console.log(time); }, 1000); }
displayClock(); // Starts the digital clock

How It Works:
• setInterval() runs every 1000ms (1 second).
• Gets the current time using new Date().
• Converts time to human-readable format using .toLocaleTimeString().
• Logs the updated time every second.
 JS Callbacks
• A callback function is a function that is passed as an argument to another
function and is executed after that function has completed its task.
• Callbacks are commonly used in asynchronous programming to ensure that
code executes in the correct order.
 JS Callbacks
• A callback function is a function that is passed as an argument to another
function and is executed after that function has completed its task.

function myfunc(val){
console.log(val(),"first function"); function myfunc(val){
}; console.log(val(),"first function");
};
function callback(){
return "i am callback";
} myfunc(function callback(){
return "i am callback";
myfunc(callback); // i am callback first function }); // i am callback first function
 JS Callbacks
• A callback function is a function that is passed as an argument to another
function and is executed after that function has completed its task.

function greet(name, callback) {

console.log("Hello, " + name + "!");
callback(); // Call the callback function
}

function sayGoodbye() {
console.log("Goodbye!");
}

// Pass `sayGoodbye` as a callback to `greet`

greet("Alice", sayGoodbye);
Why Are Callbacks Important in JavaScript?
1. Handling Asynchronous Operations
JavaScript uses callbacks to handle asynchronous tasks such as:
✔ Fetching data from APIs
✔ Reading files
✔ Handling user interactions
2. Avoiding Blocking (Non-Blocking Code)
• JavaScript runs on a single thread, meaning if one function takes too long, it blocks other code
from running.
• Callbacks help execute long-running tasks without stopping other parts of the program.
3. Callbacks in Event Handling
• Callbacks are essential for event-driven programming, such as handling button clicks.
4. Callbacks in Array Methods
• JavaScript’s built-in array methods like map(), filter(), and forEach() use callbacks for cleaner
and more readable code.
5. Callbacks Provide Flexibility & Reusability
• Using callbacks allows functions to be more dynamic by-passing different functions as
arguments.

Summary: Why Callbacks Are Important

1
1️⃣ Handle Asynchronous Operations (e.g., fetching data, timers).
2️⃣ Prevent Blocking (allow JavaScript to continue running smoothly).
3️⃣Enable Event-Driven Programming (handle clicks, keypresses, etc.).
4️⃣ Improve Code Reusability & Flexibility (pass different functions as arguments).
5️⃣ Make Code More Readable & Maintainable (simplifies logic in functions).
Next Step: Callbacks are great but can lead to callback hell (nested callbacks). To solve this, JavaScript
introduced Promises and async/await!
 🎭 Callback Analogy: The Movie Theater Experience 🎬
Imagine you're going to a movie theater to watch a film. Here’s how callbacks work
in this scenario:
1 You buy a movie ticket (calling a function to start an operation).
1️⃣
2️⃣The cashier gives you a receipt and tells you to wait (initiating an asynchronous
process).
3️⃣While waiting for the movie to start, you grab popcorn and chat with friends
(JavaScript continues executing other tasks).
4️⃣When the movie is ready to start, the theater notifies you (callback function is
executed).
5️⃣
You enter and watch the movie!
function buyTicket(callback) {
Output:
console.log("🎫 Ticket purchased. Waiting for the
movie to start..."); 🎫 Ticket purchased. Waiting for the movie to start...
setTimeout(() => { (After 3 seconds)
console.log("🍿 Movie is ready! Enter the hall."); 🍿 Movie is ready! Enter the hall.
callback(); // Call the function after movie starts 🎬 Enjoying the movie!
}, 3000); 🚀 Key Takeaway:
}
Just like you don’t stand in front of the screen waiting, JavaScript
function watchMovie() {
doesn’t wait—it moves on to other tasks and comes back when
console.log("🎬 Enjoying the movie!");
needed!
}
buyTicket(watchMovie);
 CALLBACK HELL
🚨 What is Callback Hell?
Callback Hell (also known as Pyramid of Doom) happens when multiple nested
callbacks are used in asynchronous JavaScript, making the code:
✅ Hard to read
✅ Difficult to debug
✅ Complex to maintain
🚨 Callback Hell Example (Nested Callbacks - Simple & Easy)
Imagine you want to make a sandwich. To do this, you need to:
1 Get
1️⃣bread
2️⃣
Add butter
3️⃣
Add jam
4️⃣Serve the sandwich 4️⃣
Each step depends on the previous step, so using nested callbacks leads to
callback hell:
 CALLBACK HELL EXAMPLE:
function getBread(callback) { function addJam(callback) { // Calling functions with nested
setTimeout(() => { setTimeout(() => { callbacks (Callback Hell)
console.log("🍓 Added jam"); getBread(() => {
console.log("🥖 Got bread"); addButter(() => {
callback();
callback(); }, 1000); addJam(() => {
}, 1000); } serve();
function serve() { });
} });
setTimeout(() => {
function addButter(callback) { console.log(" Sandwich is ready!"); });
setTimeout(() => { }, 1000);
}
console.log("🧈 Added butter");
callback();
🛑 Problems with Callback Hell
}, 1000);
• The indentation increases with more steps.
}
• Harder to read and maintain the code.
Promises
• Promises in JavaScript are a way to handle asynchronous operations. They are used to represent
the eventual completion (or failure) of an asynchronous operation and its resulting value.
• Promises are a built-in feature of JavaScript and are available in all modern browsers and
JavaScript environments. A promise can be in one of three states:

• Pending: initial state, neither fulfilled nor rejected.

• Fulfilled: meaning that the operation was completed successfully.
• Rejected: meaning that the operation failed.
 Promises
Here's an example of a simple promise:

const promise = new Promise((resolve, reject) => { const promise = new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
resolve('Hello, World!'); reject('Error!');
}, 1000); }, 1000);
}); });

promise.then(message => { promise.catch(error => {

console.log(message); // "Hello, World!" console.log(error); // "Error!"
}); });

Promises in JavaScript provide a way to handle asynchronous operations in a more structured way. They are a powerful tool for
managing the async flow and the new syntax of Async & Await makes it even more readable and easy to understand.
 Async & Await
Here's an example of a simple promise:

• Async & Await is a more modern approach to handle promises. It makes the code more readable
and less verbose.

• In this example, the function getData is declared as async. Inside the function, we use the await
keyword to wait for the promise returned by fetch to resolve. If the promise is fulfilled, the
resolved value (the response object) is assigned to the variable response. If the promise is
rejected, the control jumps to the catch block and the error is logged
Async & Await
async function getData() {
try {
const response = await
fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
getData();