Introduction

I completed the Just JavaScript course by Dan Abramov.

In this blog post, I'd like to share the things I've learned.

Mental Models

Mental models are important for understanding code better. They simplify how we think code works, making it easier to work with.

Let's consider an example:

let a = 5;
let b = a;
a = 0;

Here's what happens:

1. We set a variable called a to 5.

2. After that we create another variable called b and give it the same value as a.

3. Then, we change the value of a to 0.

In our thoughts, it goes like this:

1. We start with a as 5.

2. Then we make b equal to a, which means a is also 5.

3. Later, we change the value of a to 0.

4. Now, a is 0 and b remains 5.

Values and Code

Objects allow us to create our own values. They can be arrays, dates, and other non-primitive types. We can modify them because they are mutable.

In JavaScript, using {} creates a new object each time. Therefore, even if we use {} multiple times, each one will be its own separate object in memory.

console.log(3 + 3); // 6
console.log(typeof(2)); // "number"
console.log(typeof({})); // "object"
console.log(typeof([])); // "object"
console.log(typeof(x => x * 2)); // "function"
console.log(typeof("hello")); // "string"
console.log(typeof(undefined)); // "undefined"

Primitive Values

Primitive values in JavaScript always exist in memory, and we can't create new primitive types. These values are immutable.

• Numbers: Numerical values.

• NaN: Invalid numeric value.

• BigInts: Large whole numbers.

• String: Textual data.

• Undefined: Unknown value.

• Null: Absence of value.

• Boolean: True or false.

Functions

We can think of them as special objects. When we want to use a function, we simply write its name followed by parentheses (). This instructs the function to execute its code and give us a result.

function hobby() {
  console.log('Dancing');
}
hobby(); // Calling the function

We can modify functions to behave in different ways or redefine them entirely.

let multiply = function (a, b) {
  return a * b;
};

multiply = function (a, b) {
  return a + b;
};

console.log(multiply(2, 3)); // 5

When a function runs, it creates a new function value.

for (let i = 0; i < 7; i++) {
  console.log({});
}

/* The line of code console.log({}) creates a brand new object every time it is executed within the loop. */

Equality of Values

Strict Equality (===): checks the value and the type of the compared values.

console.log(2 === 2); // true
console.log("hey" === "hey"); // true
Loose Equality (==): checks only the value of the compared values.

Loose Equality (==): Examines only the value of the compared values.

console.log(1 == "1"); // true

/* It evaluates to true because == converts the string '1' into the number 1 and then checks if they are the same */

Properties in JavaScript

Properties are data that are linked to objects and organized as a group. Each property has a value and cannot refer to another property or variable.

let name = { name: 'Sabrina', age: 16 };

console.log(name.age); // 16
console.log(name.nationality); // undefined

Each property in an object must have a unique name, and the names are sensitive to letter casing. This means that properties with similar names but different capitalizations are treated as separate properties.

const person = { name: 'Sabrina', age: 16, Age: 0 };
console.log(person.name); // "Sabrina"
console.log(person.age); // 16
console.log(person.Age); // 0

Mutation

Objects can be placed inside other objects, forming a nested structure. When we change or update a property of an object, it's called mutation because we are modifying the object directly, which impacts its state or structure.

const person= { name: 'Sabrina', age: 16};
character.age = 4;
console.log(character.age); // 4

Prototypes

Prototypes come in handy when we want to share features between objects. However, if we modify a feature in one object, it won't affect its prototype. Prototypes are important for creating classes and implementing inheritance in JavaScript.

const lisa = { hobby: 'Dancing' };
const tommy= { __proto__: lisa, age: 19 };

console.log(tommy.hobby); // 'Dancing'

Prototype chaining in JavaScript is like creating a family tree for objects, where they can inherit traits from their parents and grandparents.

const jerry = { 
   strong: true 
};

const lisa = { __proto__: 1,  hobby: 'Dancing' };

let tommy = { 
    __proto__: lisa, 
    age: 19 
};

console.log(tommy.strong); // true

The hasOwnProperty method checks if an object has its own property, without considering the prototype chain, and only considers properties directly defined on the object.

const lisa = { hobby: 'dancing' };
const tommy = { __proto__: lisa, age: 19 };

console.log(tommy.hasOwnProperty('hobby')); // false
console.log(tommy.hasOwnProperty('age')); // true

Review

I genuinely enjoyed this course. It helped me gain a better understanding of JavaScript, and I highly recommend it to anyone who wants to learn more about JavaScript as well.