JavaScipt Hack 9 Extremely Powerful JavaScript Hacks

Return function shortcut:

// Before
function foo() {
    bar();
    baz();
    return 1;
}

// After
function foo() {
    return bar(), baz(), 1;
}

Conditional shortcut variants:

// Before
return a ? a : b;

// After
return a || b;

// Before
return a ? b : c;

// After
return a && b || c;

// Before
return a && b ? c : d;

// After
return a && b && c || d;

// Before
if (a && b) {
    c = d;
}

// After
a && b && (c = d);

// Before
if (a) {
    b = c;
    d = e;
} else {
    b = e;
}
return f;

// After
return a && ((b = c), (d = e)) || (b = e), f;

I wanted to point out that #9 (using length to empty an array) is particularly useful if you are using ES6+ syntax and declaring your arrays with const instead of var. This keeps you from having to declare your array with let just to empty it.

I also wanted to share that according to tests I ran using several benchmarking tools, it is slightly faster on some browsers to convert a string to a number by multiplying it by 1 then by using the + operator as you do in #4:

const stringNum = "256.3"
const number = stringNum * 1;
console.log(number); // Logs 256.3

The difference is pretty negligible though. The fastest three methods were all very close in speed. Your method, the above method of multiplying by 1, and in a close third is using the Number constructor:

const number = Number(stringNum);

Here are another couple of quick things I've picked up.

A more performant and shorter replacement for Math.trunc(num) and parseInt(num), as well as working as a replacement for Math.floor(num) if you know the number won't be negative, using bitwise operator. This works on numbers stored as strings as well as regular numbers:

const num = 568.328;
const strNum = "243.782";

const truncatedNum1 = num|0;
const truncatedNum2 = strNum|0;

console.log(truncatedNum1); // Logs 568
console.log(truncatedNum2); // Logs 243

A more performant, albeit limited, way to fix a number to a single decimal place rather than use the incredibly slow num.toFixed(1):

const fixToOne = num =>
  (num = Math.round(num * 10) / 10) + (num === (num|0) ? '.0' : '');

fixToOne(2.3892); // Returns "2.4"

You can change the function by wrapping the returned value in parens and multiply by 1 at the end if you need a number returned rather than a string, but toFixed() returns a string so that's what I decided to return too.

A more performant but limited way to fix a number to two decimal places rather than use the incredibly slow num.toFixed(2):

const fixToTwo = num => 
  (num = (Math.round(num * 100) / 100) +
  (num === (num|0) ? '.0' : 0)) + (num === (num|0) ? '.0' : '') +
  (num * 10 === ((num * 10)|0) ? '0' : '');

fixToTwo(2.3892); // Returns "2.39"

You can see the benchmarks on these custom functions versus the native toFixed() and witness how drastic the speed difference is here: jsperf.com/decimal-rounding-tofixe...

As a JS developer working in a team I would not do 7/9 things on this list to a colleague. Even more so I wouldn't do them to myself. Keeping things clear should be every developer's objective, otherwise we may as well write everything on one line and call it a day.

And if you use .Flat(Infinity) you flat all

That resize/empty an array is a kinda bad practice, imho, because you mutate the original array

Useful examples 👍

The word hacks makes me feel you write about dirty shortcuts, but these are actually absolutely good solutions to every-day problems. I wouldn't call them hacks.

The replace all trick with regexp will work only if string to search doesn't contain regexp metacharacters like ., ^, etc. You'll have to escape them first. developer.mozilla.org/en-US/docs/W... provides an escape function.

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

'abc a;c a.c apc a.c'.replace(/a.c/g, 'X')
// gives "X X X X X"

'abc a;c a.c apc a.c'.replace(new RegExp(escapeRegExp('a.c'), 'g'), 'X')
// gives "abc a;c X apc X"

String.prototype.replaceAll is proposed to avoid such issues: github.com/tc39/proposal-string-re...

available && addToCart()

Mindblow

I also wanted to point out that #7 is especially useful when you are using ternary expressions, as you cannot chain an if statement within a big ternary, but you can using the && operator. A simple example would be using a ternary to write an if/else-if (rather than a basic if/else):

(condition
  ? truthyFunction()
  : condition2 && falsyFunction()
);

The corollary to this tip is using the || operator to basically say "If this is false, do the following":

condition || falsyFunction();

I noticed the same thing... adding

entries.flat(Infinity)

will flatten the array down to a single array no matter how nested the array is :)
Oh... and also, super-helpful Post!

How exactly does this work?

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log( my_list.sort(function() {
return Math.random() - 0.5 //why 0.5?
}));

also, aren't arrays fixed size like in Java?

The output of #5 (array shuffler) is not that random. I use my own implementation of Fisher-Yates:

const shuffle = arr => arr.reduceRight((r,_,__,s) => (r.push(s.splice(0|Math.random()*s.length,1)[0]), r),[])

Flatten multidimensional array

Your example only works for 1 depth max, no?

I am new to programming so can someone tell me what ... Means? Its being used in number 2 and number 9. Everyone seems to know about as no one is talking about it.

And that set method could have come in handy a few days ago, gonna have to find the code and change my looping logic to get the unique data from array with set method

y.length = x

This is really interesting. Good to know.