What exactly unfolds when utilizing the .map() method in JavaScript/Typescript?

I'm curious about the .map() function and its usage with arrays.

Typically, we use it like this:

function myFunction(num) {
  return num * 2;
}

const numbers = [1, 2, 3, 4];
const newArr = numbers.map((element) => myFunction(element))

However, I came across a code snippet that looks like this:

const resultToRow = (r: MyProductsDto) => ({
  rowData: tableColumns.map(() => r),
});

In this particular example, MyProductsDto is an Interface and tableColumns is an Array. But what does .map(() => r) do exactly?

r isn't a function but an Interface, so why is the arrow function empty with no arguments?

Answer №1

When it comes to the length of tableColumns, there will be references in the rowData.

All values within the references will be identical since they all point to a single address.

r[0] === r[1] === r[2] === r(n)

The map function creates a new array from the original array by passing each element as an argument. Whether or not that argument is accepted is not considered by map; it simply generates a new array based on the return value of the given function.

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

How can I find the number of elements in an array that fall within specific value ranges using PHP

Is it possible to determine the number of elements in an array that fall between two specific values in PHP? Consider this example array: $a = array(1,2,3,5,10); I am interested in finding the length of the array that falls between 2 and 10. In this cas ...

Error occurred while trying to fetch the Backbone.js collection due to undefined value of 'this._byId'

I am currently working with coffeescript and my code is quite straightforward: class SomeCollection extends Backbone.Collection constructor: (@options) -> url: -> "#{$SCRIPT_ROOT}/some/data/#{@options.someId}" model: SomeModel class SomeV ...

Ways to initiate a new animation once another one has concluded

I am looking to initiate a jQuery animation once another one has completed. Initially, there is a slide down effect towards the second navigation bar: $(".navigation-bar1").click(function() { $('html,body').animate({ scrollTop: $(". ...

Troubleshooting my code: The mystery of why Google Map directions won't cooperate!

Can anyone help me figure out why my code for drawing a path between multiple points on a map isn't working? I've tried the code below, but it doesn't draw any paths. What could be causing this issue and how can I solve it? var myTrip = [] ...

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Seeking a Javascript expert, In my custom templates, I have used a link as shown below: <a href='http://www.allbloggertricks.com'>Blogging Tips</a> I would like the page to redirect to example.com if the anchor text is changed from ...

Should HTML input arrays be named as [] or [0]?

I am looking to implement multiple forms with a single submit (save) button. <?php for ($i = 0; $i < count($c); $i++): ?> <div> <input type="radio" name="gender[<?php echo $i ?>]" id="gender_<?php echo $ ...

What is the best way to include generic HTML content in an Angular 2 component?

I am looking to design a versatile modal component that can accommodate various elements, ranging from text to images and buttons. If I were to implement something like the following: <div class="Modal"> <div class="header"></div> ...

Running tests to check for next(err) functionality using supertest and Express JS

When using Express in a route or middleware, you can halt the callback chain by calling next(err) with any object as err. This feature is well-documented and simple to understand. However, I encountered an issue when testing this behavior with SuperTest. ...

Unauthorized API Call: AJAX Jquery Request Results in 401 Error

Hey there! I'm in the process of making a GET request to an API, and I could use some assistance with it. The API I'm working with can be accessed at: . If you'd like to test it out yourself, feel free to visit this URL in your browser: To ...

Set a checkbox to be pre-checked on page refresh using a PHP conditional statement

Thank you for your patience and understanding as I seek help with my issue. I am currently working on a form that consists of checkboxes which control the boolean values in a database. Upon submission, these values are updated in the database and the page ...

Troubleshooting problem with AngularJS orderBy

Excuse me if this comes across as silly. I'm encountering a problem that is reminiscent of this question. While the accepted solution worked, it brought up another issue: Angular doesn't render a new object added to the array. app.controller( ...

utilizing an ajax request to clear the contents of the div

When I click on Link1 Button, I want to use ajax to empty the contents in the products_list div <button type="w3-button">Link1</button> I need help with creating an ajax call that will clear the products in the product_list when the link1 but ...

One might encounter undefined JSON keys when attempting to access them from a script tag

During my attempts to load a specific Json using an Ajax GET request and then parsing it, I encountered an issue when trying to access the Json key from an HTML script tag, as it returned as undefined. To troubleshoot this problem, I decided to log all th ...

Is it possible for Typescript to resolve a json file?

Is it possible to import a JSON file without specifying the extension in typescript? For instance, if I have a file named file.json, and this is my TypeScript code: import jsonData from './file'. However, I am encountering an error: [ts] Cannot ...

Utilizing a combination of Mongo, Mongoose, Multer, and FS for deleting images

Looking at the code snippet below:- var Image = mongoose.model("Image", imageSchema); //Assuming all the configuration of packages are done app.delete("/element/:id", function(req, res) { Image.findByIdAndRemove(req.params.id, function(err) { if(e ...

Unlock the potential of Vue custom props within the asyncData function in your nuxtjs project!

I have a special function in my project that serves as a plugin import Vue from 'vue' function duplicateText(text) { var input = document.createElement('input'); input.setAttribute('value', text); document.body.a ...

Generic function is not assignable due to conditional type

My goal is to restrict the return type of a generic function. Let's simplify with an example. type MyReturnType<T> = T extends string ? number : Function; type Input = string | number; function myFn<T extends string | number>(input: T): M ...

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

I've got a multi-select dropdown with a long list of options. Currently, when I choose a single item, it triggers the Onselect event and adds data from the newArrayAfterProjectFilter array to the myDataList based on certain conditions in the OnselectE ...

Tips for lowering an array of price string objects

let groceriesList = [ { id: 1, product: 'Organic Avocados', price: '$' + 2.99 }, { id: 2, product: 'Almond Milk', price: '$' + 4.75 }, { id: 3, product: 'Dark Chocolate& ...

Data retrieval from client-side fetch request results in a corrupted file upon download

I'm facing an issue while attempting to fetch a file using a GET request and download it directly in the browser. However, after the download is complete and I try to open the file, it seems to be corrupted. Strangely, only .txt files are opening corr ...