Explore the JavaScript Universe

Rebuild your mental model from the inside out.

Mental Models

01

let a = 10;

let b = a;

a = 0;

Run this in your brain 🧠

What are the values of a and b?

Coding, Fast and Slow

Responsible for complex step-by-step reasoning

Good at pattern matching and “gut reactions”

Slow Thinking System

Fast Thinking System

function duplicateSpreadsheet(original) {

if (original.hasPendingChanges) {

throw new Error('Save the file before duplicate it!');

}

​

let copy = {

author: original.author,

cells: original.cells,

metadata: original.metadata,

};

​

copy.metadata.title = 'Copy of ' + original.metadata.title;

​

return copy;

}

​

Run this in your brain 🧠

​

The JavaScript

Universe

02

What is a “value” ?

Values

Objects and functions are also values but, unlike primitive values, I can manipulate them from my code

They are a permanent part of our JavaScript universe. I can point to them, but I can’t create, destroy, or change them.

Object & Functions

Primitive Values

Types of Values

Checking a Type

console.log(typeof(2)); // "number"

console.log(typeof("hello")); // "string"

console.log(typeof(undefined)); // "undefined"

​

console.log(typeof({})); // "object"

console.log(typeof([])); // "object"

console.log(typeof(x => x * 2)); // "function"

Expressions

What is an “Expressions” ?

console.log(2 + 2);

Run this in your brain 🧠

​

Expressions

Expressions are questions that JavaScript can answer with values.

Expressions always result in a single value.

Values and Variables

03

let reaction = 'yikes';

reaction[0] = 'l';

​

console.log(reaction);

Run this in your brain 🧠

It will prints "yikes" instead of “likes”

Primitive Values Are Immutable

“Immutable” is a fancy Latin way to say “unchangeable.”

let arr = [212, 8, 506];

​

console.log(arr[0]); // 212

​

arr[0] = 420;

console.log(arr); // [420, 8, 506]

​

​

Run this in your brain 🧠

let str = 'hello';

​

console.log(str[0]); // "h"

​

str[0] = 'j'; // ???

​

​

let fifty = 50;

fifty.shades = 'gray';

​

console.log(fifty);

Run this in your brain 🧠

In our JavaScript universe, all primitive values are distant stars, floating farthest from our code. We can point to them, but they will always stay where they are, unchanged.

let pet = 'Narwhal';

pet = 'The Kraken';

​

console.log(pet);

Run this in your brain 🧠

Variables are not values.

Variables point to values.

Variables Are Wires

let pet = 'Narwhal';

pet = 'The Kraken';

​

console.log(pet);

let pet = 'Narwhal';

pet = 'The Kraken';

​

console.log(pet);

20000 = 'under the sea';

'war' = 'peace';.

Rule of the assignment

pet = count + ' Dalmatians';

The left side of an assignment must be a “wire”

The right side of an assignment must be an expression, so it always results in a value

Reading a Value of a Variable

console.log(pet);

When we write pet, we’re asking JavaScript a question: “What is the current value of pet?”

Who cares if you say “pass a variable” or “pass a value”?

function double(x) {

x = x * 2;

}

​

let money = 10;

double(money);

console.log(money); // ?

​

Run this in your brain 🧠

Let’s Revisit

let x = 10;

let y = x;

x = 0;

Quiz#0 excalidraw.com 🧠

Draw what happens to the “wires” of the x and y variables step by step

let x = 10;

let y = x;

x = 0;

let x = 10;

let y = x;

x = 0;

Variables always point to values

let x = 10;

let y = x;

x = 0;

Studying from the Inside

04

Is our JavaScript universe really real?

Studying from the outside

Studying from the inside

Meeting the Primitive Values

05

Undefined

// "undefined"

console.log(typeof(undefined));

​

​

Undefined

let bandersnatch;

​

console.log(bandersnatch); // undefined

​

null

null

let mimsy = null;

​

console.log(mimsy.mood); // TypeError!

​

Boolean

Boolean

console.log(typeof(true)); // "boolean"

​

console.log(typeof(false)); // "boolean"

Quiz#1

let isSad = true;

​

let isHappy = !isSad;

​

let isFeeling = isSad || isHappy;

​

let isConfusing = isSad && isHappy;

​

Draw what happens to the “wires” variables step by step on Excalidraw.com

Strings

In our universe, there is a distinct value for every conceivable string.

To be continued …

Quiz #2

import feed from './feed.js';

​

let pets = 'Tom and Jerry';

​

feed(pets);

​

console.log(pets[0]);

​

Your colleague bets they can change your console.log output by only editing their feed.js file. Do you believe them, or would you bet they can’t?

​

​

Quiz #3

let meals = 4;

​

let wheels = meals;

​

let eels = 2 + 2;

Draw what happens to the “wires” variables step by step on Excalidraw.com

Reference

JustJavaScript.com

Thanks!

Do you have any questions?