d3 svg symbol syntax

Question

I am new to javascript and was trying to plot a scatterplot with multiple symbols. I came across this page.

1. What's the difference between symbolTypes['circle'] and symbolTypes.circle() in the solution below? The latter works while the former throws an error.
2. If "symbolTypes" is a dictionary, shouldn't we use symbolTypes['circle'] ?

They use sort of a dictionary as a symbol generator in the accepted solution using

// symbol generators
var symbolTypes = {
    "triangleDown": d3.svg.symbol().type("triangle-down"),
    "circle": d3.svg.symbol().type("circle")
};

Then in the later part of the solution the author uses:

svg.selectAll("path")
.data(dataSet)
.enter().append("path")
.attr("class", "dot")
// position it, can't use x/y on path, so translate it
.attr("transform", function(d) { 
    return "translate(" + (x(d.hour) + (Math.random() * 12 - 6)) + "," +  y(d.yval) + ")"; 
})
// assign d from our symbols
.attr("d", function(d,i){
    if (d.bar === "0") // circle if bar === 0
        return symbolTypes.circle();
    else
        return symbolTypes.triangleDown();
})

1. symbolTypes['circle'] --> I get an error using this to bind circle symbol with my data using attr().
2. symbolTypes.circle() --> Using this, I can add circle as an attribute to the path element.