Implementation of Native JavaScript Methods (forEach, Map, Filter, Reduce, Every, Some)

nativeJavaScript.js

'use strict';

/*****************NATIVE forEACH*********************/

Array.prototype.myEach = function(callback) {
    for (var i = 0; i < this.length; i++)
        callback(this[i], i, this);
};

//tests
var arr = ['biggy smalls', 'bif tannin', 'boo radley', 'hans gruber'];
arr.myEach(function(word) {
    console.log(word);
});
//biggy smalls
//bif tannin
//boo radley
//hans gruber

/*****************NATIVE MAP*************************/

Array.prototype.myMap = function(callback) {
    arr = [];
    for (var i = 0; i < this.length; i++)
        arr.push(callback(this[i], i, this));
    return arr;
};

//tests
var arrs = ['dic tanin', 'boo radley', 'hans gruber'];
var numbers2 = [1, 4, 9];

var goodT = arrs.myMap(function(n) {
    return n;
});

var squareRoot = numbers2.myMap(function(num) {
    return Math.sqrt(num);
});

console.log(goodT); // [ 'dic tanin', 'boo radley', 'hans gruber' ]
console.log(squareRoot); // [ 1, 2, 3 ]

/*****************NATIVE FILTER*************************/

Array.prototype.myFilter = function(callback, context) {
    arr = [];
    for (var i = 0; i < this.length; i++) {
        if (callback.call(context, this[i], i, this))
            arr.push(this[i]);
    }
    return arr;
};

//tests
var numbers = [1, 20, 30, 80, 2, 9, 3];
var newNum = numbers.myFilter(function(n) {
    return n >= 10;
});
console.log(newNum); // [ 20, 30, 80 ]

/*****************NATIVE REDUCE*************************/


Array.prototype.myReduce = function(callback, initialVal) {
    var accumulator = (initialVal === undefined) ? undefined : initialVal;
    for (var i = 0; i < this.length; i++) {
        if (accumulator !== undefined)
            accumulator = callback.call(undefined, accumulator, this[i], i, this);
        else
            accumulator = this[i];
    }
    return accumulator;
};

//tests
var numbers3 = [20, 20, 2, 3];
var total = numbers3.myReduce(function(a, b) {
    return a + b;
}, 10);
console.log(total); // 55

var flattened = [
    [0, 1],
    [2, 3],
    [4, 5]
].reduce(function(a, b) {
    return a.concat(b);
});
console.log(flattened); //[ 0, 1, 2, 3, 4, 5 ]


/*****************NATIVE EVERY*************************/

Array.prototype.myEvery = function(callback, context) {
    for (var i = 0; i < this.length; i++) {
        if (!callback.call(context, this[i], i, this))
            return false;
    }
    return true;
};

//tests
var passed = [12, 5, 8, 130, 44].myEvery(function(element) {
    return (element >= 10);
});
console.log(passed); // false
passed = [12, 54, 18, 130, 44].myEvery(function(element) {
    return (element >= 10);
});
console.log(passed); // true

passed = [12, 54, 18, 130, 44].myEvery(function(element) {
    return (element >= 13);
});
console.log(passed); // false



/*****************NATIVE SOME*************************/

Array.prototype.mySome = function(callback, context) {
    for (var i = 0; i < this.length; i++) {
        if (callback.call(context, this[i], i, this))
            return true;
    }
    return false;
};

//tests
var passed = [12, 5, 8, 130, 44].mySome(function(element) {
    return (element >= 200);
});
console.log('some: ' + passed); //some: false

var passed = [12, 5, 8, 130, 44].mySome(function(element) {
    return (element >= 100);
});
console.log('some: ' + passed); //some: true

Thanks for that, very easy to understand the behaviour, instead of reading a big document

Its really useful bro....

good job done!

Very useful!!

This goes to confirm this article javascript performance mistakes . Its more helpful to use the plain old for loop than the new array functions in es6.

Cool! Been looking for this for a while.

@alexhawkins How do you use context in myFilter and why does your solution work when context is undefined as it is in your tests.

@usmanajmal someFunction.call(), aka Function.prototype.call(), uses its first argument as "this". That means that callback.call(context, ...) is a direct equivalent to callback.bind(context)(...), which in turn says that any instances of this within callback will refer to context.

As you can probably tell, it has little to no relevance here... so TBQH I'm not quite sure why this gist's author used .call() in such a manner. Rather than defining myFilter(callback, context) and then doing callback.call(context, ...), it would be much preferable (as far as I can tell) to define myFilter(callback) and simply do callback(...); if the user needs to bind to context, they can pass the callback in as callback.bind(context) without forcing the myFilter function to care about it.
(Same goes for myReduce()... would be simpler within it to do callback(...) rather than callback.call(undefined, ...).)

Wow.. You made it look so easy !! GREAT

Good work, thanks!

what has "callback(this[i], i, this)"; have to do in the code??

thanks,

Can you explain how Map data structure is implemented in JS, Considering Non-Primitive data type as key.

everything looks great except, in reduce, why do we need all these parameters when we are binding the reduceFn context? [undefined, accumulator, this[i], i, this]? Any explanations please? I noticed, this breaks without the undefined

myReduce function is wrong

[undefined,null,'3',4,5].reduce((acc, cur) => acc*cur) // NaN; 
[undefined,null,'3',4,5].myReduce((acc, cur) => acc*cur) // 0;

correct:

Array.prototype.myReduce = function(...rest) {
  
  if (!rest || typeof rest[0] !== 'function') {
    throw new TypeError(`${rest[0]} is not a function`);
  }

  const callback = rest[0];
  const arr = this;
  let thumb = rest.length > 1;
  let accumulator = thumb ? rest[1] : arr[0];

  for (let i = 0; i < arr.length; i++) {
    if (thumb) {
      accumulator = callback(accumulator, arr[i], i, arr);
    } else thumb = true;
  }
  return accumulator;  
}

Thanks for helping us out! Great one!

Seriously Great one ☝️. Thanks!

My reduce implement: just a little bit difference:

Array.prototype.myReduce = function (fn, initialValue) {
    var accumulator = initialValue || this[0];
    for (var i = 0; i < this.length; i++) {
        if (!initialValue && i === 0) {
            // when initialValue is not provided
            continue;
        }
        accumulator = fn.call(null, accumulator, this[i], i, this);
    }
    return accumulator;
};

Good work, thanks!

Very nice

else
accumulator = this[i]; at line 70
is not like this in current native reduce,
this one will omit undefined values at any step and proceed to this[i]
the native one will sum it up, it will use this check for initial value just once

Thank you!

Array.prototype.myReduce = function(callback, initialVal) {
   
    if(initialVal !== undefined) accumulator = initialVal;
    else accumulator = this[i++];
        
    for (var i = 0; i < this.length; i++) {
            accumulator = callback.call(undefined, accumulator, this[i], i, this);
    }
    return accumulator;
};

@alexhawkins Bro, what will happen to your methods which are binding context if you pass arrow function () => {}. I do think it is not gonna work.

I deleted my smiles because I thought specific bug in your implementation, but js filter works as same as yours. So I guess thats why none uses it. 😅 This one I had to add.

`Array.prototype.myFilter = function(callback, context) {
arr = [];
for (var i = 0; i < this.length; i++) {
if (callback.call(context, this[i], i, this))
arr.push(this[i]);
}
return arr;
};

[].myFilter.call([1,2,3], (e) => {
console.log(this.isItWorking)
return e % 2 === 0
}, {isItWorking: "mmmm..."})`