What is preventing me from passing str.indexOf into the map function in JavaScript?

Question

What is preventing me from passing str.indexOf into the map function in JavaScript?

How come I'm unable to perform the following action?

let str = "A string containing * and ^ as well as $";
let indices = ["*", "^", "$"].map(str.indexOf); // not functional

I prefer not to introduce another function that duplicates the functionality of the method itself...

[...].map(function(token) { return str.indexOf(token); }); // it works

Is there an elegant solution for this issue?

javascript

Answer 1

Answer №1

When comparing

function(token) { return str.indexOf(token); }

to

str.indexOf

The main difference lies in the context problem that arises with the latter. In the second scenario, instead of str, it would be window. The expression str.indexOf refers to the value of the property named indexOf within the string object. While it is a function, there is no way to determine which object it is originated from based solely on this value. Therefore, passing str.indexOf simply means passing the function itself, not a reference to str.

["*", "^", "$"].map(str.indexOf);

is essentially the same as

["*", "^", "$"].map(function(token) { return window.indexOf(token); });

If an indexOf function existed in the global window scope.

To further clarify, although it's not recommended, a function can be bound to a specific object. For example, by using:

var f = str.indexOf.bind(str); // creates a copy of indexOf, bound to str
["*", "^", "$"].map(f);

the this keyword inside f will refer to str when the function is invoked.

Answer 2

When comparing

function(token) { return str.indexOf(token); }

to

str.indexOf

The main difference lies in the context problem that arises with the latter. In the second scenario, instead of str, it would be window. The expression str.indexOf refers to the value of the property named indexOf within the string object. While it is a function, there is no way to determine which object it is originated from based solely on this value. Therefore, passing str.indexOf simply means passing the function itself, not a reference to str.

["*", "^", "$"].map(str.indexOf);

is essentially the same as

["*", "^", "$"].map(function(token) { return window.indexOf(token); });

If an indexOf function existed in the global window scope.

To further clarify, although it's not recommended, a function can be bound to a specific object. For example, by using:

var f = str.indexOf.bind(str); // creates a copy of indexOf, bound to str
["*", "^", "$"].map(f);

the this keyword inside f will refer to str when the function is invoked.

Answer 3

Answer №2

As explained by @dystroy, the method you are attempting is not allowed. However, an alternative solution would be to utilize the map function with a specified context in order to achieve the desired outcome:

var text = "This is a sample text containing * and ^ symbols"
var positions = ["*", "^", "$"].map(text.indexOf, text);
//                                              ^text serves as the context
//=> positions = [23, 32, -1]

Answer 4

As explained by @dystroy, the method you are attempting is not allowed. However, an alternative solution would be to utilize the map function with a specified context in order to achieve the desired outcome:

var text = "This is a sample text containing * and ^ symbols"
var positions = ["*", "^", "$"].map(text.indexOf, text);
//                                              ^text serves as the context
//=> positions = [23, 32, -1]

What is preventing me from passing str.indexOf into the map function in JavaScript?

Answer №1

Answer №2

Similar questions

Navigating through Node and Express on Azure App Service

I'm trying to understand a JSON object that has multiple key names pointing to a single value. How can I properly interpret this in

Tips for sending User First Name and ID through a Javascript tag on the WordPress Backend

Choosing Drop Down Options Dynamically with Jquery

Reduce the density of x-axis labels in highcharts

Encountering the below error message when running the command to initialize expo project:

Tips for Preventing Repetition of Locations on a Website for Reviewing Places

Look through the contents of each child within a div to locate specific text, then conceal any that do not include it

Display text on the screen with a customized design using JavaScript's CSS styles

What is the best approach for managing multiple HTTP requests in my specific situation?

Creating a stylish background gradient between two handles on a jQuery Slider with CSS

Encountering an issue when implementing a conditional check within the .map() function utilizing ES6 syntax

External script implementing StratifiedJSIt is possible for an external script

Overabundance of Recursive Calls in Node.js Project Dependencies

Utilizing columns within the 'segment' element in Semantic-ui to enhance layout design

Modify CSS image according to the user interface language in asp.net

The AngularJS array data is not displaying correctly

Flow - secure actions to ensure type safety

The state is failing to initiate a re-render despite a change in its state

During bundling, utilize an npm script to copy the package.json file to the dist directory