All three methods produce precisely the same array. The regular method creates the array first and then assigns strings to each array element by number. The square brackets behind Colors indicate the element number, which begins at 0 and increments by 1 for each element you add.
\n
Notice that when using the condensed method you enclose the array elements in parentheses as part of the constructor. However, when using the literal method, you enclose the array elements in square brackets.
\n\n
How to access array members
\n
Each array member has a unique number — an address of sorts. You access array members by providing the array name and then the element number within square brackets. Normally, you use a loop to access array members. Loops are a means of automating array access.
\n
The following code shows an example of how you might access an array, one element at a time, and display its content.
\n
\n
Access Array Elements
\n \n
\n
This example uses a for loop. The for loop creates a counter variable (a number) named i that begins at 0 (the first element of the array) and continues to increment (i++) until it has accessed all the array elements (i < Colors.length). The document.write() function outputs the Colors element number, the content (as Colors[i] where i is the element number), and an end-of-line tag.
\n","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.dummies.com/article/technology/programming-web-design/html5/how-to-use-arrays-to-integrate-javascript-with-html-165877/"]}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.dummies.com/"},{"@type":"ListItem","position":2,"name":"Technology","item":"https://www.dummies.com/category/articles/technology-33512"},{"@type":"ListItem","position":3,"name":"Programming Web Design","item":"https://www.dummies.com/category/articles/programming-web-design-33592"},{"@type":"ListItem","position":4,"name":"HTML5","item":"https://www.dummies.com/category/articles/html5-33601"},{"@type":"ListItem","position":5,"name":"How to Use Arrays to Integrate JavaScript with HTML"}]},{"@type":"Organization","url":"https://www.dummies.com/","logo":"https://www.dummies.com/img/logo.f7c39ad9.svg"},{"@type":"ImageObject","id":"#primaryimage","@id":"https://www.dummies.com/article/technology/programming-web-design/html5/how-to-use-arrays-to-integrate-javascript-with-html-165877//#primaryimage","url":"https://www.dummies.com/wp-content/uploads/377309.image0.jpg","caption":"image0jpg","height":400,"width":328},{"@type":"Article","id":"#article","headline":"How to Use Arrays to Integrate JavaScript with HTML dummies","datePublished":"2016-03-26T14:52:32+00:00","dateModified":"2016-03-26T14:52:32+00:00","author":[{"@type":"Person","name":"John Paul Mueller","url":"https://www.dummies.com/author/john-paul-mueller-9109"}],"image":{"@id":"https://www.dummies.com/article/technology/programming-web-design/html5/how-to-use-arrays-to-integrate-javascript-with-html-165877//#primaryimage"}}]}
{"appState":{"pageLoadApiCallsStatus":true},"articleState":{"article":{"headers":{"creationTime":"2016-03-26T14:52:32+00:00","modifiedTime":"2016-03-26T14:52:32+00:00","timestamp":"2022-02-24T16:51:46+00:00"},"data":{"breadcrumbs":[{"name":"Technology","_links":{"self":"https://dummies-api.dummies.com/v2/categories/33512"},"slug":"technology","categoryId":33512},{"name":"Programming & Web Design","_links":{"self":"https://dummies-api.dummies.com/v2/categories/33592"},"slug":"programming-web-design","categoryId":33592},{"name":"HTML5","_links":{"self":"https://dummies-api.dummies.com/v2/categories/33601"},"slug":"html5","categoryId":33601}],"title":"How to Use Arrays to Integrate JavaScript with HTML","strippedTitle":"how to use arrays to integrate javascript with html","slug":"how-to-use-arrays-to-integrate-javascript-with-html","canonicalUrl":"","seo":{"metaDescription":"","noIndex":0,"noFollow":0},"content":"<p>In JavaScript,<i> a</i><i>rrays</i> are a kind of collection. You can work with arrays to integrate JavaScript with HTML. Each array contains zero or more like items that you can manipulate as a group.</p>\n<h2 id=\"tab1\" >How to create an array in JavaScript</h2>\n<p>JavaScript provides three methods for creating arrays: regular, condensed, and literal. In general, one way is as good as another. Of the three, the regular method shown in the following listing is the easiest to understand, but the literal method is the most compact.</p>\n<pre class=\"code\"><body>\n <h1>Creating Arrays</h1>\n <h2 id=\"tab2\" >Regular:</h2>\n <script language=\"JavaScript\">\n // Create the array.\n var Colors = new Array();\n // Fill the array with data.\n Colors[0] = \"Blue\";\n Colors[1] = \"Green\";\n Colors[2] = \"Purple\";\n // Display the content onscreen.\n document.write(Colors);\n </script>\n <h2 id=\"tab3\" >Condensed:</h2>\n <script language=\"JavaScript\">\n // Create the array and fill it with data.\n var Colors = new Array(\"Blue\", \"Green\", \"Purple\");\n // Display the content onscreen.\n document.write(Colors);\n </script>\n <h2 id=\"tab4\" >Literal:</h2>\n <script language=\"JavaScript\">\n // Create the array and fill it with data.\n var Colors = [\"Blue\", \"Green\", \"Purple\"];\n // Display the content onscreen.\n document.write(Colors);\n </script>\n</body></pre>\n<p>All three methods produce precisely the same array. The regular method creates the array first and then assigns strings to each array element by number. The square brackets behind <span class=\"code\">Colors</span> indicate the element number, which begins at 0 and increments by 1 for each element you add.</p>\n<p>Notice that when using the condensed method you enclose the array elements in parentheses as part of the constructor. However, when using the literal method, you enclose the array elements in square brackets.</p>\n<img src=\"https://www.dummies.com/wp-content/uploads/377309.image0.jpg\" width=\"328\" height=\"400\" alt=\"image0.jpg\"/>\n<h2 id=\"tab5\" >How to access array members</h2>\n<p>Each array member has a unique number — an address of sorts. You access array members by providing the array name and then the element number within square brackets. Normally, you use a loop to access array members. Loops are a means of automating array access.</p>\n<p>The following code shows an example of how you might access an array, one element at a time, and display its content.</p>\n<pre class=\"code\"><body>\n <h1>Access Array Elements</h1>\n <script language=\"JavaScript\">\n // Create the array and fill it with data.\n var Colors = [\"Blue\", \"Green\", \"Purple\"];\n // Define a loop to access each array element\n // and display it onscreen.\n for (i = 0; i < Colors.length; i++)\n {\n document.write(\n \"Colors \" + i + \" = \" +\n Colors[i] + \"<br />\");\n }\n </script>\n</body></pre>\n<p>This example uses a <span class=\"code\">for</span> loop. The <span class=\"code\">for</span> loop creates a counter variable (a number) named <span class=\"code\">i</span> that begins at 0 (the first element of the array) and continues to increment (<span class=\"code\">i++</span>) until it has accessed all the array elements (<span class=\"code\">i < Colors.length</span>). The <span class=\"code\">document.write()</span> function outputs the <span class=\"code\">Colors</span> element number, the content (as <span class=\"code\">Colors[i]</span> where <span class=\"code\">i</span> is the element number), and an end-of-line tag.</p>\n<img src=\"https://www.dummies.com/wp-content/uploads/377310.image1.jpg\" width=\"494\" height=\"394\" alt=\"image1.jpg\"/>","description":"<p>In JavaScript,<i> a</i><i>rrays</i> are a kind of collection. You can work with arrays to integrate JavaScript with HTML. Each array contains zero or more like items that you can manipulate as a group.</p>\n<h2 id=\"tab1\" >How to create an array in JavaScript</h2>\n<p>JavaScript provides three methods for creating arrays: regular, condensed, and literal. In general, one way is as good as another. Of the three, the regular method shown in the following listing is the easiest to understand, but the literal method is the most compact.</p>\n<pre class=\"code\"><body>\n <h1>Creating Arrays</h1>\n <h2 id=\"tab2\" >Regular:</h2>\n <script language=\"JavaScript\">\n // Create the array.\n var Colors = new Array();\n // Fill the array with data.\n Colors[0] = \"Blue\";\n Colors[1] = \"Green\";\n Colors[2] = \"Purple\";\n // Display the content onscreen.\n document.write(Colors);\n </script>\n <h2 id=\"tab3\" >Condensed:</h2>\n <script language=\"JavaScript\">\n // Create the array and fill it with data.\n var Colors = new Array(\"Blue\", \"Green\", \"Purple\");\n // Display the content onscreen.\n document.write(Colors);\n </script>\n <h2 id=\"tab4\" >Literal:</h2>\n <script language=\"JavaScript\">\n // Create the array and fill it with data.\n var Colors = [\"Blue\", \"Green\", \"Purple\"];\n // Display the content onscreen.\n document.write(Colors);\n </script>\n</body></pre>\n<p>All three methods produce precisely the same array. The regular method creates the array first and then assigns strings to each array element by number. The square brackets behind <span class=\"code\">Colors</span> indicate the element number, which begins at 0 and increments by 1 for each element you add.</p>\n<p>Notice that when using the condensed method you enclose the array elements in parentheses as part of the constructor. However, when using the literal method, you enclose the array elements in square brackets.</p>\n<img src=\"https://www.dummies.com/wp-content/uploads/377309.image0.jpg\" width=\"328\" height=\"400\" alt=\"image0.jpg\"/>\n<h2 id=\"tab5\" >How to access array members</h2>\n<p>Each array member has a unique number — an address of sorts. You access array members by providing the array name and then the element number within square brackets. Normally, you use a loop to access array members. Loops are a means of automating array access.</p>\n<p>The following code shows an example of how you might access an array, one element at a time, and display its content.</p>\n<pre class=\"code\"><body>\n <h1>Access Array Elements</h1>\n <script language=\"JavaScript\">\n // Create the array and fill it with data.\n var Colors = [\"Blue\", \"Green\", \"Purple\"];\n // Define a loop to access each array element\n // and display it onscreen.\n for (i = 0; i < Colors.length; i++)\n {\n document.write(\n \"Colors \" + i + \" = \" +\n Colors[i] + \"<br />\");\n }\n </script>\n</body></pre>\n<p>This example uses a <span class=\"code\">for</span> loop. The <span class=\"code\">for</span> loop creates a counter variable (a number) named <span class=\"code\">i</span> that begins at 0 (the first element of the array) and continues to increment (<span class=\"code\">i++</span>) until it has accessed all the array elements (<span class=\"code\">i < Colors.length</span>). The <span class=\"code\">document.write()</span> function outputs the <span class=\"code\">Colors</span> element number, the content (as <span class=\"code\">Colors[i]</span> where <span class=\"code\">i</span> is the element number), and an end-of-line tag.</p>\n<img src=\"https://www.dummies.com/wp-content/uploads/377310.image1.jpg\" width=\"494\" height=\"394\" alt=\"image1.jpg\"/>","blurb":"","authors":[{"authorId":9109,"name":"John Paul Mueller","slug":"john-paul-mueller","description":"John Paul Mueller has written more than 100 books and more than 600 articles on topics ranging from functional programming techniques to application development using C++. ","_links":{"self":"https://dummies-api.dummies.com/v2/authors/9109"}}],"primaryCategoryTaxonomy":{"categoryId":33601,"title":"HTML5","slug":"html5","_links":{"self":"https://dummies-api.dummies.com/v2/categories/33601"}},"secondaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"tertiaryCategoryTaxonomy":{"categoryId":0,"title":null,"slug":null,"_links":null},"trendingArticles":null,"inThisArticle":[{"label":"How to create an array in JavaScript","target":"#tab1"},{"label":"How to access array members","target":"#tab2"}],"relatedArticles":{"fromBook":[],"fromCategory":[{"articleId":207867,"title":"Beginning HTML5 & CSS3 For Dummies Cheat Sheet","slug":"beginning-html5-css3-for-dummies-cheat-sheet","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/207867"}},{"articleId":207816,"title":"HTML5 & CSS3 For Dummies Cheat Sheet","slug":"html5-css3-for-dummies-cheat-sheet","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/207816"}},{"articleId":207788,"title":"HTML5 and CSS3 All-in-One For Dummies Cheat Sheet","slug":"html5-and-css3-all-in-one-for-dummies-cheat-sheet","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/207788"}},{"articleId":204537,"title":"How to Create a New JavaScript File in Komodo Edit","slug":"how-to-create-a-new-javascript-file-in-komodo-edit","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/204537"}},{"articleId":204532,"title":"How to Create Cascading Style Sheets (CSS) Simply and Easily","slug":"how-to-create-cascading-style-sheets-css-simply-and-easily","categoryList":["technology","programming-web-design","html5"],"_links":{"self":"https://dummies-api.dummies.com/v2/articles/204532"}}]},"hasRelatedBookFromSearch":true,"relatedBook":{"bookId":281747,"slug":"java-all-in-one-for-dummies-6th-edition","isbn":"9781119680451","categoryList":["technology","programming-web-design","java"],"amazon":{"default":"https://www.amazon.com/gp/product/111968045X/ref=as_li_tl?ie=UTF8&tag=wiley01-20","ca":"https://www.amazon.ca/gp/product/111968045X/ref=as_li_tl?ie=UTF8&tag=wiley01-20","indigo_ca":"http://www.tkqlhce.com/click-9208661-13710633?url=https://www.chapters.indigo.ca/en-ca/books/product/111968045X-item.html&cjsku=978111945484","gb":"https://www.amazon.co.uk/gp/product/111968045X/ref=as_li_tl?ie=UTF8&tag=wiley01-20","de":"https://www.amazon.de/gp/product/111968045X/ref=as_li_tl?ie=UTF8&tag=wiley01-20"},"image":{"src":"https://catalogimages.wiley.com/images/db/jimages/9781119680451.jpg","width":250,"height":350},"title":"Java All-in-One For Dummies","testBankPinActivationLink":"","bookOutOfPrint":true,"authorsInfo":"\n <p><b data-author-id=\"8946\">Doug Lowe</b> still has the electronics experimenter's kit his dad gave him when he was 10. He became an IT director, programmer, and author of books on various programming languages, Microsoft Office, web programming, and PCs. But Lowe never forgot his first love: electronics.</p>","authors":[{"authorId":8946,"name":"Doug Lowe","slug":"doug-lowe","description":"Doug Lowe still has the electronics experimenter's kit his dad gave him when he was 10. He became an IT director, programmer, and author of books on various programming languages, Microsoft Office, web programming, and PCs. But Lowe never forgot his first love: electronics.","_links":{"self":"https://dummies-api.dummies.com/v2/authors/8946"}}],"_links":{"self":"https://dummies-api.dummies.com/v2/books/281747"}},"collections":[],"articleAds":{"footerAd":"<div class=\"du-ad-region row\" id=\"article_page_adhesion_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_adhesion_ad\" data-refreshed=\"false\" \r\n data-target = \"[{"key":"cat","values":["technology","programming-web-design","html5"]},{"key":"isbn","values":[null]}]\" id=\"du-slot-6217b7a22e40e\"></div></div>","rightAd":"<div class=\"du-ad-region row\" id=\"article_page_right_ad\"><div class=\"du-ad-unit col-md-12\" data-slot-id=\"article_page_right_ad\" data-refreshed=\"false\" \r\n data-target = \"[{"key":"cat","values":["technology","programming-web-design","html5"]},{"key":"isbn","values":[null]}]\" id=\"du-slot-6217b7a22ed7e\"></div></div>"},"articleType":{"articleType":"Articles","articleList":null,"content":null,"videoInfo":{"videoId":null,"name":null,"accountId":null,"playerId":null,"thumbnailUrl":null,"description":null,"uploadDate":null}},"sponsorship":{"sponsorshipPage":false,"backgroundImage":{"src":null,"width":0,"height":0},"brandingLine":"","brandingLink":"","brandingLogo":{"src":null,"width":0,"height":0}},"primaryLearningPath":"Advance","lifeExpectancy":null,"lifeExpectancySetFrom":null,"dummiesForKids":"no","sponsoredContent":"no","adInfo":"","adPairKey":[]},"status":"publish","visibility":"public","articleId":165877},"articleLoadedStatus":"success"},"listState":{"list":{},"objectTitle":"","status":"initial","pageType":null,"objectId":null,"page":1,"sortField":"time","sortOrder":1,"categoriesIds":[],"articleTypes":[],"filterData":{},"filterDataLoadedStatus":"initial","pageSize":10},"adsState":{"pageScripts":{"headers":{"timestamp":"2022-05-16T12:59:10+00:00"},"adsId":0,"data":{"scripts":[{"pages":["all"],"location":"header","script":"<!--Optimizely Script-->\r\n<script src=\"https://cdn.optimizely.com/js/10563184655.js\"></script>","enabled":false},{"pages":["all"],"location":"header","script":"<!-- comScore Tag -->\r\n<script>var _comscore = _comscore || [];_comscore.push({ c1: \"2\", c2: \"15097263\" });(function() {var s = document.createElement(\"script\"), el = document.getElementsByTagName(\"script\")[0]; s.async = true;s.src = (document.location.protocol == \"https:\" ? \"https://sb\" : \"http://b\") + \".scorecardresearch.com/beacon.js\";el.parentNode.insertBefore(s, el);})();</script><noscript><img src=\"https://sb.scorecardresearch.com/p?c1=2&c2=15097263&cv=2.0&cj=1\" /></noscript>\r\n<!-- / comScore Tag -->","enabled":true},{"pages":["all"],"location":"footer","script":"<!--BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET-->\r\n<script type='text/javascript'>\r\n(function(){var g=function(e,h,f,g){\r\nthis.get=function(a){for(var a=a+\"=\",c=document.cookie.split(\";\"),b=0,e=c.length;b<e;b++){for(var d=c[b];\" \"==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(a))return d.substring(a.length,d.length)}return null};\r\nthis.set=function(a,c){var b=\"\",b=new Date;b.setTime(b.getTime()+6048E5);b=\"; expires=\"+b.toGMTString();document.cookie=a+\"=\"+c+b+\"; path=/; \"};\r\nthis.check=function(){var a=this.get(f);if(a)a=a.split(\":\");else if(100!=e)\"v\"==h&&(e=Math.random()>=e/100?0:100),a=[h,e,0],this.set(f,a.join(\":\"));else return!0;var c=a[1];if(100==c)return!0;switch(a[0]){case \"v\":return!1;case \"r\":return c=a[2]%Math.floor(100/c),a[2]++,this.set(f,a.join(\":\")),!c}return!0};\r\nthis.go=function(){if(this.check()){var a=document.createElement(\"script\");a.type=\"text/javascript\";a.src=g;document.body&&document.body.appendChild(a)}};\r\nthis.start=function(){var t=this;\"complete\"!==document.readyState?window.addEventListener?window.addEventListener(\"load\",function(){t.go()},!1):window.attachEvent&&window.attachEvent(\"onload\",function(){t.go()}):t.go()};};\r\ntry{(new g(100,\"r\",\"QSI_S_ZN_5o5yqpvMVjgDOuN\",\"https://zn5o5yqpvmvjgdoun-wiley.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_5o5yqpvMVjgDOuN\")).start()}catch(i){}})();\r\n</script><div id='ZN_5o5yqpvMVjgDOuN'><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>\r\n<!--END WEBSITE FEEDBACK SNIPPET-->","enabled":false},{"pages":["all"],"location":"header","script":"<!-- Hotjar Tracking Code for http://www.dummies.com -->\r\n<script>\r\n (function(h,o,t,j,a,r){\r\n h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\r\n h._hjSettings={hjid:257151,hjsv:6};\r\n a=o.getElementsByTagName('head')[0];\r\n r=o.createElement('script');r.async=1;\r\n r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\r\n a.appendChild(r);\r\n })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\r\n</script>","enabled":false},{"pages":["article"],"location":"header","script":"<!-- //Connect Container: dummies --> <script src=\"//get.s-onetag.com/bffe21a1-6bb8-4928-9449-7beadb468dae/tag.min.js\" async defer></script>","enabled":true},{"pages":["homepage"],"location":"header","script":"<meta name=\"facebook-domain-verification\" content=\"irk8y0irxf718trg3uwwuexg6xpva0\" />","enabled":true},{"pages":["homepage","article","category","search"],"location":"footer","script":"<!-- Facebook Pixel Code -->\r\n<noscript>\r\n<img height=\"1\" width=\"1\" src=\"https://www.facebook.com/tr?id=256338321977984&ev=PageView&noscript=1\"/>\r\n</noscript>\r\n<!-- End Facebook Pixel Code -->","enabled":true}]}},"pageScriptsLoadedStatus":"success"},"searchState":{"searchList":[],"searchStatus":"initial","relatedArticlesList":{"term":"165877","count":5,"total":306,"topCategory":0,"items":[{"objectType":"article","id":165877,"data":{"title":"How to Use Arrays to Integrate JavaScript with HTML","slug":"how-to-use-arrays-to-integrate-javascript-with-html","update_time":"2016-03-26T14:52:32+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"HTML5","slug":"html5","categoryId":33601}],"description":"In JavaScript, arrays are a kind of collection. You can work with arrays to integrate JavaScript with HTML. Each array contains zero or more like items that you can manipulate as a group.\nHow to create an array in JavaScript\nJavaScript provides three methods for creating arrays: regular, condensed, and literal. In general, one way is as good as another. Of the three, the regular method shown in the following listing is the easiest to understand, but the literal method is the most compact.\n\n Creating Arrays\n Regular:\n \n // Create the array.\n var Colors = new Array();\n // Fill the array with data.\n Colors[0] = \"Blue\";\n Colors[1] = \"Green\";\n Colors[2] = \"Purple\";\n // Display the content onscreen.\n document.write(Colors);\n \n Condensed:\n \n // Create the array and fill it with data.\n var Colors = new Array(\"Blue\", \"Green\", \"Purple\");\n // Display the content onscreen.\n document.write(Colors);\n \n Literal:\n \n // Create the array and fill it with data.\n var Colors = [\"Blue\", \"Green\", \"Purple\"];\n // Display the content onscreen.\n document.write(Colors);\n \n\nAll three methods produce precisely the same array. The regular method creates the array first and then assigns strings to each array element by number. The square brackets behind Colors indicate the element number, which begins at 0 and increments by 1 for each element you add.\nNotice that when using the condensed method you enclose the array elements in parentheses as part of the constructor. However, when using the literal method, you enclose the array elements in square brackets.\n\nHow to access array members\nEach array member has a unique number — an address of sorts. You access array members by providing the array name and then the element number within square brackets. Normally, you use a loop to access array members. Loops are a means of automating array access.\nThe following code shows an example of how you might access an array, one element at a time, and display its content.\n\n Access Array Elements\n \n // Create the array and fill it with data.\n var Colors = [\"Blue\", \"Green\", \"Purple\"];\n // Define a loop to access each array element\n // and display it onscreen.\n for (i = 0; i < Colors.length; i++)\n {\n document.write(\n \"Colors \" + i + \" = \" +\n Colors[i] + \"\");\n }\n \n\nThis example uses a for loop. The for loop creates a counter variable (a number) named i that begins at 0 (the first element of the array) and continues to increment (i++) until it has accessed all the array elements (i ). The document.write() function outputs the Colors element number, the content (as Colors[i] where i is the element number), and an end-of-line tag.\n","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null},{"objectType":"article","id":140904,"data":{"title":"Working with Array Methods in JavaScript","slug":"working-with-array-methods-in-javascript","update_time":"2016-03-26T07:26:12+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"JavaScript","slug":"javascript","categoryId":33603}],"description":"Array methods in JavaScript are built-in things that can be done with or to JavaScript arrays. These methods are perhaps the best part about working with arrays in JavaScript. Once you know how to use them, you’ll save yourself a lot of time and effort. Plus, they can also be a lot of fun!\nJavaScript’s built-in array methods are listed here.\n\n\nJavaScript Array Methods\n\n\nMethod\nDescription\n\n\nconcat()\nA new array made up of the current array, joined with other\narray(s) and/or value(s).\n\n\nindexOf()\nReturns the first occurrence of the specified value within the\narray. Returns –1 if the value is not found.\n\n\njoin()\nJoins all the elements of an array into a string.\n\n\nlastIndexOf()\nReturns the last occurrence of the specified value within the\narray. Returns –1 if the value is not found.\n\n\npop()\nRemoves the last element in an array.\n\n\npush()\nAdds new items to the end of an array.\n\n\nreverse()\nReverses the order of elements in an array.\n\n\nshift()\nRemoves the first element from an array and returns that\nelement, resulting in a change in length of an array.\n\n\nslice()\nSelects a portion of an array and returns it as a new\narray.\n\n\nsort()\nReturns an array after the elements in an array are sorted.\n(The default sort order is alphabetical and ascending.)\n\n\nsplice()\nReturns a new array comprised of elements that were added to or\nremoved from a given array.\n\n\ntostring()\nConverts an array to a string.\n\n\nunshift()\nReturns a new array with a new length by the addition of one or\nmore elements.\n\n","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null},{"objectType":"article","id":140945,"data":{"title":"Creating and Accessing JavaScript Arrays","slug":"creating-and-accessing-javascript-arrays","update_time":"2016-03-26T07:26:36+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"JavaScript","slug":"javascript","categoryId":33603}],"description":"Creating an array in JavaScript starts the same way as any variable: with the var keyword. However, in order to let JavaScript know that the object you're making isn't just a normal variable, you put square brackets after it.\nTo create an array with nothing inside it, just use empty brackets, like this:\nvar favoriteFoods = [];\nTo create an array with data inside it, put values inside the brackets, separated by commas, like this:\nvar favoriteFoods = [\"broccoli\",\"eggplant\",\"tacos\",\"mushrooms\"];\nStoring different data types\nArrays can hold any of the different data types of JavaScript, including numbers, strings, Boolean values, and objects.\nIn fact, a single array can contain multiple different data types. For example, the following array definition creates an array containing a number, a string, and a Boolean value:\nvar myArray = [5, \"Hi there\", true];\nJust as when you create regular variables, string values in arrays must be within either single or double quotes.\nGetting array values\nTo get the value of an array element, use the name of the array, followed by square brackets containing the number of the element you want to retrieve. For example:\nmyArray[0]\nUsing an existing array definition, this will return the number 5.\nUsing variables inside arrays\nYou can also use variables within array definitions. For example, in the following code, you create two variables and then you use that variable inside an array definition:\nvar firstName = \"Neil\";\nvar middleName = \"deGrasse\"\nvar lastName = \"Tyson\";\nvar Scientist = [firstName, middleName, lastName];\nBecause variables are stand-ins for values, the result of these three statements is exactly the same as if you were to write the following statement:\nvar Scientist = [\"Neil\",\"deGrasse\" \"Tyson\"];\nTo find out more about arrays, practice setting, retrieving, and changing array elements in the JavaScript Console.","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null},{"objectType":"article","id":142565,"data":{"title":"Array Fundamentals for Coding with JavaScript","slug":"array-fundamentals-for-coding-with-javascript","update_time":"2016-03-26T07:38:38+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"JavaScript","slug":"javascript","categoryId":33603}],"description":"Understanding arrays is an important part of coding with JavaScript. An array consists of array elements. Array elements are made up of the array name and then an index number that is contained in square brackets. The individual value within an array is called an array element. Arrays use numbers (called the index numbers) to access those elements. The following example illustrates how arrays use index numbers to access elements:\nmyArray[0] = “yellow balloon”;\nmyArray[1] = “red balloon”;\nmyArray[2] = “blue balloon”;\nmyArray[3] = “pink balloon”;\nIn this example, the element with the index number of 0 has a value of “yellow balloon”. The element with an index number 3 has a value of “pink balloon”. Just as with any variable, you can give an array any name that complies with the rules of naming JavaScript variables. By assigning index numbers in arrays, JavaScript gives you the ability to make a single variable name hold a nearly unlimited list of values.\nJust so you don’t get too carried away, there actually is a limit to the number of elements that you can have in an array, although you’re very unlikely to ever reach it. The limit is 4,294,967,295 elements.\nIn addition to naming requirements (which are the same for any type of variable, arrays have a couple of other rules and special properties that you need to be familiar with:\n\n Arrays are zero-indexed\n \n Arrays can store any type of data\nJavaScript is similar to a volume knob. It starts counting at zero!\n \n\nArrays are zero indexed\nJavaScript doesn’t have fingers or toes. As such, it doesn’t need to abide by our crazy human rules about starting counting at 1. The first element in a JavaScript array always has an index number of 0.\nWhat this means for you is that myArray[3] is actually the fourth element in the array.\nZero-based numbering is a frequent cause of bugs and confusion for those new to programming, but once you get used to it, it will become quite natural. You may even discover that there are benefits to it, such as the ability to turn your guitar amp up to the 11th level.\nArrays can store any type of data\nEach element in an array can store any of the data types, as well as other arrays. Array elements can also contain functions and JavaScript objects.\nWhile you can store any type of data in an array, you can also store elements that contain different types of data, together, within one array.\nitem[0] = “apple”;\nitem[1] = 4+8;\nitem[2] = 3;\nitem[3] = item[2] * item[1];","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null},{"objectType":"article","id":142556,"data":{"title":"Understanding Multidimensional Arrays for Coding with JavaScript","slug":"understanding-multidimensional-arrays-for-coding-with-javascript","update_time":"2016-03-26T07:38:32+00:00","object_type":"article","image":null,"breadcrumbs":[{"name":"Technology","slug":"technology","categoryId":33512},{"name":"Programming & Web Design","slug":"programming-web-design","categoryId":33592},{"name":"JavaScript","slug":"javascript","categoryId":33603}],"description":"Not only can you store arrays inside of arrays with JavaScript, you can even put arrays inside of arrays inside of arrays. This can go on and on. An array that contains an array is called a multidimensional array. To write a multidimensional array, you simply add more sets of square brackets to a variable name. For example:\nvar listOfLists[0][0];\nMultidimensional arrays can be difficult to visualize when you first start working with them.\nA pictorial representation of a multidimensional array.\nYou can also visualize multidimensional arrays as hierarchal lists or outlines. For example:\nTop Albums by Genre\n\n Country\nJohnny Cash:Live at Folsom Prison\nPatsy Cline:Sentimentally Yours\nHank Williams:I’m Blue Inside\n \n Rock\nT-Rex:Slider\nNirvana:Nevermind\nLou Reed:Transformer\n \n Punk\nFlipper:Generic\nThe Dead Milkmen:Big Lizard in My Backyard\nPatti Smith:Easter\n \n\nHere is a code that would create an array based on what you see above:\nvar bestAlbumsByGenre = []\nbestAlbumsByGenre[0] = “Country”;\nbestAlbumsByGenre[0][0] = “Johnny Cash:Live at Folsom Prison”\nbestAlbumsByGenre[0][1] = “Patsy Cline:Sentimentally Yours”;\nbestAlbumsByGenre[0][2] = “Hank Williams:I’m Blue Inside”;\nbestAlbumsByGenre[1] = “Rock”;\nbestAlbumsByGenre[1][0] = “T-Rex:Slider”;\nbestAlbumsByGenre[1][1] = “Nirvana:Nevermind”;\nbestAlbumsByGenre[1][2] = “Lou Reed:Tranformer”;\nbestAlbumsByGenre[2] = “Punk”;\nbestAlbumsByGenre[2][0] = “Flipper:Generic”;\nbestAlbumsByGenre[2][1] = “The Dead Milkmen:Big Lizard in my Backyard”;\nbestAlbumsByGenre[2][2] = “Patti Smith:Easter”;","item_vector":null},"titleHighlight":null,"descriptionHighlights":null,"headers":null}]},"relatedArticlesStatus":"success"},"routeState":{"name":"Article3","path":"/article/technology/programming-web-design/html5/how-to-use-arrays-to-integrate-javascript-with-html-165877/","hash":"","query":{},"params":{"category1":"technology","category2":"programming-web-design","category3":"html5","article":"how-to-use-arrays-to-integrate-javascript-with-html-165877"},"fullPath":"/article/technology/programming-web-design/html5/how-to-use-arrays-to-integrate-javascript-with-html-165877/","meta":{"routeType":"article","breadcrumbInfo":{"suffix":"Articles","baseRoute":"/category/articles"},"prerenderWithAsyncData":true},"from":{"name":null,"path":"/","hash":"","query":{},"params":{},"fullPath":"/","meta":{}}},"dropsState":{"submitEmailResponse":false,"status":"initial"},"sfmcState":{"newsletterSignupStatus":"initial"}}
In JavaScript, arrays are a kind of collection. You can work with arrays to integrate JavaScript with HTML. Each array contains zero or more like items that you can manipulate as a group.
How to create an array in JavaScript
JavaScript provides three methods for creating arrays: regular, condensed, and literal. In general, one way is as good as another. Of the three, the regular method shown in the following listing is the easiest to understand, but the literal method is the most compact.
Creating Arrays
Regular:
Condensed:
Literal:
All three methods produce precisely the same array. The regular method creates the array first and then assigns strings to each array element by number. The square brackets behind Colors indicate the element number, which begins at 0 and increments by 1 for each element you add.
Notice that when using the condensed method you enclose the array elements in parentheses as part of the constructor. However, when using the literal method, you enclose the array elements in square brackets.
How to access array members
Each array member has a unique number — an address of sorts. You access array members by providing the array name and then the element number within square brackets. Normally, you use a loop to access array members. Loops are a means of automating array access.
The following code shows an example of how you might access an array, one element at a time, and display its content.
Access Array Elements
This example uses a for loop. The for loop creates a counter variable (a number) named i that begins at 0 (the first element of the array) and continues to increment (i++) until it has accessed all the array elements (i < Colors.length). The document.write() function outputs the Colors element number, the content (as Colors[i] where i is the element number), and an end-of-line tag.
Doug Lowe still has the electronics experimenter's kit his dad gave him when he was 10. He became an IT director, programmer, and author of books on various programming languages, Microsoft Office, web programming, and PCs. But Lowe never forgot his first love: electronics.