5.3 Bind()¶

bind()¶

Task 1: Call the obj1.func on obj2 using call().

var obj1 = {
  val: 1,
  func: function(){
    return this.val + 5;
  }
};

var obj2 = {
  val: 2
};

var result = obj1.func.call(obj2);
console.log(result);

The result is: 7

Task 2: Refer to task 1; replace call with bind.

var obj1 = {
  val: 1,
  func: function(){
    return this.val + 5;
  }
};

var obj2 = {
  val: 2
};

var result = obj1.func.bind(obj2);
console.log(result);

The result is as follows:

ƒ (){
    return this.val + 5;
  }

Task 3: Refer to task 2; result is a function, what is the result of calling this function?

var obj1 = {
  val: 1,
  func: function(){
    return this.val + 5;
  }
};

var obj2 = {
  val: 2
};

var result = obj1.func.bind(obj2);
console.log(result());

The result is: 7

Task 4: Call the following function using call().

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

var result = greet.call(window, "Nawras");
console.log(result);

The result is: Hello dear Nawras

Task 5: Refer to task 4; replace call with bind.

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

var result = greet.bind(window, "Nawras");
console.log(result);

The result is as follows:

ƒ greet(name){
  return `Hello dear ${name}`;
}

Task 6: Refer to task 5; result is a function, what is the result of calling this function?

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

var result = greet.bind(window, "Nawras");
console.log(result());

The result is: Hello dear Nawras

Extra Practice¶

Task 7: Bind the person1.speaks method to the person2 object.

var person1 = {
  name: "Sangeeta",
  languages: "Hindi, Sanskrit, and Tamil",
  speaks: function(){
    return `${this.name} speaks ${this.languages}.`;
  }
};


var person2 = {
  name: "Nada",
  languages: "Arabic, French, Spanish, and English"
}

var result = person1.speaks.bind(person2);
console.log(result);

The result is as follows:

ƒ (){
    return `${this.name} speaks ${this.languages}.`;
  }

Task 8: Refer to task 7; what is the result of console.dir(result)?

var person1 = {
  name: "Sangeeta",
  languages: "Hindi, Sanskrit, and Tamil",
  speaks: function(){
    return `${this.name} speaks ${this.languages}.`;
  }
};


var person2 = {
  name: "Nada",
  languages: "Arabic, French, Spanish, and English"
}

var result = person1.speaks.bind(person2);
console.dir(result);

The result is as follows:

ƒ bound speaks()
    arguments: (...)
    caller: (...)
    length: 0
    name: "bound speaks"
    __proto__: ƒ ()
    [[TargetFunction]]: ƒ ()
    [[BoundThis]]: Object
        languages: "Arabic, French, Spanish, and English"
        name: "Nada"
        __proto__: Object
    [[BoundArgs]]: Array(0)
        length: 0
        __proto__: Array(0)

Task 9: Refer to task 7; result is a function, what is the result of calling this function?

var person1 = {
  name: "Sangeeta",
  languages: "Hindi, Sanskrit, and Tamil",
  speaks: function(){
    return `${this.name} speaks ${this.languages}.`;
  }
};


var person2 = {
  name: "Nada",
  languages: "Arabic, French, Spanish, and English"
}

var result = person1.speaks.bind(person2);
console.log(result());

The result is: Nada speaks Arabic, French, Spanish, and English.

Task 10: Bind the function add to the obj object, and to the arguments 5, 6, 0, 1.

function add(num1, num2, num3, num4){
  return num1 + num2 + num3 + num4;
}

var obj = {
  a: 1,
  b: 2,
  c: 2
};

var result = add.bind(obj, 5, 6, 0, 1);

console.log(result());

The result is: 12

Task 11: Bind the min function to obj, and to the arguments obj.a and obj.b, respectively.

function min(a, b){
  return a < b ? a : b;
}

var obj = {
  a: 5,
  b: 10
}

var boundFunction = min.bind(obj, obj.a, obj.b);
console.log(boundFunction());

The result is: 5

Task 12: Refer to task 11; change the value of obj.a to 20, what is the result of calling boundFunction?

function min(a, b){
  return a < b ? a : b;
}

var obj = {
  a: 5,
  b: 10
}
obj.a = 20;

var boundFunction = min.bind(obj, obj.a, obj.b);
console.log(boundFunction());

The result is: 10

Task 13: Bind the house function to {}, and to the arguments f and a.

function house(floor, area){
  return `A ${area} square meter house with ${floor} floor(s)`;
}

var f = 4;
var a = 200;

var boundFunction = house.bind({}, f, a);
console.log(boundFunction());

The result is: A 200 square meter house with 4 floor(s)

Task 14: Bind the checkPassword function to the user object.

function checkPassword(pass){
  return this.pass.length > 12 ? "Strong" : "Weak";
}

var user = {
  name: "Ali",
  pass: "14789456",
  email: "ali@mail.com"
};

var boundFunction = checkPassword.bind(user);
console.log(boundFunction());

The result is: Weak

Task 15: Refer to task 14; change user.pass to 1234567891234.

function checkPassword(){
  return this.pass.length > 12 ? "Strong" : "Weak";
}

var user = {
  name: "Ali",
  pass: "14789456",
  email: "ali@mail.com"
};
user.pass = "1234567891234";

var boundFunction = checkPassword.bind(user);
console.log(boundFunction());

The result is: Strong

Task 16: Bind the counting function to obj.

var counting = function() {
  for(var i=this.firstNum; i<= this.secondNum; i++){
    console.log(i);
  }
  return "done";
}

var obj = {
  firstNum: 10,
  secondNum: 13
};

var boundFunction = counting.bind(obj);
console.log(boundFunction());

The result is as follows:

10
11
12
13
done

Task 17: Bind obj1.starsNo to obj2.

var obj1 = {
  star1: 1,
  star2: 2,
  starsNo: function(){
    return this.star1 + this.star2 + this.star3;
  }
};

var obj2 = {
  star1: 10,
  star2: 20,
  star3: 30
};

var result = obj1.starsNo.bind(obj2)
console.log(result());

The result is: 60

Task 18: Bind the calc function to obj.

function calc(num1, num2, num3){
  return (num1 + num2 + num3 + 5) / this.count;
}

var obj = {
  count: 5
};

var result = calc.bind(obj, 5, 10, 5);
console.log(result());

The result is: 5