Javascript : unshift without modifing the array size

Question

I am generating an array like :

const myArray = Array.from({length: 5}, (e, i) => emptyX)

myArray starts with 5 elements of emptyX.

Is there a simple way/method which unshift the array without changing its size ? Whenever I call it I must find the initial size.

exemple:

myArray.unshift(X1) => [X1, emptyX, emptyX, emptyX, emptyX]
myArray.unshift(X2) => [X2, X1, emptyX, emptyX, emptyX]
myArray.unshift(X3) => [X3, X2, X1, emptyX, emptyX]

// OR with multiple parameters
myArray.unshift(X4, X5) => [X5, X4, X3, X2, X1]

UPDATE:

Now I am doing :

myArray.unshift(X);
myArray.splice(-1, 1);// or pop()

But it's not what I want, I need just to replace the items because the array size change when I call unshift and splice

What would it mean to .unshift() an element from the array without changing the array size O.o? — Pointy
– Pointy, Commented Jul 24, 2019 at 14:41
Wait can't you modify myArray[0] etc? Like, myArray[0] = X1;? — Pointy
– Pointy, Commented Jul 24, 2019 at 14:42
yes for myArray[0] = X1, but i have to move the other elements to the right — bubbles
– bubbles, Commented Jul 24, 2019 at 14:46
What is emptyX ? Is it null ? undefined ? What is supposed to happen when we unshift X2 to [empty, X1] ? — Kewin Dousse
– Kewin Dousse, Commented Jul 24, 2019 at 14:46

Charlie · Accepted Answer · 2019-07-24 16:27:36Z

3

You are looking for the ShiftRight method which is unavailable in the prototype. Here is a pollyfill:

Array.prototype.shiftRight = function(...params) {
   
    params.forEach(item => {
        for (var i = this.length - 1; i >= 0; i--) {
            if (i === 0)
               this[0] = item
            else
               this[i] = this[i - 1];
        }
    })
}


x = [1, 2, 3];

x.shiftRight(4, 5);

console.log(x);   // [5, 4, 1]

edited Jul 24, 2019 at 16:27

answered Jul 24, 2019 at 15:39

Charlie

24k12 gold badges65 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bubbles Over a year ago

goood & simple, but the last element must be 1 not 3,

Ziv Weissman Over a year ago

This is a nicer approach than mine but the "0" iteration and check is unneeded. You can combine my answer with this ^^

Charlie Over a year ago

As per OP, the length of the array cannot be changed during the operation. That is wjy I didn't use unshift.

Ziv Weissman Over a year ago

Yes, I don't use unshift either

Charlie Over a year ago

Ya sure. I mistook the name of your function. However your solution doesn't cover multiple elements being inserted at the beginning of the array.

|

Ziv Weissman · Accepted Answer · 2019-07-24 23:05:11Z

1

You could do something like this-

class arrWrapper(myArray: Array) {
    this.arr = myArray;
    this.len = myArray.length;
    this.pos = 0;

    unshift(newObj) {
       //Add checks if lengeh > pos, do something - either return or pos = 0
       this.arr[this.pos++] = newObj;
    } 
}

After comments I realize what you tried to do. This will "shift" the items up, without removing them:

class arrWrapper(myArray: Array) {
    this.arr = myArray;

    unshift(newObj) {
       for (i=1; i<this.arr.length-1; i++) {
          this.arr[i] = this.arr[i-1];
       } 
       this.arr[0] = newObj;
    } 
}

this will run on the array, shift the cells up, and always insert the newObj into the first position

Another edit: oh sry, I didn't test it, you should go backwards to avoid the same item shift

Example with test:

function unshift(arr, newObj) {
           for (i=arr.length-1; i>0; i--) {
              arr[i] = arr[i-1];
           } 
           arr[0] = newObj;
        } 
        
var testArr= [1,2,3,4];

unshift(testArr, "new1");
console.log(testArr);

unshift(testArr, "new2");
console.log(testArr);

unshift(testArr, "new3");
console.log(testArr);

unshift(testArr, "new4");
console.log(testArr);

edited Jul 24, 2019 at 23:05

answered Jul 24, 2019 at 14:47

Ziv Weissman

4,5664 gold badges31 silver badges64 bronze badges

4 Comments

bubbles Over a year ago

good but the resulat will be [X5, X4, X3, X2, X1].reverse() i think

Ziv Weissman Over a year ago

no, because you start from pos = 0, you could do pos = length and then --pos

bubbles Over a year ago

the last inserted element must occupy the 0 position, the old one must unshift to the right (and keeping there order)

bubbles Over a year ago

have you test it ? I think this will copy the first element to all elements of the array. You copy 0 in 1, 1 in 2, but 1 is 0 now and so on

Simanalix343 · Accepted Answer · 2021-03-28 18:37:14Z

1

You can simplify your answer by using the Array.prototype.unshift and Array.prototype.pop methods, like this:

myArray.unshift()
myArray.pop();

The unshift method adds one or more elements to the beginning of an array and returns the new length of the array.

And the pop method removes the last element from an array and returns that element (this method changes the length of the array).

edited Mar 28, 2021 at 18:37

answered Dec 22, 2020 at 13:38

Simanalix343

274 bronze badges

1 Comment

Trevor Over a year ago

Though this answers the question, you should explain your answer, what each function does, and why it solves the problem

becher henchiri · Accepted Answer · 2019-07-24 15:51:29Z

0

Try this :

const myArray = Array.from({length: 5}, (e, i) => "emptyX")
//with multiple parameters
var items=[1,2,3,4];

doUnshift(myArray,items);


function doUnshift(myArray,items){
 
    var l=myArray.length;
    //myArray size must be greater than items array size
    if(l<=myArray.length){
    items.reverse();
    for(var i=0;i<items.length;i++){
      myArray.unshift(items[i])
    }
    myArray.splice(items.length,items.length)
      console.log(myArray)
   } else{
         console.log("myArray size must be greater than items array size")  
   }
    
    
}

edited Jul 24, 2019 at 15:51

answered Jul 24, 2019 at 15:46

becher henchiri

6774 silver badges11 bronze badges

3 Comments

bubbles Over a year ago

i am already doing the same thing (with only one element), check after the UPDATE section

becher henchiri Over a year ago

this code run with only one element, just change var items=[1];

bubbles Over a year ago

yes of course, your solution is more elaborated than mine

Trevor · Accepted Answer · 2020-12-22 14:35:56Z

A simple way to do it is

const myArray=[1, 2]

const newValue=3

myArray.unshift(newValue)
myArray.length = 5

console.log(myArray)

You are allowed to truncate, and extend an array by setting the length manually.

So in this case, if you only had 2 items in the array, and set it to 5, you would get 2 element and 3 undefined elements.

More details here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length

If you are using this in a reactive framework like Vue, switch the lines around because unshift will be handled by the framework to trigger an update.

const myArray=[1, 2, 3, 4, 5]

const newValue=6

myArray.length = 4 // drop to 4, some frameworks miss this change
myArray.unshift(newValue) // add back in the 5th option

console.log(myArray)

A handy side effect of this version is, from an outside view, the size of the array never changed. If something is monitoring unshift, then it thinks there is 5 elements, you manually truncated, then unshifted to 5 elements again. Therefore no change in size has taken place.

Collectives™ on Stack Overflow

Javascript : unshift without modifing the array size

5 Answers 5

6 Comments

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related