163

Is there a way in Javascript to write something like this easily:

[1,2,3].times do {
  something();
}

Any library that might support some similar syntax maybe?

Update: to clarify - I would like something() to be called 1,2 and 3 times respectively for each array element iteration

1
  • 4
    I would say there is no feature like this in JS, and it's a top 5 missing feature. It is very useful for testing software, more than anything. Jan 18, 2017 at 20:01

23 Answers 23

155

Just use a for loop:

const times = 10;

for(let i = 0; i < times; i++){
    doSomething();
}
6
  • 8
    thank you! I would like to benefit from a declarative syntax (just like Jasmine etc) Jun 12, 2012 at 9:28
  • 3
    right, but a functional for-loop declarative syntax would also be much better Jan 18, 2017 at 19:59
  • 3
    Yes please, I'm sick and tired of being forced declarative shit all over for no reason. It's a great tool to use when you need it, but a tool not a holy mandate.
    – Mihai
    Nov 11, 2021 at 10:50
  • 3
    Or use a while(times--) if you want it in less keystrokes!
    – ptvty
    Jan 20, 2022 at 17:07
  • 1
    Just profiled this, on both Chrome and Firefox currently, this imperative syntax is faster than any of the the declarative syntax versions described in this question. tl;dr: Yes, use a for loop. Aug 25, 2022 at 7:05
133

Possible ES6 alternative.

Array.from(Array(3)).forEach((x, i) => {
  something();
});

And, if you want it "to be called 1,2 and 3 times respectively".

Array.from(Array(3)).forEach((x, i) => {
  Array.from(Array(i+1)).forEach((x, i2) => {
    console.log(`Something ${ i } ${ i2 }`)
  });
});

Update:

Taken from filling-arrays-with-undefined

This seems to be a more optimised way of creating the initial array, I've also updated this to use the second parameter map function suggested by @felix-eve.

Array.from({ length: 3 }, (x, i) => {
  something();
});
8
  • 3
    I should caveat this by saying this is ok if you're just quickly scripting something up, but the performance is horrible, so don't use it for intensive recursion or in production at all probably.
    – nverba
    Jan 21, 2017 at 9:44
  • 3
    If terseness is the goal (and actually, even if it isn't), pass the function instead of calling it: Array.from(Array(3)).forEach(something)
    – kvsm
    Jul 9, 2018 at 0:39
  • 1
    Works with react expression rendering as well. Dec 8, 2018 at 21:38
  • 8
    Array.from() has an optional second parameter mapFn, which allows you to execute a map function on each element of the array, so there is no need to use forEach. You can just do: Array.from({length: 3}, () => somthing() )
    – Felix Eve
    Nov 22, 2019 at 9:42
  • 1
    Array.from({length: 3}, something)
    – Toxiro
    Jun 29, 2023 at 22:17
80

The easiest way is by destructuring the Array,

which automatically sets undefined for each item, if the item's value was not set:

[...Array(5)].map((item, i) => console.log(item, i))

The keys Array method can also be used to generate an Array of indices values:

[...Array(3).keys()] // [0, 1, 2]

Alternatively, create an Array and fill all items with undefined before using map:

👉 Read detailed reason why map is skipping never-defined array items

⚠️ Array.fill has no IE support

Array(5).fill().map((item, i) => console.log(item, i))


If you want to make the above more "declarative", my currently opinion-based solution would be:

const iterate = times => callback => [...Array(times)].map((n,i) => callback(i))

iterate(3)(console.log)


Using old-school (reverse) loop:

// run 5 times:
for( let i=5; i--; )
   console.log(i) 

Or as a declarative "while":

const run = (cb, ...args) => count => { while(count--) cb(...args) }

// executes the callback with whatever arguments, 3 times
run(console.log, 1,2,3)(3)

4
  • 4
    For piece of mind I ran a uuid function 50k times to make sure it never duplicated a uuid. So I profiled the top loop vs the bottom just for kicks, just running in the middle of a normal page load using chrome dev tools if im not being dumb I think its ~1.2billion compares using Array.indexOf() plus generating 50k uuids. newschool = 1st-5561.2ms 2nd-5426.8ms | oldschool = 1st-4966.3ms / 2nd-4929.0ms Moral of the story if u are not in the billion+ range u would never notice a difference running these 200, 1k, even 10k times to do something. Figured someone might be curious like me.
    – rifi2k
    Feb 15, 2019 at 3:22
  • That is correct and has been known for many years. The different approaches were not presented for speed benefits but for older browsers' support.
    – vsync
    Feb 15, 2019 at 9:41
  • 3
    Odviously everyone that reads this thread, knows you didn't present the examples to compare their speed. I just happened to use them to run a little test and figured I would share some info that someone down the road might find interesting. I'm not really correct because I wasn't really answering a question just displaying information and giving a reminder to not sweat the speed of a loop when your only doing a few things that will end in a couple ms anyways. It's not really known either because the same test a year ago in ie may find one 50% slower because browsers change all the time.
    – rifi2k
    Feb 15, 2019 at 10:33
  • 3
    or for(var i=10; i--; console.log(i)); Feb 3, 2022 at 16:30
51

This answer is based on Array.forEach, without any library, just native vanilla.

To basically call something() 3 times, use:

[1,2,3].forEach(function(i) {
  something();
});

considering the following function:

function something(){ console.log('something') }

The output will be:

something
something
something

To complete this questions, here's a way to do call something() 1, 2 and 3 times respectively:

It's 2017, you may use ES6:

[1,2,3].forEach(i => Array(i).fill(i).forEach(_ => {
  something()
}))

or in good old ES5:

[1,2,3].forEach(function(i) {
  Array(i).fill(i).forEach(function() {
    something()
  })
}))

