Writing good Javascript code is all about optimization. There are many different types of optimization. You can optimize for performance, size or maintainability, but you probably won’t be able to do all of them at once. That is why it’s important to understand which of the above will provide the greatest benefit to the end user. What follows is a guide on how to write code that will get the job done, while using Javascript in questionable ways, all under the guise of optimization. Read more…
Typically when you want to swap the contents of 2 variables, you need to create a 3rd variable to temporarily hold the value of the first variable to be re-assigned. I’m sure we’ve all done this before:
// Two values that we want to swap
var a = 1, b = 2;
// Create another variable to temporarily hold the value (or reference) of a;
var c = a;
// Now set a equal to b
a = b;
// And finally...
b = c;
That’s pretty straightforward. But if you are like me, you like to do things in as few lines of code as possible; readability/cross-browser compatibility/sanity be damned. I present a 1-line swap:
// Two values that we want to swap
var a = 1, b = 2;
// quickswap
[a,b] = [b,a];
// a is 2, b is 1
JavaScript version 1.7 introduced a feature called “Destructuring Assignment”. Basically this allows you to assign values directly into variables contained in an anonymous array. The following code should make it easier to understand:
[a] = [1] ;
a.toString() // outputs "1"
[a, b] = [1, 2];
a.toString() // outputs "1"
b.toString()// outputs "2"
This can also come in handy when you want a function that returns multiple values. (Excuse the contrived example)
var getFirstAndLast = function(tag) {
var elms = document.getElementsByTagName(tag);
return (elms) ? [elms[0], elms[elms.length-1]] : [,]
}
// Without Destructuring Assignment
myArr = getFirstandLast('div');
alert(myArr[0]); alert(myArr[1]);
// With Destructuring Assignment
[first, last] = getFirstAndLast('div');
alert(first); alert(last);
Or if you’re working with Regular Expressions and capture groups, you’ve probably done something similar to this
// look for any string of digits following 'def'
var results = /def(\d+)/gi.exec('abc123def456');
if (results) { alert(results[1]) }
Using Destructuring Assignments the code becomes cleaner (in my opinion)
// look for any string of digits following 'def'
var [,result] = /def(\d+)/gi.exec('abc123def456');
if (result) { alert(results) }
So that’s Destructuring Assignments. It’s a cool feature but pretty useless at the moment, since only Firefox and Opera support it. If you’d like to read more, check out the Mozilla Developer page for JavaScript 1.7
Discuss…
