JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals

»july. 10 2013 103

Prerequisite:
Understand JavaScript’s “this” With Ease, and Master It.
JavaScript Objects
Understand JavaScript Closures
(This is an intermediate to advanced topic)

Duration: About 40 minutes.

Bov Academy

of Programming and Futuristic Engineering

Invest in Your Future: Become a Frontend/Fullstack Engineer

Within 6–8 Months, Earn > the Avg. New CS Graduate Earns

30% Discount for the May Session

By the founder of JavaScriptIsSexy

Functions are objects in JavaScript, as you should know by now, if you have read any of the prerequisite articles. And as objects, functions have methods, including the powerful Apply, Call, and Bind methods. On the one hand, Apply and Call are nearly identical and are frequently used in JavaScript for borrowing methods and for setting the this value explicitly. We also use Apply for variable-arity functions; you will learn more about this in a bit.

  • Receive Updates

On the other hand, we use Bind for setting the this value in methods and for currying functions.

We will discuss every scenario in which we use these three methods in JavaScript. While Apply and Call come with ECMAScript 3 (available on IE 6, 7, 8, and modern browsers), ECMAScript 5 (available on only modern browsers) added the Bind method. These 3 Function methods are workhorses and sometimes you absolutely need one of them. Let’s begin with the Bind method.
Continue Reading

16 JavaScript Concepts JavaScript Professionals Must Know Well

»july. 9 2013 61

(Essential JavaScript Concepts for Modern JavaScript Development )

If you plan to work as JavaScript Professional, you must know some JavaScript concepts and JavaScript-related web-development technologies, particularly as a modern JavaScript developer. If you know the 16 concepts enumerated below, you have the skill necessary to build world-class modern JavaScript web applications, and you are set for the near future—0 to 3 years.

Bov Academy

of Programming and Futuristic Engineering

Invest in Your Future: Become a Frontend/Fullstack Engineer

Within 6–8 Months, Earn > the Avg. New CS Graduate Earns

30% Discount for the May Session

By the founder of JavaScriptIsSexy

I will expound on each of these sixteen concepts, and I am hopeful all of us will have become better JavaScript programmers by the time we get through all of them. I have completed most of the 16 concepts with just a few more to go, so keep reading and learning. And sign up for the newsletter to get the latest updates.

  • Receive Updates

I trust you have learned JavaScript properly or you already know JavaScript enough to build a simple JavaScript-only web application. While the 16 concepts note below are neither complex nor difficult, you will understand them best if you already know at least some basic JavaScript.

The sixteen concepts that every modern JavaScript developer should know well follow:

  1. JavaScript Objects in Detail
  2. JavaScript Prototype in Plain, Detailed Language
  3. JavaScript Variable Scope and Hoisting Explained
  4. Understand JavaScript Closures With Ease
  5. Understand JavaScript Callback (Higher-Order) Functions
  6. Understand JavaScript’s “this” With Clarity, and Master It
  7. JavaScript’s Apply, Call, and Bind Methods are Essential
  8. Learn HTML5, CSS3, and Responsive WebSite Design
  9. Object Oriented JavaScript (OOP in JavaScript)
  10. Learn Node.js Completely and With Confidence Or Learn Meteor.js Properly
  11. Continue Reading

Understand JavaScript’s “this” With Clarity, and Master It

»july. 5 2013 172

(Also learn all the scenarios when this is most misunderstood.)

Prerequisite: A bit of JavaScript.
Duration: about 40 minutes.

The this keyword in JavaScript confuses new and seasoned JavaScript developers alike. This article aims to elucidate this in its entirety. By the time we make it through this article, this will be one part of JavaScript we never have to worry about again. We will understand how to use this correctly in every scenario, including the ticklish situations where it usually proves most elusive.

Bov Academy

of Programming and Futuristic Engineering

Invest in Your Future: Become a Frontend/Fullstack Engineer

Within 6–8 Months, Earn > the Avg. New CS Graduate Earns

30% Discount for the May Session

By the founder of JavaScriptIsSexy

We use this similar to the way we use pronouns in natural languages like English and French. We write, “John is running fast because he is trying to catch the train.”

Note the use of the pronoun “he.” We could have written this: “John is running fast because John is trying to catch the train.” We don’t reuse “John” in this manner, for if we do, our family, friends, and colleagues would abandon us. Yes, they would. Well, maybe not your family, but those of us with fair-weather friends and colleagues. In a similar graceful manner, in JavaScript, we use the this keyword as a shortcut, a referent; it refers to an object; that is, the subject in context, or the subject of the executing code. Consider this example:

    var person = {
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function () {
        ​// Notice we use "this" just as we used "he" in the example sentence earlier?:
        console.log(this.firstName + " " + this.lastName);
    ​// We could have also written this:​
        console.log(person.firstName + " " + person.lastName);
    }
}

  • Receive Updates


If we use person.firstName and person.lastName, as in the last example, our code becomes ambiguous. Consider that there could be another global variable (that we might or might not be aware of) with the name “person.” Then, references to person.firstName could attempt to access the firstName property from the person global variable, and this could lead to difficult-to-debug errors. So we use the “this” keyword not only for aesthetics (i.e., as a referent), but also for precision; its use actually makes our code more unambiguous, just as the pronoun “he” made our sentence more clear. It tells us that we are referring to the specific John at the beginning of the sentence.

Just like the pronoun “he” is used to refer to the antecedent (antecedent is the noun that a pronoun refers to), the this keyword is similarly used to refer to an object that the function (where this is used) is bound to. The this keyword not only refers to the object but it also contains the value of the object. Just like the pronoun, this can be thought of as a shortcut (or a reasonably unambiguous substitute) to refer back to the object in context (the “antecedent object”). We will learn more about context later.

JavaScript’s this Keyword Basics

First, know that all functions in JavaScript have properties, just as objects have properties. And when a function executes, it gets the this property—a variable with the value of the object that invokes the function where this is used.

The this reference ALWAYS refers to (and holds the value of) an object—a singular object—and it is usually used inside a function or a method, although it can be used outside a function in the global scope. Note that when we use strict mode, this holds the value of undefined in global functions and in anonymous functions that are not bound to any object.
Continue Reading