Develop Reference

In the Array.prototype.find's implementation, why do we need to use Objetct(this) to convert to an object?

In the Array.prototype.find's implementation, why do we need to use Object(this) to convert this to an object?
// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
},
configurable: true,
writable: true
});
}

Mostly, because the specification says so.
Why does it do that though? Because later on, it accesses properties (like .length and [k]) of the value, which must be an object for that. Sure, the member access syntax used in the polyfill would already would do this for us, but in the spec text the Get algorithm requires an object and the conversion to an object should happen only once, not on each member access (although it would be indistinguishable).
Why do we want to convert arbitrary values to objects? Because a method can be called with a primitive value as is this argument as well - unusual but possible. And as the spec says
Note: The find function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method.
An example:
String.prototype.find = Array.prototype.find;
console.log("test".find(x => x > 'f' && x < 't'))

Why is the Array.prototype.find() polyfill slower than the ES6 implementation?

I was under the impression that most of the ES6 features were just syntactic sugar. However when I compare the find polyfill on MDN with the regular ES6 implementation it seems to be half as fast. What exactly explains this difference in performance, is it not all just the same under the hood?
Please refer to the snippet below for the benchmark:
// Find polyfill
function find(obj, predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(obj);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
}
const testArray = ["Hello", "Hi", "Good Morning", "Good Afternoon", "Good Evening", "Good Night"];
// Polyfill benchmark
console.time('findPolyfill');
for (var i = 0; i < 10000; i++) {
find(testArray, (item) => item === "Hello")
}
console.timeEnd('findPolyfill');
// ES6 benchmark
console.time('find ES6');
for (var i = 0; i < 10000; i++) {
testArray.find((item) => item === "Hello");
}
console.timeEnd('find ES6');

The native version can take advantage of internal optimizations and shortcuts as long as they aren't observable from the outside. It's also likely to be pre-optimized and stored as at least bytecode if not compiled machine code. (Depends on the JavaScript engine.)
In contrast, the polyfill is a very pedantic rendering of exactly what the spec says to do, and unless you run it more than 5-10k or so times in a tight loop, is unlikely to be selected for aggressive optimization by the engine.
Amusingly, your loop is set to run 10k times, and so may well stop just before the engine optimizes it. Or the engine may optimize it part-way through — further delaying the result. For instance, for me, the following has the polyfill run in ~6ms the first time, but ~1.1ms the second and third times (V8 v7.3 in Chrome v73). So apparently it's getting optimized during the first run (which, perversely, probably slows that run down, but obviously speeds up subsequent ones).
// Find polyfill
function find(obj, predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(obj);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
}
const testArray = ["Hello", "Hi", "Good Morning", "Good Afternoon", "Good Evening", "Good Night"];
function testPolyfill() {
// Polyfill benchmark
console.time('findPolyfill');
for (var i = 0; i < 10000; i++) {
find(testArray, (item) => item === "Hello")
}
console.timeEnd('findPolyfill');
}
function testNative() {
// ES6 benchmark
console.time('find ES6');
for (var i = 0; i < 10000; i++) {
testArray.find((item) => item === "Hello");
}
console.timeEnd('find ES6');
}
testPolyfill();
testNative();
testPolyfill();
testNative();
testPolyfill();
testNative();

Array.prototype.forEach not working in IE8

I have the following code but it doesn't seem to work in IE8. I've read IE8 doesn't support array.prototype.foreach. How can you fix this in IE8?
[].forEach.call(data.Results.cars, function(inst){
// Fetching the value of key _
var _html = inst["_"];
// Fetching the src of image by making string a jquery object
var _src = $(_html).find("img").attr("src");
//Extracting the image's name
var _imagesName = _src.match(/([^\/]+)(?=\.\w+$)/)[0];
// Building html
var _h = '<div >'
+'<img src="'+_src+'" >'
+'<p>'+_imagesName+'</p>'
+'<p><input type="radio" value="'+imagesName'" name="cartype"> </p>'
+'</div>';
// Appending html to #results
$("#results").append(_h);
});

