YGZX yurgengoa

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it much simpler to think about both the old list and the new one, what they contain, and

	/**
	* Console.log with call location and grouping to reduce log noise.
	* Apply directly to code once.
	*
	* Original: http://remysharp.com/2014/05/23/where-is-that-console-log/
	*/
	var groupable = typeof console.groupCollapsed !== 'undefined';
	['log', 'warn'].forEach(function(method) {
	var old = console[method];
	console[method] = function() {

	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="http://cdn.kendostatic.com/2012.1.322/js/jquery.min.js" type="text/javascript"></script>
	<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.min.js" type="text/javascript"></script>
	<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
	<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

	/**
	* (C)Leanest CSS spinner ever
	*/

	@keyframes spin {
	to { transform: rotate(1turn); }
	}

	.progress {
	position: relative;