CSSで高さが不揃いの要素の高さをJavaScriptですべて合わせる

<style>
.columns {
  margin: auto;
  overflow: hidden;
}
.columns .column {
  float: left;
  padding: 40px;
  margin: 10px;
  text-align: center;
  border: 1px #ddd solid;
}
</style>

<div class="columns">
  <div class="column" style="height:50px;">50px</div>
  <div class="column" style="height:150px;">150px</div>
  <div class="column" style="height:250px;">250px</div>
</div>

<script>
  var columns = Array.prototype.slice.call(document.querySelectorAll('.columns .column') ,0);
  var maxHeight = Math.max.apply(null, columns.map(function(column) { return column.clientHeight; }));
  columns.forEach(function(column) {
    column.style.height = maxHeight + "px";
  });
</script>