Array#forEach is not supported by IE8 it is supported by IE9 and later, see Browser Compatibility
You can use for or polyfill from MDN
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(' this is null or not defined');
}
// 1. Let O be the result of calling ToObject passing the |this| value as the argument.
var O = Object(this);
// 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
// 3. Let len be ToUint32(lenValue).
var len = O.length >>> 0;
// 4. If IsCallable(callback) is false, throw a TypeError exception.
// See: http://es5.github.com/#x9.11
if (typeof callback !== "function") {
throw new TypeError(callback + ' is not a function');
}
// 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
if (arguments.length > 1) {
T = thisArg;
}
// 6. Let k be 0
k = 0;
// 7. Repeat, while k < len
while (k < len) {
var kValue;
// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
if (k in O) {
// i. Let kValue be the result of calling the Get internal method of O with argument Pk.
kValue = O[k];
// ii. Call the Call internal method of callback with T as the this value and
// argument list containing kValue, k, and O.
callback.call(T, kValue, k, O);
}
// d. Increase k by 1.
k++;
}
// 8. return undefined
};
}

Using Array.every() function to check if all values are defined

I am trying to check if all my values are defined in an array of mine. My code is the following
var check = function (item){return item !== undefined;};
array.every(check);
I tried it on the following arrays:
var array = [];
array[5] = 0; //[undefined × 5, 0]
array.every(check); //return true although there are 5 udefined values there
What am I doing wrong?

As said above every skips "holes".
If you really want this functionality then you can add this simple method:
Array.prototype.myEvery= function (pred) {
for (var i = 0; i < this.length; i++) {
if (!pred(this[i])) return false;
}
return true;
}

MDN provides a polyfill (read: the exact code) for Array.every. If we just modify this to remove the check that the property exists, it's easy:
if (!Array.prototype.reallyEvery) {
Array.prototype.reallyEvery = function(callbackfn, thisArg) {
'use strict';
var T, k;
if (this == null) {
throw new TypeError('this is null or not defined');
}
// 1. Let O be the result of calling ToObject passing the this
// value as the argument.
var O = Object(this);
// 2. Let lenValue be the result of calling the Get internal method
// of O with the argument "length".
// 3. Let len be ToUint32(lenValue).
var len = O.length >>> 0;
// 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
if (typeof callbackfn !== 'function') {
throw new TypeError();
}
// 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
if (arguments.length > 1) {
T = thisArg;
}
// 6. Let k be 0.
k = 0;
// 7. Repeat, while k < len
while (k < len) {
var kValue;
// i. Let kValue be the result of calling the Get internal method
// of O with argument Pk.
kValue = O[k];
// ii. Let testResult be the result of calling the Call internal method
// of callbackfn with T as the this value and argument list
// containing kValue, k, and O.
var testResult = callbackfn.call(T, kValue, k, O);
// iii. If ToBoolean(testResult) is false, return false.
if (!testResult) {
return false;
}
k++;
}
return true;
};
}
I've just renamed it to Array.reallyEvery().

That's because the .every() method checks if the value exists, before calling your check() function, so check() will only be called for the last element (0).
NOTE: Remember also that the .every() method stops if your function returns a false value.
Try this instead, if you want to check:
var array = [1, 2, undefined, undefined, 1];
var check = function (item){return item !== undefined;};
array.every(check)
// this will work for 1 and 2, but will stop at the third element
array.every(function(item) {console.log(item); return true;});
// this will log all the elements, because the function always returns true

Try below.
Array.prototype.every = function(){
for(var i=0;i<this.length;i++){
if(this[i]==undefined)
return false;
}
return true;
}
var array = [];
array[5] = 0;
console.log(array.every());

Because the lenght of the array is predetermined I managed to bypass this by using filter function.
var check = function (item) {return item !== undefined};
array.filter(check).length === predeterminedLength;
Thank you all for answering!!As always great community

Is there an indexOf in javascript to search an array with custom compare function

I need the index of the first value in the array, that matches a custom compare function.
The very nice underscorej has a "find" function that returns the first value where a function returns true, but I would need this that returns the index instead. Is there a version of indexOf available somewhere, where I can pass a function used to comparing?
Thanks for any suggestions!

