JavaScript:

Data Structures - Objects & Arrays

Lecturer: Иo1lz

OUTLINE

Data Sets
Objects
Multability
The Lycanthrope's Log
Further Arrayology

Numbers, Booleans, and strings are the atoms that data structures are built from.
- Many types of information require more than one atom
We'll introduce basic data structures.

Preface

The Weresquirrel

Every now and then, usually between 8 p.m. and 10 p.m., Jacques finds himself transforming into a small furry rodent with a bushy tail.

On one hand, Jacques is quite glad that he doesn't have classic lycanthropy. Turning into a squirrel does cause fewer problems than turning into a wolf. Instead of having to worry about accidentally eating the neighbor (that would be awkward), he worries about being eaten by the neighbor's cat. After two occasions where he woke up on a precariously thin branch in the crown of an oak, naked and disoriented, he has taken to locking the doors and windows of his room at night and putting a few walnuts on the floor to keep himself busy.

That takes care of the cat and tree problems. But Jacques would prefer to get rid of his condition entirely. The irregular occurrences of the transformation make him suspect that they might be triggered by something. For a while, he believed that it happened only on days when he had been near oak trees. But avoiding oak trees did not stop the problem.

Switching to a more scientific approach, Jacques has started keeping a daily log of everything he does on a given day and whether he changed form. With this data he hopes to narrow down the conditions that trigger the transformations.

Data Sets

To work with a chunk of digital data, we'll first have to find a way to represent it in our machine's memory.

e.g. to represent a collection of the numbers 2, 3, 5, 7, and 11, there are 2 ways:

string
array

let listOfNumbers = [2, 3, 5, 7, 11];
console.log(listOfNumbers[2]);
// -> 5
console.log(listOfNumbers[0]);
// -> 2
console.log(listOfNumbers[2 - 1]);
// -> 3

Properties

Almost all JavaScript values have properties.
- The exception null and undefined.

null.length;
// -> TypeError: null has no properties

The two symbol to access properties:

dot
square bracket

value.x;
value[x];

The 3 ways to access properties:

objectName.property;
// person.age

objectName["property"];
// person["age"]

objectName[expression];
// x = "age"; person[x];

The dot notation works only with names that look like valid binding string

If you want to access a property named 2 or "Ore wa tensai desu", you must use square brackets:
- value[2]
- value["Ore wa tensai desu"]

Methods

Both string and array objects contain a number of properties that hold function values.

let doh = "Doh";
console.log(typeof doh.toUpperCase);
// -> function
console.log(doh.toUpperCase());
// -> DOH

Properties that contain functions are generally called methods of the value.

e.g. toUpperCase is a method of a string

let sequence = [1, 2, 3];
sequence.push(4);
sequence.push(5);
console.log(sequence);
// -> [1, 2, 3, 4, 5]
console.log(sequence.pop());
// -> 5
console.log(sequence);
// -> [1, 2, 3, 4]

Objects

Back to the weresquirrel. A set of daily log entries can be represented as an array.
Values of the type object are arbitrary collections of properties.
- to create an object is by using braces as an expression

let day1 = {
    squirrel: false, 
    events: ["work", "touched tree", "pizza", "running"]
};
console.log(day1.squirrel);
// -> false
console.log(day1.wolf);
// -> undefined
day1.wolf = false;
console.log(day1.wolf);
// -> false
console.log(day1);
// -> Object{ squirrel: false, events: (4) [...], wolf: false }

<propertyName>: <value>
Properties whose names aren't valid binding names or valid numbers have to be quoted.

let descriptions = {
    work: "Went to work", 
    "touched tree": "Touched a tree"
};

Braces have two meanings in JavaScript:

at the start of a statement
- they start a block of statements
in any other position, they describe an object

It's possible to assign a value to a property expression with the "=" operator.

replace the property's value if existed
create a new property

let anObject = {
    left: 1, 
    right: 2
};
console.log(anObject.left);
// -> 1
delete anObject.left;
console.log(anObject.left);
// -> undefined
console.log("left" in anObject);
// -> false
console.log("right" in anObject);
// -> true

