Javascript part 9

Today we talk about 10 common array methods used in javascript!

Straight to it, the first one we talk about is the push method.

.push: this add’s an element to the “END” of an array.

We set a variable to “car” and put car brand elements into it. We then call the push() method on “car”. We include what we are putting into the array as an argument, so we put “GMC.” We call “car” again, and you now see four elements in the array.

.pop: this takes-out the “LAST” element out of the array.

We kept the same variable, “car,” then used the pop method on it. You see it outputted “tesla.” When we call “car” again, it now only has two elements left in it.

.concat: this takes two arrays(or strings) and concatenates them (joins them together). Also, something to mention is that the original array is not changed at the end.

Let me explain. Here we see car and animal arrays set to their values. Then we call the “car” array with the “concat method”. This takes in an argument, which is the other array “animal.” Then it puts the two array values together as one.

.join: this joins all the elements in an array(also it doesn't change the original array)

We take the animal variable and run the “join” method on it. “Join” takes in one argument and that argument is how you will be joining them together. The first time we call “join”, it joins all the elements in one giant word. the second “join”, I am saying return them with dashes, and lastly join them with spaces between each one.

.reverse: this reverses the order of elements in an array. (it DOES mutate the original array. aka, it changes your original data.)

We have the animal array, and we use reverse on it. It switches the order, plain and simple. Then you will notice that elements are now stuck in that format.

.shift: this takes-out the “FIRST” element in an array and returns it.

Using the same animal array, we use shift and it pulls the first element out of the array. Then when we call “animal,” it has lost one element from the front of the array.

.unshift: this method will add an element to the “FRONT” of the array.

Using the animal array again, we call unshift, which takes in an argument of “ladybug.” that now gets inputted in the front of the array. We call animals again, and we have four elements.

.slice: this method takes in two arguments, “the start ” and “the end,” of where we want to cut off. Then returns it in its own array, which comes in handy. (the original is unchanged)

with the two numbers or arguments you pass into slice, first number is what index it starts on, and then (tricky part) the second number is where it stops but, right before(it does not grab the second element it stops right before it.)

.sort: this sorts the elements of your array; by default, the sort order is ascending. (this DOES! change the original array)

we create a variable called “letter” then put a bunch of different letters. We use sort on it, and it made it in alphabetical order. The End!

.splice: this is like slice, but it modifies the original array, and the arguments that you pass in will be different.

The first number you pass in is where to start from; the second number is for how many elements we want to get rid of. Then the third argument (which I personally never use) adds an element into that place you just cut from. (Look below)

We call splice on Lettere variable.

When calling the splice method it returns the two elements I wanted to take out. “e” from index 2 and two elements AFTER that which lands on “h,” if we call letter again it gives us an array of [“e”, “h”]. Horray!

In the second part of this, if we call the “letter” variable one more time, we see where the “e” and “h” used to be! It is now “chicken nugget,” replaced. That's where our third argument comes in.

Ok, that was great fun! These are a the bare bones must for learning javascript.

See you all next time.

check out some javascript….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)

Javascript 8 (switch statements and arrays)

Javascript 9 (10 commonly used arrays in javascript)

Javascript 10 (Math. And parseInt Usage)

Javascript 11 (for loops and nested for loops)

Javascript 12(while loops and for..in and for..of loops)

Javascript 13(8 diff array methods)

Javascript 14(objects and ways to use objects)

Javascript 15(JSON and fetch request)

Javascript 16(“this” keyword)

Javascript 17(strict mode and error handling)

Javascript 18(setInterval/setTimeout and Dates)

React info…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)

React part 12(React Router Dom, Exact, and Links)

The Social Media…

Github

Instagram

Facebook

Linked-In

Medium

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonathan Bleibdrey

Jonathan Bleibdrey

Software engineer, Creator, Ball of Energy