JavaScript

coding learning websites codepractice

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.


JavaScript

online coding class codepractice

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

Go Back Top