A Mental Model of Java Script Why do

A Mental Model of Java. Script

Why do mental models matter? Some examples from other languages you know.

Mental Models of Java What does this program do? int i = 1; while (i > 0) { i = i * 2; System. out. println(i); } 2 4 8. . . 536870912 1073741824 -2147483648

Mental Models of Java Is there a value for x that will make this statement be an infinite loop? String greeting = "Hello " + x; public class Bad { public String to. String() { while (true) { } } } x = new Bad();

Three possible answers! Mental Models of C if you’ve taken 230, what is the result of this program? Thread 1 y = 1; r 2 = x; Main int x = 0; int y = 0; int r 1 = 0; int r 2 = 0; Thread 2 x = 1; r 1 = y; y = 1; r 2 = x; x = 1; r 1 = y; // r 1 == 0 && r 2 == 1 x = 1; r 1 = y; y = 1; r 2 = x; // r 1 == 0 && r 2 == 1 y = 1; x = 1; r 1 = y; r 2 = x; // r 1 == 1 && r 2 == 1 Impossible to get r 1 == 0 and r 2 == 0? This is not true. You were lied to in 230!

Why do mental models matter? 1. You need to write code. => The code must do what you mean it to do. 2. You need to debug code. => You must understand what the code means. "Bad things" happen when the code does not do what you think it does.

A Mental Model of Java. Script Part 1: Values, objects, memory, and aliasing ● Forget about functions. For the moment we are only going to think about variables, conditionals, and loops.

Forget about functions For the moment, we are only going to think about variables, conditionals, and loops

Recap: sequential execution This statement first defines and array and then reads a value from the array: let x = [10, 20, 30, 40]; let y = x[2]; In general, nothing else occurs between the execution of two statements: statement 1; statement 2 1. Your computer is doing many other things in the background, but the program in Java. Script cannot observe them. 2. Java. Script does not have threads, so another thread cannot modify the array in the background. These are not completely true.

Main principles 1. The values of Java. Script are numbers, booleans, strings, … 2. Every variable stores a value 3. An assignment x = y creates a copy of the value in y and stores it in x let a = 10; let b = a; a = 20 Questions 1. What is the final value of b? 10 or 20? 2. Why isn’t it 20? We said b = a and changed a to 20, so why isn’t b also 20?

Main principles Oops! Objects are not values. 1. The values of Java. Script are numbers, booleans, strings, and objects 2. Every variable stores a value 3. An assignment x = y creates a copy of the value in y and stores it in x let o = { x: 10, y: 2 }; let p = o; p. x = 20; Questions 1. What is the final value of o. x? 10 or 20? 2. Why isn’t it 10? We said p = o and said that the assignment creates a copy of the value of o and stores it in p. Then o. x should still be 10! 3. Since p. x has also changed to 20, one of our principles must be wrong: a. Is (3) wrong? i. e, assignments create a copy of a value, but not objects? b. Is (2) wrong? i. e. , variables somehow treat objects differently?

Object references are values let o = { x: 10, y: 2 }; let p = o; Values o = p = These arrows, which are called references, are values Memory { x: 10, y: 2 }

Disprove the alternative let o = { x: 10, y: 2 }; let p = o; // Do something here Write a test to determine if (a) or (b) is correct. Hint: write to a variable (a) Values o = p = (b) Memory { x: 10, y: 2 } Values o = { x: 10, y: 2 } p =

Object references are values let o = { x: 10, y: 2 }; let p = o; Values o = p = These arrows, which are called references, are values Memory { x: 10, y: 2 }

Object references are values let o = { x: 10, y: 2 }; let p = o; p. x = 20; Updates the field x in the object that p references, which is the same object that o references We say that the variables o and p are aliased How can you check if two variables are aliased? Values Memory o = p = { x: 20, y: 2 }

Object references are values let p. x o = o p = { x: 10, y: 2 }; = o; 20; a: 500 } Values o = p = Memory { x: 20, y: 2 } Creates a new object in memory and stores in o a reference to the new object { a: 500 }

What will these programs print, and why? let a = { x: 42 }; let b = a; b. x = 0; console. log(a. x); let a = { x: 42 }; let b = a; b = { x: 0 }; console. log(a. x); What do the value map, and memory contents look like?

What does "★ = ▲" mean? 1. Take the value of ▲. What is the "value" of ▲? 2. Make a copy of the value. 3. Store the copy as the value of ★. What is the "value" of ★? These mean completely different things: x=y obj. x = y

Which box is modified? Before line 3 (b = 0): let a = { x: 1 }; let b = a; b = 0; Values a = ☐ b = ☐ Memory { x: ☐ }

Which box is modified? Before line 3 (b. x = 0): let a = { x: 1 }; let b = a; b. x = 0; Values a = ☐ b = ☐ Memory { x: ☐ }

What does "★ = ▲" mean? 1. Take the value of ▲. What is the "value" of ▲? 2. Make a copy of the value. 3. Store the copy as the value of ★. What is the "value" of ★? let a = { x: 42 }; let b = a; The "value" of a is the reference to the object. The "value" of b will be a copy of the reference to the object.

What does "★ = ▲" mean? 1. Take the value of ▲. What is the "value" of ▲? 2. Make a copy of the value. 3. Store the copy as the value of ★. What is the "value" of ★? let a = { x: 42 }; let b = a; b. x = 0; The "value" of b. x is the value stored in the "x" field of the object referenced by b The "value" of a is the number 0

