The map function comes from JavaScript’s functional programming roots: it applies a function to every array element and returns a new array of the results without mutating the original array. So lets look at the native JS and jQuery map implementations.
Array.prototype.map
The signature for the native JS implementation is:
array.map(callback, thisObject);
The callback is the transforming function that changes elements of array into new elements while thisObject will be this inside the callback (some cool applications exist). Most browsers allow Array.protototype.map (support got added in JavaScript 1.6) however a few browsers still do not.
jQuery’s map ($.map)
The signature for the jQuery implementation is:
$.map(array, callback, arg)
Understanding the JavaScript map callback
jQuery callback example
var numbers = [1,2,3,4],
squareNumbers = function (number) {
return number * number;
},
squares = $.map(numbers, squareNumbers);
console.log(squares);//logs [1,4,9,16]
Array.prototype.map callback example
var numbers = [1,2,3,4],
squares = numbers.map(squareNumbers);
console.log(squares);//logs [1,4,9,16]
The difference between Array.map and $.map: Element indices
jQuery example
var numbers = [1,2,3,4],
getAllEvenIndices = function(number, indexInArray){
if(indexInArray % 2 === 0) return number
},
evenIndexedNumbers = $.map(numbers, getAllEvenIndices); console.log(evenIndexedNumbers); //logs [1,3]
Native JS map example
var numbers = [1,2,3,4],
evenIndexedNumbers = numbers.map(getAllEvenIndices); console.log(evenIndexedNumbers); //logs [1, undefined, 3, undefined]
Can I use jQuery.map function on Objects?
var payload = { id : 1, username : "xyz", points : 10},
retrieveKeys = function (value, key) { return key; },
payloadKeys = $.map(payload, retrieveKeys); console.log(payloadKeys);//logs ["id", "username", "points"]
var result = $.map ([[1,2], [3,6]], function(elem) { return elem; })
sure did,only that i am not in for any of the above(jS+jQ) but In shaa Allaah i get my hands on them smday.JazaakumuLlaahu khaeran wa baarakaLlaahu feeh
LikeLike
Ameen wa iyyaakum; please do let me know when you want to start.
LikeLike
As always Abdul, well done!
Re: Using nativeJS to get the keys with Kung Fo
there’s actually a method for that but it only works in the more recent/modern browsers –
Only makes sense to use this if you’re absolutely sure only modern browsers will be used (ideal and kinda rare). Otherwise, let jQuery do the work for you even when Object.keys() not supported by the browser.
LikeLike
Thanks a lot Oga Femi! Thanks for the motivation! :) It’s a honour to have you read my posts!
Aah, my write-up wasn’t clear enough (I should update it) – I was wondering if it was possible to use the Array.prototype.map method on Objects. Something along the lines of Array.prototype.map.bind, please do you know if this is possible?
The Object.Keys method is cool – EcmaScript 5 has lots of goodies :); have you tried the Object.getOwnPropertyNames? I found out that it allows you to iterate over non-enumerable values.
Thanks a lot once again!
LikeLike
Reblogged this on Sutoprise Avenue, A SutoCom Source.
LikeLike