TypeError: The function cannot be performed on the value of 0 in the Array.from

Question

TypeError: The function cannot be performed on the value of 0 in the Array.from

I encountered a peculiar error while attempting to utilize Array.from with Array.prototype.map.

let fn = Array.from.bind(Array); // [Function: bound from]

fn('test') // [ 't', 'e', 's', 't' ]

['test'].map(s => fn(s)) // [ [ 't', 'e', 's', 't' ] ]

['test'].map(fn) // TypeError: 0 is not a function

Complete Error Message:

TypeError: 0 is not a function
    at Function.from (native)
    at Array.map (native)
    at repl:1:10
    at REPLServer.defaultEval (repl.js:260:27)
    at bound(domain.js:287:14)
    at REPLServer.runBound [as eval] (domain.js:300:12)
    at REPLServer.<anonymous> (repl.js:429:12)
    at emitOne (events.js:95:20)
    at REPLServer.emit (events.js:182:7)
    at REPLServer.Interface._onLine (readline.js:211:10)

Can someone provide insight on what could be causing this issue?

javascript arrays

Answer 1

Answer №1

map executes its callback function with three parameters: The entry, the index, and the object being iterated over. Array.from anticipates that if a second argument is provided to it, it's a mapping function, so it attempts to apply it to every "element" forming the array. However, since the index, 0, on the first call isn't a function, the execution of Array.from fails.

To illustrate this differently,

['test'].map(fn)

is not equivalent to

['test'].map(e => fn(e))

but actually corresponds to

['test'].map((e, i, a) => fn(e, i, a))

...where e represents the entry, i is its index, and a is the "array" undergoing iteration by map. Since i is not a function, Array.from encounters an error.

A similar scenario can also occur with various other array methods like forEach, some, ...

If you encounter this issue frequently, you might find it beneficial to have a utility function to extract only the first parameter:

function passOneArg(f) {
    return function(a) { return f.call(this, a); };
}

which can be used in the following way:

['test'].map(passOneArg(fn))

or potentially even

function limitArgs(f, count) {
    return function() {
        return f.apply(this, Array.prototype.slice.call(arguments, 0, count));
    };
}

then

['test'].map(limitArgs(fn, 1))

Although these may have unimpressive names, they serve the purpose effectively... :-)

Answer 2

map executes its callback function with three parameters: The entry, the index, and the object being iterated over. Array.from anticipates that if a second argument is provided to it, it's a mapping function, so it attempts to apply it to every "element" forming the array. However, since the index, 0, on the first call isn't a function, the execution of Array.from fails.

To illustrate this differently,

['test'].map(fn)

is not equivalent to

['test'].map(e => fn(e))

but actually corresponds to

['test'].map((e, i, a) => fn(e, i, a))

...where e represents the entry, i is its index, and a is the "array" undergoing iteration by map. Since i is not a function, Array.from encounters an error.

A similar scenario can also occur with various other array methods like forEach, some, ...

If you encounter this issue frequently, you might find it beneficial to have a utility function to extract only the first parameter:

function passOneArg(f) {
    return function(a) { return f.call(this, a); };
}

which can be used in the following way:

['test'].map(passOneArg(fn))

or potentially even

function limitArgs(f, count) {
    return function() {
        return f.apply(this, Array.prototype.slice.call(arguments, 0, count));
    };
}

then

['test'].map(limitArgs(fn, 1))

Although these may have unimpressive names, they serve the purpose effectively... :-)

Answer 3

Answer №2

Utilize the power of lodash's unary function

import * as _ from 'https://cdn.jsdelivr.net/npm/lodash-es/lodash.min.js'
['ef', 'gh'].map(_.unary(Array.from))

Answer 4

Utilize the power of lodash's unary function

import * as _ from 'https://cdn.jsdelivr.net/npm/lodash-es/lodash.min.js'
['ef', 'gh'].map(_.unary(Array.from))

TypeError: The function cannot be performed on the value of 0 in the Array.from

Answer №1

Answer №2

Similar questions

Angular 13.0 version is experiencing issues when trying to run the "ng serve" command

Initiate a click action upon receiving a focus event

React - triggering a router link action before the link is assigned a value

Is there a way to access comprehensive data pertaining to an ID through Ajax?

Exploring methods to detect when a PHP page has been printed using the 'ctrl+p' shortcut and then subsequently updating

Obtain the number of elements rendered in a React parent component from a switch or route

When incorporating a JS React component in TypeScript, an error may occur stating that the JSX element type 'MyComponent' is not a valid constructor function for JSX elements

Utilize React.js ThemeProvider to dynamically change themes based on routing

Is it possible to pass a PHP array to JavaScript without using Ajax?

Tips for preventing the need to create a function within a loop

How I am able to access this.state in React without the need for binding or arrow functions

Can an object serve as a property name for another object?

Having difficulties grasping the concept of how to communicate effectively with my MySQL database

Strip newline characters from information in AngularJS

Having trouble getting tailwind dark mode to work on next.js?

The AngularJS framework is failing to disable the autocomplete feature for the input field with a password type

Whenever I click on a button, I want to modify the background color of my react-modal

Is the memory usage of node.js proportional to the number of concurrent requests, or is there a potential memory leak?

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

All Event Monitor