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.

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