Options Object

Since JavaScript doesn't have function overload options object can be used instead. This example demonstrates how to use options object.

by Vlad Bezden

HTML

<p>optionsObjectTest(1, 2)</p>
<div id="result1"></div>
<hr/>
<p>optionsObjectTest(1, 2, {stringValue:"Hello"})</p>
<div id="result2"></div>
<hr/>
<p>optionsObjectTest(1, 2, {boolValue:true; numericValue:5})</p>
<div id="result3"></div>

CSS

p {
    font-weight: bold;
}

JavaScript

function optionsObjectTest(x, y, opts) {
    opts = opts || {}; // default to an empty options object

    var stringValue = opts.stringValue || "any default value";
    var boolValue = !!opts.boolValue; // coerces value to boolean with a double negation pattern
    var numericValue = opts.numericValue === undefined ? 123 : opts.numericValue;

    return "{x:" + x + ", y:" + y + ", stringValue:'" + stringValue + "', boolValue:" + boolValue + ", numericValue:" + numericValue + "}";
}

var result1 = optionsObjectTest(1, 2);

var result2 = optionsObjectTest(1, 2, {
    stringValue: "Hello"
});

var result3 = optionsObjectTest(1, 2, {
    stringValue: "Hello",
    boolValue: true,
    numericValue: 5
});

document.getElementById("result1").innerText = result1;
document.getElementById("result2").innerText = result2;
document.getElementById("result3").innerText = result3;