Here’s a clean, copy-friendly cheat sheet for .call() vs .
bind() in JavaScript with examples and
comparisons:
📘 .call() – Calls a function immediately with a specific this
Definition:
js
CopyEdit
[Link](thisArg, arg1, arg2, ...)
thisArg: the value of this inside the function.
Calls the function immediately.
Example:
js
CopyEdit
function greet(greeting) {
[Link](`${greeting}, my name is ${[Link]}`);
const person = { name: "Alice" };
[Link](person, "Hello"); // Output: Hello, my name is Alice
📗 .bind() – Returns a new function with bound this
Definition:
js
CopyEdit
[Link](thisArg)
Returns a new function with this permanently bound to thisArg.
Does not call the function immediately.
Example:
function greet() {
[Link](`Hi, I'm ${[Link]}`);
const person = { name: "Bob" };
const boundGreet = [Link](person);
boundGreet(); // Output: Hi, I'm Bob
📊 .call() vs .bind() – Key Differences
Feature .call() .bind()
Invokes function? Yes, immediately No, returns new function
Use case One-time function call Reusable function with bound this
Arguments Passed after thisArg directly Passed when calling the new func
🔧 Bonus: Real Use Case (setTimeout + this)
js
CopyEdit
const obj = {
name: "React",
logName: function () {
[Link]([Link]);
};
setTimeout([Link], 1000); // undefined (this lost)
setTimeout([Link](obj), 1000); // React (this preserved)
now give me a lexical scope and closure example as well with code
ChatGPT said:
Absolutely! Here's a clean explanation of Lexical Scope and Closure in JavaScript, with examples and
clear comments:
🔍 Lexical Scope
Lexical Scope means that a variable’s accessibility is determined by its physical location in the
source code.
Example:
js
CopyEdit
function outer() {
const name = "JavaScript";
function inner() {
[Link](name); // ✅ Can access 'name' from outer scope
inner();
outer(); // Output: JavaScript
inner() has access to name because it is defined inside outer() — this is lexical scope.
🔐 Closure
A closure is created when a function "remembers" the variables from its lexical scope, even after the
outer function has finished execution.
Example:
js
CopyEdit
function counter() {
let count = 0;
return function () {
count++;
[Link]("Count:", count);
};
const increment = counter(); // closure is formed here
increment(); // Count: 1
increment(); // Count: 2
🔑 What's happening?
counter() returns an inner function.
The inner function remembers the count variable — even after counter() is done executing.
This is a closure — the returned function keeps a reference to its lexical environment.
✅ Closure Use Cases
Data encapsulation / privacy
Function factories
Event handlers
Maintaining state (e.g., counters)
💡 Mini Interview Question:
Q: What is a closure in JS?
A: A closure is when a function retains access to variables from its lexical scope even after the outer
function has finished executing.
You said:
getter and setter example and why we should use it over normal constructors
ChatGPT said:
Great! Let's break down getters and setters in JavaScript with examples and explain why they're
useful over normal constructor assignments.
📘 What are Getters and Setters?
Getters are functions that return the value of a property.
Setters are functions that set the value of a property.
They help control access, add validation, or compute values dynamically.
✅ Basic Example
js
CopyEdit
class Person {
constructor(name) {
this._name = name; // convention: use _ to show it's "private"
get name() {
return this._name.toUpperCase(); // control or format on access
set name(newName) {
if ([Link] < 3) {
[Link]("Name too short!");
} else {
this._name = newName;
const p = new Person("Alice");
[Link]([Link]); // ALICE (getter used)
[Link] = "Jo"; // Name too short! (setter validation)
[Link] = "John"; // OK
[Link]([Link]); // JOHN
🔄 Compared to a Constructor-Only Approach:
js
CopyEdit
class Person {
constructor(name) {
[Link] = name; // no control, validation, or formatting
const p = new Person("Jo");
[Link]([Link]); // Jo — no validation, formatting, or logic
💡 Why Use Getters/Setters?
Benefit Explanation
✅ Encapsulation Hide internal variables and only expose safe interfaces
✅ Validation Add logic before setting or getting a value
Benefit Explanation
✅ Computed Return values based on other internal state (e.g. fullName from first +
properties last)
✅ Read-only access Use getter only (no setter) to make something read-only
🧠 Bonus: [Link]()
You can also define getter/setter outside of class:
js
CopyEdit
const user = {
firstName: "John",
lastName: "Doe"
};
[Link](user, "fullName", {
get() {
return `${[Link]} ${[Link]}`;
},
set(value) {
const [first, last] = [Link](" ");
[Link] = first;
[Link] = last;
});
[Link]([Link]); // John Doe
[Link] = "Jane Smith";
[Link]([Link]); // Jane
Would you like this included in the PDF with closures and .call()/.bind() as well?
You said:
class example with extends keyword like inheritence also give the super keyword usecase instead
of .call()
ChatGPT said:
Absolutely! Let's walk through a JavaScript class inheritance example using the extends keyword and
the super() function — which is the modern replacement for [Link](this) in classical
prototypes.
👨👩👧 Class Inheritance with extends and super()
✅ Basic Example
js
CopyEdit
class Animal {
constructor(name) {
[Link] = name;
speak() {
[Link](`${[Link]} makes a sound.`);
class Dog extends Animal {
constructor(name, breed) {
super(name); // 🔥 call the parent constructor
[Link] = breed;
speak() {
[Link](`${[Link]} the ${[Link]} barks.`);
}
const d = new Dog("Rex", "Labrador");
[Link](); // Rex the Labrador barks.
🧠 What's happening here?
Concept Description
extends Makes Dog a subclass of Animal. It inherits all properties and methods.
Calls the parent class constructor and sets [Link]. Without super(), this will be
super(name)
undefined in a subclass constructor.
Method
Dog overrides the speak() method of Animal.
override
🔁 Comparison with .call() in Function Constructors
js
CopyEdit
function Animal(name) {
[Link] = name;
function Dog(name, breed) {
[Link](this, name); // old way to inherit constructor
[Link] = breed;
In ES6 classes, super() does this internally in a cleaner and more readable way.
🔄 Inheriting Methods without Overriding
js
CopyEdit
class Cat extends Animal {}
const c = new Cat("Whiskers");
[Link](); // Whiskers makes a sound.
🚀 Bonus: Accessing Parent Method with super
js
CopyEdit
class Bird extends Animal {
speak() {
[Link](); // calls Animal's speak
[Link](`${[Link]} also chirps.`);
const b = new Bird("Tweety");
[Link]();
// Tweety makes a sound.
// Tweety also chirps.
✅ Interview Flash Card
Q: What's the purpose of extends and super() in JavaScript classes?
A: extends enables class inheritance, and super() is used to call the parent class constructor or
methods, replacing .call(this) from pre-ES6.