Why we need call or apply method in javascript, when we can directly call the method?

It can be helpful when dealing with objects, I suggest you reading these two guides, they explain it very well:

• https://www.w3schools.com/js/js_function_call.asp
• https://www.w3schools.com/js/js_function_apply.asp

As you may know, functions are the first-class citizens in JavaScript. It means that you can pass them as arguments to other functions.

In some cases you're dealing with methods which rely on a context. For example:

const button = document.querySelector('button');
const getRect = button.getBoundingClientRect;

getRect(); // TypeError...

// You have to pass a context fo that function
getRect.call(button);

There are some other functions to pass a context. Please take a look on apply, bind, call...

Another great example of using call and apply is monkey-patching:

// Save the original console.log() method
var log = console.log;

console.log = function() {
   // Invoke the original method with an additional parameter
   log.apply(console, [(new Date()).toString()].concat(arguments));
};

Kyle Simpson has a great explanation in his series You don't know JS

I can give you two examples that will explain why it is important. Let's say you have a class shown below:

class MyClass {
  myProp = 'Hello World';
  myMethod() {
    console.log(this.myProp);
  }
}

Let's assume you want to call myMethod on a button click event. This is what you'll do:

const myInstance = new MyClass();
document.querySelector('button').addEventListener('click', myInstance.myMethod);

Now there is a problem: With addEventListener the execution context changes and this refers to the element instead of class instance (which does not have myProp property on it). How do I change it back? In such a scenario you can use bind.

document.querySelector('button').addEventListener('click', myInstance.myMethod.bind(myInstance));

This essentially changes the reference back to the class. This is just one example. There can be numerous examples where you want to change the current execution context of a method. Let's take another example:

Let's assume there is a third party function which requires access to some class members.

Third party function requires target instance's name and lastname properties.

function getFullName() {
  return this.name + ' ' + this.lastname;
}

If you execute this method without call or apply, the method assumes the current instance on which this function exists (in this case it is window), and search the properties on current object. But there can be requirements where you might wanna change this behavior. Let's say you have class which provides the name and lastname properties, and you wanna leverage the functionality of this method. This is what you can do:

class MyName {
  name = 'Tom';
  lastname = 'Hanks';
}

getFullName.apply(new MyName()); // --> 'Tom Hanks'

So you see how call and apply are helpful. You can refer to Zer0's answer to learn more about call, apply and bind.

It's about this context in apply vs call. Apply you can pass args in an array.

you can also access functions with the same name from different objects by it, for example toString() or whatever you like:

class MyObject {
    constructor(operator) {
        this.operator = operator;
    }
    
    calculate(a, b) {
        switch(this.operator) {
            case '+': return a + b;
            case '-': return a - b;
            case '*': return a * b;
            case '/': return a / b;
        }
    }
}

const operators = [
    new MyObject('+'),
    new MyObject('-'),
    new MyObject('*')
];
for (const op of operators) {
    const func = op['calculate'];
    console.log(func.call(op, 1, 1));
}