7 JavaScript Basics Many Developers Aren't Using (Properly)

http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly - by David Walsh

1.  String.prototype.replace: /g and /i Flags

Javascript String's "replace" method only replace the first occurence. To replace all, us a regular expression and the global flag "/g":

// Mistake
var str = "David is an Arsenal fan, which means David is great";
str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great"

// Desired
str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"

To ignore case, use the "/i" flag:

str.replace(/david/gi, "Darren") // "Darren will always be an Arsenal fan, which means Darren will always be great"

2. Array-Like Objects and Array.prototype.slice

Convert Array-like objects like arguments, NodeLists, and attributes into true array:

var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div")); // "true" array of DIVs

var argsArr = Array.prototype.slice.call(arguments); // changes arguments to "true" array

Cloning an array with splice: < br/>

var clone = myArray.slice(0); // naive clone

3. Array.prototype.sort

Noraml sort use:

var clone = myArray.slice(0); // naive clone

More powerful use of sort:

[
    { name: "Robin Van PurseStrings", age: 30 },
    { name: "Theo Walcott", age: 24 },
    { name: "Bacary Sagna", age: 28  }
].sort(function(obj1, obj2) {
    // Ascending: first age less than the previous
    return obj1.age - obj2.age;
});
    // Returns:  
    // [
    //    { name: "Theo Walcott", age: 24 },
    //    { name: "Bacary Sagna", age: 28  },
    //    { name: "Robin Van PurseStrings", age: 30 }
    // ]

4. Array Length for Truncation

JavaScript's pass-objects-by-reference nature can be confusing, therefore to remove an array:

var myArray = yourArray = [1, 2, 3];

// :(
myArray = []; // "yourArray" is still [1, 2, 3]

// The right way, keeping reference
myArray.length = 0; // "yourArray" and "myArray" both []

5. Array Merging with push

Merging array with push:

var mergeTo = [4,5,6],
var mergeFrom = [7,8,9];

Array.prototype.push.apply(mergeTo, mergeFrom);

mergeTo; // is: [4, 5, 6, 7, 8, 9]

6. Efficient Feature/Object Property Detection

How we normally detect a browser feature:

if(navigator.geolocation) {
    // Do some stuff
}

While that works correctly, it isn't always efficient, as that method of object detection can initialize resources in the browser. In the past, the snippet above caused memory leaks in some browsers. The better and more efficient route is checking for a key within an object:

if("geolocation" in navigator) {
    // Do some stuff
}

7. Event preventDefault and stop Propagation

A bad way to stop the behaviour when clicking on a link:

$("a.trigger").on("click", function(e) {
    e.stop();

    // Do more stuff
});

It's best to simply use preventDefault:

$("a.trigger").on("click", function(e) {
    e.preventDefault();

    // Do more stuff
});