Improving JavaScript Performance

This specific tutorial shows how to understand the coding and syntax practices for superb Javascript performance and is a single movie from chapter one of the Practical and Effective JavaScript course presented by author Joe Marini. Watch more at: Practical and Effective JavaScript.

The complete course has a total duration of 5 hours and 37 minutes. Practical and Effective JavaScript table of contents:

Introduction 1. Writing Better JavaScript Code 2. Understanding JavaScript Exception Handling 3. The Modern Event Model 4. Using Progressive Enhancement in Web Pages 5. Object-Oriented JavaScript 6. Using Regular Expressions 7. Practical JavaScript Examples 8. Tools and Tips for Developing and Debugging


A function is a block with a (possibly empty) parameter list that is normally given a name. A function may use local variables. If you exit the function without a return statement, the value undefined is returned.

function gcd(segmentA, segmentB) { var diff = segmentA — segmentB; if (diff == 0) return segmentA; return diff > 0 ? gcd(segmentB, diff) : gcd(segmentA, -diff); } alert(gcd(60, 40)); // 20 var mygcd=gcd; // mygcd is a reference to the same function as gcd. Note no argument ()s. alert(mygcd(60, 40)); // 20

Functions are first class objects and may be assigned to other variables. The number of arguments given when calling a function may not necessarily correspond to the number of arguments in the function definition; a named argument in the definition that does not have a matching argument in the call will have the value undefined (which can be implicitly cast to false). Within the function, the arguments may also be accessed through the arguments object; this provides access to all arguments using indices (e.g. arguments[0], arguments[1], … arguments[n]), including those beyond the number of named arguments. (While the arguments list has a .length property, it is not an instance of Array; it does not have methods such as .slice(), .sort(), etc.)

function add7(x, y) { if (!y) { y = 7; } alert(x + y + arguments.length); }; add7(3); // 11 add7(3, 4); // 9

All parameters are passed by value (for objects, it is the reference to the object that is passed).

var obj1 = {a : 1}; var obj2 = {b : 2}; function foo(p) { p = obj2; // Ignores actual parameter p.b = arguments[1]; } foo(obj1, 3);  // Does not affect obj1 at all. 3 is additional parameter alert(obj1.a + “ “ + obj2.b); // writes 1 3

Functions can be declared inside other functions, and access the outer function’s local variables. Furthermore they implement full closures by remembering the outer function’s local variables even after the outer function has exited.

var v = “Top”; var bar, baz; function foo() { var v = “fud”; bar = function() { alert(v) }; baz = function(x) { v = x; }; } foo(); baz(“Fugly”); bar(); // Fugly (not fud) even though foo() has exited. alert(v); // Top


Constructor functions simply assign values to slots of a newly created object. The values may be data or other functions.

Example: Manipulating an object

function MyObject(attributeA, attributeB)  { this.attributeA = attributeA; this.attributeB = attributeB; } MyObject.staticC = “blue”; // On MyObject Function, not obj alert(MyObject.staticC); // blue obj = new MyObject(‘red’, 1000); alert(obj.attributeA); // red alert(obj[“attributeB”]); // 1000 alert(obj.staticC); // undefined obj.attributeC = new Date(); // add a new property delete obj.attributeB; // remove a property of obj alert(obj.attributeB); // undefined delete obj; // remove the whole Object (rarely used) alert(obj.attributeA); // throws an exception

Functions are objects themselves, which can be used to produce an effect similar to “static properties” (using C++/Java terminology).

Learning Javascript

If you want to teach yourself to program with JavaScript, the two main sources of information are web pages and books. Check out the book — it’s a great resource for learning!

See more resources for beginning Javasript:

Interactive JavaScript Lessons — example-based A re-introduction to JavaScript (JS Tutorial)

Watch the Online Video Course Practical and Effective #JavaScript
— Darlene Tate (@BuildMySite1) December 29, 2013

Website: Build My Site

Originally published at on December 29, 2013.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.