CODEWITHSUNDEEP
javascript
Bwyss
Bwyss

Reputation: 1834

strange Javascript notation - calling a function

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;
}

Upvotes: 1

Views: 65

Answers (3)

António Sérgio Simões
António Sérgio Simões

Reputation: 981

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.

Upvotes: 0

Nzall
Nzall

Reputation: 3555

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.

Upvotes: 1

MrCode
MrCode

Reputation: 64526

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

Upvotes: 2

Related Questions