Hidden Features of JavaScript? [closed]

Hidden Features of JavaScript? [closed]

What “Hidden Features” of JavaScript do you think every programmer should know?
After having seen the excellent quality of the answers to the following questions I thought it was time to ask it for JavaScript.

Hidden Features of HTML
Hidden Features of CSS
Hidden Features of PHP
Hidden Features of ASP.NET
Hidden Features of C#
Hidden Features of Java
Hidden Features of Python

Even though JavaScript is arguably the most important Client Side language right now (just ask Google) it’s surprising how little most web developers appreciate how powerful it really is.


Solution 1:

You don’t need to define any parameters for a function. You can just use the function’s arguments array-like object.

function sum() {
    var retval = 0;
    for (var i = 0, len = arguments.length; i < len; ++i) {
        retval += arguments[i];
    return retval;

sum(1, 2, 3) // returns 6

Solution 2:

I could quote most of Douglas Crockford’s excellent book
JavaScript: The Good Parts.

But I’ll take just one for you, always use === and !== instead of == and !=

alert('' == '0'); //false
alert(0 == ''); // true
alert(0 =='0'); // true

== is not transitive. If you use === it would give false for
all of these statements as expected.

Solution 3:

Functions are first class citizens in JavaScript:

var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); };

var sum = function(x,y,z) {
  return x+y+z;

alert( passFunAndApply(sum,3,4,5) ); // 12

Functional programming techniques can be used to write elegant javascript.

Particularly, functions can be passed as parameters, e.g. Array.filter() accepts a callback:

[1, 2, -1].filter(function(element, index, array) { return element > 0 });
// -> [1,2]

You can also declare a “private” function that only exists within the scope of a specific function:

function PrintName() {
    var privateFunction = function() { return "Steve"; };
    return privateFunction();

Solution 4:

You can use the in operator to check if a key exists in an object:

var x = 1;
var y = 3;
var list = {0:0, 1:0, 2:0};
x in list; //true
y in list; //false
1 in list; //true
y in {3:0, 4:0, 5:0}; //true

If you find the object literals too ugly you can combine it with the parameterless function tip:

function list()
 { var x = {};
   for(var i=0; i < arguments.length; ++i) x[arguments[i]] = 0;
   return x

 5 in list(1,2,3,4,5) //true

Solution 5:

Assigning default values to variables

You can use the logical or operator || in an assignment expression to provide a default value:

var a = b || c;

The a variable will get the value of c only if b is falsy (if is null, false, undefined, 0, empty string, or NaN), otherwise a will get the value of b.

This is often useful in functions, when you want to give a default value to an argument in case isn’t supplied:

function example(arg1) {
  arg1 || (arg1 = 'default value');

Example IE fallback in event handlers:

function onClick(e) {
    e || (e = window.event);

The following language features have been with us for a long time, all JavaScript implementations support them, but they weren’t part of the specification until ECMAScript 5th Edition:

The debugger statement

Described in: § 12.15 The debugger statement

This statement allows you to put breakpoints programmatically in your code just by:

// ...
// ...

If a debugger is present or active, it will cause it to break immediately, right on that line.

Otherwise, if the debugger is not present or active this statement has no observable effect.

Multiline String literals

Described in: § 7.8.4 String Literals

var str = "This is a \
really, really \
long line!";

You have to be careful because the character next to the \ must be a line terminator, if you have a space after the \ for example, the code will look exactly the same, but it will raise a SyntaxError.

Solution 6:

JavaScript does not have block scope (but it has closure so let’s call it even?).

var x = 1;
   var x = 2;
alert(x); // outputs 2