Welcome to another tutorial, here you will learn how to borrow functionality from existing objects in JavaScript.
JavaScript makes it possible for you to borrow methods from other objects to build some functionality without inheriting all their properties and methods.
JavaScript provides two methods for any function objects, the call() and apply() method. they allow a function to be invoked as if it were a method of another object. Below is an example:
var objA = {
name: "object A",
say: function(greet) {
alert(greet + ", " + this.name);
}
}
objA.say("Hi"); // Displays: Hi, object A
var objB = {
name: "object B"
}
/* The objB doesn't have say() method, but it can borrow it from objA */
objA.say.call(objB, "Hello"); // Displays: Hello, object B
The syntax of the apply() method and the call() method are almost identical, the only difference is that the call() method takes a list of arguments like call(thisObj, arg1, arg2, ...), whereas the apply() method takes a single array of arguments like apply(thisObj, [argsArray]).
Note: The square brackets ([]), which denotes an array. This is shown in the last line of the example below:
var objA = {
name: "object A",
say: function(greet) {
alert(greet + ", " + this.name);
}
}
objA.say("Hi"); // Displays: Hi, object A
var objB = {
name: "object B"
}
/* The objB doesn't have say() method, but it can borrow it from objA */
objA.say.apply(objB, ["Hello"]); // Displays: Hello, object B
The apply() method makes it possible for you to use built-in methods to perform some tasks quickly and easily. An example is using the Math.max()/Math.min() to find out the maximum or minimum value in an array, that would otherwise require looping over the array values.
Recall from previous tutorials, JavaScript arrays do not have a max() method, but Math has, so we can apply the Math.max() method, like this:
var numbers = [2, 5, 6, 4, 3, 7];
// Using Math.max apply
var max = Math.max.apply(null, numbers);
alert(max); // Outputs: 7
Note: The first argument that is unique to both call() and applies () is the object on which the function is to be invoked or called. However, using null as the first argument is like invoking the function without providing any object for the pointer inside the function.
However, the new ES6 spread operator provides a shorter and simpler way to obtain the maximum or minimum value from an array without using the apply() method. Below is an example:
var numbers = [2, 5, 6, 4, 3, 7];
// Using spread operator
var max = Math.max(...numbers);
alert(max); // Outputs: 7
More so, the spread (...) and apply() can either fail or return the incorrect result if the array has too many elements (e.g tens of thousands). So, you can use the Array.reduce() to find the maximum or minimum value in a numeric array, by comparing each value this way:
var numbers = [2, 5, 6, 4, 3, 7];
// Using reduce method
var max = numbers.reduce(function(a, b) {
return Math.max(a, b);
});
alert(max); // Outputs: 7