Activity Sequence: JavaScript

This is as an illustrative example for how Expression Tutor activities could be used in a JavaScript course. The content on this page may not be understandable for someone without significant prior knowledge.

Modern versions of JavaScript include so-called spread syntax: spread properties for object literals and spread elements for array literals.

Spread Properties

Assume we have a variable pac that refers to an object:

pac = { x: 3, y: 5 }

The spread syntax in JavaScript allows us to create a new object that contains the properites of a given object, plus some extra properties we would like to add:

{...pac, age: 2, lives: 4}

Below is a tree representation of the above expression. The root node represents an object literal that uses the spread syntax ... to clone all the own enumerable properties of the object referred to by pac.

Spread Elements

Assume we have a variable ages that refers to an array:

ages = [42, 19, 67]

The spread syntax in JavaScript allows us to create a new array that contains the elements of a given array, plus some extra elements we would like to add:

[...ages, 3, 7, 99]

Below is a tree representation of the above expression. The root node represents an array literal that uses the spread syntax ... to clone all the elements of the array referred to by ages.