Here's the Underscore way to do it - this augments the core Underscore function with one that accepts an iterator function:
// save a reference to the core implementation
var indexOfValue = _.indexOf;
// using .mixin allows both wrapped and unwrapped calls:
// _(array).indexOf(...) and _.indexOf(array, ...)
_.mixin({
// return the index of the first array element passing a test
indexOf: function(array, test) {
// delegate to standard indexOf if the test isn't a function
if (!_.isFunction(test)) return indexOfValue(array, test);
// otherwise, look for the index
for (var x = 0; x < array.length; x++) {
if (test(array[x])) return x;
}
// not found, return fail value
return -1;
}
});
_.indexOf([1,2,3], 3); // 2
_.indexOf([1,2,3], function(el) { return el > 2; } ); // 2

There's a standard function in ECMAScript 2015 for Array.prototype.findIndex(). Currently it's implemented in all major browsers apart from Internet Explorer.
Here's a polyfill, courtesy of the Mozilla Developer Network:
// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
Object.defineProperty(Array.prototype, 'findIndex', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return k.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return k;
}
// e. Increase k by 1.
k++;
}
// 7. Return -1.
return -1;
},
configurable: true,
writable: true
});
}

You could do something like this:
Array.prototype.myIndexOf = function(f)
{
for(var i=0; i<this.length; ++i)
{
if( f(this[i]) )
return i;
}
return -1;
};
Regarding Christian's comment: if you override a standard JavaScript method with a custom one with a different the same signature and different functionality, bad thing will likely happen. This is especially true if you're pulling in 3rd party libraries which may depend on the original, say, Array.proto.indexOf. So yeah, you probably want to call it something else.

As others have noted, easy enough to roll your own, which you can keep short and simple for your particular use case:
// Find the index of the first element in array
// meeting specified condition.
//
var findIndex = function(arr, cond) {
var i, x;
for (i in arr) {
x = arr[i];
if (cond(x)) return parseInt(i);
}
};
var moreThanTwo = function(x) { return x > 2 }
var i = findIndex([1, 2, 3, 4], moreThanTwo)
Or if you're a CoffeeScripter:
findIndex = (arr, cond) ->
for i, x of arr
return parseInt(i) if cond(x)

The javascript array method filter returns a subset of the array that return true from the function passed.
var arr= [1, 2, 3, 4, 5, 6],
first= arr.filter(function(itm){
return itm>3;
})[0];
alert(first);
if you must support IE before #9 you can 'shim' Array.prototype.filter-
Array.prototype.filter= Array.prototype.filter || function(fun, scope){
var T= this, A= [], i= 0, itm, L= T.length;
if(typeof fun== 'function'){
while(i<L){
if(i in T){
itm= T[i];
if(fun.call(scope, itm, i, T)) A[A.length]= itm;
}
++i;
}
}
return A;
}

How about such find function ?
(function () {
if (!Array.prototype._find) {
Array.prototype._find = function (value) {
var i = -1, j = this.length;
if (typeof(value)=="function")
for(; (++i < j) && !value(this[i]););
else
for(; (++i < j) && !(this[i] === value););
return i!=j ? i : -1;
}
}
}());

Here comes the coffeescript version of nrabinowitz's code.
# save a reference to the core implementation
indexOfValue = _.indexOf
# using .mixin allows both wrapped and unwrapped calls:
# _(array).indexOf(...) and _.indexOf(array, ...)
_.mixin ({
# return the index of the first array element passing a test
indexOf: (array, test) ->
# delegate to standard indexOf if the test isn't a function
if (!_.isFunction(test))
return indexOfValue(array, test)
# otherwise, look for the index
for item, i in array
return i if (test(item))
# not found, return fail value
return -1
})

using underscore I came up with something copied from their find implementation using _.any:
findIndex = function (obj, iterator, context) {
var idx;
_.any(obj, function (value, index, list) {
if (iterator.call(context, value, index, list)) {
idx = index;
return true;
}
});
return idx;
};
What do you think - do you have any better solutions?