console.log(Object.keys({x: 0, y: 0, z: 2}));
// -> ["x", "y", "z"]

let objectA = {a: 1, b: 2};
Object.assign(objectA, {b: 3, c: 4});
console.log(objectA);
// -> {a: 1, b: 3, c: 4}

console.log(typeof []);
// -> object

Multability

We saw that object values can be modified. The types of values, such as numbers, strings, and Booleans, are all immutable

It is impossible to change values of those types

Objects work differently.

You can change their properties, causing a single object value to have different content at different times.

let object1 = {value: 10};
let object2 = object1;
let object3 = {value: 10};

console.log(object1 == object2);
// -> true
console.log(object1 == object3);
// -> false

object1.value = 15;
console.log(object2.value);
// -> 15
console.log(object3.value);
// -> 10

const score = {visitors: 0, home: 0};    // This is fine.
score.visitors = 1;                      // This is not allowed.
score = {visitors: 1, home: 1};

The Lycanthrope's Log

let journal = [];
function addEntry(events, squirrel){
    journal.push({events, squirrel});
}

addEntry(["work", "touched tree", "pizza", "running", "television"], false);
addEntry(["work", "ice cream", "cauliflower", "lasagna", "touched tree", "brushed teeth"], false);
addEntry(["weekend", "cycling", "break", "peanuts", "beer"], true);

	!pizza	pizza
!squirrel	76	9
squirrel	4	1

φ = {n_{11}n_{00} - n_{10}n_{01} \over \sqrt{n_{1ｘ} * n_{0ｘ} * n_{ｘ1} * n_{ｘ0}}}

Computing Correlation

To represent a two-by-two table in JavaScript:

four-element array => ([76, 9, 4, 1])
two-element binary array => ([76, 9], [4, 1])
Object with property names like "11"

We'll interpret the indices to the array as two-bit binary numbers

function phi(table){
    return (table[3] * table[0] - table[2] * table[1]) / Math.sqrt((table[2] + table[3]) * (table[0] + table[1]) * (table[1] + table[3]) * (table[0] + table[2]));
}

console.log(phi([76, 9, 4, 1]));
// -> 0.068599434

function tableFor(event, journal){
    let table = [0, 0, 0, 0];
    for(let i = 0;i < journal.length;i++){
        let entry = journal[i], index = 0;
        if(entry.events.includes(event)) index += 1;
        if(entry.squirrel) index += 2;
        table[index] += 1;
    }
    return table
}

console.log(tableFor("pizza", JOURNAL));
// -> [76, 9, 4, 1]

Array Loops

for(let i = 0;i < journal.length;i++){
    let entry = journal[i];
    // Do something with entry
}

for(let entry of journal){
    console.log(`${entry.events.length} events.`);
}

The Final Analysis

function journalEvents(journal){
    let events = [];
    for(let entry of journal){
        for(let event of entry.events){
            if(!events.includes(event)){
                events.push(event);
            }
        }
    }
    return events;
}

console.log(journalEvents(JOURNAL));
// -> ["carrot", "exercise", ...]

for(let event of journalEvents(JOURNAL)){
    console.log(event + ":", phi(tableFor(event, JOURNAL)));
}

for(let event of journalEvents(JOURNAL)){
    let correlation = phi(tableFor(event, JOURNAL));
    if(correlation > 0.1 || correlation < -0.1){
        console.log(event + ":", correlation); 
    }
}

for(let entry of JOURNAL){
    if(entry.events.includes("peanuts") && !entry.events.includes("brushed teeth")){
        entry.events.push("peanut teeth");
    }
}
console.log(phi(tableFor("peanut teeth", JOURNAL)));
// -> 1

That's a strong result. The phenomenon occurs precisely when Jacques eats peanuts and fails to brush his teeth. If only he weren't such a slob about dental hygiene, he'd have never even noticed his affliction.

Knowing this, Jacques stops eating peanuts altogether and finds that his transformations don't come back.

For a few years, things go great for Jacques. But at some point he loses his job. Because he lives in a nasty country where having no job means having no medical services, he is forced to take employment with a circus where he performs as The Incredible Squirrelman , stuffing his mouth with peanut butterbefore every show.

