{"id":4471,"date":"2016-03-02T11:48:06","date_gmt":"2016-03-02T11:48:06","guid":{"rendered":"http:\/\/www.hostingnotes.com\/?p=4471"},"modified":"2017-10-09T14:34:13","modified_gmt":"2017-10-09T14:34:13","slug":"javascript-arrays-creating-and-storing-values","status":"publish","type":"post","link":"https:\/\/www.webdevelopersnotes.com\/javascript-arrays-creating-and-storing-values","title":{"rendered":"JavaScript Arrays – creating and storing values"},"content":{"rendered":"

An array can be regarded as a set of variables. This does not mean that the variables in an array are related to each other; they are still separate entities in themselves. Arrays helps us group variables, which we plan to use for a particular purpose because accessing their values becomes a lot easier this way.<\/p>\n

Consider the following table:<\/p>\n\n\n\n\n\n\n\n\n\n
Number<\/strong><\/th>\nCity name<\/strong><\/th>\n<\/tr>\n
1<\/td>\nNew York<\/td>\n<\/tr>\n
2<\/td>\nLondon<\/td>\n<\/tr>\n
3<\/td>\nNew Delhi<\/td>\n<\/tr>\n
4<\/td>\nSydney<\/td>\n<\/tr>\n
5<\/td>\nTokyo<\/td>\n<\/tr>\n
6<\/td>\nMoscow<\/td>\n<\/tr>\n
7<\/td>\nLima<\/td>\n<\/tr>\n<\/table>\n

To store these city names, we can either employ different variables such as city1, city2, city3 … or insert these values into an array. Let’s see how we make an array.<\/p>\n

\r\nvar city = new Array();\r\n<\/pre>\n
Each array is initialised using the new<\/em> keyword with the Array()<\/em> construct (Isn’t this similar to using Date()<\/em>?). So here we initialise and array called city<\/strong>. Now we fill this array with our values (city names).<\/p>\n
\r\ncity[0] = \"New York\";\r\ncity[1] = \"London\";\r\ncity[2] = \"New Delhi\";\r\ncity[3] = \"Sydney\";\r\ncity[4] = \"Tokyo\";\r\ncity[5] = \"Moscow\";\r\ncity[6] = \"Lima\";\r\n<\/pre>\n
Each variable in an array begins with the array name followed by a numeric value contained in a pair of square brackets. This numeric value signifies the Index Number<\/strong><\/em> of that variable in the array. Note, that arrays are zero-indexed, that is, they start at index value 0. Also, we don’t need the var<\/em> keyword to initialise individual variables of an array.<\/p>\n
JavaScript allows us to write the array initialisation and assignment statements as one. Thus,<\/p>\n
\r\nvar city = new Array(\"New York\", \"London\", \"New Delhi\", \r\n\"Sydney\", \"Tokyo\", \"Moscow\", \"Lima\");\r\n<\/pre>\n
Array values are accessed through their index names. We can use a for<\/em> loop for this purpose.<\/p>\n
\r\nvar msg = \"\";\r\nfor (x = 0; x < 7; x++)\r\n   {\r\n   msg = msg + city[x] + \"\\n\";;\r\n   }\r\nalert(msg);\r\n<\/pre>\n
Click here for the result<\/a>.<\/p>\n
Now, don’t you see the usefulness of arrays? If we had the values in variables of different names (even city1, city2…), our alert()<\/em> statement would be very long.<\/p>\n
Values stored in arrays can be changed just like other variable values. Further, you can increase or decrease the number of items in an array… but that’s for laters.<\/p>\n
The length of an array is found though its length<\/strong><\/em> property. The code below, finds the length of the array, adds 50 to each value and displays the result in an alert box.<\/p>\n
\r\nvar num = new Array(200, 400, 300, 250, 670, 430, 220, 870, 30);\r\nvar l = num.length<\/strong>\r\nvar msg = \"\";\r\nfor (x = 0; x < l; x++)\r\n   {\r\n   num[x] = num[x] + 50;<\/strong>\r\n   msg = msg + num[x]+ \"\\n\";\r\n   }\r\nalert(msg);\r\n<\/pre>\n
Click here for the result<\/a>.<\/p>\n
After initialising the array num<\/strong> and asigning values to it, we find its length and store the value in variable l<\/strong>. The variable is then used in a for<\/em> loop where each array value is incremented by 50.<\/p>\n
Lastly, you can mix the data types in an array which means that in a single array, some variables can contain string while the other might contain numeric data and JavaScript wouldn’t complain!<\/p>\n
\n