blog post

When people first start to learn about arrays, they usually learn about the push() and pop() methods, if their particular language supports it; at least, I know I did. These two methods append elements to an array and remove an element from the an array respectively. Both of these methods work at the end of the array, where the index is largest. Javascript arrays have native support for these two methods. Javascript also has support for parallel methods that work on the beginning of the array, where the index is smallest. Unshift() and shift() are basically the same as push() and pop(), only, at the other end of the array.
Despite working with Javascript for years, I only discovered the shift() method recently. And, as for the unshift() method, I totally only learned about that last night! As such, I figured I would pass this information on in case anyone else was in the dark like myself.

var a = [23, 45, 12, 67];
a.unshift(34);
console.log(a); // [34, 23, 45, 12, 67]

Javascript Array: Push() Method

The push() method can append one or more elements to the end of an array. This alters the array on which the method was called.
// Build an array of test data.
var data = [ "X" ];

// Push data onto the array. Push() appends elements to the end
// of the given array. Note that it can take more than one
// argument, each of which is individually appended to the array.
// In the output, notice that when push() takes multiple arguments
// they are appended in a left-to-right order (mimicing their
// appearence in the arguments list).
data.push( "A" );
data.push( "B", "C" );

// Output resultant array.
console.log( data );

When we run the above code, we get the following console output:

["X", "A", "B", "C"]

Javascript Array: Pop() Method

The pop() method pulls the last element off of the given array and returns it. This alters the array on which the method was called.
// Build an array of test data.
var data = [ "A", "B", "C" ];

// Pop the element off of the end of the array.
console.log( data.pop() );
console.log( data );

When we run the above code, we get the following console output:
C
["A", "B"]

If you call pop() on an empty array, it returns an undefined value.

Javascript Array: Unshift() Method

The unshift() method is like the push() method, only it works at the beginning of the array. The unshift() method can prepend one or more elements to the beginning of an array. This alters the array on which the method was called.
// Build an array of test data.
var data = [ "X" ];

// Unshift data onto the array. Unshift() prepends elements to
// the beginning of the given array. Note that it can take more
// than one argument. In the output, notice that when unshift()
// takes multiple arguments, they are prepended in a right-to-left
// order (mimicing their appearence in the arguments list).
data.unshift( "A" );
data.unshift( "B", "C" );

// Output resultant array.
console.log( data );

When we run the above code, we get the following console output:
["B", "C", "A", "X"]

Notice that when we pass the unshift() method multiple arguments, it prepends them in a right-to-left order such that the resultant array mimics the appearence of the unshift() arguments.

Javascript Array: Shift() Method

The shift() method is like the pop() method, only it works at the beginning of the array. The shift() method pulls the first element off of the given array and returns it. This alters the array on which the method was called.
// Build an array of test data.
var data = [ "A", "B", "C" ];

// Shift the element off of the beginning of the array.
console.log( data.shift() );
console.log( data );

When we run the above code, we get the following console output:
A
["B", "C"]

If you call shift() on an empty array, it returns an undefined value.
It used to be difficult for me to always keep it straight in my head which end of the array push() and pop() operated on (especially when reading unfamiliar code). But, now that I realize that unshift() and shift() are the same as push() and pop() only at the opposite end of the array, it certainly helps keep a certain mental order. I hope that this helps others at it has helped me.

How can I add new array elements at the beginning of an array
  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Comments (6)

  • Evelyn Serrell

    Thursday, 08 December, 2016 01:04 PM

    This is a message to the admin. I discovered your How can I add new array elements at the beginning of an array -TheOneblogs.com page by searching on Google but it was difficult to find as you were not on the first page of search results. I know you could have more visitors to your website. I have found a site which offers to dramatically improve your website rankings and traffic to your website: http://dtl.la/tmJ9x I managed to get close to 500 visitors/day using their service, you can also get many more targeted traffic from search engines than you have now. Their service brought significantly more visitors to my site. I hope this helps!

  • Joselyn

    Tuesday, 08 November, 2016 05:26 PM

    Hi my name is Joselyn and I just wanted to send you a quick message here instead of calling you. I came to your How can I add new array elements at the beginning of an array -TheOneblogs.com website and noticed you could have a lot more traffic. I have found that the key to running a successful website is making sure the visitors you are getting are interested in your subject matter. There is a company that you can get keyword targeted visitors from and they let you try their service for free for 7 days. I managed to get over 300 targeted visitors to day to my site. http://macanasmagazine.com/yourls/m3qm - Unsubscribe here: http://hw23.de/2291d

  • Alisa

    Tuesday, 25 October, 2016 05:53 AM

    I was just looking at your How can I add new array elements at the beginning of an array -TheOneblogs.com website and see that your website has the potential to become very popular. I just want to tell you, In case you didn't already know... There is a website service which already has more than 16 million users, and most of the users are looking for websites like yours. By getting your website on this service you have a chance to get your site more popular than you can imagine. It is free to sign up and you can find out more about it here: http://gd.is/y/46o6a - Now, let me ask you... Do you need your website to be successful to maintain your business? Do you need targeted traffic who are interested in the services and products you offer? Are looking for exposure, to increase sales, and to quickly develop awareness for your website? If your answer is YES, you can achieve these things only if you get your website on the network I am describing. This traffic network advertises you to thousands, while also giving you a chance to test the network before paying anything. All the popular sites are using this service to boost their traffic and ad revenue! Why aren’t you? And what is better than traffic? It’s recurring traffic! That's how running a successful site works... Here's to your success! Find out more here: http://gd.is/y/46o6a - Unsubscribe here: http://lis.ovh/b2

  • http://nt4.pl/u/5s

    Friday, 14 October, 2016 03:37 AM

    Hello my name is Loraine and I just wanted to send you a quick message here instead of calling you. I came to your How can I add new array elements at the beginning of an array -TheOneblogs.com website and noticed you could have a lot more traffic. I have found that the key to running a successful website is making sure the visitors you are getting are interested in your website topic. There is a company that you can get keyword targeted traffic from and they let you try the service for free for 7 days. I managed to get over 300 targeted visitors to day to my site. http://korturl.no/sy6t - Unsubscribe here: http://hothor.se/1u2ei

  • http://misdivi.de/at

    Wednesday, 21 September, 2016 09:12 AM

    I was just looking at your How can I add new array elements at the beginning of an array -TheOneblogs.com site and see that your website has the potential to become very popular. I just want to tell you, In case you don't already know... There is a website service which already has more than 16 million users, and most of the users are looking for websites like yours. By getting your site on this service you have a chance to get your site more popular than you can imagine. It is free to sign up and you can read more about it here: http://pandalove.info/35p0i - Now, let me ask you... Do you need your website to be successful to maintain your business? Do you need targeted traffic who are interested in the services and products you offer? Are looking for exposure, to increase sales, and to quickly develop awareness for your website? If your answer is YES, you can achieve these things only if you get your site on the service I am describing. This traffic network advertises you to thousands, while also giving you a chance to test the network before paying anything at all. All the popular websites are using this service to boost their traffic and ad revenue! Why aren’t you? And what is better than traffic? It’s recurring traffic! That's how running a successful site works... Here's to your success! Find out more here: http://rb2.in/4nS

  • Gagner

    Tuesday, 06 September, 2016 12:05 AM

    Nice

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information