One day, fed up with this pitiful existence, Jacques fails to change back into his human form, hops through a crack in the circus tent, and vanishes into the forest. He is never seen again.

Further Arrayology

let todoList = [];
function remember(task){
    todoList.push(task);
}
function getTask(){
    return todoList.shift();
}
function rememberUrgently(task){
    todoList.unshift(task);
}

unshift、shift

console.log([1, 2, 3, 2, 1].indexOf(2));
// -> 1
console.log([1, 2, 3, 2, 1].lastIndexOf(2));
// -> 3

indexOf、lastIndexOf

console.log([0, 1, 2, 3, 4].slice(2, 4))
// -> [2, 3]
console.log([0, 1, 2, 3, 4].slice(2))
// -> [2, 3, 4]

slice

console.log([0, 1, 2, 3, 4].slice(2, 4))
// -> [2, 3]
console.log([0, 1, 2, 3, 4].slice(2))
// -> [2, 3, 4]

slice

function remove(array, index){
    return array.slice(0, index).concat(array.slice(index + 1));
}
console.log(remove(["a", "b", "c", "d", "e"], 2));
// -> ["a", "b", "d", "e"]

concat

Strings and Their Properties

let kim = "Kim";
kim.age = 88;
console.log(kim.age);
// -> undefined

console.log("coconuts".slice(4, 7));
// -> nut
console.log("coconuts".indexOf("u"));
// -> 5

slice、indexOf

console.log("one two three".indexOf("ee"));
// -> 11

console.log("    okay \n".trim());
// -> okay

trim

console.log(String(6).padStart(3, "0"));
// -> 006

padStart

let sentence = "Secretarybirds specialize in stomping";
let words = sentence.split(" ");
console.log(words);
// -> ["Secretarybirds", "specialize", "in", "stomping"]
console.log(words.join(". "));
// -> Secretarybirds. specialize. in. stomping

split、join

console.log("LA".repeat(3));
// -> LALALA

repeat

length

let string = "abc";
console.log(string.length);
// -> 3
console.log(string[1]);
// -> b

Rest Parameters

function max(...numbers){
    let result = -Infinity;
    for(let number of numbers){
        if(number > result) result = number;
    }
    return result;
}
console.log(max(4, 1, 9, -2));
// -> 9

let numbers = [5, 1, 7];
console.log(max(...numbers));
// -> 7

let words = ["never", "fully"];
console.log(["will", ...words, "understand"]);
// -> ["will", "never", "fully", "understand"]

The Math Object

function randomPointOnCircle(radius){
    let angle = Math.random() * 2 * Math.PI;
    return {
        x: radius * Math.cos(angle), 
        y: radius * Math.sin(angle)
    };
}

console.log(randomPointOnCircle(2));
// -> {x: 0.3667, y: 1.966}

console.log(Math.random());
console.log(Math.random());
console.log(Math.random());

Math.random

console.log(Math.floor(Math.random() * 10));

Math.floor

Math.ceil
Math.round
Math.abs

Destructuring

function phi(table){
    return (table[3] * table[0] - table[2] * table[1]) / Math.sqrt((table[2] + table[3]) * (table[0] + table[1]) * (table[1] + table[3]) * (table[0] + table[2]));
}

2 ways to simplization:

define "let n00 = table[0] ...
A succinct way to do this

function phi([n00, n01, n10, n11]){
    return (n11 * n00 - n10 * n01) / Math.sqrt((n10 + n11) * (n00 + n01) * (n01 + n11) * (n00 + n10));
}

JavaScript:

OUTLINE

Preface

The Weresquirrel

Data Sets

Properties

Methods

Objects

Multability

The Lycanthrope's Log

Computing Correlation

Array Loops

The Final Analysis

Further Arrayology

unshift、shift

indexOf、lastIndexOf

slice

slice

concat

Strings and Their Properties

slice、indexOf

trim

padStart

split、join

repeat

length

Rest Parameters

The Math Object

Math.random

Math.floor

Destructuring

Thanks for listening.