10 Practical JavaScript Tricks

I'm always on the lookout for new ways to be more efficient.

And JavaScript is always full of pleasant surprises.

1. Transform the arguments object into an array.

The arguments object is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.

But it's not like other arrays, we can access the values and we can get the length, but no other array methods can be used on it.

Luckily, we can just convert it into a regular array:

var argArray = Array.prototype.slice.call(arguments);

2. Sum all the values from an array.

My initial instinct was to use a loop, but that would have been wasteful.

var numbers = [3, 5, 7, 2];
var sum = numbers.reduce((x, y) => x + y);
console.log(sum); // returns 17

3. Short circuit conditionals.

We have the following code:

if (hungry) {
    goToFridge();
}

We can make it even shorter by using the variable with the function:

hungry && goToFridge()

4. Use logical OR for conditions.

I used to declare my variables at the start of my function just to avoid getting undefined if anything went unexpectedly wrong.

function doSomething(arg1){ 
    arg1 = arg1 || 32; // if it's not already set, arg1 will have 32 as a default value
}

5. Comma operator.

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand.

let x = 1;

x = (x++, x);

console.log(x);
// expected output: 2

x = (2, 3);

console.log(x);
// expected output: 3

6. Using length to resize an array.

You can either resize or empty an array.

var array = [11, 12, 13, 14, 15];  
console.log(array.length); // 5  

array.length = 3;  
console.log(array.length); // 3  
console.log(array); // [11,12,13]

array.length = 0;  
console.log(array.length); // 0  
console.log(array); // []

7. Swap values with array destructuring.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // -> 2
console.log(b) // -> 1

8. Shuffle elements from array.

Every day I'm shufflin'
Shufflin', shufflin'

var list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

9. Property names can be dynamic.

You can assign a dynamic property before declaring the object.

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

10. Filtering for unique values.

For all you ES6 fans out there, we can create a new array containing only the unique values by using the Set object with the Spread operator.

const my_array = [1, 2, 2, 3, 3, 4, 5, 5]
const unique_array = [...new Set(my_array)];
console.log(unique_array); // [1, 2, 3, 4, 5]

Closing thoughts.

Being responsible is far more important than being efficient.

Your website NEEDS to work in all browsers.

You can use Endtest or other similar tools to make sure it does.

What about you? Do you have any JavaScript tips or tricks to share?

Comments

[Ayush Kushwah]

6 - DON'T MUTATE PROPERTIES WHICH ARE SUPPOSED TO BE READ-ONLY LIKE THIS.
This is why methods are invented to play on objects (like slice or splice).
This the most amateur thing I ever read.

[charles hollins]

I think the best way to practice javascript is -

1. You need quality content or a book for that to study javascript.
2. Read basics carefully because basics are the building blog to practice javascript.
3. Try to use study material in javascript coding and try to prepare a scenario-based project.
4. Up to date about javascript read blogs about that.
5. Manage senior person javascript-based project and try to understand that project.
6. For advance label try the git hub project and try to contribute to the opensource project.
7. The last thing that needs the practice to solve the problem, algorithm.

[Federico Kereki]

Hi! The shuffle() code isn't really a very good shuffle, insofar that not all possible permutations are equally probable. I'd rather read en.wikipedia.org/wiki/Fisher-Yates... for good algorithms.

[wang-qiyang]

Hi Zander

I am the editor of InfoQ China which focuses on software development. We like your article and plan to translate this into Chinese.

Before we translate and publish it on our website, I want to ask for your permission first! This translation version is provided for informational purposes only, and will not be used for any commercial purpose.

In exchange, we will put the English title and link at the end of Chinese article. If our readers want to read more about this, he/she can click back to your article.

Thanks a lot, hope to get your help. Any more question, please let me know.

[Zander Shirley]

Hi,
Yes, you have my permission to do that.
Thank you for asking.
Please don't remove any part from the article when you translate it.

[wang-qiyang]

infoq.cn/article/fgeB0Bu3jpAzmba9ro3x
any questions pls let me know, thx

[wang-qiyang]

Sure, thx a lot, will post our translation link here after we publish it.

[Joshua Rieth]

To provide a default parameter value:

function doSomething(args1 = 31) {

}

If an argument is passed, it is used rather than the default.

[The Spirit Molecule]

A moment of silence for people functional programming aficionados who died at 6 😂(Myself included)

[Alexander Vechy]

@zandershirley , take all the critique like if you expected to get it when you published. We learn in public in order for other people, more experienced, to come and say what's wrong with the things we wrote. I love the web for it, there is always someone smarter in some field. No one says you're a bad developer, they just aware you that there are many novices who read the article and decide to use the tricks in their day to day jobs "because they can". Which is not good, as explained in the comments.