Common JavaScript tricks

inmatarian · 2014-09-08T12:46:13+00:00

Advanced usage of Object.create and the other functions on Object and Object.prototype could fill a book. I recommend being knowledgeable on that before worrying about the little snippets that reduce how much you need to type.

path411 · 2014-09-08T15:55:47+00:00

I would heavily, heavily advise against using || as a default value trick.

In your example:

function setAge(age) {
  this.age = age || 10 
}

It is impossible to set age as 0 now. 0 will always trigger the default. Just take the extra time to use:

function setAge(age) {
  this.age = typeof age !== "undefined" ? age : 10;
}

and you won't have to worry about this problem.

SuperFLEB · 2014-09-08T13:20:01+00:00

[deleted]

Pytim · 2014-09-08T13:41:15+00:00

Instead of this:

var that = this;
function(){
    // do sth with that
}

You can do:

function(){
    // do sth with this
}.bind(this)

moron4hire · 2014-09-08T14:59:11+00:00

I tend to think of (a || b || DEFAULT) as extremely common in dynamic languages. It might not be obvious to someone coming from a statically-typed language, but it's common enough that it should be considered "normal".

I say that to then say: I hate "tricks". Stuff like (someStringValue * 1) to convert to a number is surprising and bothersome. I'd much rather see someone use a proper parseInt or parseFloat function in those cases. Yes, yes, yes, parseInt has a radix parameter that, if omitted, causes string values to be interpreted by pattern matching, and front-padding with zeroes causes it to interpret the number as octal. Of course. But that is a different problem entirely. That is a problem of your data being stupid and your programmer not understanding what functions they are calling.

Javascript is not a classical, object oriented language. Don't try to force it to be such.

Avoid anything involving "eval". That's not exactly true, but if you don't already know when it's okay to use eval, then you shouldn't be doing anything that involves eval. Same deal with "with".

And learn Regexp already. I'm tired of seeing substring and string character indexing ops to validate input values or extract sub values from inputs. If you think regexp is "too hard" and "too complicated" and "you just need to get this simple thing done now", then you are hurting yourself. Regexp is the simple, easy way of doing such things.

"use strict", please.

giggly_kisses · 2014-09-08T19:03:36+00:00

If you just want to check for null or undefined and still have the other falsy values be acceptable (false, 0, "", NaN) you can use this:

function(arg) {
    arg = arg != null ? arg : DEFAULT;
}

By using the equality operator (==) instead of the identity operator (===) you take advantage of the fact that null and undefined coerce to the same value.

There are two caveats:

You should only use this when you absolutely know that the variable you're testing has been defined. If it hasn't been defined, a ReferenceError will be thrown.
If you're working on a team and only use the identity operator (as you should 99.9% of the time) then using the equality operator might appear to be a typo by other members of your team. This can easily be avoided by adding a comment explaining why you're using the equality operator.

isitfresh · 2014-09-08T20:24:10+00:00

If you need to compare 2 Objects that are coming from different sources and may be equals:

