"Using the every() method in underscore.js with an undefined parameter

Question

"Using the every() method in underscore.js with an undefined parameter

I recently wrote some code and encountered an unexpected result:

var a = new Array(10); // should be [undefined * 10] 
var b = _.every(a, function(m){
    if(_.isUndefined(m)){
        return false;
    }
    return true;
});

I anticipated that b would be 'false', but to my surprise it returned 'true'. Why did it return 'true' instead?

Curious about this outcome, I made a modification:

var c = [undefined, undefined];
var d = _.every(c, function(m){
    if(_.isUndefined(m)){
        return false;
    }
    return true;
});

In contrast to the previous case, d returned 'false'. What caused these different results?

If you're interested, feel free to test this scenario using http://jsfiddle.net/3qj4B/3/

javascript underscore.js

Answer 1

Answer №1

Creating an array using the class initializer allocates 10 spaces of memory, but they are not initialized yet. This means there is no looping over any elements in the array.

Take a closer look at the every source code:

_.every = _.all = function(obj, iterator, context) {
    iterator || (iterator = _.identity);
    var result = true;
    if (obj == null) return result;       
    if (nativeEvery && obj.every === nativeEvery) return obj.every(iterator, context);
    each(obj, function(value, index, list) {
      if (!(result = result && iterator.call(context, value, index, list))) return breaker;
    });
    return !!result;
};

The variable result is initialized as true and returned because there are no iterations performed by each. This explains why true is being returned.

In your fiddle, if you add a console.log(m) inside the handler, no logs will be displayed in the console since each does not iterate at all.

Answer 2

Creating an array using the class initializer allocates 10 spaces of memory, but they are not initialized yet. This means there is no looping over any elements in the array.

Take a closer look at the every source code:

_.every = _.all = function(obj, iterator, context) {
    iterator || (iterator = _.identity);
    var result = true;
    if (obj == null) return result;       
    if (nativeEvery && obj.every === nativeEvery) return obj.every(iterator, context);
    each(obj, function(value, index, list) {
      if (!(result = result && iterator.call(context, value, index, list))) return breaker;
    });
    return !!result;
};

The variable result is initialized as true and returned because there are no iterations performed by each. This explains why true is being returned.

In your fiddle, if you add a console.log(m) inside the handler, no logs will be displayed in the console since each does not iterate at all.

Answer 3

Answer №2

There is a fine distinction between initializing an array using the Array constructor with an initial size and initializing it with a specific list of undefined entries. The former, utilizing the Array constructor, does not generate properties corresponding to the indexes, whereas explicit initialization does.

I have a suspicion that Underscore makes use of the built-in .forEach() function whenever possible, which means it will not invoke its callback for uninitialized indexes. Consequently, in the initial test scenario, the callback to _.every() is never triggered at all.

edit — Essentially, the Array constructor behaves somewhat like this:

var a = []; a.length = 10;

When you extend an array by increasing its length in that manner, the new implicit index positions remain uninitialized. This marks the fundamental disparity between the absence of a property and the presence of a property without a value. In both instances, accessing the property results in undefined. Thus:

var o = {};

if (o.something == undefined) // this condition evaluates to true

and subsequently:

var o = { something: undefined };

if (o.something == undefined) // also true

One way to distinguish between these two scenarios is by utilizing the in operator:

if ('something' in o) // only true in the latter case

Answer 4

There is a fine distinction between initializing an array using the Array constructor with an initial size and initializing it with a specific list of undefined entries. The former, utilizing the Array constructor, does not generate properties corresponding to the indexes, whereas explicit initialization does.

I have a suspicion that Underscore makes use of the built-in .forEach() function whenever possible, which means it will not invoke its callback for uninitialized indexes. Consequently, in the initial test scenario, the callback to _.every() is never triggered at all.

edit — Essentially, the Array constructor behaves somewhat like this:

var a = []; a.length = 10;

When you extend an array by increasing its length in that manner, the new implicit index positions remain uninitialized. This marks the fundamental disparity between the absence of a property and the presence of a property without a value. In both instances, accessing the property results in undefined. Thus:

var o = {};

if (o.something == undefined) // this condition evaluates to true

and subsequently:

var o = { something: undefined };

if (o.something == undefined) // also true

One way to distinguish between these two scenarios is by utilizing the in operator:

if ('something' in o) // only true in the latter case

"Using the every() method in underscore.js with an undefined parameter

Answer №1

Answer №2

Similar questions

Is there a way for me to obtain output from a different Angular component?

Flow error: Unable to access the value of this.props.width as the property width is not defined in T

What is the best way to retrieve an attribute from an object dynamically using JavaScript?

Interested in trying out Express and socket.io for chatting?

The mobile screen size shortcuts are malfunctioning, while the regular links are functioning properly

Tips for organizing a list in Angular 1 when a button is clicked

Issue with undefined object in ExpressJS PUT method

The Next.js component only appears after a page reload

Tips for emphasizing specific sections of text in CodeMirror utilizing substring positions

Exploring all the options within a dropdown menu using JQuery

What is the best way to reset an a-select component in Ant Design Vue?

What is the best way to provide Monaco editor's loader.js and its dependencies on a local server for my React project?

Enhancing MongoDB query efficiency using Promise technology

Troubleshooting: Issues with updating a text field in Vue test utils using Jest

Mastering the Implementation of Timetable.js in Angular with TypeScript

Tips for presenting JSON date in JavaScript using Google Chart

The program encountered an unexpected identifier 'getProject' instead of ';'. It was expecting to find a semicolon after the async variable declaration

Execute the JavaScript [ window:print() ] function once the webpage has finished loading along with any

Guide on associating user IDs with user objects

Tap on the HTML5 video to exit the fullscreen mode