JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

Function Bind


📘 JavaScript bind() Method – Permanently Bind this to a Function

The bind() method creates a new function that, when called, has its this value permanently set to the first argument passed to bind().


🔹 Syntax

let boundFunc = func.bind(thisArg, arg1, arg2, ...);
  • thisArg: The object to bind as this.

  • arg1, arg2...: Optional preset arguments (partial application).

  • Returns a new function with the bound context and optional arguments.


🔹 Example 1 – Basic Binding

function greet() {
  console.log("Hello " + this.name);
}

const person = { name: "Amit" };

const boundGreet = greet.bind(person);
boundGreet(); // Output: Hello Amit

🔹 Example 2 – With Preset Arguments

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

const addTen = add.bind(null, 10);
console.log(addTen(5)); // Output: 15

🔹 Real-World Use Case: Event Handling

const obj = {
  name: "Button",
  handleClick: function () {
    console.log(this.name + " clicked");
  },
};

document.getElementById("btn").addEventListener("click", obj.handleClick.bind(obj));

Practice Questions

Q1. Write a function sayHello() that logs "Hello, [this.name]". Use bind() to fix this to an object { name: "Riya" } and call it.

Q2. Create a function multiply(a, b) and use bind() to make a new function double where a = 2. Call double(5) and print the result.

Q3. Create an object person with name: "Ajay" and a method showName(). Detach the method and use bind() to retain its this context.

Q4. Write a function intro(greeting, name) and use bind() to preset "Hi" as the greeting. Call it with a name.

Q5. Make a function logCoords(x, y) and use bind() to create a logX function where x is always 10. Then call logX(20).

Q6. Define a constructor User(name) and a method say() that logs the name. Use bind() to pass the method around and preserve context.

Q7. Create a button in HTML. Bind a function to the button's click event using bind() to make sure this refers to the object.

Q8. Create a function printMessage(msg1, msg2) and use bind() to prefill msg1 = "Welcome". Call it with "User" as msg2.

Q9. Use bind() to create a reusable tax calculator where the tax rate is fixed at 18% and only the amount is passed during calls.

Q10. Write a function that logs this.id. Use bind() to assign a specific object with id: 99 and invoke the function.


Function Bind Quiz

Q1: What does the bind() method return?

A. The same function with different this
B. A new function with bound this
C. A method object
D. A constructor

Q2: Which method permanently binds this to a function?

A. apply()
B. call()
C. bind()
D. attach()

Q3: Which of the following is a valid usage of bind()?

A. func.bind(this, [args])
B. func.bind(this, arg1, arg2)
C. bind(func, this)
D. func.bind()

Q4: When using bind(), when is the function executed?

A. Immediately
B. After delay
C. When the new function is called
D. Never

Q5: What will happen if you call a bound function without arguments when some were preset using bind()?

A. It ignores bound values
B. It throws an error
C. It uses the preset values and undefined for others
D. It uses only runtime arguments

Q6: What is "partial application" in the context of bind()?

A. Fixing some arguments ahead of time
B. Passing all arguments as array
C. Breaking a function into two
D. Ignoring arguments

Q7: Which is true about bind() compared to call() and apply()?

A. bind() invokes immediately
B. bind() cannot preset arguments
C. bind() returns a new function
D. bind() is deprecated

Q8: Which use-case is best solved using bind()?

A. Looping through arrays
B. Making AJAX requests
C. Fixing this inside callbacks or event handlers
D. Changing DOM styles

Go Back Top