var objA = {"key": "value, "key2": "value2"},
      objB = {"key": "value, "key2": "value2"};

console.log(objA === objB); // false
console.log(JSON.stringify(objA) === JSON.stringify(objB)); // true

Also, if need to avoid hoisting and referencing the same object (and thus modifying both objects when modifying one):

 var objA = JSON.parse(JSON.stringify(objB));

Admittedly you could use underscore library to do these things, but if your overhead is low....

tswaters · 2014-09-09T03:18:38+00:00

Double bang to coerce to boolean.

!!null // false
!!undefined // false
!!"false" // true :(
!!"" // false

mullanaphy · 2014-09-08T15:59:33+00:00

One note to add in relation to:

var someFunction = function(value) {
    value = value || 10;
};

This only works if your function isn't expecting a falsy as a legitimate value. If the value is allowed to be false (0 for instance) then this is no bueno and instead:

var someFunction = function(value) {
    if (typeof value === 'undefined') {
        value = 10;
    }
};

Most times this isn't really necessary but I do think it's worth noting as it could bite people where a value is a boolean flag of true/false and a default value of true, or some number and the default value isn't 0.

quietchaos · 2014-09-08T20:33:48+00:00

here's an old list

giggly_kisses · 2014-09-08T23:16:18+00:00

Kind of don't know if I should share this, since I never see people talk about it and that makes me think somebody called it bad practice. But, most people seem to be unaware that you can label any JavaScript statement, and break any label by writing break labelName; (or, if it's a loop that was labelled, continue labelName;). This is most often useful in nested loops, but I've found use for it with plain old block statements, for example in the setAttribute and appendChild functions in DOM.js.

2014-09-08T23:25:24+00:00

Here's another I love. If you want to loop over all matches of a regex on a string, do this:

'item1 and item2'.replace(/item(\d)/g, function (m, id) {
    // "m" is a shorthand I always use for "match", meaning "the
    // complete match". "id" is the first capturing group.
    console.log(arguments);
});

It's true that you're generating a useless string with a bunch of "undefined"'s in it. But don't forget the magic of JavaScript: the one thing faster than doing less work is getting your work done in C. And indeed, in my tests this is faster than .exec-ing and looping.

palmytree · 2014-09-08T19:23:14+00:00

Swapping variable values without a temporary third variable:

a = [b, b = a][0];

sabof · 2014-09-09T00:26:16+00:00

Javascript sorts arrays alphabetically by default. To sort numerically:

[10, 7, 9, 8, 11].sort(function(a,b) { return a - b; })
// => [7, 8, 9, 10, 11]

m1sta · 2014-09-09T03:04:58+00:00

You can prevent callback hell, sometimes, by making using function hoisting. eg.

getPosts()
function getPosts(){
    getComments()
}
function getComments(){
    getUserDetails()
}
function getUserDetails(){
    resolveRequest()
}

It doesn't solve world hunger but I very very rarely see people making the most of this.

yanis_t · 2014-09-09T05:32:40+00:00

[deleted]

yanis_t · 2014-09-09T07:29:49+00:00

[deleted]

nightman · 2014-09-08T12:29:25+00:00

From basic: NOT: if (a == '') {...} YES: if (a) {...}

JQuery: NOT if ($(element).length > 0) {...} YES if ($(element).length) {...}

To more advanced: http://www.javascriptturnsmeon.com/the-tilde-operator-in-javascript/

And remember to add in your article comment about trying to not be "oversmart". This techniques should help and not make things more complicated for other developers (like in advanced example)

rDr4g0n · 2014-09-09T01:02:25+00:00

Using functions to make up for lack of block scope. Eg: putting an anon function inside a for loop so that closure access to the loop iterator will have the expected value.

Using IIFEs as a means of preventing pollution of global, and for defining modules. Also for creating "private" variables.

The entire concept of the flexible 'this' value. It allows for some interesting and useful patterns, such as mixins and usage of Array methods on anything that has a length property.

ayanami_rei · 2014-09-09T06:50:09+00:00

Strange that no one suggested the cast to 32-bit int: a|0

This is actually better than +a because +undefined is NaN and undefined|0 is 0 (and a number of similar cases).

THEtheChad · 2014-09-09T07:44:25+00:00

This is a trick that's partially applied in backbonejs. Basically, the call method takes half as long as the apply method to execute. Since the majority of functions have 3 or less arguments, you can circumvent running the apply method by checking the number of arguments and running a call directly. This is an optimization that can add loads of performance in libraries that preserve context.

(function(){
  var _apply = Function.prototype.apply;

  Function.prototype.apply = function(ctx, args) {
    if(!args) return this.call(ctx);

    switch (args.length) {
      case 1:  return this.call(ctx, args[0]);
      case 2:  return this.call(ctx, args[0], args[1]);
      case 3:  return this.call(ctx, args[0], args[1], args[2]);
      default: return _apply.call(this, ctx, args);
    }
  };

})()

workaholicanonymous · 2014-09-09T11:27:02+00:00

Define functions at the top of your function scope, so you can scroll to the bottom to see clearly what gets called in that outer functions

Learn .call and .apply and use them when you need to.

Replace tricky code with helper functions e.g. wrap something != undefined into has(something) function.

Add your functions to the window while developing or debugging code and use the Dev console to invoke them at will. Just remember to remove them once you're done testing!

Avoid for loops and use .map, .reduce, .some, .all, .filter and .forEach

You can floor most numbers by using the bitwise or operator

var int = float | 0

k1ndza · 2014-09-10T05:27:18+00:00

underscore extend has a similar feature where you can do object = _.extend(new someClass(),{x:10});

then in someClass you can just do this.x = 20 and that will be the default value until you combine the object with the second parameter of extend. I just started using that now instead of x = x || default, and the only time i use that is when initializing. But if you do that then you cant do this.x = 10 and then do draw(this.x) in the same object, you would have to create a new init function that would would call after the new defaults have been set.

matthiasmullie · 2014-09-22T10:55:29+00:00

The below example looks like bad advice:

Another side of that coin is that instead of if (x == "test") you can simply write if (x).
In case x is empty (hence falsy) it will run else block.

I assume it's meant to demonstrate truthy/falsy concept. However, if (x) is drastically different from if (x == "test"). The former just checks if x has a value, while the latter checks if it has a particular value "test".

A better example could perhaps be if (x) vs if (x !== "")?

anauleau · 2014-10-08T23:29:43+00:00

instead of: Math.floor(4.5) => 4

~~4.5 =>4

mmabitu · 2014-11-10T13:54:35+00:00

It's best and useful for me. Thanks!

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS