What is the syntax of this block of code?

Question

I was searching for a way to return the mode of an array when I found this answer:

var store = ['1','2','2','3','4'];
var frequency = {};  // array of frequency.
var max = 0;  // holds the max frequency.
var result;   // holds the max frequency element.
for(var v in store) {
    frequency[store[v]]=(frequency[store[v]] || 0)+1; // increment frequency.
    if(frequency[store[v]] > max) { // is this frequency > max so far ?
            max = frequency[store[v]];  // update max.
            result = store[v];          // update result.
    }
}

This block of code works perfectly, and I understand it well enough that I was able to output both the most common value and the amount of times that value appeared. However, this code block makes no sense to me at all. Specifically the line:

frequency[store[v]]=(frequency[store[v]] || 0)+1;

I'd thought that frequency was an array, with store[v] serving as the index. What exactly is happening in this code block?

Answer 1

Does this work for you?

for(var v in store) {
    numberWeAreLookingAt = store[v];

    // we hadn't gone through this number yet, so it's not defined 
    // as a property in the object "frequency"
    if(frequency[numberWeAreLookingAt] === undefined)
      frequency[numberWeAreLookingAt] = 0; // let's initialize that property with the 
                                           // number zero, in it we will hold the
                                           // number of times it appeared

    // Sum 1 to the times it appeared already (or zero if we 
    // initialized it on the "if" above)
    frequency[numberWeAreLookingAt] = frequency[numberWeAreLookingAt] + 1;

    // the times this number appeared is more than "max"?
    if(frequency[numberWeAreLookingAt] > max) {
        // then now "max" is the times this number appeared
        max = frequency[numberWeAreLookingAt];
        // and the result is this number
        result = numberWeAreLookingAt;
    }
}

Note that the code in your question is perfectly readable. If you really can't read it, you can't "blame it on the programmer": you just don't understand code very well and should work on that.

"Making code readable" doesn't mean making it verbose... it means "make it obvious on a first read to whoever knows the syntax", and I think the code in your question fits that properly. My code is extremely verbose and my comments should be unneeded: they are just explaining what the next line of code does

The only line of code that "may" need explanation is:

frequency[store[v]]=(frequency[store[v]] || 0)+1;

And you can see it's decomposition above... x = (x || 0)+1 means get x if it's defined, or 0 if it's not: then add 1 and assign back to x, which is what I did on verbose form in my code.

Other thing that seems to confuse the OP (as noted in the comments), is using the brackets syntax to access an object properties. This is not uncommon in dynamically executed languages (and I'd argue that, taking how object prototypes are done in javascript, the brackets syntax makes more sense than the dot syntax, but that's just an oppinion).

In Javascript, you can access object properties with two different syntaxes: object.property is equivalent to object[property]. The main difference is that when using the brackets syntax you can use expression to evaluate the property name (or use other variables, as we are doing here). In C#, for example, you could do the same using dynamic and ExpandoObject.

Note that while this may confuse you, it's not really that important for the question... you could also think of frequency being an array where the indexers are objects, instead of a sequential number, and it'd work the same (in PHP, for example, you could achieve this using keyed arrays, or a Dictionary in C#, and it's a very typical pattern in functional languages).

Answer 2

frequency is not an array. It is an object, which is a map of keys to values. In this case the keys are strings from your store array and the values are the frequencies those strings occur. One of the easiest ways to see what is going on would be to add a couple of console.logs:

var store = ['1','2','2','3','4'];
var frequency = {};  // array of frequency.
var max = 0;  // holds the max frequency.
var result;   // holds the max frequency element.
for(var v in store) {
    frequency[store[v]]=(frequency[store[v]] || 0)+1; // increment frequency.
    console.log( frequency );
    if(frequency[store[v]] > max) { // is this frequency > max so far ?
            max = frequency[store[v]];  // update max.
            console.log( 'Found new max!', max + ' occurrences of \'' + store[v] + '\'' );
            result = store[v];          // update result.
    }
}

Run that and take a look at the console to see what the frequency object contains after each iteration. This is what I get it Chrome:

Object {1: 1}
Found new max! 1 occurrences of '1'
Object {1: 1, 2: 1}
Object {1: 1, 2: 2}
Found new max! 2 occurrences of '2'
Object {1: 1, 2: 2, 3: 1}
Object {1: 1, 2: 2, 3: 1, 4: 1}

frequency[store[v]]=(frequency[store[v]] || 0)+1; is a shorthand for:

 if (frequency[store[v]]) {
     frequency[store[v]]++;
 } else {
     frequency[store[v]] = 1;
 }

That is because the || operator in JavaScript returns its left operand if it is truthy and its right operand otherwise, so the expression frequency[store[v]] || 0 evaluates to 0 when frequency[store[v]] is undefined (since undefined is falsy), but once frequency[store[v]] is 1 or greater it evaluates to the value of frequency[store[v]].

Answer 3

First, skim through this tutorial to understand the differences between a Javascript array and a Javascript object. Then you'd read the code like this:

var store = ['1','2','2','3','4'];               // store[0] == '1', store[1] = '2', etc.
var frequency = {};  // array of frequency.      // frequency.'1' = undefined

Then, when the assignment happens, it's easier to understand. frequency[store[v]] is just simply frequency.'1' where v == 0, meaning you're accessing the object frequency and its field named by the string 1. A javascript object can have fields named anything, e.g. frequency.'apple', frequency.'table', etc. They're just undefined until you give them value.

The assignment, then, is easier to read

if (frequency.'1' is undefined)
    store the value [0 + 1] into frequency.'1'
else increment the value by 1