JavaScript: The difference in behavior between using Array(3).map() and [...Array(3)].map() is quite puzzling

When using Chrome Version 125.0.6422.76 (Official Build) (64-bit), I have encountered a strange issue with the Array constructor.

https://i.sstatic.net/6HSUS2gB.png

It seems that the length of array 'a' is correctly stored as '3' internally.

I am not overly concerned if Javascript is optimizing by allocating the elements lazily, as long as a length 3 array is returned for the map call in a.map().

However, it appears that this is not the case, as no 'foo' elements are printed as with b.map().

Answer №1

Upon initializing an array using the Array constructor, it results in an empty array. Even though it possesses a length property, JavaScript has simply allocated a block of memory for potential future use without any actual content. This renders the array devoid of any elements to iterate over.

In the second scenario with the b array, it contains elements that are undefined. Hence, it becomes possible to iterate over them.

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

The d3 hierarchy possesses the capability to compute the average values of child nodes

Looking for a solution with d3 visualization that involves averaging up the value of score on the lowest nodes and dynamically adding that average to the parent node above. It seems like there isn't an easy method in d3 for this task. The desired outc ...

Customize the MUI (JoyUI) Autocomplete feature in React using react-hook-form to display a unique value instead of the label

Currently, I am in the process of creating a form that includes JoyUI (material) autocomplete and react-hook-form functionality. The array of objects I am using for my options looks like this: [ { label: "Todo", param: "TODO" }, ...

Hiding content in HTML with the Display:none property

After exploring various posts on this topic, I am still unable to find a solution that fits my specific scenario. Despite the challenges, I thought it would be worth asking for recommendations. Currently, I have a PowerShell script generating a report in ...

Update the `name` attributes of input elements following the retrieval of HTML data from an action using AJAX in an ASP

I am working on a basic ajax request that retrieves a generated HTML from the server. Here is the code snippet: $.ajax({ url: '/GetData' type: "POST", dataType: "html", data: ..., success: function(data) { // In this ...

Utilizing PHP variables to dynamically assign names to radio input tags, and then extracting their values using jQuery or JavaScript

I am facing an issue with my PHP file that generates radio buttons based on unique pets ids. The variable $idperro is constantly changing to distinguish the set of radio buttons. My goal is to insert the value inside the p tag. Here's the PHP code sn ...

Locate the indices of different values within a numpy array

Let's say we have an array X: X = np.array([[4, 2], [9, 3], [8, 5], [3, 3], [5, 6]]) Now, we want to find the index of the row that contains certain values in this array: searched_values ...

JavaScript: How to Build a Digital Grocery List with Browser Storage

Struggling with a tough exercise question, I could use some help deciphering it. https://i.stack.imgur.com/V5he2.png Here is how I've started the code: <!DOCTYPE html> <html> <head> <title></title> <script> fun ...

Can you explain the concept of a factory function to me?

As I delve into learning Javascript, I have encountered terms like factory functions and constructor functions in the realm of object-oriented programming. Despite my attempts to grasp the distinction between them, I still find myself struggling to fully ...

Implementing Express.js allows for the seamless casting of interfaces by the body within the request

I have created a similar structure to ASP.NET MVC and uploaded it on my github repository (express-mvc). Everything seems fine, but I am facing an issue with casting the body inside the request object to match any interface. This is what I am aiming for: ...

Obtaining JSON data in an Angular service: A beginner's guide

My JSON file has the following structure: { "user": [ { "id": 0, "data": [ { "userName": "iheb", "useremail": "", "userPassword": "kkk" } ], "questionnaireListe": [ { ...

Guide on extracting data from a specific column in an object and converting it into a list using JavaScript

Imagine we are working with the following JSON information var example = [{ latitude: 11.1111, longitude: 111.111, name: "for example1", altitude: 88 }, { latitude: 22.2222, longitude: 222.222, name: "for example2 ...

Unlocking the properties of an object using strings within a different object

Is it possible to access object properties using a string with another object in JavaScript? var obj = { title : 'spider' } var hero = { spider : 'is a hero' } console.log( hero.spider );//works fine console.log( hero.obj.tit ...

In the world of React in Meteor, the command event.preventDefault() doesn't seem

I have encountered an issue with my application development. I am utilizing a submit form in Meteor with React, and although I am using event.preventDefault(), the page continues to reload every time the submit button is clicked. Following a brief delay, i ...

Finding elements based on their position using Javascript

I'm searching for an optimal method to identify all elements located within a specific range of pixels from the top of the page. Currently, I have implemented a straightforward test called inRange function inRange(el, from, to) { var top = el.offs ...

Having difficulty sending data to a controller through AJAX in Code Igniter. Can anyone help troubleshoot

I recently started learning PHP OOP and am currently using the Code Igniter framework. I encountered some difficulties in sending data to the controller using AJAX, so I attempted a simple test to check if AJAX was functioning properly, but unfortunately, ...

Show data in a popup using jQuery DataTables and loading content asynchronously via Ajax

I am attempting to display a list in a popup based on an Ajax request. Prior to the Ajax call, the list is contained within the popup. However, after the Ajax request, the list remains on the page instead of inside the popup, and the old list still appears ...

Exploring modifications in axis for Google charts timeline

Can anyone help me figure out how to set my Google Timeline chart to always display 24 hours on the x-axis? Currently, it automatically changes based on the earliest and latest points, but I want it to consistently show all 24 hours. For example: ...

Using a Javascript loop to showcase values from a database

As a Python developer who is new to JavaScript and AJAX, I am currently working on creating a pie chart that displays database values. $(document).ready(function () { google.charts.load('current', { 'packages': ['corechart&ap ...

Integrate Ruby parameter into JavaScript in Rails

I have a div that I want to turn into a link to another page. Typically, we achieve this using link_to link. <% for item in @items %> <%= link_to "Item", item %> # -> or <%= link_to(item) %> <% end %> However, I need the ent ...

Blip of an image then vanishes

Within my web application, I have implemented code to display images and allow users to navigate through them using Next and Previous buttons. The functionality works as expected, but there is an issue where the image briefly flashes and then disappears wh ...