Just Javascript

Posted on:September 23, 2022 at 03:22 PM

Just javascript

Just Javascript (2)

There are two kinds of values

  1. Primitive Values: They are a permanent part of our JavaScript universe. I can point to them, but I can’t create, destroy, or change them.
  2. Objects and Functions: Objects and functions are also values but, unlike primitive values, we can create and manipulate them from my code.

Fun fact: Functions are objects, but because they include a few unique additional features, we’re going to refer to them separately to avoid confusion.

Types of Values

There are 9 types of values in JS.

Primitive values

  1. Undefined (undefined): Used for unintentionally missing values.
  2. Null (null): Used for intentionally missing values.
  3. Booleans (true and false): Used for logical operations.
  4. Numbers (-100, 3.14, and others): Used for math calculations.
  5. BigInts (uncommon and new): Used for math on big numbers.
  6. Strings (“hello”, “abracadabra”, and others): Used for text.
  7. Symbols (uncommon): Used to perform rituals and hide secrets.

Objects and Function values

  1. Objects ({} and others): Used to group related data and code.
  2. Functions (x => x * 2 and others): Used to refer to code.

Note: Arrays, dates, and regular expressions fundamentally are objects in JS.

Myth: everything in JS is an object! "hi".toUpperCase() makes “hi” seem like an object, this is nothing but an illusion. JS creates a temporary object when you do this, and then immediately discards it.

typeof: Mostly the parens is not required, but for console.log(typeof(x => x * 2)); we need parens.

Expressions

Recap

Note: typeof(null) gives object which is incorrect as per the standard. It should be null. typeof(typeof(value)) is always string.

Primitive Values Are Immutable

// In strict mode it will throw an error
// otherwise it prints 'yikes'
let reaction = "yikes";
reaction[0] = "l";
console.log(reaction);

Variables and Values (3)

Rules of Assignment

Literals and expressions

Reading a Value of a Variable

Studying from the inside (4)

Meeting the Primitive Values (5)

undefined

null

boolean

numbers

console.log(0.1 + 0.2 === 0.3); // false
console.log(0.1 + 0.2 === 0.30000000000000004); // true

In real math, there is an infinite set of numbers. But in floating-point math, there are only 18 quintillion of them. So when we write numbers in our code or do calculations with them, JavaScript picks the closest numbers that it knows about—just like our scanner does with colors.

In other words, JavaScript uses numbers with limited precision.

We can imagine all of the JavaScript numbers on an axis. The closer we are to 0, the more precision numbers have, and the closer they “sit” to each other:

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991

Luckily, any whole numbers between Number.MIN_SAFE_INTEGER and Number.MAX_SAFE_INTEGER are exact. This is why 10 + 20 === 30.

Special Numbers

let scale = 0;
let a = 1 / scale; // Infinity
let b = 0 / scale; // NaN
let c = -a; // -Infinity
let d = 1 / c; // -0

BigInts

let alot = 9007199254740991n; // n at the end makes it a BigInt!
console.log(alot + 1n); // 9007199254740992n
console.log(alot + 2n); // 9007199254740993n
console.log(alot + 3n); // 9007199254740994n

strings

Symbols

let alohomora = Symbol();
console.log(typeof alohomora); // "symbol"

Quiz

Meeting Objects and Functions (6)

Objects

console.log(typeof new Date()); // "object"
console.log(typeof /\d+/); // "object"
console.log(typeof Math); // "object"

Functions

for (let i = 0; i < 7; i++) {
  console.log(2); // Same value epasse din each call.
  console.log({}); // Diff. object value passed every call
  console.log(function () {}); // Diff. function value passed every call
}

Recap

Quiz

Equality of Values

Kinds of Equality (7)

Same Value Equality vs. Strict Equality

Two rare cases where the behavior of === is different from Object.is(a, b)

let width = 0 / 0; // NaN
let height = width * 2; // NaN
console.log(width === height); // false
console.log(Object.is(width, height)); // true

// fix for NaN check
Number.isNaN(size);
Object.is(size, NaN);
size !== size;

Loose Equality

Recap

Properties (8)

let sherlock = {
  surname: "Holmes",
  age: 64,
};

Note: Remember that our universe is full of wires. Some of them start from our code (variables), and others start from objects (properties). All wires always point to values.

Property Names

Missing Properties

JavaScript uses a set of rules that looks something like this:

Recap

Mutation (9)

No Nested Objects

Properties Always Point to Values

Let vs. Const

Recap

Prototypes (10)

proto property

let human = {
  teeth: 32,
};

let gwen = {
  __proto__: human,
  age: 19,
};

Prototype Chain

Shadowing

console.log(human.hasOwnProperty("teeth")); // true
console.log(gwen.hasOwnProperty("teeth")); // true

Assignment

let human = {
  teeth: 32,
};

let gwen = {
  __proto__: human,
  // Note: no own teeth property
};

gwen.teeth = 31;

console.log(human.teeth); // 32
console.log(gwen.teeth); // 31

The Object Prototype

An Object With No Prototype

Polluting the Prototype

let obj = {};
obj.__proto__.smell = "banana";
// Now all object will have access to smell property.

proto vs. prototype

function Donut() {
  return { shape: "round" };
}

let donutProto = {
  eat() {
    console.log("Nom nom nom");
  },
};

let donut1 = Donut();
donut1.__proto__ = donutProto;
let donut2 = Donut();
donut2.__proto__ = donutProto;

donut1.eat();
donut2.eat();
function Donut() {
  this.shape = "round";
}
Donut.prototype = {
  eat() {
    console.log("Nom nom nom");
  },
};

let donut1 = new Donut(); // __proto__: Donut.prototype
let donut2 = new Donut(); // __proto__: Donut.prototype

donut1.eat();
donut2.eat();
class Donut {
  constructor() {
    this.shape = "round";
  }
  eat() {
    console.log("Nom nom nom");
  }
}

let donut1 = new Donut(); // __proto__: Donut.prototype
let donut2 = new Donut(); // __proto__: Donut.prototype

donut1.eat();
donut2.eat();

// JavaScript class rewritten with __proto__ for a comparison.
class Spiderman {
  lookOut() {
    alert("My Spider-Sense is tingling.");
  }
}

let miles = new Spiderman();
miles.lookOut();

// class Spiderman {
let SpidermanPrototype = {
  lookOut() {
    alert("My Spider-Sense is tingling.");
  },
};

// let miles = new Spiderman();
let miles = { __proto__: SpidermanPrototype };
miles.lookOut();

Recap