background preloader

Javascript Closures

Javascript Closures
Introduction Closure A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression). Closures are one of the most powerful features of ECMAScript (javascript) but they cannot be property exploited without understanding them. The simple explanation of a Closure is that ECMAScript allows inner functions; function definitions and function expressions that are inside the function bodes of other functions. Unfortunately, properly understanding closures requires an understanding of the mechanism behind them, and quite a bit of technical detail. The Resolution of Property Names on Objects ECMAScript recognises two categories of object, "Native Object" and "Host Object" with a sub-category of native objects called "Built-in Object" (ECMA 262 3rd Ed Section 4.3). Assignment of Values var objectRef = new Object(); A property with the name "testNumber" can be created as:- Reading of Values Finally:- Related:  JavaScript

Truth, Equality and JavaScript | JavaScript, JavaScript... You don’t have to be a JavaScript novice to get confused by this… or this… The good news is that there is a standard and all browsers follow it. Some authors will tell you to fear coercion and and code against it. I hope to persuade you that coercion is a feature to be leveraged (or at the very least understood), not avoided… Is x true? Does x equal y? Conditionals In JavaScript, all conditional statements and operators follow the same coercion paradigm. The construct if ( Expression ) Statement will coerce the result of evaluating the Expression to a boolean using the abstract method ToBoolean for which the ES5 spec defines the following algorithm: Now we can see why, in the introductory example, if ([0]) allows entry to the subsequent block: an array is an object and all objects coerce to true. Here’s a few more examples. The Equals Operator (==) The == version of equality is quite liberal. Anyway, rant over, lets take a look at the way ECMA defines how == works. [0] == true; Like this:

Object Oriented JavaScript using Prototype Object - Saurabh Nijhawan For updated version of the article please visit Object Oriented JavaScript using Prototype Object This document describes the benefit of using Object Oriented Approach in JavaScript Codes and implements Calendar Management component having a few functions like Add/Edit/Delete Events on selected date. As we all know Object Oriented Programming (OOP) is a major part and practice for reusability. Most of the times even if we are following standard ways to code on server-side, we just forget or omit about client side structure of application. As a result it becomes hectic to manage later, when application is modified to release a newer version of the same. As per my personal experience on the same, I found prototyping and object oriented JavaScript a perfect solution. Note: To understand the logic completely, you must have clear understanding on concepts like, Inheritance, constructors, Classes and objects. What is Prototype? For Example:- JavaScript How it works: Example 1:

addEvent() – Follow Up This is a follow-up to my addEvent solution. From the comments to that post it is clear that there were a couple of things missing. The first was the ability to return a value from the handleEvent function. The second was the ability to use W3C standard methods to cancel the event and stop event propagation (event bubbling). Below are the amendments necessary: function handleEvent(event) { var returnValue = true; event = event || fixEvent(window.event); var handlers =[event.type]; for (var i in handlers) { this. One other issue, pointed out by PPK (via email).

JavaScript Scoping and Hoisting Do you know what value will be alerted if the following is executed as a JavaScript program? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); If it surprises you that the answer is “10”, then this one will probably really throw you for a loop: var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); Here, of course, the browser will alert “1”. Scoping in JavaScript One of the sources of most confusion for JavaScript beginners is scoping. #include <stdio.h> int main() { int x = 1; printf("%d, ", x); // 1 if (1) { int x = 2; printf("%d, ", x); // 2 } printf("%d\n", x); // 1 } The output from this program will be 1, 2, 1. var x = 1; console.log(x); // 1 if (true) { var x = 2; console.log(x); // 2 } console.log(x); // 2 In this case, Firebug will show 1, 2, 2. To a lot of programmers who are used to languages like C, C++, C#, or Java, this is unexpected and unwelcome. Declarations, Names, and Hoisting function foo() { bar(); var x = 1; }

Prototype JavaScript Framework | Defining classes and inheritance In early versions of Prototype, the framework came with basic support for class creation: the Class.create() method. Until now the only feature of classes defined this way was that the constructor called a method called initialize automatically. Prototype 1.6.0 now features a richer class system that's backward-compatible and adds some new features. The cornerstone of class creation in Prototype is still the Class.create method. If you have legacy Prototype code, your class-based code will continue to work as before, but now you don't have to work with prototypes directly or use Object.extend to copy properties around. Example Suppose you have legacy Prototype class-based code that looks like htis: Observe the direct interaction with class prototypes and the clumsy inheritance technique using Object.extend. This has changed for the better. You can see how both class and subclass definitions are shorter because you don't need to hack their prototypes directly anymore. How to mix-in modules <?

Memory Leakage in Internet Explorer - revisited Introduction If you are developing client-side re-usable scripting objects, sooner or later you will find yourself spotting out memory leaks. Chances are that your browser will suck memory like a sponge and you will hardly be able to find a reason why your lovely DHTML navigation's responsiveness decreases severely after visiting a couple of pages within your site. A Microsoft developer Justing Rogers has described IE leak patterns in his excellent article. In this article, we will review those patterns from a slightly different perspective and support it with diagrams and memory utilization graphs. We will also introduce several subtler leak scenarios. Why does the memory leak? The problem of memory leakage is not just limited to Internet Explorer. Don't get me wrong. Each browser has its own strengths and weaknesses. If you have read my previous article, then you already know that I am a usability, accessibility and standards crack. A simple beginning Let us begin with a simple example:

JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting

You Don’t Know Anything About Regular Expressions: A Complete Guide Regular expressions can be scary...really scary. Fortunately, once you memorize what each symbol represents, the fear quickly subsides. If you fit the title of this article, there's much to learn! Let's get started. The key to learning how to effectively use regular expressions is to just take a day and memorize all of the symbols. . Yep - it's not fun, but just memorize them. You can be certain that you'll want to rip your hair out at one point or another when an expression doesn't work, no matter how much it should - or you think it should! The next step is to learn how to actually use these symbols! In this final section, we'll review a handful of the most important JavaScript methods for working with regular expressions. This one accepts a single string parameter and returns a boolean indicating whether or not a match has been found. Above, we begin by declaring a regular expression which only allows upper and lower case letters, an underscore, and a dash. Thanks for reading!

Memory leak patterns in JavaScript JavaScript is a powerful scripting language used to add dynamic content to Web pages. It is especially beneficial for everyday tasks such as password validation and creating dynamic menu components. While JavaScript is easy to learn and write, it is prone to memory leaks in certain browsers. In this introductory article we explain what causes memory leaks in JavaScript, demonstrate some of the common memory leak patterns to watch out for, and show you how to work around them. Note that the article assumes you are familiar with using JavaScript and DOM elements to develop Web applications. The article will be most useful to developers who use JavaScript for Web application development. Memory leaks in JavaScript JavaScript is a garbage collected language, meaning that memory is allocated to objects upon their creation and reclaimed by the browser when there are no more references to them. What's wrong with circular references? Listing 1. Another memory leak pattern Listing 2. Back to top