Unveiling the enigma of Array.from()

Can anyone provide an explanation for this?

Array.from(undefined);
// Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Array.from(null);
// Uncaught TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

Array.from('Break this up');
// ["B", "r", "e", "a", "k", " ", "t", "h", "i", "s", " ", "u", "p"]

Array.from(123);
// []

Why does the last example result in an empty array? Since 123 is not iterable.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from(arrayLike [, mapFn [, thisArg]])

arrayLike An array-like or iterable object to convert to an array.

Answer №1

This specific behavior is due to the way it's outlined in the standard:

  1. The definition of Array.from can be found at . Pay attention to step 7 stating "
    Let arrayLike be ! ToObject(items).
    "
  2. ToObject is explained at . It specifies exceptions for undefined and null, but not for numbers.
  3. Upon revisiting Array.from, steps 8-13 detail how an array is constructed and filled. However, when ToObject encounters a number, it treats it as an empty object without a len property or indexed values, resulting in an empty array being returned.

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

Removing an element from an array in a Laravel database using AngularJS

I am currently working on a project where I need to delete an item from my Laravel database, which is a simple Todo-List application. To achieve this, I have implemented a TodosController in my main.js file using AngularJS and created a Rest API to connect ...

Contrast in functionality between a pair of variables within a controller

Could you please clarify the distinction between two variables a1 and a2: app.controller("someCtrl",function(){ this.a1=somevalue; var a2=somevalue; }); Also, can you explain the lifespan of variable a2? ...

Is it possible to use a single function to both set the state and return JSX?

I'm currently grappling with creating a function that, when called, will update the state to an object {item: 'whatever the user types', list: [...list, todo]}. The challenge I'm facing is figuring out how to update the state and return ...

What exactly is the data type of setInterval in TypeScript?

If I want to define the type of a variable that will be used with setInterval in the following code snippet: this.autoSaveInterval = setInterval(function(){ if(this.car.id){ this.save(); } else{ this.create(); } ...

Load the values into the dropdown list based on the selection from the previous dropdown menu

Currently, I am working on implementing cloning functionality for select boxes. There are 3 select boxes: country, state, city. The user selects the country first which then populates the state select box based on the ID, and similarly, the city dropdown ...

There seems to be a problem with the bundle.js file caused by Uglify

I've just finished a project and now I'm ready to start building it. Utilizing a boilerplate project, I still find myself struggling to comprehend all the npm/webpack intricacies happening behind the scenes. Whenever I try to run "npm start", I k ...

Manage numerous canvas animations

Is there a way to interact with an already drawn Canvas animation? I am attempting to create 3 distinct tracks that can be controlled by a "Start" and "Stop" button. However, when I click the Start button on the first canvas, it triggers the last canvas in ...

Capture microphone and audio in a SIP call with sip.js

Greetings Stack Overflow community! I am in need of assistance with a project involving sip.js and VoIP for making real phone calls. The Objective I aim to enable users to record audio from both parties during a call and save the data on a server (either ...

Creating a seamless thread using AngularJS

I am working on a Spring MVC application that utilizes HTML and Angular on the client side. I have a method in my Angular controller that needs to run every 5 seconds. How can I achieve this using Angular? Thank you for your assistance. $scope.inspectio ...

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

Get rid of the arrow that is displayed when using the `time` input type in HTML5

Recently, I encountered an issue with the default HTML5 code snippet. My custom background looked perfect except for a pesky black arrow appearing on the right side. In this image, you can see the problematic black arrow that needs to be removed. I attemp ...

What is the correct way to utilize the karma-ng-html2js-preprocessor?

I'm working on a directive called stat24hour: angular .module('app') .directive('stat24hour', stat24hour); function stat24hour(req) { var directive = { link: link, template: 'scripts/widgets/templ ...

Web Development using HTML and JavaScript

Here is the code for a search bar engine that I am working on. <form id="frmSearch" class="search1" method="get" action="default.html" /> <input class="search" id="txtSearch" type="text" name="search_bar" size="31" maxlength="255" value=" ...

Converting an array key into a string representation by compulsion

I need help maintaining the order of an array that has mixed key types. Most of the keys are represented by strings, but if a number is entered as a key, it moves to the front of the array. How can I ensure that a key which is a number remains as a string ...

Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...

Having trouble locating the name WebGLObject in my TypeScript code

Every time I try to run ng serve command An error pops up on my screen saying: "WebGLObject cannot be found." ...

Does the Array Splice method always remove an item from the end?

I'm having trouble with deleting an item from an array using Array.splice. It seems to always delete the item from the end instead of where I want it to be removed. I'm working with Vue.js and dynamically adding items to an array, but when I try ...

Unable to get the deletion functionality to work for Dropzone.js and PHP script

I am currently using dropzone to handle file uploads. My goal is to delete the files on the server when the user clicks on the removeLink. I have implemented an Ajax function that calls a .php site for this purpose. However, I am facing an issue where I am ...

What is the best way to showcase top-rated posts from my feed of posts?

I have a basic PHP script that allows users to post without logging in. Once they submit their posts, the posts are displayed below in a feed similar to Facebook's news feed. I'm now looking to extract the three most liked posts and display them ...

Showing a div element with the power of JavaScript

I want to enhance the accessibility of my website for users who do not have JavaScript enabled. Content that will be visible if the user has JavaScript enabled. Content visible when JavaScript is disabled. By default, DisableJS is set to Display:none; ...