Is there a shortcut to create padded array in JavaScript?

Question

I have this javascript:

function padded_array(k, value){
    var a = [];
    a[k] = value;
    return a;
}

padded_array(3, "hello"); //=> [undefined, undefined, undefined, 'hello']

Is it possible to shorten the code in the function body?

Answer 1

for all the googlers coming here - you're probably looking for this:

var pad_array = function(arr,len,fill) {
  return arr.concat(Array(len).fill(fill)).slice(0,len);
}

Answer 2

From 2020 & 2021 : straight forward options

Let assume that is your Array

const yourArray = [1,2]

If you just want to loop 4 times (maybe for react jsx )

Array.from({length:4}) //[undefined,undefined,undefined,undefined]
Array(4).fill()//[undefined,undefined,undefined,undefined]

If you want to loop yourArray 4 times, but to start with values you already have

// unmutation option
Array.from({...yourArray, length:4}) //[1,2,undefined,undefined]

// unmutation option, but need some calcualtion
[...yourArray , ...Array(2)  ] //[1,2,undefined,undefined]
[...Array(2), ...yourArray   ] //[undefined,undefined,1,2]

// loop on your array several times 
Array(3).fill(yourArray).flat() // [1, 2, 1, 2, 1, 2]

// mutation the original array.
yourArray.length = 4;
Array.from(yourArray) //[1,2,undefined,undefined]

If You actually want an Array with full of values. ex. with increment numbers.
Remap it

// unmutation option

Array.from({...yourArray,length:4}, (v,i) => v ?? i+1 ) 
// [1,'2',3, 4]

// Or, mutation the original array. and fill with "x"
array.yourArray.length = 4;

Array.from(yourArray, (v) => v ?? 'x') 
// [1,'2','x','x'] 

Answer 3

If you want to exclude the 'hello', you can use

new Array(count);

to create padded Arrays.

Edit: Maybe like this ?

new Array(5).concat("hello")

Answer 4

Another solution using spread operator:

padArray = (length, value) => [...Array(length).fill(), value];

And the usage is the same as you mentioned:

padded_array(3, "hello"); //=> [undefined, undefined, undefined, 'hello']

Answer 5

For padding at the start:

function padArrayStart(arr, len, padding){
   return Array(len - arr.length).fill(padding).concat(arr);
}

Demo:

function padArrayStart(arr, len, padding){
   return Array(len - arr.length).fill(padding).concat(arr);
}
console.log(...padArrayStart([1,2,3], 5, 0));//0 0 1 2 3
console.log(...padArrayStart([4,5,6], 3, 0));//4 5 6

For padding at the end:

function padArrayEnd(arr, len, padding){
   return arr.concat(Array(len - arr.length).fill(padding));
}

Demo:

function padArrayEnd(arr, len, padding){
   return arr.concat(Array(len - arr.length).fill(padding));
}
console.log(...padArrayEnd(['a','b','c'], 10, 'z'));//a b c z z z z z z z
console.log(...padArrayEnd([0, 'a', 'd'], 6, -1));//0 a d -1 -1 -1

Answer 6

Not in standard ES5 or predecessor. Surely you can do something like $.extend([], {"3": "hello"}) in jQuery; you can even do

Object.create(Array.prototype, {"3": {value: "hello"} });

in bare ES5, but it is hack, I would not consider this a solution (if it is ok with you, you can adopt it).

Answer 7

You can use that if your JS doesn't support Array.prototype.fill() (ex. Google Apps Script) and you can't use the code from the first answer:

function array_pad(array, length, filler)
{
    if(array.length < length)// [10.02.20] Fixed error that Dimitry K noticed
      while(true)
        if(array.push(filler) >= length)
          break;
    return array;
}

Answer 8

I know this is an old(er) question but wanted to add my 2 cents if someone stumbles here (like i initially did).

Anyway, heres my take with Array.from

const padded_array = (k, value) => Array.from({ length: k }).concat(value)

console.log(padded_array(3, "hello"));

Also you could do it with something like this:

const padded = (arr, pad, val) => {
  arr[pad] = val
  return arr
}

console.log(padded([],3,'hello'))

Answer 9

// push is faster than concat
// mutate array in place + return array

const pad_right = (a, l, f) =>
  !Array.from({length: l - a.length})
  .map(_ => a.push(f)) || a;

const a = [1, 2];

pad_right(a, 4, 'x');
// -> [ 1, 2, 'x', 'x' ]

a;
// -> [ 1, 2, 'x', 'x' ]

Answer 10

function leftPad(array, desiredLength, padding) {
  array.unshift(...Array(desiredLength - array.length).fill(padding));
}

function rightPad(array, desiredLength, padding) {
  array.push(...Array(desiredLength - array.length).fill(padding));
}

const myHello = ['hello'];
leftPad(myHello, 3, undefined);
// [undefined, undefined, 'hello']
const myHello2 = ['hello2'];
rightPad(myHello, 3, 0);
// ['hello2', 0, 0];