Arrays in Javascript

If you have ever learned about the basics of programming you must have come across arrays, they are one of the most common structures present in any kind of programming…

By Vibhor

Mar 27, 2020

If you have ever learned about the basics of programming you must have come across arrays, they are one of the most common structures present in any kind of programming language and if it’s your first time venturing into this and you have no idea what an array is, well, in the most basic terms it is a way to store data in an ordered manner.

Let’s say you are going grocery shopping and you need to create a list of everything you want to purchase at the store. To store data sequentially, where we have a first, a second, a third element and so on, we use Arrays.

If you are using any language other than Javascript, most of the concepts remain the same throughout any other programming language, there are some things though which work differently when it comes to other languages and as you go through arrays in your language you will come to find them.

Creation of Arrays

So before we start with using an array, we need to create an array, let’s start with creating an empty array

We can even fill the elements at the time of the creation of an array, let’s start with creating our grocery list

Accessing the Array

Now you might be thinking, it’s all good and dandy to create the array but how do I use it? How do I reach an element inside the array?

So the way the data is stored inside arrays is like an ordered list, each element gets an index value which refers to the element of the array and we can access the element using the index value of that element. Something along the lines of

IndexData
0Apples
1Cheese
2Milk

Now if you are confused by why the index is starting at 0 and not at 1 like any normal human being would do it, in very simple terms, it’s not really an index, it is an offset that is the distance from the start of the array. The first element is at the start of the array so there is no distance, thus the offset is 0.

There’s a lot of reasons why the index is zero-based and not one based but that is a whole discussion in itself and it doesn’t come under the purview of this article, but if you would like to know more about it you can check out this article.

Anyways, back to getting the elements from the array, now that we know how the data is stored inside of an array, we simply use the index of an array to get the required element.

Well alright, we can access the element from its index, but what else can we do to the array using this amazing feature we just discovered.

Let’s say you are not interested in Apples anymore and you want to change it to Coffee and who doesn’t love coffee and apples are overrated anyways, you can replace an element of an array using the index.

What about adding a new element to the array, you might want to put some more elements inside your array, maybe you really want those apples, well that’s pretty simple as well.

Storing Data in an Array

Till now, we have only been storing strings inside the array, but what else can we store in an array? Arrays are amazing in the manner that you can store any type of element in them, now that might not be true in all programming languages, for example in C, we use arrays to store data of the same type.

But back to Javascript because Js is amazing and it lets us store all kinds of things inside an array, so it looks something like this:

Array Methods

Now there are certain methods which we can use with an array, I would like to list some of there here, it makes working with the arrays very easy.

Push Method

We use the Push method to add an element at the end of an array.

Pop Method

We use the Pop method to remove an element from the end of an array.

Shift Method

We use the Shift method to remove an element from the front/start of an array.

Unshift Method

We use the Unshift method to add an element at the front/start of an array.

indexOf Method

We use the indexOf method to find the index of an item in the array.

Splice Method

We use the splice method to remove an item by its index position.

We can also use splice to remove a certain number of elements, instead of just one element, in this case, we give two parameters to the splice function instead of 1, we give the index or position from where we want to delete the items, and then we give the number of items we want to delete. It looks something like this,

Array Length

The Length property of an array is something we use to find out the number of items in the array, maybe you are programming and for some reason, you need to find out the length of the array, we use the Length property and trust me there are a lot of reasons you would need to find how many elements are there in the array, eg: you want to loop through an array.

Looping Through Arrays

It’s all great that we can manipulate the array as we like and we can access a single item out of the array, but there are a lot of cases where we want to go through each and every item of the array, how do we really do that?

To do that we loop through the array, where we can access either all of the array or certain parts of the array.

For my explanation, I will be using a for-loop but you can use any loop as per the requirement.

That’s the Gist of it!

Now, there is a lot more to an array than just this, but it’s a pretty good place to start with if it’s your first time working with arrays and you can get comfortable enough with arrays to start working on them with this amount of knowledge.

There are a lot of great resources on the web to understand the other parts of an array but I hope that this article was able to help you grasp the basics of what is an array and why do we use it.

Till next time! 😀

Related Posts