In both cases, the output will be

The output will be:

something

something
something

something
something
something

(once, then twice, then 3 times)

4
  • 23
    This is incorrect because it doesn't satisfy this part of the question: 'I would like something() to be called 1,2 and 3 times'. Using this code something is only called 3 times, it should be called 6 times.
    – Ian Newson
    Aug 31, 2016 at 11:45
  • Then I guess it's been selected as best answer as it may be a good cleaner start.
    – vinyll
    Jan 20, 2017 at 23:33
  • 4
    You could also use [...Array(i)] or Array(i).fill(), depending on your needs for the actual indexes. Feb 15, 2018 at 11:06
  • 1
    If you're not interested in any arguments passed, use .forEach(something)
    – kvsm
    Jul 9, 2018 at 0:44
26

With lodash:

_.each([1, 2, 3], (item) => {
   doSomeThing(item);
});

//Or:
_.each([1, 2, 3], doSomeThing);

Or if you want to do something N times:

const N = 10;
_.times(N, () => {
   doSomeThing();
});

//Or shorter:
_.times(N, doSomeThing);
18

Since you mention Underscore:

Assuming f is the function you want to call:

_.each([1,2,3], function (n) { _.times(n, f) });

will do the trick. For example, with f = function (x) { console.log(x); }, you will get on your console: 0 0 1 0 1 2

3
  • Indeed, I thought you wanted separation.
    – ggozad
    Jun 15, 2012 at 9:11
  • 4
    _(3).times(function(n){return n;}); should do the trick. See the docs here.
    – Chip
    Oct 9, 2014 at 1:26
  • This is the only answer that actually answers the question.
    – Julian
    Mar 15, 2021 at 12:07
15

You can also do the same thing with destructuring as follows

[...Array(3)].forEach( _ => console.log('do something'));

or if you need index

[...Array(3)].forEach(( _, index) => console.log('do something'));
14

How about a simple while.

let times = 5;

while (times--) {

    console.log(times+1)

}

References on how this works: Falsy and Decrement (--)


Edit: If there's a possibility for times to be manipulated elsewhere, it's safer to use times-- > 0 instead of times-- to prevent an infinite loop if the times drops below 0

9

If you can't use Underscorejs, you can implement it yourself. By attaching new methods to the Number and String prototypes, you could do it like this (using ES6 arrow functions):

// With String
"5".times( (i) => console.log("number "+i) );

// With number variable
var five = 5;
five.times( (i) => console.log("number "+i) );

