strange Javascript notation - calling a function

Question

I am trying to use some code from this tutorial and it contains some strange javascript notation that I am not familiar with chart.attr = function(name, value) {... . More than it being unfamiliar to me, it is throwing errors. I am trying to figure out how it can be changes to work in pure javascript.

function LineChart(config) {

  function chart() {

    // Draw the line.
    chartContainer.append("path")
      .datum(p.data)
      .attr("class", "line")
      .attr("d", line);
  }

  // **** This is the notation I do not understand, and gives me errors ****
  chart.attr = function(name, value) {
    if (arguments.length == 1)
    {
      return p[name];
    }
    else if (arguments.length == 2)
    {
      p[name] = value;
    }

    return chart;
  }

  chart.update = function() {
  }

  return chart;
}

in tutorial, "p" variable is defined. here, you don't have it defined. it would also be helpful if you specified what kind of errors are you getting. — avidenic
– avidenic, Commented May 9, 2014 at 9:28
chart.attr = function(name, value) { ... } is assigning a function to the property attr of chart. To learn more about functions, see developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — Felix Kling
– Felix Kling, Commented May 9, 2014 at 9:48

MrCode · Accepted Answer · 2014-05-09 09:40:46Z

Your code is trying to use a variable p which is undefined. It should be defined in the LineChart function as:

function LineChart(config) {
  var p =
  {
    parent          : null,
    labels          : [ "X", "Y" ],
    ...
  };
  ...
}

As for the notation that you don't understand, this is an anonymous function expression which is being assigned to the chart.attr property. Even though it can be called by chart.attr(), this is still an anonymous function because it doesn't have a name.

The purpose of this particular function is to be a getter and setter for properties of the p object. It looks at the arguments to determine the way the function should behave: if there is only one argument, then it needs to return the property value, if there are two arguments then it should set the property value.

Example usage would look like:

var c = new LineChart();
var parent = c.attr('parent'); // get the value of the parent property
c.attr('parent', $('#something')); // set the value of the parent property

Nzall · Accepted Answer · 2014-05-09 09:42:23Z

1

Let's dissect that line of code:

//Define chart.attr as a function that by default takes 2 parameters;
chart.attr = function(name, value) {
    //If the function only gets 1 argument (so the first one)
    if (arguments.length == 1)
    {
        //return the element with key "name" from the array p
        //effectively a getter
        return p[name];
    }
    // else, check if there are 2 arguments, but no more
    else if (arguments.length == 2)
    {
        Assign the value of "value" to the element with key "name" from p
        effectively a setter;
        p[name] = value;
    }
//at the end, return the chart
return chart;
}

So what this piece of code does is that if you pass only 1 argument to chart.attr(), it retrieves the value associated with that key from the array p. If you pass 2 arguments, it uses the second argument as the value of the key-valuepair from the array p with the first argument as the key.

now, without knowing the error you get, it's hard to debug this. However, the only way in which this would give an error is if p is undefined. if p doesn't contain that key, it returns null if it's a getter, and creates if it's a setter.

edited May 9, 2014 at 9:42

answered May 9, 2014 at 9:35

Nzall

3,5855 gold badges36 silver badges66 bronze badges

1 Comment

Bwyss Over a year ago

The best way that I can explain the error is that the last '}' is not being recognized. If you take the code snippet from the tutorial I referenced into an editor like sublime, or the console of a browser you should the issue.

António Sérgio Simões · Accepted Answer · 2014-05-09 09:55:08Z

0

There is another way for this code to fail. And since the op didn't provide the error I will just speculate.

This can fail if you call, for example, chart.attr('somekey','somevalue') before chart.attr = function(name,value) { } is executed. This happens because of function hoisting...you are assigning a value to a property in this line of code. You're not defining a function...you're assigning one.

If you call chart.attr('somekey','somevalue') in the above conditions, you'll get a chart.attr is not a function error.

answered May 9, 2014 at 9:55

António Sérgio Simões

9917 silver badges11 bronze badges

Collectives™ on Stack Overflow

strange Javascript notation - calling a function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related