40 Comments

  1. Rosaura

    It’s impressive that you are getting thoughts from this article as well as from our discussion made at this place.|

    Reply
  2. Xavier

    Hi, always i used to check weblog posts here in the early hours in the dawn, as i enjoy to learn more and more.|

    Reply
    • Vibhor

      Hey Xavier, Really glad that you liked the post 🙂

      Reply
  3. Emeline

    I like the valuable information you provide in your articles. I will bookmark your blog and check again here regularly. I’m quite certain I will learn many new stuff right here! Good luck for the next!|

    Reply
    • Vibhor

      Hey Emeline! Thanks for the comment! Really glad that you liked the post 🙂

      Reply
  4. Palmira

    I just could not go away your website prior to suggesting that I extremely enjoyed the usual info a person provide on your visitors? Is gonna be back ceaselessly to check out new posts|

    Reply
    • Vibhor

      Thanks a lot, Palmira! WIll definitely add new posts soon 😀

      Reply
  5. Nikole

    Useful information. Fortunate me I discovered your website unintentionally, and I am surprised why this accident did not took place earlier! I bookmarked it.|

    Reply
    • Vibhor

      Thnx Nikole! Really Appreciate it 😀

      Reply
  6. Herschel

    Hi there, simply turned into alert to your blog via Google, and located that it’s truly informative. I am going to watch out for brussels. I will appreciate if you happen to proceed this in future. Numerous people can be benefited from your writing. Cheers!|

    Reply
    • Vibhor

      Really glad you enjoyed my posts 🙂 I will definitely be adding more and more posts in the future 😀

      Reply
  7. Kasey

    Wow, superb blog structure! How long have you been running a blog for? you make blogging look easy. The total look of your web site is magnificent, as smartly as the content!

    Reply
    • Vibhor

      Not very long, probably a month now 😛 I really need to get back to posting hehe xD

      Reply
  8. Janetta

    What’s up every one, here every one is sharing such knowledge, so it’s nice to read this web site, and I used to go to see this weblog all the time.|

    Reply
    • Vibhor

      Am glad you liked it 🙂

      Reply
  9. Leo

    We’re a group of volunteers and opening a brand new scheme in our community. Your site provided us with useful info to work on. You have done a formidable process and our entire group will be thankful to you.|

    Reply
    • Vibhor

      I am not entirely sure I get you?

      Reply
  10. Carlton

    I absolutely love your website.. Excellent colors & theme. Did you build this site yourself? Please reply back as I’m wanting to create my own personal blog and would love to find out where you got this from or just what the theme is called. Appreciate it!|

    Reply
    • Vibhor

      Hey Carlton! I used the Divi wordpress theme to build the website 🙂

      Reply
  11. Vibhor

    To be honest I am really glad that the site is working good 😛

    Reply
  12. Mitchell

    Hello there, I found your website via Google at the same time as looking for a similar subject, your site got here up, it seems great. I have bookmarked it in my google bookmarks.

    Reply
    • Vibhor

      Thanks a ton!

      Reply
  13. Leonel

    It’s a pity you don’t have a donate button! I’d without a doubt donate to this fantastic blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to fresh updates and will share this website with my Facebook group. Chat soon!|

    Reply
    • Vibhor

      Haha, thanks! Appreciate the gesture 🙂

      Reply
  14. Shelly

    This article gives clear idea for the new visitors of blogging, that really how to do running a blog.|

    Reply
    • Vibhor

      Haha, Thanks 😀

      Reply
  15. Cole

    I could not resist commenting. Well written!|

    Reply
    • Vibhor

      Thanks a ton!

      Reply
  16. Margie

    Fine way of telling, and nice article to obtain data regarding my presentation topic, which i am going to convey in academy.|

    Reply
    • Vibhor

      I am glad I could be of service 😀

      Reply
  17. Erick

    I relish, cause I discovered exactly what I used to be taking a look for. You have ended my four day long hunt! God Bless you man. Have a great day. Bye|

    Reply
    • Vibhor

      Glad I could be of help! 😀

      Reply
  18. g

    My spouse and I absolutely love your blog and find almost all of your post’s to be just what
    I’m looking for. Would you offer guest writers to
    write content available for you? I wouldn’t mind composing a post or
    elaborating on a lot of the subjects you write about here.
    Again, awesome weblog!

    Reply
    • Vibhor

      Thanks a lot for the appreciation! I am not sure about guest content yet but you can contact me on email regarding it and we can take it from there 🙂

      Reply
  19. g

    I really like your blog.. very nice colors & theme.

    Did you make this website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to create my own blog and would like
    to find out where u got this from. thanks

    Reply
    • Vibhor

      Hey, I made the website myself 🙂

      Reply
  20. g

    There’s definately a lot to learn about this topic. I really
    like all the points you have made.

    Reply
    • Vibhor

      Thank you! and certainly, there’s a lot to learn 😀

      Reply
  21. g

    Greetings I am so glad I found your website, I really found you by accident, while I was researching on Bing for
    something else, Nonetheless I am here now and would just like to say kudos for
    a fantastic post and a all round enjoyable blog (I also
    love the theme/design), I don’t have time to look over it all at the minute
    but I have saved it and also included your RSS feeds, so when I have time I will be back to read
    much more, Please do keep up the excellent work.

    Reply
    • Vibhor

      Thank you for the comment!

      Reply

Trackbacks/Pingbacks

  1. Build an Array from Scratch in Javascript - Bucket Of Code - […] the last post Arrays in JS, we learned about what arrays are, how we can store data in them…
  2. Build an Array from Scratch in Javascript | Hacker Noon - Coiner Blog - […] the last post Arrays in JS, we learned about what arrays are, how we can store data in them and…

Submit a Comment

Your email address will not be published. Required fields are marked *