Menu Close

Articles

JavaScript: collections

Collections are groups of multiple values usually of the same type, identified by a key. The key must be a number or a string, while the value can be any data type: numeric, string or object. Collection pairs are ordered by key that are unique.

Array object

JavaScript is difficult to understand when you migrate from C because its behavior is strange. An array is not an enumeration of elements ordered by “index”, in fact is a disguised “associative array” with keys starting from “0” to the maximum number of elements minus one.

However you can remove elements from an array and the index will have gaps if you do this. You can even remove the first element and the array will not start with array[0]. This is because “associative array” is a generic structure used in JavaScript for all objects.

Don’t believe me? Try this:

Note: The type ‘array’ do not exist in JavaScript. You have in fact declared an object here.

Associative arrays

To create a customized associative array in JavaScript we use JSON. An associative array is an object similar to an array. It has keys and values associated with the keys. Each key is unique and can be integer or a string. 

Example:

Output:

array[1]= 4
array[2]= 5
array[3]= 6

Modify Associative Array

You can add new elements in associative array using notation: array[key] = value. If the key do not exist a new element will be created automatically. To remove an element you can use “delete” statement.

Example:

Output:

{
    2: 5 ,
    3: 6 ,
    4: 7
}

String keys

Instead of numbers you can use string keys. These keys can have same convention as variables. If you follow same convention, the elements of the associative array can be accessed with dot notation:

Example:

Object methods

The Object is the fundamental class for all objects in JavaScript, therefore also “associative array” is responding to Object methods. In the next examples I show you how to use some methods but you can look into reference manual and figure out the rest:

Example:

Reading [keys, value] entries:

Output:

["1" ,4]
["2" ,5]
["3" ,6]

Example:

Reading [key,value] pairs using for…of loop:

Output:

1->4
2->5
3->6

Example:

Reading keys and values in separated arrays:

Output:

["first" ,"second" ,"third"]
[1 ,2 ,3]

Set object

A mathematical set is a collection of unique items. JavaScript Set is a collection of key-value pairs where key === value and key is unique. You can convert an array into a Set and then duplicates are eliminated.

Example:

Set methods

You can create an empty Set then you can use methods to append data values to the set. If you attempt to append same value twice, only one will be stored in the Set. Of course you can verify if one value is in the set and you can remove values from the set.

Note: There is a keyword: “set” that has nothing to do with “Set”. This is an unfortunate coincidence in English. Lowercase “set” is a “setter” method and not a collection. Do not confuse the two and do not give name “set” to a “Set”.

Map object

The Map object holds key-value pairs very similar to an object. Any value (both objects and primitive values) may be used as either a key or a value. That was not possible with a normal object. A map may perform better than object in scenarios involving frequent addition and removal of key pairs.

Example:

Map methods

Map methods are very similar to Set methods. Two methods are a little bit off. “set” and “get” methods, that are also keywords. So JavaSctript can do this (unfortunately) it is overwriting keyword meaning with methods. Do not be mad, get used to JavaScript to break the rules from time to time. Hell it is a free language, so you can’t complain about it.

Example:

Note: Be smart. By now you already know that JavaScript is using objects for everything. Map is also an object. When you define a new map you actually inherit methods from Map.prototype. So this is what you need to look for to find all Map methods.

References:

Spread Operator: “…”

Spread syntax allows an iterable such as an array expression or strings to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Spreading Arrays:

You can do other interesting stuff by using spread operator with arrays:

Spreading Object:

Spreading operator “…” can be used in object literals. This enable you to combine elements from objects or send properties of an object as parameters for a function.

Variable arguments:

It is possible to define functions with variable number of arguments. To call these functions you can use a larger or smaller list of arguments separated by comma. In next example we use spreading operator “…” to feed a function that receive variable number of arguments:

Example:

Rest syntax

Rest syntax is the opposite of spread syntax: the “spread” expands an array into its elements, while the “rest” collects multiple elements and condenses them into a single element. The rest operator is the same  as spread operator: “…”, so it may be difficult to grasp.

Example:

Note: Operator “…” is used in C for same purpose. It is called sometimes “varargs” or “variable arguments”. A function can be designed to receive as the last argument the “rest of arguments”.

Example:

The rest syntax can be used in combination with decomposition assignment. Collecting the rest of elements can be done into target array or object. The two are very different. You should remember we have done this before when we have learned about objects:

Read next: Exceptions