JavaScript Basics- Type Coercion + bind, apply, call explained simply

JS often sees confusing when mixing strings, numbers, functions — especially when this behaves unexpectedly. In this article we will break down two important JS concepts every JS developer need to know.
- Type coercion
- this, Call, Bind, Apply

Type Coercion:

JS is weakly-typed language (allows implicit type conversion with type mismatch)

Coercion types:
Implicit coercion: JS converts types automatically behind the scenes

console.log(1+2+"3") // "33" (number-> string) (string concatenation)
console.log("5"-4) // 1 (string-> number) (Arithmetic operations)
console.log("3" == 3) //true (comparison with loose equality -> string converts to number)
console.log("3" === 3) // false (no coercion with strict equality, strict check)
console.log(null == undefined) // true 
console.log(null === undefined) // false

== operator always coercion where as === doesn’t.

Explicit coercion (manual): Convert values intentionally using built-in methods

Number("42") // 42 (str -> num)
+ "42" // 42 (unary +)
Boolean(0) // false
Boolean("Hi")    // true (non-empty string is truthy)

Difference between bind, apply and call in JavaScript:

This: refers to the object that invokes a function.

In global scope -> In browser this refers to window object
In object method -> refers to that object
In Event/Callback -> depends on how it’s called.

Get SaiRoopa Galiveeti’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Why do we need bind, apply, call?
Call, bind, apply lets us manually control what this refers to.

const obj = {name : "John"}
function greet(){
   console.log("Hello" + " " + this.name) 
}

greet() // undefined
greet.call(obj) // Hello John -> this refers to obj

// in async callbacks "this" changes unexpectedly -> use bind() 
const user = {
  name : "John",
  display(){
   setTimeout(function(){
    console.log("Hello" + " " + this.name)
   }.bind(user), 1000)
  }
}

user.display() // "Hello John"

Now let’s get into bind, apply, call

Bind: It is used to permanently fix this for a function and return a new function to be called later.

Used with callbacks, promises, async functions, event handlers

const newFunc = func.bind(thisArgs, arg1, arg2)
//thisArgs -> object to bind to the func,arg1,arg2-> optional preset args

bind() doesn’t run the function immediately, — it returns a new function.

Call: It is used to invoke a function immediately while explicitly setting what “this” should it refer to and pass arguments individually(comma-separated)

// Call syntax : func.call(thisArgs, arg1, arg2)

const obj1 = {
  name : "John",
}

const obj2 = {
  name : "Alex"
}

function greet(city, country){
  console.log(`I am ${this.name} and I am from ${city}, ${country}`)
}

greet.call(obj1, "Hyd", "India");  // John
greet.call(obj2, "Blr", "India" );  // Alex

Used when same function is used across many objects, passing function parameters.

Apply: apply is similar to call, but it send args as array.

// syntax
func.apply(thisArgs, [arg1, arg2])

Useful when number of args are dynamic.

Where is it used in real world applications?
- Multiple objects with single function
- Across async functions to bind the object
- Borrowing methods