Blog Archives

JavaScript Basics and the Keyword “this”

I just finished day 3 of Hack Reactor and thought I would go over some of the topics I’ve learned so far. I will not have much free time from here on out, but I want to get down all of the important ideas I learn every few days.

Our main instructor, Marcus, has spent much of the last two days going over the basic building block of JavaScript in great detail. I’ve been using some of these JS structures for about a month now, but it’s been great to learn more about each one, and how they relate to other elements. We spent quite a bit of time on objects and methods, along with data types.

Null vs. Undefined
The two value types that cause the most confusion where undefined and null. What I took away is:

null: The language has checked, and this does not exist.
undefined: The language does not know anything about the object you are asking about.

Here is a deeper explanation of null vs undefined on StackOverflow:
http://stackoverflow.com/questions/801032/why-is-null-an-object-and-whats-the-difference-compared-to-undefined

Ternary Operators
Another topic I learned a lot about that I had never seen before is JavaScript ternary operators. It is another way to succinctly express an if/else statement in just one line. The basic ternary operator framework:

test ? option1 : option2

Test is any boolean expression that will be true or false. Option1 is an expression that will be returned if the test is true, while option2 will be returned if the test is false.

This
The JS this keyword is often misunderstood, but is very useful when constructing objects and methods. Basically, the keyword “this” is bound dynamically to the object found to the left of the “.” at call time. There a a couple exceptions to this, but if you look to the left of the “.”, you can easily see what this will refer to. A quick example:

person = {
  location: ‘SF’,
  locate: function(){
    alert(this.location);
  };
};
person.locate(); //alerts “SF

In this example, it is plain to see how “this” inside of the method relates to the person object when the method was called on line 7.

The first major exception to watch out for with “this” is instances where there is no “.” before the function or method call. In this case, “this” refers to the global object, which is the window. The next exception is when it is called with the “new” keyword, in which case “this” will be undefined (ex. new person.located //alerts undefined). The third exception is when it is used in conjunction with .apply or .call, both which are specifically designed to bind a function to whatever argument they are passed.

We also spent the last couple days going over our pre-course projects and the refactored solutions to see the best methods for completing each assignment. It was very eye-opening to see an experienced programmer solve these problems in real time in just a few minutes, instead of the many, many hours it took me to complete each one. I now have something to strive for!

Read more