It would be cleaner to write the maximum value comparison like this:

 maxHeight = Math.max(maxHeight, elems[i].offsetHeight)

In this case, using the 'max' function follows the DRY principle.

It is common in javascript to not use for loops and instead use the functional-style .forEach (.each in jQuery)

The return type of getElementsByClassName is not Array (it is an array like object), but it can be converted to a real array using the slice array method and then the normal Array methods can be used:

var maxHeight = -1,
 elems = document.getElementsByClassName("features");
elems = [].slice.call(elems) // Now a true Array
elems.forEach(function(e){
 maxHeight = Math.max(maxHeight, e.offsetHeight);
});
elems.forEach(function(e){
 e.style.height = maxHeight + "px";
});

In this case the functional style is a bit more concise even if it looks a little weird coming from some other mainstream languages - it's more concise mainly because it completely eliminates the index variable and hands you the object directly. This kind of idiom is extremely common in the javascript world and you will find it used extensively with libraries like jQuery, and once you get used to it you will probably almost never use traditional for loops. In this case there might not seem to be a compelling reason why it's better but it's certainly the conventional way to code in javascript.

#Advanced methods for calculating the maximum Math.max can take any number of arguments, for example max(5,3,2,1). You can call a function using an array for arguments by using the apply method on a function. We can use the map array method to get an array of heights suitable for calling max with.

maxHeight = Math.max.apply(null, elems.map(function(e){return e.offsetHeight}))

It is also possible to use the reduce array method to accomplish the same task:

maxHeight = elems.reduce(function(value, e){return Math.max(value, e.offsetHeight)}, -Infinity)

The question pertains to 'pure javascript' so to talk about libraries is a little off-scope, but the above examples perhaps show why no-one really uses 'pure javascript', you need to do some seriously weird stuff to accomplish things which should be a simple function call. If I were to do this for real, I'd use the underscore library which adds a bunch of functions which would normally exist as builtins or in the standard library of a language. With underscore, the max is simple and concise:

maxHeight = _.max(_.pluck(elems, 'offsetHeight')) 

It would be cleaner to write the maximum value comparison like this:

 maxHeight = Math.max(maxHeight, elems[i].offsetHeight)

In this case, using the 'max' function follows the DRY principle.

It is common in javascript to not use for loops and instead use the functional-style .forEach (.each in jQuery)

The return type of getElementsByClassName is not Array (it is an array like object), but it can be converted to a real array using the slice array method and then the normal Array methods can be used:

var maxHeight = -1,
 elems = document.getElementsByClassName("features");
elems = [].slice.call(elems) // Now a true Array
elems.forEach(function(e){
 maxHeight = Math.max(maxHeight, e.offsetHeight);
});
elems.forEach(function(e){
 e.style.height = maxHeight + "px";
});

In this case the functional style is a bit more concise even if it looks a little weird coming from some other mainstream languages - it's more concise mainly because it completely eliminates the index variable and hands you the object directly. This kind of idiom is extremely common in the javascript world and you will find it used extensively with libraries like jQuery, and once you get used to it you will probably almost never use traditional for loops. In this case there might not seem to be a compelling reason why it's better but it's certainly the conventional way to code in javascript.

Advanced methods for calculating the maximum

Math.max can take any number of arguments, for example max(5,3,2,1). You can call a function using an array for arguments by using the apply method on a function. We can use the map array method to get an array of heights suitable for calling max with.

maxHeight = Math.max.apply(null, elems.map(function(e){return e.offsetHeight}))

It is also possible to use the reduce array method to accomplish the same task:

maxHeight = elems.reduce(function(value, e){return Math.max(value, e.offsetHeight)}, -Infinity)

The question pertains to 'pure javascript' so to talk about libraries is a little off-scope, but the above examples perhaps show why no-one really uses 'pure javascript', you need to do some seriously weird stuff to accomplish things which should be a simple function call. If I were to do this for real, I'd use the underscore library which adds a bunch of functions which would normally exist as builtins or in the standard library of a language. With underscore, the max is simple and concise:

maxHeight = _.max(_.pluck(elems, 'offsetHeight')) 

It would be cleaner to write the maximum value comparison like this:

 maxHeight = Math.max(maxHeight, elems[i].offsetHeight)

In this case, using the 'max' function follows the DRY principle.

It is common in javascript to not use for loops and instead use the functional-style .forEach (.each in jQuery)

The return type of getElementsByClassName is not Array (it is an array like object), but it can be converted to a real array using the slice array method and then the normal Array methods can be used:

var maxHeight = -1,
 elems = document.getElementsByClassName("features");
elems = [].slice.call(elems) // Now a true Array
elems.forEach(function(e){
 maxHeight = Math.max(maxHeight, e.offsetHeight);
});
elems.forEach(function(e){
 e.style.height = maxHeight + "px";
});

In this case the functional style is a bit more concise even if it looks a little weird coming from some other mainstream languages - it's more concise mainly because it completely eliminates the index variable and hands you the object directly. This kind of idiom is extremely common in the javascript world and you will find it used extensively with libraries like jQuery, and once you get used to it you will probably almost never use traditional for loops. In this case there might not seem to be a compelling reason why it's better but it's certainly the conventional way to code in javascript.

It would be cleaner to write the maximum value comparison like this:

 maxHeight = Math.max(maxHeight, elems[i].offsetHeight)

In this case, using the 'max' function follows the DRY principle.

It is common in javascript to not use for loops and instead use the functional-style .forEach (.each in jQuery)

The return type of getElementsByClassName is not Array (it is an array like object), but it can be converted to a real array using the slice array method and then the normal Array methods can be used:

var maxHeight = -1,
 elems = document.getElementsByClassName("features");
elems = [].slice.call(elems) // Now a true Array
elems.forEach(function(e){
 maxHeight = Math.max(maxHeight, e.offsetHeight);
});
elems.forEach(function(e){
 e.style.height = maxHeight + "px";
});

In this case the functional style is a bit more concise even if it looks a little weird coming from some other mainstream languages - it's more concise mainly because it completely eliminates the index variable and hands you the object directly. This kind of idiom is extremely common in the javascript world and you will find it used extensively with libraries like jQuery, and once you get used to it you will probably almost never use traditional for loops. In this case there might not seem to be a compelling reason why it's better but it's certainly the conventional way to code in javascript.

#Advanced methods for calculating the maximum Math.max can take any number of arguments, for example max(5,3,2,1). You can call a function using an array for arguments by using the apply method on a function. We can use the map array method to get an array of heights suitable for calling max with.

maxHeight = Math.max.apply(null, elems.map(function(e){return e.offsetHeight}))

It is also possible to use the reduce array method to accomplish the same task:

maxHeight = elems.reduce(function(value, e){return Math.max(value, e.offsetHeight)}, -Infinity)

The question pertains to 'pure javascript' so to talk about libraries is a little off-scope, but the above examples perhaps show why no-one really uses 'pure javascript', you need to do some seriously weird stuff to accomplish things which should be a simple function call. If I were to do this for real, I'd use the underscore library which adds a bunch of functions which would normally exist as builtins or in the standard library of a language. With underscore, the max is simple and concise:

maxHeight = _.max(_.pluck(elems, 'offsetHeight'))