const { name: myName } = { name: 'Lydia' };
console.log(name);
"Lydia"
"myName"
undefined
ReferenceError
When we unpack the property name
from the object on the right-hand side, we assign its value "Lydia"
to a variable with the name myName
.
With { name: myName }
, we tell JavaScript that we want to create a new variable called myName
with the value of the name
property on the right-hand side.
Since we try to log name
, a variable that is not defined, a ReferenceError gets thrown.
function sum(a, b) {
return a + b;
}
A pure function is a function that always returns the same result, if the same arguments are passed.
The sum
function always returns the same result. If we pass 1
and 2
, it will always return 3
without side effects. If we pass 5
and 10
, it will always return 15
, and so on. This is the definition of a pure function.
const add = () => {
const cache = {};
return num => {
if (num in cache) {
return `From cache! ${cache[num]}`;
} else {
const result = num + 10;
cache[num] = result;
return `Calculated! ${result}`;
}
};
};
const addFunction = add();
console.log(addFunction(10));
console.log(addFunction(10));
console.log(addFunction(5 * 2));
Calculated! 20
Calculated! 20
Calculated! 20
Calculated! 20
From cache! 20
Calculated! 20
Calculated! 20
From cache! 20
From cache! 20
Calculated! 20
From cache! 20
Error
The add
function is a memoized function. With memoization, we can cache the results of a function in order to speed up its execution. In this case, we create a cache
object that stores the previously returned values.
If we call the addFunction
function again with the same argument, it first checks whether it has already gotten that value in its cache. If that's the case, the caches value will be returned, which saves on execution time. Else, if it's not cached, it will calculate the value and store it afterwards.
We call the addFunction
function three times with the same value: on the first invocation, the value of the function when num
is equal to 10
isn't cached yet. The condition of the if-statement num in cache
returns false
, and the else block gets executed: Calculated! 20
gets logged, and the value of the result gets added to the cache object. cache
now looks like { 10: 20 }
.
The second time, the cache
object contains the value that gets returned for 10
. The condition of the if-statement num in cache
returns true
, and 'From cache! 20'
gets logged.
The third time, we pass 5 * 2
to the function which gets evaluated to 10
. The cache
object contains the value that gets returned for 10
. The condition of the if-statement num in cache
returns true
, and 'From cache! 20'
gets logged.
const myLifeSummedUp = ['☕', '💻', '🍷', '🍫'];
for (let item in myLifeSummedUp) {
console.log(item);
}
for (let item of myLifeSummedUp) {
console.log(item);
}
0
1
2
3
and "☕"
"💻"
"🍷"
"🍫"
"☕"
"💻"
"🍷"
"🍫"
and "☕"
"💻"
"🍷"
"🍫"
"☕"
"💻"
"🍷"
"🍫"
and 0
1
2
3
0
1
2
3
and {0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}
With a for-in loop, we can iterate over enumerable properties. In an array, the enumerable properties are the "keys" of array elements, which are actually their indexes. You could see an array as:
{0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}
Where the keys are the enumerable properties. 0
1
2
3
get logged.
With a for-of loop, we can iterate over iterables. An array is an iterable. When we iterate over the array, the variable "item" is equal to the element it's currently iterating over, "☕"
"💻"
"🍷"
"🍫"
get logged.
const list = [1 + 2, 1 * 2, 1 / 2];
console.log(list);
["1 + 2", "1 * 2", "1 / 2"]
["12", 2, 0.5]
[3, 2, 0.5]
[1, 1, 1]
Array elements can hold any value. Numbers, strings, objects, other arrays, null, boolean values, undefined, and other expressions such as dates, functions, and calculations.
The element will be equal to the returned value. 1 + 2
returns 3
, 1 * 2
returns 2
, and 1 / 2
returns 0.5
.
function sayHi(name) {
return `Hi there, ${name}`;
}
console.log(sayHi());
Hi there,
Hi there, undefined
Hi there, null
ReferenceError
By default, arguments have the value of undefined
, unless a value has been passed to the function. In this case, we didn't pass a value for the name
argument. name
is equal to undefined
which gets logged.
In ES6, we can overwrite this default undefined
value with default parameters. For example:
function sayHi(name = "Lydia") { ... }
In this case, if we didn't pass a value or if we passed undefined
, name
would always be equal to the string Lydia
var status = '😎';
setTimeout(() => {
const status = '😍';
const data = {
status: '🥑',
getStatus() {
return this.status;
},
};
console.log(data.getStatus());
console.log(data.getStatus.call(this));
}, 0);
"🥑"
and "😍"
"🥑"
and "😎"
"😍"
and "😎"
"😎"
and "😎"
The value of the this
keyword is dependent on where you use it. In a method, like the getStatus
method, the this
keyword refers to the object that the method belongs to. The method belongs to the data
object, so this
refers to the data
object. When we log this.status
, the status
property on the data
object gets logged, which is "🥑"
.
With the call
method, we can change the object to which the this
keyword refers. In functions, the this
keyword refers to the the object that the function belongs to. We declared the setTimeout
function on the global object, so within the setTimeout
function, the this
keyword refers to the global object. On the global object, there is a variable called status with the value of "😎"
. When logging this.status
, "😎"
gets logged.
const person = {
name: 'Lydia',
age: 21,
};
let city = person.city;
city = 'Amsterdam';
console.log(person);
{ name: "Lydia", age: 21 }
{ name: "Lydia", age: 21, city: "Amsterdam" }
{ name: "Lydia", age: 21, city: undefined }
"Amsterdam"
We set the variable city
equal to the value of the property called city
on the person
object. There is no property on this object called city
, so the variable city
has the value of undefined
.
Note that we are not referencing the person
object itself! We simply set the variable city
equal to the current value of the city
property on the person
object.
Then, we set city
equal to the string "Amsterdam"
. This doesn't change the person object: there is no reference to that object.
When logging the person
object, the unmodified object gets returned.
function checkAge(age) {
if (age < 18) {
const message = "Sorry, you're too young.";
} else {
const message = "Yay! You're old enough!";
}
return message;
}
console.log(checkAge(21));
"Sorry, you're too young."
"Yay! You're old enough!"
ReferenceError
undefined
Variables with the const
and let
keyword are block-scoped. A block is anything between curly brackets ({ }
). In this case, the curly brackets of the if/else statements. You cannot reference a variable outside of the block it's declared in, a ReferenceError gets thrown.
fetch('https://www.website.com/api/user/1')
.then(res => res.json())
.then(res => console.log(res));
fetch
method.fetch
method..then()
.
The value of res
in the second .then
is equal to the returned value of the previous .then
. You can keep chaining .then
s like this, where the value is passed to the next handler.
hasName
equal to true
, provided you cannot pass true
as an argument?function getName(name) {
const hasName = //
}
!!name
name
new Boolean(name)
name.length
With !!name
, we determine whether the value of name
is truthy or falsy. If name is truthy, which we want to test for, !name
returns false
. !false
(which is what !!name
practically is) returns true
.
By setting hasName
equal to name
, you set hasName
equal to whatever value you passed to the getName
function, not the boolean value true
.
new Boolean(true)
returns an object wrapper, not the boolean value itself.
name.length
returns the length of the passed argument, not whether it's true
.
console.log('I want pizza'[0]);
"""
"I"
SyntaxError
undefined
In order to get an character on a specific index in a string, you can use bracket notation. The first character in the string has index 0, and so on. In this case we want to get the element which index is 0, the character "I'
, which gets logged.
Note that this method is not supported in IE7 and below. In that case, use .charAt()
function sum(num1, num2 = num1) {
console.log(num1 + num2);
}
sum(10);
NaN
20
ReferenceError
undefined
You can set a default parameter's value equal to another parameter of the function, as long as they've been defined before the default parameter. We pass the value 10
to the sum
function. If the sum
function only receives 1 argument, it means that the value for num2
is not passed, and the value of num1
is equal to the passed value 10
in this case. The default value of num2
is the value of num1
, which is 10
. num1 + num2
returns 20
.
If you're trying to set a default parameter's value equal to a parameter which is defined after (to the right), the parameter's value hasn't been initialized yet, which will throw an error.
// module.js
export default () => 'Hello world';
export const name = 'Lydia';
// index.js
import * as data from './module';
console.log(data);
{ default: function default(), name: "Lydia" }
{ default: function default() }
{ default: "Hello world", name: "Lydia" }
module.js
With the import * as name
syntax, we import all exports from the module.js
file into the index.js
file as a new object called data
is created. In the module.js
file, there are two exports: the default export, and a named export. The default export is a function which returns the string "Hello World"
, and the named export is a variable called name
which has the value of the string "Lydia"
.
The data
object has a default
property for the default export, other properties have the names of the named exports and their corresponding values.
class Person {
constructor(name) {
this.name = name;
}
}
const member = new Person('John');
console.log(typeof member);
"class"
"function"
"object"
"string"
Classes are syntactical sugar for function constructors. The equivalent of the Person
class as a function constructor would be:
function Person() {
this.name = name;
}
Calling a function constructor with new
results in the creation of an instance of Person
, typeof
keyword returns "object"
for an instance. typeof member
returns "object"
.
let newList = [1, 2, 3].push(4);
console.log(newList.push(5));
[1, 2, 3, 4, 5]
[1, 2, 3, 5]
[1, 2, 3, 4]
Error
The .push
method returns the new length of the array, not the array itself! By setting newList
equal to [1, 2, 3].push(4)
, we set newList
equal to the new length of the array: 4
.
Then, we try to use the .push
method on newList
. Since newList
is the numerical value 4
, we cannot use the .push
method: a TypeError is thrown.
function giveLydiaPizza() {
return 'Here is pizza!';
}
const giveLydiaChocolate = () =>
"Here's chocolate... now go hit the gym already.";
console.log(giveLydiaPizza.prototype);
console.log(giveLydiaChocolate.prototype);
{ constructor: ...}
{ constructor: ...}
{}
{ constructor: ...}
{ constructor: ...}
{}
{ constructor: ...}
undefined
Regular functions, such as the giveLydiaPizza
function, have a prototype
property, which is an object (prototype object) with a constructor
property. Arrow functions however, such as the giveLydiaChocolate
function, do not have this prototype
property. undefined
gets returned when trying to access the prototype
property using giveLydiaChocolate.prototype
.
const person = {
name: 'Lydia',
age: 21,
};
for (const [x, y] of Object.entries(person)) {
console.log(x, y);
}
name
Lydia
and age
21
["name", "Lydia"]
and ["age", 21]
["name", "age"]
and undefined
Error
Object.entries(person)
returns an array of nested arrays, containing the keys and objects:
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Using the for-of
loop, we can iterate over each element in the array, the subarrays in this case. We can destructure the subarrays instantly in the for-of loop, using const [x, y]
. x
is equal to the first element in the subarray, y
is equal to the second element in the subarray.
The first subarray is [ "name", "Lydia" ]
, with x
equal to "name"
, and y
equal to "Lydia"
, which get logged.
The second subarray is [ "age", 21 ]
, with x
equal to "age"
, and y
equal to 21
, which get logged.
function getItems(fruitList, ...args, favoriteFruit) {
return [...fruitList, ...args, favoriteFruit]
}
getItems(["banana", "apple"], "pear", "orange")
["banana", "apple", "pear", "orange"]
[["banana", "apple"], "pear", "orange"]
["banana", "apple", ["pear"], "orange"]
SyntaxError
...args
is a rest parameter. The rest parameter's value is an array containing all remaining arguments, and can only be the last parameter! In this example, the rest parameter was the second parameter. This is not possible, and will throw a syntax error.
function getItems(fruitList, favoriteFruit, ...args) {
return [...fruitList, ...args, favoriteFruit];
}
getItems(['banana', 'apple'], 'pear', 'orange');
The above example works. This returns the array [ 'banana', 'apple', 'orange', 'pear' ]
function nums(a, b) {
if (a > b) console.log('a is bigger');
else console.log('b is bigger');
return;
a + b;
}
console.log(nums(4, 2));
console.log(nums(1, 2));
a is bigger
, 6
and b is bigger
, 3
a is bigger
, undefined
and b is bigger
, undefined
undefined
and undefined
SyntaxError
In JavaScript, we don't have to write the semicolon (;
) explicitly, however the JavaScript engine still adds them after statements. This is called Automatic Semicolon Insertion. A statement can for example be variables, or keywords like throw
, return
, break
, etc.
Here, we wrote a return
statement, and another value a + b
on a new line. However, since it's a new line, the engine doesn't know that it's actually the value that we wanted to return. Instead, it automatically added a semicolon after return
. You could see this as:
return;
a + b;
This means that a + b
is never reached, since a function stops running after the return
keyword. If no value gets returned, like here, the function returns undefined
. Note that there is no automatic insertion after if/else
statements!
class Person {
constructor() {
this.name = 'Lydia';
}
}
Person = class AnotherPerson {
constructor() {
this.name = 'Sarah';
}
};
const member = new Person();
console.log(member.name);
"Lydia"
"Sarah"
Error: cannot redeclare Person
SyntaxError
We can set classes equal to other classes/function constructors. In this case, we set Person
equal to AnotherPerson
. The name on this constructor is Sarah
, so the name property on the new Person
instance member
is "Sarah"
.
const info = {
[Symbol('a')]: 'b',
};
console.log(info);
console.log(Object.keys(info));
{Symbol('a'): 'b'}
and ["{Symbol('a')"]
{}
and []
{ a: "b" }
and ["a"]
{Symbol('a'): 'b'}
and []
A Symbol is not enumerable. The Object.keys method returns all enumerable key properties on an object. The Symbol won't be visible, and an empty array is returned. When logging the entire object, all properties will be visible, even non-enumerable ones.
This is one of the many qualities of a symbol: besides representing an entirely unique value (which prevents accidental name collision on objects, for example when working with 2 libraries that want to add properties to the same object), you can also "hide" properties on objects this way (although not entirely. You can still access symbols using the Object.getOwnPropertySymbols()
method).
const getList = ([x, ...y]) => [x, y]
const getUser = user => { name: user.name, age: user.age }
const list = [1, 2, 3, 4]
const user = { name: "Lydia", age: 21 }
console.log(getList(list))
console.log(getUser(user))
[1, [2, 3, 4]]
and undefined
[1, [2, 3, 4]]
and { name: "Lydia", age: 21 }
[1, 2, 3, 4]
and { name: "Lydia", age: 21 }
Error
and { name: "Lydia", age: 21 }
The getList
function receives an array as its argument. Between the parentheses of the getList
function, we destructure this array right away. You could see this as:
[x, ...y] = [1, 2, 3, 4]
With the rest parameter ...y
, we put all "remaining" arguments in an array. The remaining arguments are 2
, 3
and 4
in this case. The value of y
is an array, containing all the rest parameters. The value of x
is equal to 1
in this case, so when we log [x, y]
, [1, [2, 3, 4]]
gets logged.
The getUser
function receives an object. With arrow functions, we don't have to write curly brackets if we just return one value. However, if you want to return an object from an arrow function, you have to write it between parentheses, otherwise no value gets returned! The following function would have returned an object:
const getUser = user => ({ name: user.name, age: user.age })
Since no value gets returned in this case, the function returns undefined
.
const name = 'Lydia';
console.log(name());
SyntaxError
ReferenceError
TypeError
undefined
The variable name
holds the value of a string, which is not a function, thus cannot invoke.
TypeErrors get thrown when a value is not of the expected type. JavaScript expected name
to be a function since we're trying to invoke it. It was a string however, so a TypeError gets thrown: name is not a function!
SyntaxErrors get thrown when you've written something that isn't valid JavaScript, for example when you've written the word return
as retrun
.
ReferenceErrors get thrown when JavaScript isn't able to find a reference to a value that you're trying to access.
// 🎉✨ This is my 100th question! ✨🎉
const output = `${[] && 'Im'}possible!
You should${'' && `n't`} see a therapist after so much JavaScript lol`;
possible! You should see a therapist after so much JavaScript lol
Impossible! You should see a therapist after so much JavaScript lol
possible! You shouldn't see a therapist after so much JavaScript lol
Impossible! You shouldn't see a therapist after so much JavaScript lol
[]
is a truthy value. With the &&
operator, the right-hand value will be returned if the left-hand value is a truthy value. In this case, the left-hand value []
is a truthy value, so "Im'
gets returned.
""
is a falsy value. If the left-hand value is falsy, nothing gets returned. n't
doesn't get returned.