<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jade</title>
    <description>The latest articles on DEV Community by Jade (@whit1088).</description>
    <link>https://dev.to/whit1088</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F728527%2Fdccf4d94-6091-4777-a015-e525373c5c9a.jpeg</url>
      <title>DEV Community: Jade</title>
      <link>https://dev.to/whit1088</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/whit1088"/>
    <language>en</language>
    <item>
      <title>Array.prototype.pop(), push(), shift(), and unshift()</title>
      <dc:creator>Jade</dc:creator>
      <pubDate>Sun, 17 Oct 2021 21:26:55 +0000</pubDate>
      <link>https://dev.to/whit1088/arrayprototypepop-push-shift-and-unshift-3j78</link>
      <guid>https://dev.to/whit1088/arrayprototypepop-push-shift-and-unshift-3j78</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;These javascript methods are used to re-arrange an existing array or object in various ways and return a new value. Let's take a look at how each one functions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Array.prototype.unshift()
&lt;/h3&gt;

&lt;p&gt;This method adds values that have been input to the &lt;em&gt;beginning&lt;/em&gt; of an array. It then returns the new array's length. Calling the array afterwords will have the new values shown in the array.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--f_5JUaeW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffsq2l2texc3vaclu4fo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--f_5JUaeW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffsq2l2texc3vaclu4fo.png" alt="Example 1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;unshift()&lt;/strong&gt; outputs:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;5

[ 'flour', 'chocolate', 'eggs', 'butter', 'milk' ]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Array.prototype.shift()
&lt;/h3&gt;

&lt;p&gt;This method takes the first value, also known as the value in the 0th index, and removes it from the array. The other values move down in order to make up for the lost space, and the removed value is then returned to an assigned variable.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--61N_a1i9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoxiphmw3vksgu2b71d1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--61N_a1i9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoxiphmw3vksgu2b71d1.png" alt="Example 2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note, this method will only work for arrays and objects with two or more values or it will return undefined.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;shift()&lt;/strong&gt; outputs&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[ 'butter', 'milk' ]
eggs
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Array.prototype.push()
&lt;/h3&gt;

&lt;p&gt;This method works the exact same way as Array.prototype.unshift() but rather than adding values to the front of the array, it will be added to the end.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XFMvZ7iA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8kl9f3jdjmga7eykyt0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XFMvZ7iA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8kl9f3jdjmga7eykyt0.png" alt="Example 3"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;push()&lt;/strong&gt; outputs&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;5
[ 'eggs', 'butter', 'milk', 'flour', 'chocolate' ]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Array.prototype.pop()
&lt;/h3&gt;

&lt;p&gt;This method also works nearly the exact same as Array.prototype.shift(), but removes and returns the last value instead of the first one.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--h2RINlRv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmz36epbkl15z316lcvn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h2RINlRv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmz36epbkl15z316lcvn.png" alt="Example 4"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;pop()&lt;/strong&gt; outputs&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[ 'eggs', 'butter' ]
milk
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
