Jun 13, 2015

Notes on object-oriented JavaScript for o-o developers (part 5)

This post continues with more notes on distinctive features of object-oriented JavaScript as described in the book The Principles of Object-Oriented JavaScript.

This is a follow-up to the earlier Part 4 and is my final post related to that book.

**  Private properties can be made by using closures.

In JavaScript, all properties of an object are publicly accessible. Unlike some other languages, there are no keyword access modifiers that correspond to public/protected/private.

However, you can get the same effect as private by defining an object in the context of a function that provides local variables and methods that you don't want to be public. The object is then used as a closure on those items that would otherwise not be accessible at all outside of the function.

So here's an example that I have copied from the above book, which nicely illustrates the idea.

  var person = (function () {

    var age = 25;

    return {
      name: "Nick",
      getAge: function () { return age; },
      growOlder: function () { ++age; }
    }

  })();

The outer, anonymously defined function is immediately invoked and returns an object which is assigned to the variable person.

The key concept here is that the two methods of that object refer to a local variable of the function. Because of those references, the lifetime of the local variable is extended, while at the same time it is not visible in any other code.

This use of closures is an example of the Module pattern in JavaScript.

This provides an individual object with a private property, but a similar technique can be used in a constructor so that every object created via the constructor gets its own private, instance property.

  function Person (initial_age) {

    var age = initial_age;

    this.getAge = function () { return age; };
    this.setAge = function (new_age) { age = new_age; };
    this.growOlder = function () { ++age; };

  }

  nick = new Person(59);
  lena = new Person(37);

  console.log(nick.age);  // undefined


Sources:

Closures
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Learning JavaScript Design Patterns
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/


Jun 1, 2015

Syntax explanation of (function ($) { ..... })(jQuery)

A few months ago when I had to modify some JavaScript, I ran across code like the following that just baffled me in terms of the basic syntax.

  (function($){
    $(document).ready( ..... );
  })(jQuery);


I'm now in a much better position to explain at the language level what's going on.

This explanation is not about jQuery nor about jQuery plugins, which a web search will show results for, such as the second article mentioned below.

Previously, I wrote that one of the ways to code the literal definition of a function is by using an expression that starts with the keyword function but does not include a name.

For example, this code defines an anonymous function and assigns it to a variable.

  var helloWorld = function() {
    console.log("hello, world");
  }

The right-hand side of the = operator must be an expression that provides a value. In this case, it's a function object.

Likewise, here's a definition of another function object. The parentheses around it force it to be treated as an expression rather than as a regular function declaration.

  (function ($) {
    $(document).ready( ..... );
  })

A single dollar sign $ is a valid identifier. So in this case, that's the name of the function's argument. That argument is apparently expected to be a function since $(document) looks like a call of $, whatever the actual argument is.

Let's add the final piece.

  (function ($) {
    $(document).ready( ..... );
  })(jQuery);

The (jQuery) part of this expression means call the anonymously defined function, with jQuery as the actual argument.

In general, this kind of construct is known as an Immediately Invoked Function Expression (IIFE).

There's a slightly different way to write this code. I prefer the above, and it's what I've been seeing in practice. But the following is also correct.

  (function ($) {
    $(document).ready( ..... );
  }(jQuery));


Sources: 

Immediately-Invoked Function Expression (IIFE)
http://benalman.com/news/2010/11/immediately-invoked-function-expression/ 

What does (function($) {})(jQuery); mean?
http://stackoverflow.com/questions/2937227/what-does-function-jquery-mean