JavaScript, at its base, is a simple language that we continue to evolve with intelligent, flexible patterns. We've used those patterns in JavaScript frameworks which fuel our web applications today. Lost in JavaScript framework usage, which many new developers are thrust right into, are some of the very useful JavaScript techniques that make basic tasks possible. Here are seven of those basics:
1. String.prototype.replace: /g and /i Flags
One surprise to many JavaScript newbies is that String's replace method doesn'treplace all occurrences of the needle -- just the first occurrence. Of course seasoned JavaScript vets know that a regular expression and the global flag (/g) need to be used:
// Mistakevar 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"
Another basic logical mistake is not ignoring case when case is not critical to the validation (letters may be uppercase or lowercase), so the /i flag is also useful:
str.replace(/david/gi,"Darren")// "Darren will always be an Arsenal fan, which means Darren will always be great"
Every JavaScript developer has been bitten by each of the flags in the past -- so be sure to use them when when appropriate!
2. Array-Like Objects and Array.prototype.slice
Array's slice method is principally for grabbing segments of an array. What many developers don't know is that slice can be used to covert Array-like objects like arguments, NodeLists, and attributes into true arrays of data:
var nodesArr =Array.prototype.slice.call(document.querySelectorAll("div"));// "true" array of DIVsvar argsArr =Array.prototype.slice.call(arguments);// changes arguments to "true" array
You can even clone an array using a simple slice call:
var clone = myArray.slice(0);// naive clone
Array.prototype.slice is an absolute gem in the world of JavaScript, one that even novice JavaScript developers don't know the full potential of.
3. Array.prototype.sort
The Array sort method is vastly underused and probably a bit more powerful than most developers believe. Many developers would assume sort would do something like this:
[1,3,9,2].sort();// Returns: [1, 2, 3, 9]
...which is true, but sort has more powerful uses, like this:
[{ 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 previousreturn obj1.age - obj2.age;});// Returns: // [// { name: "Theo Walcott", age: 24 },// { name: "Bacary Sagna", age: 28 },// { name: "Robin Van PurseStrings", age: 30 }// ]
You can sort objects by property, not just simple basic items. In the event that JSON is sent down from the server and objects need to be sorted, keep this in mind!
4. Array Length for Truncation
There's not a developer out there that hasn't been bitten by JavaScript's pass-objects-by-reference nature. Oftentimes developers will attempt to empty an array but mistakenly create a new one instead:
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 []
What these developers probably realize is that objects are passed by reference, so while setting myArray to [] does create a new array, other references stay the same! Big mistake! Use array truncation instead.
5. Array Merging with push
I showed in point 2 that Array's slice and apply can do some cool stuff, so it shouldn't surprise you that other Array methods can do the same trickery. This time we can merge arrays with the push method:
var mergeTo =[4,5,6],var mergeFrom =[7,8,9];Array.prototype.push.apply(mergeTo, mergeFrom);
mergeTo;// is: [4, 5, 6, 7, 8, 9]
A wonderful example of a lessor-known, simple native method for completing the basic task of array merging.
6. Efficient Feature/Object Property Detection
Oftentimes developers will use the following technique to 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}
This key check is as simple as it gets and may avoid memory problems. Also note that if the value of a property is falsy, your check will fail despite the key being present.
7. Event preventDefault and stopPropagation
Oftentimes we trigger functionality when action elements like links are clicked. Obviously we don't want the browser to follow the link upon click, so we use our handy JavaScript library's Event.stop method:
$("a.trigger").on("click",function(e){
e.stop();// Do more stuff});
The problem with this lazy method of stopping the event is that not only does it prevent the default action, but it stops propagation of the event, meaning other event listeners for the elements wont fire because they don't know about the event. It's best to simply use preventDefault!
Seasoned JavaScript developers will see this post and say "I knew those," but at one point or another, they got tripped up on some of these points. Be mindful of the little things in JavaScript because they can make a big difference.
http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly