Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial.Sign InEnroll

JavaScript Arrays

    Well done!

    You have completed JavaScript Arrays!

    Preview

    Remove Elements From an Array

    4:17withGuil Hernandez

    JavaScript provides thepop() method for removing elements from the end of an array, andshift() for removing elements from the beginning.

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

      Related Discussions

      Have questions about this video? Start a discussion with the community and Treehouse staff.

      Sign up

      Earlier, you learned about the push andunshift methods.0:00
      They let you add one or more elementsto the end or beginning of an array.0:03
      JavaScript also provides two methods forremoving elements from the end or0:09
      beginning of an array,they're called pop and shift.0:13
      The pop method is likethe opposite of push.0:17
      While push pushes an elementto the end of the array,0:20
      pop pops the item off the end, andshift is like the opposite of unshift.0:23
      It removes the firstelement from an array.0:28
      Let's revisit the shoppingList array andrun the pop method on it.0:31
      The last item, coffee,gets removed by pop.0:35
      Now the shoppingList arrayholds three elements.0:38
      Pop doesn't just remove the last element,it also returns the last element.0:41
      In other words, you can use pop toretrieve the last element of an array.0:46
      For example, create a variable and assignit the value returned by pop like this.0:50
      Now the lastItem variableholds the string honey.0:55
      The shift method is similar except that itremoves the first element from an array.0:58
      Let's bring back the original shoppingList arrayand this time call shift on it.1:03
      Now the first value, bread,gets removed from the array and1:09
      assigned to the firstItem variable.1:12
      Push and shift methods are often usedtogether to create highly organized data1:15
      structures called queues,or lists of items1:19
      that follow the logic of first infirst out, which is often called FIFO.1:22
      It's similar to a line orqueue at a store.1:27
      New customers join the end of the line,like the push method, and1:29
      the customer at the front ofthe line gets help first.1:33
      That's the shift method.1:36
      In other words,the first element is processed first and1:37
      the newest element is processed last.1:40
      Now open the file remove.js.1:43
      In index.html, update the script tag1:47
      source attribute to js/remove.js.1:51
      Start by creating an array of numbers.1:56
      I'll store the numbers 100,200, 300, 400, and 500.2:00
      A good way to practice using the push and2:08
      shift methods is inthe JavaScript console.2:10
      The console is a great place totest small snippets of code and2:14
      practice with differentJavaScript methods.2:17
      For instance, you can find out the numberof elements inside the numbers array2:19
      using the length property,which returns five elements.2:23
      I can add an item to the end using push.2:28
      The push method returns the lengthof the array, which is now 6.2:34
      Now if I type numbers in the console,2:37
      it displays the currentelements in the array.2:40
      To remove an element from the end ofthe array, I'll type numbers.pop.2:44
      Notice how I'm not passing anyarguments to the pop method.2:51
      The pop method does not accept arguments.2:54
      Remember, pop returns the lastelement after removing it.2:57
      This returns 600 because the value 600 wasthe last element in the numbers array.3:00
      There are now five elements in the array.3:06
      Checking the latest value of numbersreturns the array with the five elements.3:09
      Now let's add a new item to the beginningof the numbers array, the number 0.3:14
      This returns the value 6 because thereare now six elements in the array.3:25
      Type numbers to see what's in the array,3:31
      and you'll see thatthe first element is 0.3:32
      Finally, let's remove the firstelement using the shift method.3:37
      Like the pop method,shift does not take an argument.3:41
      So I'll type numbers.shift.3:45
      Shift also returns the firstelement after removing it.3:49
      This returns the number 0.3:54
      Typing numbers outputs the latestarray without zero in it.3:56
      I'll run numbers.shift one more time bypressing the up arrow key twice to bring4:00
      back the numbers.shift statement.4:04
      This returns the number 100.4:07
      And notice how the latest numbers arraydoes not have the number 100 inside it.4:11

      You need to sign up for Treehouse in order to download course files.

      Sign up

        You need to sign up for Treehouse in order to set up Workspace

        Sign up