What was Douglas Crockford trying to convey with the term 'created in an alternate window or frame'?

What did Douglas Crockford mean when he mentioned that the is_array() test might not correctly identify arrays created in a different window or frame?

var is_array = function (value) {
    return value &&
        typeof value === 'object' &&
        value.constructor === Array;

How does the following code account for windows and frames when determining if a variable is an array?

var is_array = function (value) {
    return value &&
        typeof value === 'object' &&
        typeof value.length === 'number' &&
        typeof value.splice === 'function' &&
        !(value.propertyIsEnumerable('length'));
};
javascriptarrays

Answer №1

Consider this scenario: If you have an iframe with its own window, any Array created within that context will not pass a different window's test. This is due to the assumption made by the last condition, which references the current window's Array object, not the one in the iframe.

var isArray = document.querySelector("iframe").contentWindow.Array === Array;
// false (incorrect, it actually is an array)

Check out this jsFiddle.

The alternative approach involves understanding that typeof categorizes an Array as an "object", and examining properties specific to Arrays.

However, this method can be deceived by creating an object that mimics an array.

var isArray = is_array(Object.create({length: 0, splice: function() {}}));
// true (not accurate, it's not truly an array)

Explore this jsFiddle.

Another technique involves utilizing Object's toString() method to retrieve the internal class.

var isArray = ({}).toString.call(value) == "[object Array]";
// true (correctly identifies it as an array)

View this jsFiddle.

This method is effective in a multi-window setup and cannot be easily fooled (though it may involve more processing, it is unlikely to cause performance issues).

Answer №2

In my opinion, Alex's approach outshines Crockford's. This response aims to highlight the flaw in Crockford's methodology.

Consider the following:

I intentionally crafted a defective object.

function Silly(){}
Silly.prototype.length = 0;
Silly.prototype.splice = function () {}

var silly = new Silly();

is_array(silly);
// true

Clearly, if you encounter someone assigning length to the prototype, feel free to express your frustration.

However, this is acceptable:

function Average(){
    Object.defineProperty(this, 'length', {
        get: function () { return 42; }, 
        enumerable: false
    });
}
Average.prototype.splice = function () {}

var a = new Average();

is_array(a);
// true

Therefore, it is best not to attempt to outsmart common practices, as you cannot predict what other developers might do.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Validation of phone numbers based on country codes

How can I validate phone numbers based on the selected country in Angular? Are there any Angular packages specifically for this task? I've attempted to use regex, but it only works for certain countries. I need a solution that can validate mobile an ...

javascriptangularjsvalidationpackage

Paragraph Separated by Bullets Without Bullets At End of Line

I need assistance in creating a unique type of list that I call a "bullet separated paragraph list" by using a javascript array of strings. For example: item • item • item • item • item     item • item • item • item item • ...

javascripthtmlcss

Combining Multiple 3D JSON Objects in JavaScript [or jQuery]

Looking to combine multiple JSON objects into one? I have a code snippet that you can use! Here is the code: http://jsfiddle.net/5Uz27/ The issue with this code is that it only merges objects on the first level, causing deeper levels to be overwritten. T ...

javascriptjqueryjsonobject

Do form validations affect the values assigned to ng-model objects?

If a form has the structure below: <form> <input type="text" required ng-model='myValue' ng-maxlength='5'></input> {{myValue}} {{myValue.length}} </form> Is there a way to prevent the model from b ...

javascriptformsangularjsvalidation

JavaScript form not working on submission

When my form is submitted, a function is called that successfully redirects users on desktop to either the download-confirmation or download-failure page. However, when testing on mobile devices such as iOS and iPad, the redirection does not seem to work. ...

javascripthtmljqueryajaxforms

Testing React components with Jest by mocking unnecessary components

Consider a scenario where we have the Page component defined as: const Page = () => <> <Topbar /> <Drawer /> <Content /> </> When writing an integration test to check interactions within the Drawer and Con ...

javascriptreactjsjestjsintegration-testingenzyme

Information submitted through an ajax request does not get saved in the $_POST array

After successfully executing an AJAX request using GET, I decided to try POST this time. However, when attempting to send data, a baffling error message appeared in the console - NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED: 'JavaScript component does ...

phpjavascriptajaxpost

Exploring Tmbd Movie Database with React.js - Results of searches will only display after the application is recompiled

Presented here is my component. The challenge I am facing pertains to the fact that upon entering a search query, no results are displayed until I manually save in the code editor and trigger a recompilation of the application. Is there a more efficient ap ...

javascriptreactjs

How can I simply show a specific value from an object in Vue?

I've created a Vue application that filters messages and displays them on a page. Currently, when a user selects a message from the list, the entire JSON data associated with that message is shown on the page. However, I want to only display a specifi ...

javascriptarraysvue.jsvue-componentvuetify.js

Height Miscalculation: Chrome and FF encounter window dimension

There is a large application with numerous pages. When I use the console to execute console.log($(window).height()) on any page within the application, it returns the expected result: the height of the window, not the document. For instance: $(window).he ...

javascripthtmlcssgoogle-chromeprimefaces

Is it possible to modify the host header within an Angular app?

I'm experiencing a vulnerability issue and to resolve it, I need to utilize SERVER_NAME instead of the Host header. Is it possible to accomplish this using Angular? ...

javascriptangular

Gather information on a webpage

I am attempting to extract a table from the following page "https://www.hkex.com.hk/Mutual-Market/Stock-Connect/Statistics/Historical-Monthly?sc_lang=en#select1=0&select2=0". After using the inspect/network function in Chrome, it appears that the data ...

javascriptpythonjsonpandasweb-scraping

Customize the theme of Ant Design for VueJS

I have successfully set up my Vue3 application with Tailwind and Ant Design. However, I am facing issues with customizing the Ant Design theme. I have been referring to this guide. When trying to customize the theme, I encountered the following error: Err ...

javascriptvue.jswebpack

Adjust the color of the active link on the page using Angular and CSS

I have a project that I need to modify by adding a sub menu that appears on every page but is only coded once. My goal is to highlight the link for the current page, all within one HTML snippet. Although the list renders correctly, I'm struggling to g ...

javascripthtmlcssangularjs

Issue with fullcalendar: difficulty displaying events using ajax after clicking 'previous' or 'next' button

I am currently working on creating a calendar using fullcalendar. To retrieve data for the month, I make an external ajax request. Here are the key variables I utilize to render the fullcalendar: eventsJsonArray - used to load all events for the month ...

javascriptphpjquerycssajax

jquery unbinding events can lead to faster performance

I'm in the process of creating a content-heavy slideshow page that heavily relies on event triggers, with about half of them utilizing the livequery plugin. I'm curious if unloading these events between slides to ensure only the active slide has ...

javascriptjquery

Efficiently input text box values into a canvas in real-time using HTML canvas and keypress

There are three text boxes labeled textbox1, textbox2, and textbox3. I am looking to transfer the values entered into these text boxes directly onto a canvas (cnv) whenever a user types in them, and remove the value from the canvas when it is deleted fro ...

javascriptjqueryhtmlhtml5-canvas

Detach an item from its parent once it has been added to an array

Currently, I am facing an issue with a form on my blog. The blog is represented as an object that contains multiple content objects within it. I seem to be experiencing some confusion because the reactivity of the content I add to the Array persists with t ...

javascriptarraysvue.jsvuejs3

Can Vuejs delay the calculation of a computed property until the component is "ready"?

Within my Vue.js application, I have a `computed` property that relies on a value fetched from an AJAX call. I am looking for a way to delay the calculation of this `computed` property until after the `ready` method has completed. While everything is fun ...

javascriptvue.js

Using Webdriver to dynamically enable or disable JavaScript popups in Firefox profiles

I am currently working on a test case that involves closing a JavaScript popup. The code functions correctly in a Windows environment, but when I try to deploy it on a CentOS based server, I encounter the following error: Element is not clickable at point ...

javascriptjavaseleniumfirefoxwebdriver