Understand JavaScript Closures With Ease

»feb. 2 2013 238

Closures allow JavaScript programmers to write better code. Creative, expressive, and concise. We frequently use closures in JavaScript, and, no matter your JavaScript experience, you will undoubtedly encounter them time and again. Sure, closures might appear complex and beyond your scope, but after you read this article, closures will be much more easily understood and thus more appealing for your everyday JavaScript programming tasks.

Bov Academy

of Programming and Futuristic Engineering

A Once-in-a-Lifetime Opportunity

Train to Become an Exceptional and Successful Developer

While Building Real-World Projects You Can Benefit from for Years

By the founder of JavaScriptIsSexy

This is a relatively short (and sweet) post on the details of closures in JavaScript. You should be familiar with JavaScript variable scope before you read further, because to understand closures you must understand JavaScript’s variable scope.

  • Receive Updates

What is a closure?
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.

You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript:

function showName (firstName, lastName) {

var nameIntro = "Your name is ";
    // this inner function has access to the outer function's variables, including the parameter
function makeFullName () {
        
return nameIntro + firstName + " " + lastName;
    
}

return makeFullName ();

}


showName ("Michael", "Jackson"); // Your name is Michael Jackson


Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.
A Classic jQuery Example of Closures:

$(function() {

var selections = []; 
$(".niners").click(function() { // this closure has access to the selections variable
selections.push (this.prop("name")); // update the selections variable in the outer function's scope
});

});

Closures’ Rules and Side Effects
Continue Reading

JavaScript Variable Scope and Hoisting Explained

»jan. 31 2013 102

In this post, we will learn JavaScript’s variable scope and hoisting and all the idiosyncrasies of both.

We must understand how variable scope and variable hoisting work in JavaScript, if want to understand JavaScript well. These concepts may seem straightforward; they are not. Some important subtleties exist that we must understand, if we want to thrive and excel as JavaScript developers.

  • Receive Updates

Variable Scope
A variable’s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context.

Bov Academy

of Programming and Futuristic Engineering

A Once-in-a-Lifetime Opportunity

Train to Become an Exceptional and Successful Developer

While Building Real-World Projects You Can Benefit from for Years

By the founder of JavaScriptIsSexy

Variables have either a local scope or a global scope.

Local Variables (Function-level scope)
Unlike most programming languages, JavaScript does not have block-level scope (variables scoped to surrounding curly brackets); instead, JavaScript has function-level scope. Variables declared within a function are local variables and are only accessible within that function or by functions inside that function. See my post on Closures for more on accessing variables in outer functions from inner functions.
Continue Reading

JavaScript Objects in Detail

»jan. 27 2013 169

JavaScript’s core—most often used and most fundamental—data type is the Object data type. JavaScript has one complex data type, the Object data type, and it has five simple data types: Number, String, Boolean, Undefined, and Null. Note that these simple (primitive) data types are immutable (cannot be changed), while objects are mutable (can be changed).

Bov Academy

of Programming and Futuristic Engineering

A Once-in-a-Lifetime Opportunity

Train to Become an Exceptional and Successful Developer

While Building Real-World Projects You Can Benefit from for Years

By the founder of JavaScriptIsSexy

What is an Object
An object is an unordered list of primitive data types (and sometimes reference data types) that is stored as a series of name-value pairs. Each item in the list is called a property (functions are called methods).

Consider this simple object:

var myFirstObject = {firstName: "Richard", favoriteAuthor: "Conrad"};

Think of an object as a list that contains items, and each item (a property or a method) in the list is stored by a name-value pair. The property names in the example above are firstName and favoriteAuthor. And the values are “Richard” and “Conrad.”

  • Receive Updates

Continue Reading

JavaScript Prototype in Plain Language

»jan. 25 2013 147

Prototype is a fundamental concept that every JavaScript developer must understand, and this article aims to explain JavaScript’s prototype in plain, detailed language. If you don’t understand JavaScript’s prototype after reading this blog post, please ask questions in the comments below. I will personally answer all questions.

To understand prototype in JavaScript you must understand objects in JavaScript. If you aren’t already familiar with objects, you should read my post JavaScript Objects in Detail. Also, know that a property is simply a variable defined on a function.

  • Receive Updates

There are two interrelated concepts with prototype in JavaScript:

  1. First, every JavaScript function has a prototype property (this property is empty by default), and you attach properties and methods on this prototype property when you want to implement inheritance. This prototype property is not enumerable; that is, it isn’t accessible in a for/in loop. But Firefox and most versions of Safari and Chrome have a __proto__ “pseudo” property (an alternative syntax) that allows you to access an object’s prototype property. You will likely never use this __proto__ pseudo property, but you should know that it exists and it is simply a way to access an object’s prototype property in some browsers.

    The prototype property is used primarily for inheritance; you add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.

    Consider this simple example of inheritance with the prototype property (more on inheritance later):
    Continue Reading

Pilgrimage to JavaScript Mastery

»jan. 20 2013 7

(From Absolute Beginner to Attainment)