// With number literal (parentheses required)
(5).times( (i) => console.log("number "+i) );

You simply have to create a function expression (of whatever name) and assign it to whatever property name (on the prototypes) you would like to access it as:

var timesFunction = function(callback) {
  if (typeof callback !== "function" ) {
    throw new TypeError("Callback is not a function");
  } else if( isNaN(parseInt(Number(this.valueOf()))) ) {
    throw new TypeError("Object is not a valid number");
  }
  for (var i = 0; i < Number(this.valueOf()); i++) {
    callback(i);
  }
};

String.prototype.times = timesFunction;
Number.prototype.times = timesFunction;
1
  • 1
    I would have to reinvestigate how bad it is it to patch the prototype, but usually it's just fine Jan 18, 2017 at 20:08
1

Just use a nested loop (maybe enclosed in a function)

function times( fct, times ) {
  for( var i=0; i<times.length; ++i ) {
    for( var j=0; j<times[i]; ++j ) {
      fct();
    }
  }
}

Then just call it like this:

times( doSomething, [1,2,3] );
1

Array.from() (ES6)


Array.from() creates a new Array instance from either an iterable object (like Array, Set, or Map) or from an Array-like object that has a native length property (such as String or Function).

You can also attach a callback function that will be called on each iterated element:

function doSomething(val) {
  console.log(val);
}

Array.from([1,2,3], doSomething); // 1,2,3

0
times = function () {
    var length = arguments.length;
    for (var i = 0; i < length ; i++) {
        for (var j = 0; j < arguments[i]; j++) {
            dosomthing();
        }
    }
}

You can call it like this:

times(3,4);
times(1,2,3,4);
times(1,3,5,7,9);
1
  • +1 - This utilizes the native JavaScript ability to call functions with variable amounts of parameters. No extra library needed. Nice solution Jun 12, 2012 at 17:26
0

These answers are all good and well and IMO @Andreas is the best, but many times in JS we have to do things asynchronously, in that case, async has you covered:

http://caolan.github.io/async/docs.html#times

const async = require('async');

async.times(5, function(n, next) {
    createUser(n, function(err, user) {
        next(err, user);
    });
}, function(err, users) {
    // we should now have 5 users
});

These 'times' features arent very useful for most application code, but should be useful for testing.

0
const loop (fn, times) => {
  if (!times) { return }
  fn()
  loop(fn, times - 1)
}

loop(something, 3)
0

There is a fantastic library called Ramda, which is similar to Underscore and Lodash, but is more powerful.

const R = require('ramda');

R.call(R.times(() => {
    console.log('do something')
}), 5);

Ramda contains plenty of useful functions. See Ramda documentation

1
  • I love this library as a modern and elegant FP solution.
    – momocow
    Aug 18, 2020 at 7:03
0

Assuming we can use some ES6 syntax like the spread operator, we'll want to do something as many times as the sum of all numbers in the collection.

In this case if times is equal to [1,2,3], the total number of times will be 6, i.e. 1+2+3.

/**
 * @param {number[]} times
 * @param {cb} function
 */
function doTimes(times, cb) {
  // Get the sum of all the times
  const totalTimes = times.reduce((acc, time) => acc + time);
  // Call the callback as many times as the sum
  [...Array(totalTimes)].map(cb);
}

doTimes([1,2,3], () => console.log('something'));
// => Prints 'something' 6 times

This post should be helpful if the logic behind constructing and spreading an array isn't apparent.

0

I'm a little late for the party but I want to leave here my sollution too.

This function will do a task and return it's result as an array.

function doN<T>(
  n: number,
  task: ( i: number ) => T
): T[] {
  return [ ...Array( n ) ].map( ( _, index ) => ( task( index ) ) )
}

In my case I'm using it to render a React component N times:

const components = doN<ReactNode>(
  products.lenght,
  ( iteration ) => (<MyComponent key={products[ iteration ].id}>
    {products[ iteration ].name}
  </MyComponent>)
)
-1

you can use

Array.forEach

example:

function logArrayElements(element, index, array) {  
    console.log("a[" + index + "] = " + element);  
}  
[2, 5, 9].forEach(logArrayElements)

