{"id":1028,"date":"2016-03-02T09:08:06","date_gmt":"2016-03-02T09:08:06","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1028"},"modified":"2023-12-18T13:26:07","modified_gmt":"2023-12-18T13:26:07","slug":"javascript-array-length-property-explained-with-4-examples","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/","title":{"rendered":"JavaScript Array Length Property"},"content":{"rendered":"

\"Illustration<\/p>\n

\n

The array length property in JavaScript<\/strong><\/p>\n

The array length property is used to set or return the total length or number of elements in the specified array.<\/div>\n

The JS length property is particularly useful for manipulating array elements.<\/p>\n

Generally, this property is used in JavaScript for<\/a> and while loops to get the total number of elements to specify the condition part.<\/p>\n

For example:<\/p>\n

var Arrnum = [5,10,15,20,25];\r\n\r\nArrnum.length<\/pre>\n
It will return 5.<\/p>\n
See the following online examples of using the length JavaScript property.<\/p>\n<\/div>\n
An example of array length property to get total elements<\/strong><\/h3>\n
In this example, I have created an array of five elements.<\/p>\n
After that, the array length property<\/strong> is used to return the number of elements in that array which is assigned to a variable.<\/p>\n
Finally, the length of the array is displayed in an alert.<\/p>\n
JS code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\r\n<\/head>\r\n<body>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nvar Arrnum = [5,10,15,20,25];\r\nvar totelement = Arrnum.length;\r\n  \r\nalert (\"The array length is: \" + totelement);   \r\n<\/script>\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
An example of using array length property with for loop<\/strong><\/h3>\n
In this example, the array length property is used in a for loop for specifying the number of times the loop should run i.e. in the condition part.<\/p>\n
The array elements are displayed in a div element of HTML.<\/p>\n
The code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<style>\r\n#div_demo {\r\n  background: #4C9B79;\r\n  height: 220px;\r\n  width:40%;\r\n  border-radius: 15px;\r\n  padding:20px;\r\n  font-size:18px;\r\n  color:#fff;   \r\n}\r\n<\/style>\r\n<head>\r\n\r\n<\/head>\r\n<body>\r\n<div id=\"div_demo\"><\/div>\r\n\r\n\r\n<script type=\"text\/javascript\">\r\n\r\nvar Arrnum = [5,10,15,20,25];\r\nvar num;\r\nvar displayArray = \"Demo of using the length property: <BR>\";\r\n\r\nfor (num=0; num < Arrnum.length; num++){\r\n    displayArray += Arrnum[num] + \"<BR>\";\r\n    }\r\n    document.getElementById(\"div_demo\").innerHTML = displayArray; \r\n\r\n   \r\n<\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/pre>\n
Output:<\/strong><\/p>\n
\"JavaScript<\/p>\n
This is how the length property is used in the for loop:<\/p>\n
for (num=0; num < Arrnum.length; num++){\r\n\r\ndisplayArray += Arrnum[num] + \"<BR>\";\r\n\r\n}<\/pre>\n
The code Arrnum.length<\/em> specified the condition part of the for loop<\/em>. In that case, as array elements are five, so loop is executed five times.<\/p>\n
A length array property example with push method<\/strong><\/h3>\n
The length method returns the total elements of an array not just at the time of creation but elements added at the later part or dynamically.<\/div>\n
In this example, an array is created initially with three elements. After that, JS push method<\/strong><\/a> of arrays is used to add more elements to that array.<\/p>\n
The length of the array initially and after adding elements are displayed in an alert, as the page loads.<\/p>\n
Code:<\/strong><\/p>\n
<!doctype html>\r\n<html>\r\n<head>\r\n\r\n<style>\r\n#arr_demo {\r\n  background: #415665;\r\n  height: 270px;\r\n  width:40%;\r\n  border-radius: 15px;\r\n  padding:20px;\r\n  font-size:22px;\r\n  color:#fff;   \r\n}\r\n\r\n<\/style>\r\n \r\n  \r\n<\/head>\r\n<body>\r\n<div id=\"arr_demo\"><\/div>\r\n\r\n<script>\r\n    var dynarray = [1,2,3];  \r\n    var j= 10; \/\/ Used to give values to array elements\r\n    var num;\r\n    var displayArray = \"The array with existing and new elements <BR><BR>\";\r\n    alert (\"Array length initially: \" + dynarray.length);\r\n    \r\n    \/\/Creating new array elements\r\n    for (var i = 0; i < 5; i++) {\r\n      dynarray.push(j);\r\n      j = j + 10;\r\n    }\r\n    \/\/Displaying the dynamic array in a Div element\r\n    for (num=0; num < dynarray.length; num++){\r\n     displayArray += dynarray[num] + \"<BR>\";\r\n     }\r\n    document.getElementById(\"arr_demo\").innerHTML = displayArray;\r\n    alert (\"Array length after push method: \" + dynarray.length);\r\n    \r\n    \r\n\r\n    \r\n<\/script> \r\n \r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Output:<\/strong><\/p>\n
\"JavaScript<\/p>\n
You can see the difference in length before and after using the array push method.<\/p>\n
An example of shortening\/setting the array length<\/strong><\/h3>\n
As such, the length property can be used for setting the array length as well as returning the total number of elements in the array.<\/p>\n
In this example, an array is created with five elements. After that, the length property is used to set the array as three.<\/p>\n
See the code and output.<\/p>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<style>\r\n#div_demo {\r\n  background: #4C9B79;\r\n  height: 220px;\r\n  width:40%;\r\n  border-radius: 15px;\r\n  padding:20px;\r\n  font-size:18px;\r\n  color:#fff;   \r\n}\r\n<\/style>\r\n<head>\r\n\r\n<\/head>\r\n<body>\r\n<div id=\"div_demo\"><\/div>\r\n\r\n<div id=\"div_demo2\"><\/div>\r\n<script type=\"text\/javascript\">\r\n\r\nvar Arrnum = [5,10,15,20,25];\r\nvar num;\r\nvar displayArray = \"Array initially: [5,10,15,20,25]<BR><BR> Array after setting length: Arrnum.length = 3;<BR>\";\r\n\/\/Setting array length\r\nArrnum.length = 3;\r\n\r\nfor (num=0; num < Arrnum.length; num++){\r\n    displayArray += Arrnum[num] + \"<BR>\";\r\n    }\r\n    displayArray += \"<br><br>Total length of array = \" + Arrnum.length;\r\n    document.getElementById(\"div_demo\").innerHTML = displayArray; \r\n\r\n\r\n<\/script>\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
\"JavaScript<\/p>\n
This is how the length property is used in the example:<\/p>\n
var Arrnum = [5,10,15,20,25];\r\n\r\nvar num;\r\n\r\nvar displayArray = \"Array initially: [5,10,15,20,25]<BR><BR> Array after setting length: Arrnum.length = 3;<BR>\";\r\n\r\n\/\/Setting array length\r\n\r\nArrnum.length = 3;\r\n\r\n\r\n\r\nfor (num=0; num < Arrnum.length; num++){\r\n\r\ndisplayArray += Arrnum[num] + \"<BR>\";\r\n\r\n}\r\n\r\ndisplayArray += \"<br><br>Total length of array = \" + Arrnum.length;\r\n\r\ndocument.getElementById(\"div_demo\").innerHTML = displayArray;<\/pre>\n
You can see that the length of the array is reduced to three elements.<\/p>\n","protected":false},"excerpt":{"rendered":"
Explore the JavaScript array length property with our comprehensive tutorial. Learn how to leverage this essential feature to efficiently determine the size of arrays.<\/p>\n","protected":false},"author":1,"featured_media":12210,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[],"yoast_head":"\nJavaScript Array Length Property: Explained with 4 Examples<\/title>\n<meta name=\"description\" content=\"Explore the JavaScript array length property with our comprehensive tutorial. Learn how to leverage this essential feature to efficiently determine the size of arrays.\" \/>\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.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Array Length Property: Explained with 4 Examples\" \/>\n<meta property=\"og:description\" content=\"Explore the JavaScript array length property with our comprehensive tutorial. Learn how to leverage this essential feature to efficiently determine the size of arrays.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-02T09:08:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-18T13:26:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/03\/JavaScript-array-length.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/\",\"url\":\"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/\",\"name\":\"JavaScript Array Length Property: Explained with 4 Examples\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-03-02T09:08:06+00:00\",\"dateModified\":\"2023-12-18T13:26:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"Explore the JavaScript array length property with our comprehensive tutorial. Learn how to leverage this essential feature to efficiently determine the size of arrays.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Array Length Property\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Array Length Property: Explained with 4 Examples","description":"Explore the JavaScript array length property with our comprehensive tutorial. Learn how to leverage this essential feature to efficiently determine the size of arrays.","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.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Array Length Property: Explained with 4 Examples","og_description":"Explore the JavaScript array length property with our comprehensive tutorial. Learn how to leverage this essential feature to efficiently determine the size of arrays.","og_url":"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/","article_published_time":"2016-03-02T09:08:06+00:00","article_modified_time":"2023-12-18T13:26:07+00:00","og_image":[{"width":600,"height":500,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/03\/JavaScript-array-length.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/","url":"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/","name":"JavaScript Array Length Property: Explained with 4 Examples","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-03-02T09:08:06+00:00","dateModified":"2023-12-18T13:26:07+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"Explore the JavaScript array length property with our comprehensive tutorial. Learn how to leverage this essential feature to efficiently determine the size of arrays.","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/javascript-array-length-property-explained-with-4-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Array Length Property"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1028"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1028"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1028\/revisions"}],"predecessor-version":[{"id":12213,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1028\/revisions\/12213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/12210"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}