Passing optional parameter in JavaScript Function

Question

Is possible to pass a optional param to a function in javascript?

I have a function in JavaScript and I want recicly, so, instead I use the var options inside the function, I want to pass the variable for param.

My function below:

javascript:

function DrawChartPie(rows, title, chart_div, legend_position) {
google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Tipo');
        data.addColumn('number', 'Quantidade');
        data.addRows(rows);

        var options = {
            width: 450,
            height: 250,
            title: title,
            legend: legend_position,
        backgroundColor: 'transparent',
                    is3D: true,
                    chartArea: {width:"90%"}
        };

        var chart = new google.visualization.PieChart(document.getElementById(chart_div));
        chart.draw(data, options);
    }

}

helper:

 html = pie_chart(data, title, div, pos_leg)

What I want to do, but it's no working:

helper:

 def pie_data(data_pie, div, options = {})
 ....
 optional = {
            width: 900,
            height: 500,
            title: title,
            legend: pos_leg,
        backgroundColor: 'transparent',
                    is3D: true,
                    chartArea: {width:"90%"}
        };
...
html = pie_chart(data, title, div, pos_leg, optional)

javascript:

function DrawChartPie(rows, title, chart_div, legend_position, optional = {}) {
google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Tipo');
        data.addColumn('number', 'Quantidade');
        data.addRows(rows);

        var option = optional || {
            width: 450,
            height: 250,
            title: title,
            legend: legend_position,
        backgroundColor: 'transparent',
                    is3D: true,
                    chartArea: {width:"90%"}
        };

        var chart = new google.visualization.PieChart(document.getElementById(chart_div));
        chart.draw(data, option);
    }
}

When I try that, not show nothing.

It's possible do something like this? If yes, someone could help me please?

Thanks =] Sorry for my english :P

---- UPDATE ---- I updated my methods like as sugest, but now I'm having another error.

javascript:

 function DrawChartPie(rows, title, chart_div, legend_position, optional) {
 ...
 var optional = optional || {
            width: 450,
            height: 250,
            title: title,
            legend: legend_position,
        backgroundColor: 'transparent',
                    is3D: true,
                    chartArea: {width:"90%"}
        };
 ...

 }

helper:

 def pie_data(data_pie, div, options = {}){
 ...
 optional = {
            width: 900,
            height: 500,
            title: title,
            legend: pos_leg,
        backgroundColor: 'transparent',
                    is3D: true,
                    chartArea: {width:"90%"}
        };
  html = pie_chart(data, title, div, pos_leg, optional)
  }

My error: wrong number of arguments (5 for 4)

I already restart my server :P

thefourtheye · Answer 1 · 2014-03-25T13:28:59.510

1

Passing default/optional parameter to functions, is not possible until ECMA Script 6 standard is implemented.

But what you can do is,

function DrawChartPie(rows, title, chart_div, legend_position, optional) {
     optional = optional || {};

If the optional has a falsy value, then {} will be assigned to optional.

optional = optional || {};

is the same as writing

if (!optional) {
    optional = {};
}

edited Mar 25 '14 at 13:28

answered Mar 25 '14 at 13:23

thefourtheye

233,700
52
457
497

Hi =], thanks for the reply, works now but I have other error now, please, can you check my updated in my answer? – Lorena Bento Mar 25 '14 at 13:42

sabof · Accepted Answer · 2014-03-25T13:30:20.100

1

Kinda. Technically all JavaScript parameters are optional, defaulting to undefined. This is how you'd have a different default parameter.

function DrawChartPie(rows, title, chart_div, legend_position, optional) {
  optional = optional || {};

If you expect falsy values such as null, NaN, 0, "" (empty string), and false, as the value of the optional parameter, you can use this instead:

function DrawChartPie(rows, title, chart_div, legend_position, optional) {
  optional = optional === undefined ? {} : optional;

edited Mar 25 '14 at 13:30

answered Mar 25 '14 at 13:23

sabof

8,062
4
28
52

Hi, I tried that and the javascript works \o/, but now I'm having other problem, in my function in my helper, I'm passing 5 params and in my javascript I have 5 params now, but I'm receving a error: wrong number of arguments (5 for 4), I restarted my server but still that =/ – Lorena Bento Mar 25 '14 at 13:37
@lorena What is your environment, and where are you seeing this error? I wish to see this error every day, but I'm pretty sure I never have. – sabof Mar 25 '14 at 13:40
I'm testing this app in development enviroment, I see this error when a restart this page, the page has the graph. – Lorena Bento Mar 25 '14 at 13:51
@lorena The error is not coming from the JavaScript runtime. Either there is an error in your Ruby code, or this is something ROR specific. I'm not familiar with either. – sabof Mar 25 '14 at 14:00
Oh, yes, you help me a lot, thanks =], I will check this error in a ruby forum, thanks for the explanations – Lorena Bento Mar 25 '14 at 14:02

Andy · Answer 3 · 2014-03-25T13:38:36.490

I've found the best way to pass in any optional values to a function is to use an object instead of a list of parameters. This also means that the parameters don't have to be in any kind of order either. All you need to do is test to see if the properties are there before you use them like with any object.

function DrawChartPie(options) {
  if (options.rows) { data.addRows(options.rows); }
  if (options.title) { document.getElementById('title').innerHTML = options.title; }
  if (options.optional) { // loop over the object or whatever; }
}

DrawChartPie({
  rows: data,
  title: 'mychart',
  optional: {}
});

Passing optional parameter in JavaScript Function

3 Answers3