or with jQuery

$.each([52, 97], function(index, value) { 
  alert(index + ': ' + value); 
});

http://api.jquery.com/jQuery.each/

1
-1
// calls doSomething 42 times
Array( 42 ).join( "x" ).split( "" ).forEach( doSomething );

and

// creates 42 somethings
var somethings = Array( 42 ).join( "x" ).split( "" ).map( () => buildSomething(); );

or ( via https://stackoverflow.com/a/20066663/275501 )

Array.apply(null, {length: 42}).forEach( doSomething );
-1
var times = [1,2,3];

for(var i = 0; i < times.length;  i++) {
  for(var j = 0; j < times[i];j++) {
     // do something
  }
}

Using jQuery .each()

$([1,2,3]).each(function(i, val) {
  for(var j = 0; j < val;j++) {
     // do something
  }
});

OR

var x = [1,2,3];

$(x).each(function(i, val) {
  for(var j = 0; j < val;j++) {
     // do something
  }
});

EDIT

You can do like below with pure JS:

var times = [1,2,3];
times.forEach(function(i) {
   // do something
});
-1

Using Array.from and .forEach.

let length = 5;
Array.from({length}).forEach((v, i) => {
  console.log(`#${i}`);
});

-1

TypeScript Implementation:

For those of you who are interested in how to implement String.times and Number.times in a way that is type safe and works with the thisArg, here ya go:

declare global {
    interface Number {
        times: (callbackFn: (iteration: number) => void, thisArg?: any) => void;
    }
    interface String {
        times: (callbackFn: (iteration: number) => void, thisArg?: any) => void;
    }
}

Number.prototype.times = function (callbackFn, thisArg) {
    const num = this.valueOf()
    if (typeof callbackFn !== "function" ) {
        throw new TypeError("callbackFn is not a function")
    }
    if (num < 0) {
        throw new RangeError('Must not be negative')
    }
    if (!isFinite(num)) {
        throw new RangeError('Must be Finite')
    }
    if (isNaN(num)) {
        throw new RangeError('Must not be NaN')
    }

    [...Array(num)].forEach((_, i) => callbackFn.bind(thisArg, i + 1)())
    // Other elegant solutions
    // new Array<null>(num).fill(null).forEach(() => {})
    // Array.from({length: num}).forEach(() => {})
}

String.prototype.times = function (callbackFn, thisArg) {
    let num = parseInt(this.valueOf())
    if (typeof callbackFn !== "function" ) {
        throw new TypeError("callbackFn is not a function")
    }
    if (num < 0) {
        throw new RangeError('Must not be negative')
    }
    if (!isFinite(num)) {
        throw new RangeError('Must be Finite')
    }
    // num is NaN if `this` is an empty string 
    if (isNaN(num)) {
        num = 0
    }

    [...Array(num)].forEach((_, i) => callbackFn.bind(thisArg, i + 1)())
    // Other elegant solutions
    // new Array<null>(num).fill(null).forEach(() => {})
    // Array.from({length: num}).forEach(() => {})
}

A link to the TypeScript Playground with some examples can be found here

This post implements solutions posted by: Andreas Bergström, vinyll, Ozay Duman, & SeregPie

-2

Given a function something:

function something() { console.log("did something") }

And a new method times added to the Array prototype:

Array.prototype.times = function(f){
  for(v of this) 
    for(var _ of Array(v))
      f();
}

This code:

[1,2,3].times(something)

Outputs this:

did something
did something
did something
did something
did something
did something

Which I think answers your updated question (5 years later) but I wonder how useful it is to have this work on an array? Wouldn't the effect be the same as calling [6].times(something), which in turn could be written as:

for(_ of Array(6)) something();

(although the use of _ as a junk variable will probably clobber lodash or underscore if you're using it)

2
  • 1
    It is consider to be bad practice to add custom methods to a native JS object.
    – Lior Elrom
    Aug 29, 2018 at 15:30
  • You can use let as in for (let _ of Array(6)) something() to prevent clobbering lodash outside of the for at least. Dec 4, 2019 at 22:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.