{"id":8600,"date":"2019-01-26T10:01:38","date_gmt":"2019-01-26T15:01:38","guid":{"rendered":"https:\/\/www.carnaghan.com\/?p=8600"},"modified":"2021-03-06T15:48:59","modified_gmt":"2021-03-06T20:48:59","slug":"javascript-arrays-fundmentals","status":"publish","type":"post","link":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/","title":{"rendered":"JavaScript Arrays &#8211; Fundamentals"},"content":{"rendered":"\n<p>Earlier we looked at <a href=\"\/javascript-data-types-values-and-variables\/\">datatypes and variables<\/a>. Arrays take the concept of a variable or binding one step further and allow us to form groups of values within a data structure, which we can then manage in our code. A good use for an array is a list of data. Arrays not only let you group data, but they offer a range of tools or methods to update and manipulate their contents. They are used commonly across different programming languages and have become a routine way of passing around data within applications.<\/p>\n\n\n\n<p>Arrays are also a form of object, which we will be covering later. Once you have mastered arrays, you will quickly realize their strength in managing multiple data points across the code you write. Let&#8217;s dig into arrays by considering an example. Below I have included a group of students, who we would like to manage in some JavaScript application. For the purpose of this example, we are only interested in basic information.<\/p>\n\n\n\n<ul><li>John Smith<\/li><li>Michael Johnson<\/li><li>Paula Sanford<\/li><li>Jenny Carter<\/li><\/ul>\n\n\n\n<p>To create variables for these students, we would have previously done something like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let student1 = \"John Smith\"\nlet student2 = \"Michael Johnson\"\nlet student3 = \"Paula Sanford\"\nlet student4 = \"Jenny Carter\"<\/code><\/pre>\n\n\n\n<p>Instead of separate variables, we are going to use an array to store all four students.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u2192&nbsp;Try it out<\/strong><\/h2>\n\n\n\n<p><span>Create two files called&nbsp;<\/span><strong>index.html<\/strong><span>&nbsp;and&nbsp;<\/span><strong>script.js<\/strong><span>&nbsp;and enter the code below into each. Alternatively, if you followed along in the previous lesson, use the&nbsp;existing script.js file and replace its content with code below. Note, to initialize an array, the format expected is surrounding square brackets, followed by each data element separated&nbsp;by a comma.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE html>\n&lt;html>\n  &lt;head>\n    &lt;title>Bitesize JavaScript&lt;\/title>\n  &lt;\/head>\n  &lt;body>\n    &lt;h1>Bitesize JavaScript&lt;\/h1>\n    &lt;script src=\"script.js\">&lt;\/script>\n  &lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/**\n* Arrays\n*\/\n\nlet students = [\"John Smith\", \"Michael Johnson\", \"Paula Sanford\", \"Jenny Carter\"];\nconsole.log(students);<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><span>To see the results: open index.html in your browser and open the console, Press Ctrl+Shift+J (Windows \/ Linux) or Cmd+Opt+J (Mac).<\/span><\/p><\/blockquote>\n\n\n\n<p>In your console, you should see the output of your array:&nbsp;(4)&nbsp;[&#8220;John Smith&#8221;, &#8220;Michael Johnson&#8221;, &#8220;Paula Sanford&#8221;, &#8220;Jenny Carter&#8221;]\n\n\n\n<p>The number in parenthesis let&#8217;s us know that there are <strong>four elements<\/strong> in our array. The contents of the array are also displayed. While it is nice to be able to recall our students directly by viewing the contents of an array, to make an array usable, we would need to be able to access and manipulate the individual elements contained within.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing Array Elements<\/h2>\n\n\n\n<p>Arrays are <strong>zero-based<\/strong>, meaning that they count their elements starting from zero. In the example above, John Smith would be in the zero position, Michael Johnson 1, and so on. To access a specific element within an array, we simply specify the element number we are interested in. If we wanted to return Paula Sanford we would do so by entering the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log(students[2]);<\/code><\/pre>\n\n\n\n<p>Note that Paula is represented by 2 and would be returned in the console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Array Data Types and Array of Arrays<\/h2>\n\n\n\n<p>Arrays can consist of the different data types available to us within JavaScript including the basic number, string and boolean primitive data types. An array can be a list of all of the same type (which is commonly the case) or can consist of a mix of different types of data.<\/p>\n\n\n\n<p>In addition to this, arrays can also contain complex data types such as other arrays or objects (which we will cover in a future lesson). Try adding the mixedArray and arrayOfArrays variables to your script as shown below and then inspect the results in your browsers console.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/**\n* Arrays\n*\/\n\nlet students = [\"John Smith\", \"Michael Johnson\", \"Paula Sanford\", \"Jenny Carter\"];\nconsole.log(students);\n\nlet mixedArray = [true, 43, \"String example\"];\nconsole.log(mixedArray);\n\nlet arrayOfArrays = [students, mixedArray];\nconsole.log(arrayOfArrays);<\/code><\/pre>\n\n\n\n<p>As you can quickly see, having these capabilities means that arrays are very powerful and can be used for lots of different use cases in our code. As you begin building applications in JavaScript you will quickly realize their importance and usefulness in working with data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Working with Arrays<\/h2>\n\n\n\n<p>Now that we know how to create an array and how to access a specific element, let&#8217;s take a look at what else we can do with them. Thankfully for us, arrays in JavaScript have a built in number of functions (or methods), which we can use to find out information about an array in order to manipulate or update its contents. Before we explore array properties and methods in depth, it is important to understand an important concept in JavaScript called prototypes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Array Prototype<\/h3>\n\n\n\n<p>Since arrays are a form of object in JavaScript (don&#8217;t worry too much about objects yet as we&#8217;ll be covering these later), they inherit some of the same qualities including a base template or prototype. This prototype provides a number of properties and methods that we can use to work with our array.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Think of a prototype as a <strong>bag of tools<\/strong> that comes with every new array.<\/p><\/blockquote>\n\n\n\n<p>To see these tools, let&#8217;s go back to our earlier script by refreshing the browser window and inspecting the console output.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"\/javascript-arrays-fundmentals\/proto\/\" rel=\"attachment wp-att-8885\"><img loading=\"lazy\" decoding=\"async\" width=\"1530\" height=\"1536\" src=\"\/wp-content\/uploads\/2019\/01\/proto.jpeg\" alt=\"Prototype\" class=\"wp-image-8885\" srcset=\"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2019\/01\/proto.jpeg 1530w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2019\/01\/proto-150x150.jpeg 150w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2019\/01\/proto-300x300.jpeg 300w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2019\/01\/proto-768x771.jpeg 768w, https:\/\/www.carnaghan.com\/wp-content\/uploads\/2019\/01\/proto-1020x1024.jpeg 1020w\" sizes=\"(max-width: 1530px) 100vw, 1530px\" \/><\/a><\/figure>\n\n\n\n<p>When you expand the array output as shown above, you should see a property called __proto__. This contains all of the prototype properties and methods, which we can use to work with our array. For your reference, W3schools provides a nice <a href=\"https:\/\/www.w3schools.com\/jsref\/jsref_obj_array.asp\">JavaScript Array Reference<\/a> that describes all properties and methods. Don&#8217;t worry too much about the details of __proto__ right now, the reason I&#8217;m introducing it here is to show you that we have a number of options available to us for working with our array. We are not going to cover everything listed under the prototype, instead we will look at the most commonly used properties and methods that will be useful to us working with our new array. In the next lesson I will provide an overview of each of these methods that will be most useful to you and will cover the majority of your use cases for working with arrays.<\/p>\n\n\n\n<p>By now you should have a good understanding of the concept of an array and how it is a data structure that lets us store multiple elements or pieces of data within in our code. Arrays are a fundamental concept in most modern programming languages and you will find them used a lot in JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Earlier we looked at datatypes and variables. Arrays take the concept of a variable or binding one step further and allow us to form groups of values within a data structure, which we can then manage in our code. A good use for an array is a list of data. Arrays not only let you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[11499,8212,7349],"post_series":[7348],"class_list":["post-8600","post","type-post","status-publish","format-standard","hentry","category-coding","tag-bitesize-javascript","tag-cmst-388","tag-javascript","post_series-bitesize-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Arrays - Fundamentals - Ian Carnaghan<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Arrays - Fundamentals - Ian Carnaghan\" \/>\n<meta property=\"og:description\" content=\"Earlier we looked at datatypes and variables. Arrays take the concept of a variable or binding one step further and allow us to form groups of values within a data structure, which we can then manage in our code. A good use for an array is a list of data. Arrays not only let you [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/\" \/>\n<meta property=\"og:site_name\" content=\"Ian Carnaghan\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-26T15:01:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-06T20:48:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2019\/01\/proto.jpeg\" \/>\n<meta name=\"author\" content=\"Ian Carnaghan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:site\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Carnaghan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/\"},\"author\":{\"name\":\"Ian Carnaghan\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"headline\":\"JavaScript Arrays &#8211; Fundamentals\",\"datePublished\":\"2019-01-26T15:01:38+00:00\",\"dateModified\":\"2021-03-06T20:48:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/\"},\"wordCount\":1001,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"keywords\":[\"Bitesize JavaScript\",\"CMST 388\",\"JavaScript\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/\",\"url\":\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/\",\"name\":\"JavaScript Arrays - Fundamentals - Ian Carnaghan\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/#website\"},\"datePublished\":\"2019-01-26T15:01:38+00:00\",\"dateModified\":\"2021-03-06T20:48:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.carnaghan.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Arrays &#8211; Fundamentals\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.carnaghan.com\/#website\",\"url\":\"https:\/\/www.carnaghan.com\/\",\"name\":\"Ian Carnaghan\",\"description\":\"Software Developer, Blogger, Educator\",\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.carnaghan.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\",\"name\":\"Ian Carnaghan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"caption\":\"Ian Carnaghan\"},\"logo\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\"},\"description\":\"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.\",\"sameAs\":[\"http:\/\/www.carnaghan.com\",\"https:\/\/x.com\/icarnaghan\"],\"url\":\"https:\/\/www.carnaghan.com\/author\/icarnaghan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Arrays - Fundamentals - Ian Carnaghan","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Arrays - Fundamentals - Ian Carnaghan","og_description":"Earlier we looked at datatypes and variables. Arrays take the concept of a variable or binding one step further and allow us to form groups of values within a data structure, which we can then manage in our code. A good use for an array is a list of data. Arrays not only let you [&hellip;]","og_url":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/","og_site_name":"Ian Carnaghan","article_published_time":"2019-01-26T15:01:38+00:00","article_modified_time":"2021-03-06T20:48:59+00:00","og_image":[{"url":"https:\/\/www.carnaghan.com\/wp-content\/uploads\/2019\/01\/proto.jpeg"}],"author":"Ian Carnaghan","twitter_card":"summary_large_image","twitter_creator":"@icarnaghan","twitter_site":"@icarnaghan","twitter_misc":{"Written by":"Ian Carnaghan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/#article","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/"},"author":{"name":"Ian Carnaghan","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"headline":"JavaScript Arrays &#8211; Fundamentals","datePublished":"2019-01-26T15:01:38+00:00","dateModified":"2021-03-06T20:48:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/"},"wordCount":1001,"commentCount":0,"publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"keywords":["Bitesize JavaScript","CMST 388","JavaScript"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/","url":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/","name":"JavaScript Arrays - Fundamentals - Ian Carnaghan","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/#website"},"datePublished":"2019-01-26T15:01:38+00:00","dateModified":"2021-03-06T20:48:59+00:00","breadcrumb":{"@id":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.carnaghan.com\/javascript-arrays-fundmentals\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.carnaghan.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Arrays &#8211; Fundamentals"}]},{"@type":"WebSite","@id":"https:\/\/www.carnaghan.com\/#website","url":"https:\/\/www.carnaghan.com\/","name":"Ian Carnaghan","description":"Software Developer, Blogger, Educator","publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.carnaghan.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5","name":"Ian Carnaghan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","caption":"Ian Carnaghan"},"logo":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/"},"description":"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.","sameAs":["http:\/\/www.carnaghan.com","https:\/\/x.com\/icarnaghan"],"url":"https:\/\/www.carnaghan.com\/author\/icarnaghan\/"}]}},"views":175,"_links":{"self":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/8600"}],"collection":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/comments?post=8600"}],"version-history":[{"count":0,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/8600\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/media?parent=8600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/categories?post=8600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/tags?post=8600"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/post_series?post=8600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}