Introduction

Sometimes as a software developer you find a plateu and it gets hard to improve your level. You could be learning new stuff, but you still feel that you didn't improve.

In this tutorial we will explain javascript new concepts that are usually not learned when using framework or if you are a self taught. The objective of this tutorial is to teach you how to use bind, apply and call methods. Since this tutorial is for beginners we will start with some basic object concepts, then we explain this to finally teach you bind, apply and call.

If you are very familiar with objects, you can skip the first concept.

Concept 0: Currying functions

Concept 1: Object in javascript

Javascript has the Object data type and five immutable primitives Number, String, Boolean, Undefined, and Null.

An object in javascript are like dicitonaries where you can access/set properties by a key. For example a car can be created by:

var car = {brand:"Fiat", model:"500", color:"white"};

Values of the object property can be other variable or even a function. You can also nest objects.

In javascript keys are usually call properties, you can list them with:

var properties = Object.keys(myObject);

It's very easy to get unexpected behaviour when you begin to use variable which are references and primitives. Check this code and the output:

var car = "Fiat";
var anothercar = car;
car = "Tesla";

console.log(anotherCar); // will output Fiat
console.log(car); // will output Tesla

var car2 = {brand: "Fiat"};
var anotherCar2 = car2;
car2.brand = "Tesla";

console.log(car2.brand); // will output "Tesla"
console.log(anotherCar2.brand); // will output "Tesla"

Examine the last example very careful until you understand the difference between Reference Data Type and Primitive Data Types. If you want to learn more about javascript object, search for the difference between protoypes , using constructors to build objects.

One last thing you should know about javascript objects is that every function is also an object.

Concept 2: Dig deeper on "this" meaning

For new developer using and understanding this could be trickier. Some developers use this the proper way by copy pasting code from stackoverflow, but they don't understand how the code works. Other developers thinks they understand it, but they probably don't understand it in all contexts.

Let's take a look to an example:

var car = {
    model: "Model S",
    brand: "Tesla",
    fullName: function () {
        console.log(this.brand + " " + this.model);
        console.log(car.brand + " " + car.model);
    }
}

If you execute the code above in a new javascript console, the log printed in the console will be the same. However there could be another global variable called car. Then, the console log could break or print another data.

In javascript this is used to refer to an object that the function is bound to and it contains the value of the object.

So, this is a variable with the value of the object that invokes the function where this is used.

Strict mode and this

When using the strict mode, this holds the value of:

• undefined in global functions.
• undefined in nonymous functions that are not bound to any object (see bind later).

IMPORTANT this is not assigned a value until an object invokes the function where this is defined. Remember the last sentence, it can be very helpful.

What happends when this is used on globel scope?

When the code is being execute in the browser, global variables are defined in the windows object. Then, everytime you use this it will have the value of a window object.

var brand = "BMW";

function carBrand() {
    console.log(this.brand);
}

var car = {
    brand: "Tesla",
    carBrand: function() {
        console.log(this.band);
    }
}

this.carBrand(); // console will print BMW
car.carbrand(); //console will print Tesla

window.crBrand(); // console will print BMW

Still with problems when using this? What is self?

Always remeber to think about the javascript context of a variable. It can get tricker to understand when this is used inside a closure or in a callback.

Remeber that this always has the value of the object who invoked the function or method. When you pass a function that uses this as a parameter, the context of execution will bind this to a unexpected value.

Have you ever seen this code?

var self = this;

Let's see the following code:

var functionX = function() {
  var self = this;
  var functionY = function(y) {
    // If we call "this" in here, we get a reference to functionY,
    // but if we call "self" (defined earlier), we get a reference to function X.
  }
}

As you can see, you can refer to functionX inside functionY using self. In javascript and other languages with closures, this can be a very important thing to do. The object that this refers to in a method can actually change. Once you set your self variable equal to this, then self will reliably remain a reference to the object in question, even if this later points to something different.

Remeber all this difference for the next section about bind, call, etc..

Concept 3: Apply, Call, and Bind Methods explained

Function in javascript are ojects which provides y default the methods:

• Apply: Used for setting the this method explicitly, but used for variable-arity functions.
• Call: Used for setting the this method explicitly.
• Bind: Will set *this( value in methods and for currying functions.