The base execution context is the global execution context: it's what's accessible everywhere in your code.
for (let i = 1; i < 5; i++) {
if (i === 3) continue;
console.log(i);
}
1
2
1
2
3
1
2
4
1
3
4
The continue
statement skips an iteration if a certain condition returns true
.
String.prototype.giveLydiaPizza = () => {
return 'Just give Lydia pizza already!';
};
const name = 'Lydia';
name.giveLydiaPizza();
"Just give Lydia pizza already!"
TypeError: not a function
SyntaxError
undefined
String
is a built-in constructor, which we can add properties to. I just added a method to its prototype. Primitive strings are automatically converted into a string object, generated by the string prototype function. So, all strings (string objects) have access to that method!
const a = {};
const b = { key: 'b' };
const c = { key: 'c' };
a[b] = 123;
a[c] = 456;
console.log(a[b]);
123
456
undefined
ReferenceError
Object keys are automatically converted into strings. We are trying to set an object as a key to object a
, with the value of 123
.
However, when we stringify an object, it becomes "[object Object]"
. So what we are saying here, is that a["object Object"] = 123
. Then, we can try to do the same again. c
is another object that we are implicitly stringifying. So then, a["object Object"] = 456
.
Then, we log a[b]
, which is actually a["object Object"]
. We just set that to 456
, so it returns 456
.
const foo = () => console.log('First');
const bar = () => setTimeout(() => console.log('Second'));
const baz = () => console.log('Third');
bar();
foo();
baz();
First
Second
Third
First
Third
Second
Second
First
Third
Second
Third
First
We have a setTimeout
function and invoked it first. Yet, it was logged last.
This is because in browsers, we don't just have the runtime engine, we also have something called a WebAPI
. The WebAPI
gives us the setTimeout
function to start with, and for example the DOM.
After the callback is pushed to the WebAPI, the setTimeout
function itself (but not the callback!) is popped off the stack.
Now, foo
gets invoked, and "First"
is being logged.
foo
is popped off the stack, and baz
gets invoked. "Third"
gets logged.
The WebAPI can't just add stuff to the stack whenever it's ready. Instead, it pushes the callback function to something called the queue.
This is where an event loop starts to work. An event loop looks at the stack and task queue. If the stack is empty, it takes the first thing on the queue and pushes it onto the stack.
bar
gets invoked, "Second"
gets logged, and it's popped off the stack.
<div onclick="console.log('first div')">
<div onclick="console.log('second div')">
<button onclick="console.log('button')">
Click!
</button>
</div>
</div>
div
div
button
The deepest nested element that caused the event is the target of the event. You can stop bubbling by event.stopPropagation
<div onclick="console.log('div')">
<p onclick="console.log('p')">
Click here!
</p>
</div>
p
div
div
p
p
div
If we click p
, we see two logs: p
and div
. During event propagation, there are 3 phases: capturing, target, and bubbling. By default, event handlers are executed in the bubbling phase (unless you set useCapture
to true
). It goes from the deepest nested element outwards.
const person = { name: 'Lydia' };
function sayHi(age) {
return `${this.name} is ${age}`;
}
console.log(sayHi.call(person, 21));
console.log(sayHi.bind(person, 21));
undefined is 21
Lydia is 21
function
function
Lydia is 21
Lydia is 21
Lydia is 21
function
With both, we can pass the object to which we want the this
keyword to refer to. However, .call
is also executed immediately!
.bind.
returns a copy of the function, but with a bound context! It is not executed immediately.
function sayHi() {
return (() => 0)();
}
console.log(typeof sayHi());
"object"
"number"
"function"
"undefined"
The sayHi
function returns the returned value of the immediately invoked function (IIFE). This function returned 0
, which is type "number"
.
FYI: there are only 7 built-in types: null
, undefined
, boolean
, number
, string
, object
, symbol
, and bigint
. "function"
is not a type, since functions are objects, it's of type "object"
.
0;
new Number(0);
('');
(' ');
new Boolean(false);
undefined;
0
, ''
, undefined
0
, new Number(0)
, ''
, new Boolean(false)
, undefined
0
, ''
, new Boolean(false)
, undefined
There are only six falsy values:
undefined
null
NaN
0
''
(empty string)false
Function constructors, like new Number
and new Boolean
are truthy.
console.log(typeof typeof 1);
"number"
"string"
"object"
"undefined"
typeof 1
returns "number"
.
typeof "number"
returns "string"
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);
[1, 2, 3, 7 x null, 11]
[1, 2, 3, 11]
[1, 2, 3, 7 x empty, 11]
SyntaxError
When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called "empty slots". These actually have the value of undefined
, but you will see something like:
[1, 2, 3, 7 x empty, 11]
depending on where you run it (it's different for every browser, node, etc.)
(() => {
let x, y;
try {
throw new Error();
} catch (x) {
(x = 1), (y = 2);
console.log(x);
}
console.log(x);
console.log(y);
})();
1
undefined
2
undefined
undefined
undefined
1
1
2
1
undefined
undefined
The catch
block receives the argument x
. This is not the same x
as the variable when we pass arguments. This variable x
is block-scoped.
Later, we set this block-scoped variable equal to 1
, and set the value of the variable y
. Now, we log the block-scoped variable x
, which is equal to 1
.
Outside of the catch
block, x
is still undefined
, and y
is 2
. When we want to console.log(x)
outside of the catch
block, it returns undefined
, and y
returns 2
.
JavaScript only has primitive types and objects.
Primitive types are boolean
, null
, undefined
, bigint
, number
, string
, and symbol
.
What differentiates a primitive from an object is that primitives do not have any properties or methods; however, you'll note that 'foo'.toUpperCase()
evaluates to 'FOO'
and does not result in a TypeError
. This is because when you try to access a property or method on a primitive like a string, JavaScript will implicitly wrap the object using one of the wrapper classes, i.e. String
, and then immediately discard the wrapper after the expression evaluates. All primitives except for null
and undefined
exhibit this behaviour.
[[0, 1], [2, 3]].reduce(
(acc, cur) => {
return acc.concat(cur);
},
[1, 2],
);
[0, 1, 2, 3, 1, 2]
[6, 1, 2]
[1, 2, 0, 1, 2, 3]
[1, 2, 6]
[1, 2]
is our initial value. This is the value we start with, and the value of the very first acc
. During the first round, acc
is [1,2]
, and cur
is [0, 1]
. We concatenate them, which results in [1, 2, 0, 1]
.
Then, [1, 2, 0, 1]
is acc
and [2, 3]
is cur
. We concatenate them, and get [1, 2, 0, 1, 2, 3]
!!null;
!!'';
!!1;
false
true
false
false
false
true
false
true
true
true
true
false
null
is falsy. !null
returns true
. !true
returns false
.
""
is falsy. !""
returns true
. !true
returns false
.
1
is truthy. !1
returns false
. !false
returns true
.
setInterval
method return in the browser?setInterval(() => console.log('Hi'), 1000);
undefined
It returns a unique id. This id can be used to clear that interval with the clearInterval()
function.
[...'Lydia'];
["L", "y", "d", "i", "a"]
["Lydia"]
[[], "Lydia"]
[["L", "y", "d", "i", "a"]]
A string is an iterable. The spread operator maps every character of an iterable to one element.
function* generator(i) {
yield i;
yield i * 2;
}
const gen = generator(10);
console.log(gen.next().value);
console.log(gen.next().value);
[0, 10], [10, 20]
20, 20
10, 20
0, 10 and 10, 20
Regular functions cannot be stopped mid-way after invocation. However, a generator function can be "stopped" midway, and later continue from where it stopped. Every time a generator function encounters a yield
keyword, the function yields the value specified after it. Note that the generator function in that case doesn’t return the value, it yields the value.
First, we initialize the generator function with i
equal to 10
. We invoke the generator function using the next()
method. The first time we invoke the generator function, i
is equal to 10
. It encounters the first yield
keyword: it yields the value of i
. The generator is now "paused", and 10
gets logged.
Then, we invoke the function again with the next()
method. It starts to continue where it stopped previously, still with i
equal to 10
. Now, it encounters the next yield
keyword, and yields i * 2
. i
is equal to 10
, so it returns 10 * 2
, which is 20
. This results in 10, 20
.
const firstPromise = new Promise((res, rej) => {
setTimeout(res, 500, 'one');
});
const secondPromise = new Promise((res, rej) => {
setTimeout(res, 100, 'two');
});
Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
"one"
"two"
"two" "one"
"one" "two"
When we pass multiple promises to the Promise.race
method, it resolves/rejects the first promise that resolves/rejects. To the setTimeout
method, we pass a timer: 500ms for the first promise (firstPromise
), and 100ms for the second promise (secondPromise
). This means that the secondPromise
resolves first with the value of 'two'
. res
now holds the value of 'two'
, which gets logged.
let person = { name: 'Lydia' };
const members = [person];
person = null;
console.log(members);
null
[null]
[{}]
[{ name: "Lydia" }]
First, we declare a variable person
with the value of an object that has a name
property.
Then, we declare a variable called members
. We set the first element of that array equal to the value of the person
variable. Objects interact by reference when setting them equal to each other. When you assign a reference from one variable to another, you make a copy of that reference. (note that they don't have the same reference!)
Then, we set the variable person
equal to null
.
We are only modifying the value of the person
variable, and not the first element in the array, since that element has a different (copied) reference to the object. The first element in members
still holds its reference to the original object. When we log the members
array, the first element still holds the value of the object, which gets logged.
const person = {
name: 'Lydia',
age: 21,
};
for (const item in person) {
console.log(item);
}
{ name: "Lydia" }, { age: 21 }
"name", "age"
"Lydia", 21
["name", "Lydia"], ["age", 21]
With a for-in
loop, we can iterate through object keys, in this case name
and age
. Under the hood, object keys are strings (if they're not a Symbol). On every loop, we set the value of item
equal to the current key it’s iterating over. First, item
is equal to name
, and gets logged. Then, item
is equal to age
, which gets logged.
console.log(3 + 4 + '5');
"345"
"75"
12
"12"
Operator associativity is the order in which the compiler evaluates the expressions, either left-to-right or right-to-left. This only happens if all operators have the same precedence. We only have one type of operator: +
. For addition, the associativity is left-to-right.
3 + 4
gets evaluated first. This results in the number 7
.
7 + '5'
results in "75"
because of coercion. JavaScript converts the number 7
into a string, see question 15. We can concatenate two strings using the +
operator. "7" + "5"
results in "75"
.
num
?const num = parseInt('7*6', 10);
42
"42"
7
NaN
Only the first numbers in the string is returned. Based on the radix (the second argument in order to specify what type of number we want to parse it to: base 10, hexadecimal, octal, binary, etc.), the parseInt
checks whether the characters in the string are valid. Once it encounters a character that isn't a valid number in the radix, it stops parsing and ignores the following characters.
*
is not a valid number. It only parses "7"
into the decimal 7
. num
now holds the value of 7
.
[1, 2, 3].map(num => {
if (typeof num === 'number') return;
return num * 2;
});
[]
[null, null, null]
[undefined, undefined, undefined]
[ 3 x empty ]
When mapping over the array, the value of num
is equal to the element it’s currently looping over. In this case, the elements are numbers, so the condition of the if statement typeof num === "number"
returns true
. The map function creates a new array and inserts the values returned from the function.
However, we don’t return a value. When we don’t return a value from the function, the function returns undefined
. For every element in the array, the function block gets called, so for each element we return undefined
.