Join me as we embark on a pilgrimage to JavaScript mastery—where the eminent few reside in a consciousness of JavaScript enlightenment and programming prominence. This mastery is a state of mindfulness that such experts as Douglas Crockford, John Resig, and Nicholas Zackas, amongst others, possess, and it is this state we are destined for, even as we have no assurance we will arrive there and it is unlikely we will ever get there.

Yes, we will endure inevitable bugs, tireless frustrations, ever-changing frameworks, and unknown circumstances that we must debug and resolve. But we are guaranteed insightful discoveries, euphoric accomplishments, and technical scholarship while on this pilgrimage. And even though we may never experience JavaScript enlightenment quite like Crockford and Zakas, we will be better programmers, accomplished developers, and perhaps successful entrepreneurs along the way.

On this pilgrimage, we will learn mostly from books (that we should each own) by Nicholas C. Zakas, David Flanagan, David Herman (new author), Douglas Crockford, and others, and from outstanding blog posts by prolific JavaScript bloggers like Addy Osmani.

Our journey has just begun; everyone is invited to join anytime. We have already learned JavaScript properly and Backbone.js completely, but we have much to learn. We will thoroughly understand sixteen JavaScript concepts that we must know well, and we will continue to learn scores of advanced JavaScript topics and modern JavaScript frameworks along the way.

Later, we will have a place to show our projects and encourage each other.

Keep an eye on the Upcoming Posts section in the sidebar for where our journey will take us next.

Learn Backbone.js Completely

»jan. 14 2013 111

(More Than Just a Complete Backbone.js Tutorial)

Duration: 25 to 30 hours
Prerequisite: JavaScript knowledge of 5/10

Below, I provide you with a comprehensive study guide that I myself have used (indeed, I have refined it for this article) to learn Backbone.js properly. This study guide should take just about 30 hours to complete.

Bov Academy

of Programming and Futuristic Engineering

A Once-in-a-Lifetime Opportunity

Train to Become an Exceptional and Successful Developer

While Building Real-World Projects You Can Benefit from for Years

By the founder of JavaScriptIsSexy


After I learned Backbone.js, the first application I built was an eCommerce web application for a client—a startup. I built the entire app, including the shopping cart, with Backbone.js and Node.js.

  • Receive Updates

Backbone.js Is Friendly
Backbone.js is neither difficult to learn nor difficult to use, and the time you will spend learning to use this serviceable framework will be well worth it, for you will learn how to use one of the most popular front-end frameworks and learn how to build modern web applications on the front end. In addition, you will see your market value as a JavaScript developer rise, since Backbone.js developers are in high demand.

Before we Continue
I should note that Angular.js and Ember.js are robust and feature-rich front-end frameworks that offer more than Backbone.js, and they allow you to develop applications with less code than Backbone.js. Nonetheless, I still think developers should learn Backbone.js first, particularly because it is easier to learn and provides you with a solid understanding of what a JavaScript framework is and how a JavaScript framework functions.

I chose Backbone.js for the aforementioned eCommerce web application because I had only a few days to learn a JS framework and I needed a proven JS framework since I was developing a web application for a client. And at that time (around 2012) Backbone.js had the more thorough documentation and the most active community of all the front-end JavaScript frameworks. In addition, Backbone.js had the most impressive list of real websites and web applications built with the framework.

What is Backbone.js and Why You Should Learn It

If you have never used a JS front-end framework before, you will understand why nearly every modern web application uses a front-end JS framework.

  • Receive Updates

What is Backbone.js?
Backbone.js is a JavaScript front-end framework that provides the structure and organization for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface (the HTML/CSS elements seen on the web page). Simply put, Backbone.js allows us to develop applications, the front-end in particular, much easier and better (more scalable, reusable, and modular code) than using just a bunch of related and unrelated JavaScript functions stacked on top of each other, a concept known as Vanilla JavaScript.
Continue Reading

JavaScript is Super Sexy

»sept. 6 2012 11

JavaScript is super sexy, mature, and stateful; it has an attractive frontend and a firm, kick ass backend. It is svelte and versatile, and its functions are dynamic.

It is affectionate to both hardcore pros and virgin noobs; it is even inviting to those who lack the prominence of programming know-how or the prestige of a CS degree. Yep, even you can get down with JavaScript, no matter who you are—designers love JS, developers love JS, hackers love JS, and Code Academy has thousands signing up for a date with JS.

Attractive Frontend Package
JS has an irresistibly sinful frontend with a mocha aroma that underscores its passion. It has a node, it is angular; it has a spine and a backbone for its curvy corners; its agility is a knockout; and it can impress with its thick sproutcore that recently shaved to a desirable, lithe ember. Also impressive are its jade smile and its robust jQuery abs, which make for exciting fun when it does express, if you prefer it that way, or when it bootstraps with arduino, for the adventurous type.

JS is agreeably the future, particularly with the advent of HTML5 and the simultaneous, ironic ‘dysfunction’ of Flash. As the chosen language of the web, it will be hot for some time to come, this is evidenced by its recent ubiquity, meteoric rise, and modernizr upgrade.

JS Has Secrets
Continue Reading