JavaScript Basic Array Methods [Article]

Arrays are used to retailer knowledge. This knowledge could possibly be issues like strings or numbers for instance. Typically we have to replace or manipulate our arrays by including or eradicating knowledge or combining one array with one other. On this information, I’ll go over simply a few of the many fundamental JavaScript array strategies we’ve got accessible to us. Strategies we’ll focus on embody: .size(), .push(), .pop(), .shift(), .unshift(), .indexOf(), .toString(), .be a part of() & .concat()

I’ll embody hyperlinks to our JavaScript Arrays course in addition to MDN docs for every of those strategies so you may get an excellent higher understanding.

Treehouse Video – JavaScript Arrays
https://teamtreehouse.com/library/javascript-arrays

MDN – Arrays
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array
MDN – .size()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/size
MDN – push()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/push
MDN – .pop()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/pop
MDN – .shift()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/shift
MDN – .unshift()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/unshift
MDN – .indexOf()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/indexof
MDN – .toString()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/tostring
MDN – .be a part of()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/be a part of

MDN – .concat()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/concat

If you happen to’d wish to comply with alongside, you are able to do so by operating these strategies in your browser’s console. Let’s get began!

.size()

Let’s begin off with a simple technique; .size(). This technique will return the size of an array. To make use of it, write your array identify after which add the strategy identify. On this instance, we’ll run customers.size within the console:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

console.log(customers.size);
// returns 4

.push()

Including an merchandise to an array is simple. Utilizing the .push() technique permits us so as to add a brand new merchandise to the top of an array. Checkout the instance beneath. We’ll add a brand new identify to our customers array.

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

customers.push('Shane');
console.log(customers);
// returns ['Brandon', 'Keeli', 'Tiffany', 'Steve', 'Shane']

.pop()

Eradicating objects from an array can be simply as simple. Operating .pop() on an array will take away the final merchandise of that array. What’s cool about .pop() is that it will possibly additionally return the merchandise that was eliminated. Checkout the code snippet beneath:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

customers.pop();
console.log(customers)
// returns ['Brandon', 'Keeli', 'Tiffani'];

const removedUser = customers.pop();
console.log(removedUser);
// returns 'Steve'

.shift()

What if you happen to needed to take away the primary merchandise in your array? That’s the place .shift() is available in. Operating this technique on an array won’t solely take away the primary merchandise of that array, however similar to .pop() it returns that merchandise as properly:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

customers.shift();
console.log(customers);
// returns ['Keeli', 'Tiffany', 'Steve']

const removedUser = customers.shift();
console.log(removedUser);
//returns 'Brandon'

.unshift()

The .unshift() technique mainly does the other of .shift(). As a substitute of eradicating an merchandise from the start of an array, it provides an merchandise to the start. Test this out:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

customers.unshift('Dustin');
console.log(customers)
//returns ['Dustin', 'Brandon', 'Keeli', 'Tiffany', 'Steve']

.indexOf()

Want to search out the index of a selected merchandise in your array? You possibly can run .indexOf() on an array with the worth of the merchandise you wish to know’s index. Let’s say we needed to know the index of Keeli from our consumer’s array. Check out the code:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

console.log(customers.indexOf('Keeli');
//returns 1

(since arrays are listed at 0, "Keeli" is on the 1st index of our array)

.toString()

Ever wanted to return all of your array objects as a string? Simple, simply run .toString() in your array like this:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

console.log(customers.toString());
//returns 'Brandon,Keeli,Tiffany,Steve'

.be a part of()

Typically when turning your array objects to a string requires a bit extra flexibility. In our above instance for the .toString() technique, you see we get again our array with all of the strings with a comma between every array merchandise. If you happen to needed to format that in another way, you may use the.be a part of() technique:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];

console.log(customers.be a part of(', '));
//returns 'Brandon, Keeli, Tiffany, Steve'

As you possibly can see, no matter parameter we give our .be a part of() technique, will separate the array objects when it converts it to a string. Fairly neat!

.concat()

Contemplate the next two arrays:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];
const newUsers = ['Yamil', 'Beth', 'Caleb'];

If we needed to hitch these two arrays collectively to create a brand new array, how may we do that? ? That is the place .concat() turns out to be useful:

const customers = ['Brandon', 'Keeli', 'Tiffany', 'Steve'];
const newUsers = ['Yamil', 'Beth', 'Caleb'];

let userList = customers.concat(newUsers);
console.log(userList);
//returns ['Brandon', 'Keeli', 'Tiffany', 'Steve', 'Yamil', 'Beth', 'Caleb']

We created a brand new variable; userList and this holds the returned worth of customers.concat(newUsers). Which is a listing of array objects from each arrays.

I hope this information on fundamental array strategies was useful. Bear in mind, these are simply a few of the many fundamental JavaScript array strategies. Make sure to refer again to the start of this put up for a listing of all of the strategies lined on this information. Under, I’ll hyperlink just a few extra strategies if you happen to’re thinking about studying much more. Have enjoyable and joyful coding! ?

Treehouse Video – JavaScript Arrays
https://teamtreehouse.com/library/javascript-arrays

MDN – .reverse()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/reverse

MDN – .type()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/type

MDN – .slice()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/slice

MDN – .some()
https://developer.mozilla.org/en-US/docs/Internet/JavaScript/Reference/Global_Objects/Array/some