{"id":26778,"date":"2016-07-12T21:01:32","date_gmt":"2016-07-12T13:01:32","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26778"},"modified":"2023-11-15T19:48:59","modified_gmt":"2023-11-15T11:48:59","slug":"javascript-arrays","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/javascript-arrays\/","title":{"rendered":"JavaScript Arrays and the 3 Things You Should Know"},"content":{"rendered":"

Arrays<\/strong> are common in programming; they are special types of variables<\/strong> that can hold many values at once. But JavaScript has some unique array features that aren\u2019t widely known.<\/p>\n

In this blog, we\u2019ll dive into three lesser-known but significant aspects of JavaScript arrays that may be new to you.<\/p>\n

1. Adding Custom Features to Arrays<\/h2>\n

When you dive deep into JavaScript arrays, you\u2019ll realize that at their core, they\u2019re essentially objects<\/strong>.<\/p>\n

Most things in JavaScript are actually objects<\/strong>. There are primarily two data categories in JavaScript: primitives<\/strong> and objects<\/strong>. But even primitives eventually get wrapped inside objects.<\/p>\n

Entities like Array<\/a>, Function<\/a>, and Date<\/a> are all predefined JavaScript objects<\/strong>. They come with their methods, properties, and a standard structure.<\/p>\n

Specifically, JavaScript arrays can have three types of properties:<\/p>\n

    \n
  1. Indices<\/strong> which are part of any array<\/li>\n
  2. Default properties<\/strong> given by JavaScript<\/li>\n
  3. Custom properties<\/strong> that you can personally add<\/li>\n<\/ol>\n

    While most are familiar with the first two, we\u2019ll quickly overview them before diving into how you can include your own custom property.<\/p>\n

    Understanding Indices as Properties<\/h3>\n

    In JavaScript, arrays use the square bracket syntax<\/strong>, like var fruitsArray = [\"orange\", \"apple\", \"lychee\"];<\/code>.<\/p>\n

    Here, indices of array elements act as properties<\/strong>, and these property names are always positive integers. It\u2019s a lot like how objects have a key-value structure.<\/p>\n

    You can think of the array index as the object\u2019s key. And just like you can set an object\u2019s key, you can also set an array\u2019s index. For example, fruitsArray[3] = \"peach\";<\/code>.<\/p>\n

    Using Built-in Properties<\/h3>\n

    Arrays come with some built-in properties<\/strong>, like array.length<\/a><\/code>. This property, for instance, indicates an array\u2019s length.<\/p>\n

    These default properties are commonly found in many of JavaScript\u2019s predefined objects. They, along with some built-in methods, are what make these objects versatile for various uses.<\/p>\n

    You can access these properties either using the object.property<\/code> or object[\"property\"]<\/code> syntax. So, fruitsArray[\"length\"]<\/code> will give you the length of the array.<\/p>\n

    How to Add Your Custom Properties<\/h3>\n

    Now, onto the fun part: adding your own properties to arrays<\/strong>. Though arrays are designed to store values at different indices, you might sometimes want to add some custom properties.<\/p>\n

    Usually, beginners aren\u2019t introduced to this feature because it\u2019s not frequently used. If you\u2019re looking to add key-value pairs to an array, you might as well use a regular object. However, there can be cases where adding a custom property to an array can be handy.<\/p>\n

    For instance, you could add a custom property to identify the \u201ctype\u201d or \u201cgroup\u201d of its elements, as shown in the example below:<\/p>\n

    \r\n var fruitsArray = [\"orange\", \"apple\", \"lychee\"];\r\n fruitsArray.typeOfItems = \"fruits\";\r\n \r\n console.log(fruitsArray + \" are \" + fruitsArray.typeOfItems);\r\n \/\/ \"orange,apple,lychee are fruits\"\r\n<\/pre>\n
    Remember, any custom property you add to an array will be enumerable<\/strong>. That means, it\u2019ll show up when using loops like the for\u2026in<\/a><\/code> statement.<\/p>\n
    2. Iterating Through Array Elements<\/h2>\n
    Many might say, \u201cI\u2019ve got this covered,\u201d when it comes to looping through arrays. While that\u2019s often true, it\u2019s important to note that when we talk about looping through arrays, we\u2019re essentially looping through their indices<\/strong>.<\/p>\n
    Since array indices are exclusively non-negative integers<\/strong>, the typical method involves iterating from zero up to the array\u2019s length. During each iteration, the current index is used to access the corresponding array element.<\/p>\n
    However, with the advent of ECMAScript 6 (ES6)<\/a>, we gained a more direct method to loop through array elements, bypassing the indices. This is achieved using the for\u2026of<\/code> loop.<\/p>\n
    \n
    The for\u2026of statement creates a loop iterating over iterable objects (including Array, Map, Set, String, TypedArray, arguments object, and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.MDN<\/a><\/span><\/div>\n<\/div>\n
    In the context of arrays, the for...of<\/code> loop traverses through the array elements, respecting their index order. Essentially, it handles the index iteration and fetches the corresponding array value<\/strong> at each step. This loop is particularly useful when you need to process all the elements in an array.<\/p>\n
    \r\n var fruitsArray = [\"orange\", \"apple\", \"lychee\"];\r\n \r\n for (let fruit of fruitsArray){\r\n     console.log(fruit);\r\n }\r\n \/\/ Output: \"orange\", \"apple\", \"lychee\"\r\n<\/pre>\n
    Contrast this with the classic for<\/a><\/code> loop, where the iteration is over indices rather than values:<\/p>\n
    \r\n var fruitsArray = [\"orange\", \"apple\", \"lychee\"];\r\n \r\n for (var index = 0; index < fruitsArray.length; index++){\r\n     console.log(index);\r\n }\r\n \/\/ Output: 0, 1, 2\r\n<\/pre>\n
    3. Array Length vs Number of Elements<\/h2>\n
    It\u2019s a common misconception that an array\u2019s length<\/strong> is always equal to the number of elements it contains. In truth, the length of an array is determined by its highest index<\/strong>, not necessarily the quantity of its elements.<\/p>\n
    The length property<\/strong> of an array is quite adaptable. Regardless of whether you\u2019ve set the array\u2019s length beforehand, adding more elements will increase the length correspondingly.<\/p>\n
    \r\n var myArray = [];\r\n myArray.length = 3;\r\n console.log(myArray.length);\r\n \/\/ 3\r\n \r\n myArray[5] = \"abcd\";\r\n console.log(myArray.length);\r\n \/\/ 6\r\n<\/pre>\n
    In the example above, despite only adding one value at index 5, the array\u2019s length expands to 6. It\u2019s important to note that no indices from 0 to 4 are actually created<\/strong> in this process. This can be verified using the in<\/a><\/code> operator.<\/p>\n
    \r\n var myArray = [];\r\n myArray.length = 3;\r\n console.log(myArray.length);\r\n \/\/ 3\r\n \r\n myArray[5] = \"abcd\";\r\n console.log(myArray.length);\r\n \/\/ 6\r\n \r\n console.log(0 in myArray);\r\n \/\/ false\r\n<\/pre>\n
    The array myArray<\/code> is what\u2019s known as a \u201csparse\u201d array<\/strong>, characterized by non-continuous indices<\/strong> and gaps<\/strong> between them. This is in contrast to a \u201cdense\u201d array<\/strong>, where indices are continuous and the number of elements equals the length<\/code> property.<\/p>\n
    The length<\/code> property can also truncate an array<\/strong>, ensuring the highest index is always less than the length itself<\/strong>. This is because the length is, by default, numerically greater than the highest index, as detailed here<\/a>.<\/p>\n
    In the following example, observe how decreasing the length<\/code> of array myArray<\/code> leads to the loss of the element at index 5.<\/p>\n
    \r\n var myArray = [];\r\n myArray.length = 3;\r\n console.log(myArray.length);\r\n \/\/ 3\r\n \r\n myArray[5] = \"abcd\";\r\n console.log(myArray.length);\r\n \/\/ 6\r\n \r\n myArray.length = 2;\r\n console.log(myArray.length);\r\n \/\/ 2\r\n \r\n console.log(myArray[5]);\r\n \/\/ undefined\r\n<\/pre>\n
    Further Reading<\/h2>\n