Lecture 5:

Arrays, Objects, and JSON in P1

CMPM 35: Data Structures for Interactive Media

January 15, 2019

Where are the rest of the resources for this class?

On Canvas: https://canvas.ucsc.edu/courses/28774

Reading practices check-in

Who checked their answers with others before submitting?

Who ran some JavaScript code to answer some questions?

If you approach programming in an experimental+social way,�there’s much less need for memorization.

​

Run scientific experiments to figure out the laws of your team’s virtual universe: https://p5js.org/reference/#/p5/fill

c.f. https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.Tint.html#setTintFill__anchor

​

Previously

We looked at…

• Numbers
• Strings
• Booleans
• null
• Arrays (partially)

… in a Glitch project.

Let’s continue our experiments on another site: https://repl.it/languages/javascript

​

Arrays

• Use case list?
• Literals?
• Indexing?
• .length
• Grow/shrink with push/pop, shift/unshift
• Iteration: for-in and forEach
• Sorting
• Methods: findIndex, map

Objects

• Use case list?
• Literals
• Indexing (brackets and dot)
• Iterating: for-in
• Do you really just want a mapping from keys to values like a Python dict?
• Use Map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
• ​

Functions (yes, they data values too)

• Use case list?
• Literals (function keyword vs arrow)
• Compared to “methods” in other languages
• You can attach a function to an object and call it like a method, but many of our functions will just be loose, without attachment to objects.

How do I find out the type of a value?

console.log(typeof value);

JSON

How do we assemble chunks of useful data?

Nesting {}, [], and primitives

• Let’s define a simple diorama scene similar to what you’d use for P1.
• Related: JSON.parse / JSON.stringify

Homework update

Readings: R04½ and R05 available on Canvas now

Programs: P1 available on Canvas now