{"id":389,"date":"2011-12-20T15:07:57","date_gmt":"2011-12-20T15:07:57","guid":{"rendered":"http:\/\/javascript-tutor.net\/index.php\/"},"modified":"2017-11-16T23:08:11","modified_gmt":"2017-11-16T23:08:11","slug":"lesson-22-creating-arrays-javascript-part-1","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/","title":{"rendered":"JavaScript Lesson 22: Creating Arrays  Part 1"},"content":{"rendered":"<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\">&lt;Lesson 21&gt;<\/a> <a href=http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/\">&lt;Lesson 23&gt;<\/a><\/strong><\/h4>\n<h3><strong>22.1: Introduction to Arrays in JavaScript<\/strong><\/h3>\n<p>An array\u00a0a regular data structure\u00a0comprises\u00a0individual elements\u00a0that can\u00a0be referenced\u00a0to one or more integer index variables, the number of such indices being the number of dimensions\u00a0or number of elements\u00a0in the array.In\u00a0JavaScript, an array is usually represented using the format\u00a0<strong>arrayName[ i ],<\/strong> where i is the index or subscript which represents the position of the element within the array<strong>.<\/strong> The array always starts with the zeroth element. For example, an array A of 8 elements comprises elements\u00a0 A[0], A[1], A[2], A[3], A[4],A[5], A[6], A[7].<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><br \/>\nLet&#8217;s illustrate the above example further. The values of each element shown in the table below:<\/p>\n<div style=\"overflow-x: auto;\">\n<table style=\"table-layout: fixed; width: auto; font-size: 100%;\" border=\"1\" align=\"center\">\n<tbody>\n<tr>\n<td>A[0]<\/td>\n<td>A[1]<\/td>\n<td>A[2]<\/td>\n<td>A[3]<\/td>\n<td>A[4]<\/td>\n<td>A[5]<\/td>\n<td>A[6]<\/td>\n<td>A[7]<\/td>\n<\/tr>\n<tr>\n<td>54<\/td>\n<td>60<\/td>\n<td>23<\/td>\n<td>45<\/td>\n<td>67<\/td>\n<td>90<\/td>\n<td>85<\/td>\n<td>34<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>From the above table, the value of A[0]=54, A[1]=60, A[2]=23\u00a0 and so forth.<\/p>\n<p>We can perform arithmetic operations on the array elements. For example,<\/p>\n<p>x=A[1]+A[2]+A[3]=137<\/p>\n<p>The above operations add up the values of three array elements and store the sum in the variable x.<\/p>\n<h3><strong>22.2 Declaring and Allocating Arrays<\/strong><\/h3>\n<p>In JavaScript, an array can be declared using a number of ways. If the values of the array are unknown or not initialized at the beginning, we use the following statement:<\/p>\n<p>var\u00a0\u00a0 A= new Array(12);<\/p>\n<p>which creates an array (or rather array object) that consists of 12 elements. The operator\u00a0<strong>new<\/strong> allocates memory to store 12 elements of the array. The process of creating a new object is known as creating an instance of the object, in this case, an Array object.<\/p>\n<p>Different arrays may be created using one single declaration, separated by commas,as follows:<\/p>\n<p>var x=new Array(20), y=new Array(15), z= new Array(30)<\/p>\n<div class=\"codebg\">\n<h4><strong>Example 22.1<\/strong><\/h4>\n<p>&lt;head&gt;<\/p>\n<p>&lt;script&gt;<\/p>\n<p>function Start()<br \/>\n{ var A= new Array(10);<\/p>\n<p>for (var i=0; i&lt;A.length;++i)<br \/>\nA[i]=i*10;<br \/>\nfor (var i=0; i&lt;A.length;++i)<br \/>\ndocument.writeln ((&#8220;element &#8220;+i+&#8221; is &#8220;+A[i]+&#8221;&lt;br&gt;&#8221;);<br \/>\n}<\/p>\n<p>&lt;\/script&gt;<\/p>\n<p>&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;\/body&gt;<\/p>\n<\/div>\n<p>&amp;nsbp;<\/p>\n<p>The output is shown below:<\/p>\n<div class=\"outputbg\">element 0 is 0<br \/>\nelement 1 is 10<br \/>\nelement 2 is 20<br \/>\nelement 3 is 30<br \/>\nelement 4 is 40<br \/>\nelement 5 is 50<br \/>\nelement 6 is 60<br \/>\nelement 7 is 70<br \/>\nelement 8 is 80<br \/>\nelement 9 is 90<\/div>\n<p>Click on\u00a0<a href=\"http:\/\/javascript-tutor.net\/java_tutor\/Javascrpt_Example22.1.htm\">Example 22.1 <\/a>to see the actual output.<\/p>\n<p>Note that we create a function Start to initialize the values of elements in the array using for loop. The results are output using the document.writeln method. The onload method is to initialize the function Start.<br \/>\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block; text-align: center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3033628290023372\" data-ad-slot=\"5669011038\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h4 align=\"center\"><strong><a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-21-creating-selection-list\/\">&lt;Lesson 21&gt;<\/a> <a href=http:\/\/javascript-tutor.net\/index.php\/javascript-tutorial\/\">[Contents]<\/a> <a href=\"http:\/\/javascript-tutor.net\/index.php\/lesson-23-creating-arrays-javascript-part-2\/\">&lt;Lesson 23&gt;<\/a><\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>&lt;Lesson 21&gt; [Contents] &lt;Lesson 23&gt;<\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-389","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Lesson 22: Creating Arrays Part 1 - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"This javascript lesson explains how to create arrays in javascript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Lesson 22: Creating Arrays Part 1 - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"This javascript lesson explains how to create arrays in javascript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-16T23:08:11+00:00\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/\",\"url\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/\",\"name\":\"JavaScript Lesson 22: Creating Arrays Part 1 - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2011-12-20T15:07:57+00:00\",\"dateModified\":\"2017-11-16T23:08:11+00:00\",\"description\":\"This javascript lesson explains how to create arrays in javascript\",\"breadcrumb\":{\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Lesson 22: Creating Arrays Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Lesson 22: Creating Arrays Part 1 - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"This javascript lesson explains how to create arrays in javascript","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:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Lesson 22: Creating Arrays Part 1 - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"This javascript lesson explains how to create arrays in javascript","og_url":"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-16T23:08:11+00:00","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/","url":"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/","name":"JavaScript Lesson 22: Creating Arrays Part 1 - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2011-12-20T15:07:57+00:00","dateModified":"2017-11-16T23:08:11+00:00","description":"This javascript lesson explains how to create arrays in javascript","breadcrumb":{"@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/javascript-tutor.net\/index.php\/lesson-22-creating-arrays-javascript-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"JavaScript Lesson 22: Creating Arrays Part 1"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=389"}],"version-history":[{"count":37,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/389\/revisions"}],"predecessor-version":[{"id":2501,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/389\/revisions\/2501"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}