A walk in JavaScript

DAY 4

Collections family

ECMAScript 2015 specifies 2 flavors of collections, Indexed and Keyed and this two are divided in 2 child groups as described below.

Collections

Mastering all of them is a long journey and out of scope for a 1-day-walk , so let’s have a summary from MDN before moving forward with Arrays.

Arrays are regular objects for which there is a particular relationship between integer-key-ed properties and the ‘length’ property. Additionally, arrays inherit from Array.prototype which provides to them a handful of convenient methods to manipulate arrays. For example, indexOf (searching a value in the array) or push (adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.

Typed Arrays are new to JavaScript with ECMAScript 2015 and present an array-like view of an underlying binary data buffer.

Source: MDN Online

Funky note: MDN is saying “regular objects” but the spec says “exotic objects”. ¯\(ツ)/¯ yayyy consistency!

Maps, Sets, WeakMaps, WeakSets data structures take object references as keys and are introduced in ECMAScript Edition 6. Set and WeakSet represent a set of objects, while Map and WeakMap associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.

Source: MDN Online

Further reading can be found at YDKJS: ES6 & Beyond - Chapter 5: Collections

The Array Object

Let’s start with MDN First Steps introduction:

Arrays are generally described as “list-like objects”; they are basically single objects that contain multiple values stored in a list. Array objects can be stored in variables and dealt with in much the same way as any other type of value, the difference being that we can access each value inside the list individually, and do super useful and efficient things with the list, like loop through it and do the same thing to every value. Maybe we’ve got a series of product items and their prices stored in an array, and we want to loop through them all and print them out on an invoice, while totaling all the prices together and printing out the total price at the bottom.

Source: MDN Online

Also we can have further insights at the Global Objects reference:

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array’s length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.

Arrays cannot use strings as element indexes (as in an associative array) but must use integers. Setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array’s object property collection. The array’s object properties and list of array elements are separate, and the array’s traversal and mutation operations cannot be applied to these named properties.

Source: MDN Online

That was a lot!

In the last paragraph it is clear that Arrays in JavaScript defer from other languages, they’re list-like objects with a lot of particular mechanisms to work with a numeric-auto-indexed-key but at the end, they’re objects, hence inheriting all it’s characteristics.

// example of auto-index gotcha in JavaScript

let a = []; // an array with no entries

a[3] = 'a string in slot with index 3';

a.length;
// > 4
// wait, what?!

[...a.keys()]
// > [0, 1, 2, 3]

[...a.values()]
// > [undefined, undefined, undefined, "a string in slot with index 3"]

// ¯\_(ツ)_/¯

You can’t hold no entry 3 if you ain’t got no 0, 1 and 2 ( thanks Victor Wooten for that!! )

My suggestion, if you don’t expect German and English syntax and semantic to be the same, why should you expect that from programming languages? Embrace the languages characteristics and grok them so you can master them and enjoy their uniqueness.

Syntax

Now we know an array can be initialized in two ways ( there are others we’ll see later on ), [element0, element1, ..., elementN]] a.k.a. literal notation or through new Array(element0, element1[, ...[, elementN]]) and new Array(arrayLength) the global object Array constructor method, being the former ( literal notation ) the recommended one for most of the cases.

Array Built-in methods

The Array Object has a lot of functionalities packed in and ready for use, they come in 2 flavor ( déjà vu ), Static access and Instance access, and they will provide you the necessary tools to work efficiently with the collection.

Methods hierarchy

Aaaand, we have all built-in methods Objects have.

Preliminary Practice

Now let’s have some time to practice creating, accessing, mutating, copying, iterating, merging arrays and entries.

Here a list of resources we can use:

Exercises

Let’s open our test files:

Now open your terminal.

  1. Make sure you’re at the project location
  2. If you didn’t install all the packages yet then run npm i for a fresh dependency install, or npm ci for an installation based on the lock file.
  3. Type npm run test:watch, this will start running your tests every time you make a change.

Our task is to make ALL our DAY 4 tests pass ;)