Which memory layout is correct? Memory (a) { x: 1 } { x: 0 } Values a = ☐ b = ☐ let a = { x: 1 }; let b = a; b = { x: 0 }; Memory (b) { x: 0 }

Which memory layout is correct? Memory (a) { x: 1 } { x: 0 } Values a = ☐ b = ☐ let a = { x: 1 }; let b = a; b. x = 0; Memory (b) { x: 0 }

Main principles 1. The values of Java. Script are numbers, booleans, strings, and reference to objects and arrays 2. Every variable stores a value 3. An assignment x = y creates a copy of the value in y and stores it in x

How do nested objects work? Write a test to determine if (a) or (b) is correct. Hint: p = { z: o. x } Memory (a) { x: , y: 3 } { a: 1, b: 2 } Values o = let o = { x: { a: 1, b: 2 }, y: 3 }; Memory (b) { x: { a: 1, b: 2 }, y: 3 }

How do nested objects work? Write a test to determine if (a) or (b) is correct. Hint: p = { z: o. x } Memory (a) { x: , y: 3 } { a: 1, b: 2 } Values o = let o = { x: { a: 1, b: 2 }, y: 3 }; p = { z: o. x }; p. z. a = 20; Memory (b) { x: { a: 1, b: 2 }, y: 3 }

What is the memory layout, and values? let a = { x: 1 }; let b = { y: a };

What is the memory layout, and values? let a = { x: 1 }; let b = { y: a }; Values a = ☐ b = ☐ Memory { x: ☐ } { y: ☐ }

Which boxes are modified? Before line 3: let a = { x: 1 }; let b = { y: a }; b. y. x = 0; Does the memory layout change? If so, to what? Values a = ☐ b = ☐ Memory { x: ☐ } { y: ☐ }

Which boxes are modified? Before line 3: let a = { x: 1 }; let b = { y: a }; b. y = 0; Does the memory layout change? If so, to what? Values a = ☐ b = ☐ Memory { x: ☐ } { y: ☐ }

Main principles 1. The values of Java. Script are numbers, booleans, strings, and reference to objects and arrays 2. Every variable stores a value 3. An assignment x = y creates a copy of the value in y and stores it in x 4. Every field in an object stores a value

What happened to the object in x? Before o. x = 500; let o = { x: { a: 1, b: 2 }, y: 3 }; o. x = 500; After o. x = 500; Variables o = Memory { x: , y: 3 } Memory { x: 500, y: 3 } { a: 1, b: 2 }

Variables o = Memory { x: 500, y: 3 } { a: 1, b: 2 }

Instructions For Exercises 1. Step through each statement. 2. Reason out what the types are, for the right-hand sides, and the left-hand sides. 3. Reason out what the values are, based on the types. 4. Hence, reason out what each assignment / update expression does

Exercise: What will this program print, and why? let a = 42; let b = a; b = 0; console. log(a);

Exercise: What will this program print, and why? let a = "forty-two"; let b = a; b = "zero"; console. log(a);

*Exercise*: What will this program print, and why? let a = {x: 42}; let b = a; b. x = 0; console. log(a. x);

*Exercise*: What will this program print, and why? let a = {x: 42}; let b = a; b = {x: 0}; console. log(a. x);

Exercise: What will this program print, and why? let a = 42; let b = 42; console. log(a === b);

Exercise: What will this program print, and why? let a = "forty-two"; let b = "forty-two"; console. log(a === b);

*Exercise*: What will this program print, and why? let a = { x: 42 }; let b = { x: 42 }; console. log(a === b);

Recall from Lecture 2: Comparing Arrays This will not work: if ([1, 2, 3] === [1, 2, 3]) { console. log("Arrays match. "); } What is the memory layout like? What is being compared?

*Exercise*: What will this program print, and why? let a = { x: 42 }; let b = a; let c = b; b. x = 0; console. log(a. x); console. log(c. x);

*Exercise*: What will this program print, and why? let a = { x: 1 }; let c = { x: 2 }; for (let i = 0; i < 10; ++i) { let b = a; c = b; b. x = i; } console. log(a. x); console. log(c. x);

How many objects will there be in memory? let a = []; let b = { x: 0, y: 1 }; for (let i = 0; i < 100; ++i) { a. push(b); }

How many objects will there be in memory? let a = []; let b = { x: 0, y: 1 }; for (let i = 0; i < 100; ++i) { b = { x: 0, y: 1 }; a. push(b); }

Exercise: What will this program print, and why? let a = []; let b = { x: 0, y: 1 }; for (let i = 0; i < 100; ++i) { a. push(b); } b. x = 5; let s = 0; for (let i = 0; i < a. length; ++i) { s = s + a[i]. x; } console. log(s);

Exercise: What will this program print, and why? let a = []; let b = { x: 0, y: 1 }; for (let i = 0; i < 100; ++i) { b = { x: 0, y: 1 }; a. push(b); } b. x = 5; let s = a. reduce(function(sum, obj) { return sum + obj. x; }, 0); console. log(s);

Summary Key principles of variables, objects, and memory: 1. 2. 3. 4. The values are numbers, booleans, strings, and references to objects and arrays Every variable stores a value Every field in an object stores a value An assignment, y = x creates a copy of the value in x and stores that copy in y Important corollary: Objects are not values. Arrays are not values. This principles are true for Java. Script and every other major programming language (with the exception of C++, where objects can be values).

Next time. . . A mental model of functions, and how variables in Java. Script are not stored on the stack