Javascript: use either a variable, or if it's undefined, a default string

Question

I have this code:

var phrase = function (variable, defaultPhrase) {
    if (typeof variable === "undefined") {
        return defaultPhrase;
    }
    else {
        return variable;
    }
}

It's called like this:

Ext.Msg.show({title: phrase(js_shutdown,'Shutdown'), //...

What I want to do is to use a default phrase when the variable is not defined, but when I pass an undefined variable to phrase(), JS throws an undefined variable error. How do I fix this? Any other ideas to do this?

Answer 1

You don't need a function. The || operator is usually used:

Ext.Msg.show({ title: js_shutdown || 'Shutdown', //...

You can see || as:

someValue || defaultValue

For strings, defaultValue is used if someValue === "".

If the variable is not defined at all, you'll need to inline the typeof x === "undefined" check, because you cannot pass the variable to a function (that's a ReferenceError).

Answer 2

Usually using || is enough, like others have suggested. However, if you want to have 0, false and null as acceptable values, then you indeed need to check if the type of the variable is undefined. You can use the ternary operator to make it a one-liner:

var variable;
var defaultPhrase = "Default";
var phrase = (typeof variable === "undefined" ? defaultPhrase : variable);
console.log(phrase);
// => "Default"

Answer 3

In javascript, you typically use the OR operator || to provide an alternative value when a variable is undefined:

return variable || defaultPhrase || ''

In case variable is undefined, it will evaluate to false then the second part of the test will be evaluated, if it is also undefined, you can still return an empty string.

Answer 4

It's a javascript error to reference an undefined variable with no scope in your function call. So, if the variable js_shutdown doesn't exist in scope, then this:

Ext.Msg.show({title: phrase(js_shutdown,'Shutdown'), //...

is an error.

For example, this code causes an error on the line that calls the phrase() function:

var Ext = {};
Ext.Msg = {};
Ext.Msg.show = function() {console.log("success")};

function phrase(variable, defaultPhrase) {
    return(variable || defaultPhrase);
}

Ext.Msg.show({title: phrase(js_shutdown,'Shutdown')});​

because the javascript engine isn't able to find js_shutdown in any scope.

But, this is OK:

var Ext = {};
Ext.Msg = {};
Ext.Msg.show = function() {console.log("success")};

function phrase(variable, defaultPhrase) {
    return(variable || defaultPhrase);
}

Ext.Msg.show({title: phrase(window.js_shutdown,'Shutdown')});​

You can see that this works here: http://jsfiddle.net/jfriend00/JFz6R/

Because you've told the JS engine exactly where to look for js_shutdown and when it isn't there, it just passes undefined to the phrase function (as you want).

Answer 5

Use the logical OR operator:

 var phrase = variable || defaultPhrase;

Or inline:

Ext.Msg.show({title: (js_shutdown || 'Shutdown')), //...

Answer 6

I would usually code this like title: js_shutdown || 'Shutdown' in the absence of possible security issues.

Answer 7

Shouldn't it be:

var phrase = function (variable, defaultPhrase){
    if(variable == undefined){
        return defaultPhrase;
    }else{
        return variable;
    }
}