mrspeaker/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Collection mapping: jQuery vs jQuery vs JavaScript</title>
    </head>
    <body>
        <h1>Comparing Maps</h1>
        <h2>jQuery vs jQuery vs JavaScript</h2>
        <p>Output is in the JavaScript console.</p>
        <p>For more info, view source (or visit <a href="http://www.mrspeaker.net/2011/04/27/reducing-map/">Mr Speaker's "reducing map"</a>)

        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="mapper.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

## mapper.js
// Log and run mapping function over a collection
function mapper(description, collection, func) {
    console.group(description);
    console.log("Before:", collection);

    // Run it
    var results = func(collection);

    console.log("After:", results);
    console.groupEnd();
}

// Exercise 1a: inline jQuery map. $("#list li").map(...)
mapper(
    "1a: inline jQuery map. $('#list li').map(...)",
    $("#list li"),
    function(coll) {
        return coll.map(function(){
            console.log("this:", this, " args:", arguments);
            return parseInt($(this).text(), 10);
        });
    });

// Exercise 1b: global jQuery map. $.map($("#list li"),...)
mapper(
    "1b: global jQuery map. $.map($('#list li'),...)",
    $("#list li"),
    function(coll) {
        return $.map(coll, function(el){
            console.log("this:", this, " args:", arguments);
            return parseInt($(el).text(), 10);
        });
    });

// Exercise 1c: JavaScript map over array
mapper(
    "1c: JavaScript map over array",
    $("#list li").get(),
    function(coll) {
        return coll.map(function(el, index, something){
            console.log("this:", this, " args:", arguments);
            return parseInt($(el).text(), 10);
        });
    });

// Exercise 1d: JavaScript map over jQuery collection
mapper(
    "1d: JavaScript map over jQuery collection (Array.proto.call)",
    $("#list li"),
    function(coll) {
        return Array.prototype.map.call(coll, function(el){
            console.log("this:", this, " args:", arguments);
            return parseInt($(el).text(), 10);
        });
    });


var holey = [ "1", "2", null, ["4a", "4b"], , "6"];

// Exercise 2a: jQuery global map-to-index over "holey" array
mapper(
    "2a: jQuery global map-to-index over 'holey' array",
    holey,
    function(coll) {
        return $.map(coll, function(el, index){
            return index;
        });
    });

// Exercise 2b: JavaScript map-to-index over holey array
mapper(
    "2b: JavaScript map-to-index over 'holey' array",
    holey,
    function(coll) {
        return coll.map(function(el, index){
            return index;
        });
    });


// Exercise 2c: JavaScript map-to-element over holey array
mapper(
    "2c: JavaScript map-to-element over 'holey' array",
    holey,
    function(coll) {
        return coll.map(function(el){
            return el;
        });
    });

// Exercise 2d: jQuery global map-to-element over holey array
mapper(
    "2d: jQuery global map-to-element over 'holey' array",
    holey,
    function(coll) {
        return $.map(coll, function(el){
            return el;
        });
    });
	<!DOCTYPE html>
	<html>
	<head>
	<title>Collection mapping: jQuery vs jQuery vs JavaScript</title>
	</head>
	<body>
	<h1>Comparing Maps</h1>
	<h2>jQuery vs jQuery vs JavaScript</h2>
	<p>Output is in the JavaScript console.</p>
	<p>For more info, view source (or visit <a href="http://www.mrspeaker.net/2011/04/27/reducing-map/">Mr Speaker's "reducing map"</a>)

	<ul id="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ul>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="mapper.js" type="text/javascript" charset="utf-8"></script>
	</body>
	</html>
	// Log and run mapping function over a collection
	function mapper(description, collection, func) {
	console.group(description);
	console.log("Before:", collection);

	// Run it
	var results = func(collection);

	console.log("After:", results);
	console.groupEnd();
	}

	// Exercise 1a: inline jQuery map. $("#list li").map(...)
	mapper(
	"1a: inline jQuery map. $('#list li').map(...)",
	$("#list li"),
	function(coll) {
	return coll.map(function(){
	console.log("this:", this, " args:", arguments);
	return parseInt($(this).text(), 10);
	});
	});

	// Exercise 1b: global jQuery map. $.map($("#list li"),...)
	mapper(
	"1b: global jQuery map. $.map($('#list li'),...)",
	$("#list li"),
	function(coll) {
	return $.map(coll, function(el){
	console.log("this:", this, " args:", arguments);
	return parseInt($(el).text(), 10);
	});
	});

	// Exercise 1c: JavaScript map over array
	mapper(
	"1c: JavaScript map over array",
	$("#list li").get(),
	function(coll) {
	return coll.map(function(el, index, something){
	console.log("this:", this, " args:", arguments);
	return parseInt($(el).text(), 10);
	});
	});

	// Exercise 1d: JavaScript map over jQuery collection
	mapper(
	"1d: JavaScript map over jQuery collection (Array.proto.call)",
	$("#list li"),
	function(coll) {
	return Array.prototype.map.call(coll, function(el){
	console.log("this:", this, " args:", arguments);
	return parseInt($(el).text(), 10);
	});
	});


	var holey = [ "1", "2", null, ["4a", "4b"], , "6"];

	// Exercise 2a: jQuery global map-to-index over "holey" array
	mapper(
	"2a: jQuery global map-to-index over 'holey' array",
	holey,
	function(coll) {
	return $.map(coll, function(el, index){
	return index;
	});
	});

	// Exercise 2b: JavaScript map-to-index over holey array
	mapper(
	"2b: JavaScript map-to-index over 'holey' array",
	holey,
	function(coll) {
	return coll.map(function(el, index){
	return index;
	});
	});


	// Exercise 2c: JavaScript map-to-element over holey array
	mapper(
	"2c: JavaScript map-to-element over 'holey' array",
	holey,
	function(coll) {
	return coll.map(function(el){
	return el;
	});
	});

	// Exercise 2d: jQuery global map-to-element over holey array
	mapper(
	"2d: jQuery global map-to-element over 'holey' array",
	holey,
	function(coll) {
	return $.map(coll, function(el){
	return el;
	});
	});