For Each .forEach iterates the elements of an array but does not return a value.
const a = [1, 2, 3];
const newArray = a.forEach((num, index) => {
//do something
});
// newArray = undefined
Map .map iterates the elements of an array but return a new array.
const a = [1, 2, 3];
const newArray = a.map(num => {
return num * 2;
});
// newArray = [2, 4, 6]
Numberic separators is a new JavaScript feature that allows you to use underscores as separators to help to improve readability using a visual separation between groups of digits.
// A billion
const amount = 1_000_000_000;
// Hundreds of millions
const amount = 1_475_938.38;
// 6234500 cents (62345 dollars)
const amount = 62345_00;
// 1,734,500
const amount = 1_734_500;
// 20^30000
const amount = 2e30_000;
The event loop is the secret behind JavaScript's asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, it gives us the illusion of multi-threading but first we have to understand the Call Stack.
Call Stack
The call stack works based on the LIFO principle(last in first out) When you execute a script, the JavaScript engine creates a Global Execution Context and pushes it on top of the call stack.
function multiply(a, b) {
return a * b
}
function squere(n) {
return multiply(n, n)
}
function printSquere(n) {
var result = squere(n)
console.log(result)
}
printSquere(4)
**Stack**
4- multiply
3- squere
2- printSquere
1- main
Result: 16
Call Stack with async callbacks (Even loop)
The event loop facilitates this process; it constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.
An example of this is the setTimeout method. When a setTimeout operation is processed in the stack, it is sent to the corresponding API which waits till the specified time to send this operation back in for processing.
console.log('hi')
setTimeout(()=> {
console.log('there')
},5000)
console.log('bye')
**Stack**
3- there
2- bye
1- hi
**webapis**
setTimeout callback(cb)
**taskqueue**
callback(cb)
**evenloop**
move cb to stack
In the example the setTimeout Callback enters the webapi stack executes and then goes to the task queue and waits for the stack to become empty and the event loop moves the callback to the stack.
Learned by leyaim-jimenez on Oct 1, 2021
If JavaScript's built-in type coercion makes it true, thats mean that the values is a truthy.
true
{}
[]
42
"0"
"false"
new Date()
-42
12n
3.14
Infinity
-Infinity
and in Javascript a falsy value is a value that is considered false
false
0
0n: 0 as a BigInt
'': Empty string
null
undefined
NaN
This means that variable and function declarations are physically moved to the beginning of the code and are allocated in memory during the compilation phase.
function welcomeTo(name) {
console.log("Welcome to " + name);
}
welcomeTo("Magmalabs");
//returns welcome to magmalabs
As you can see hoisting allows you to use a function before declaring it in the code.
welcomeTo("Magmalabs");
function welcomeTo(name) {
console.log("Welcome to " + name);
}
//returns welcome to magmalabs
And also allows you to use a function after declaring it in the code.
For variables, hoisting only applies to the declaration, not to their assignment. example:
We declare the variable name but we got an undefined
console.log(name);
var name = magmalabs;
//return undefined
That’s because JavaScript only hoist the declaration
var name;
console.log(name);
name = magmalabs;
//return undefined
To avoid these errors, it is very important to keep in mind that hoisting only applies to the declaration.
Learned by leyaim-jimenez on Sep 17, 2021
I was working on a major refactor for a PWA which basically changed the DB schema by reducing the amount of versions, nothing outstanding. BUT, I didn't change the DB name.
I was puzzled why whenever accessing the previous version I had to delete the data to have the app load correctly, then I realized that despite the PWA being located at different URL paths, both versions were using the same IndexedDB because of the same domain policy.
Learned by juan-guajardo on Mar 19, 2021
Use n, an extremely simple Node version manager that can be installed via npm.
Say you want Node.js v12.10.0 to build Ghost template.
npm install -g n # Install n globally
n 12.10.0 # Install and use v12.10.0
Usage:
n # Output versions installed
n latest # Install or activate the latest node release
n stable # Install or activate the latest stable node release
n <version> # Install node <version>
n use <version> [args ...] # Execute node <version> with [args ...]
n bin <version> # Output bin path for <version>
n rm <version ...> # Remove the given version(s)
n --latest # Output the latest node version available
n --stable # Output the latest stable node version available
n ls # Output the versions of node available
Optional Chaining Operator(?) (**)
//Car object
const car = {
attributes: {
year: 2021,
model: "Ferrari"
}
}
Before in javascript to validate that the attributes of an object exist, it was necessary to use the And operator (&&) to validate if the attributes of the object existed.
See the following example:
if (car && car.attributes && car.attributes.model) {
console.log('Exist', car.attributes.model)
} else {
console.log('Do not exist')
}
# => "Exist Ferrari"
Now with Optional Chaining Operator (?) We can validate if the property exit will return undefined if the property attributes or model doesn’t exist.
if (car?.attributes?.model) {
console.log('Exist', car.attributes.model)
} else {
console.log('Do not exist')
}
# => "Exist Ferrari"
Nullish Coalescing Operator(??) (**)
//Car object
const car = {
attributes: {
year: 2021,
model: "Ferrari"
}
}
If we want to get the car model then we would like below:
console.log(car.attributes.model);
# => "Ferrari"
Now the new car object does not have the model property, so we get an undefined value
//Car object
const car = {
attributes: {
year: 2021,
}
}
console.log(car.attributes.model);
# => "undefined"
To avoid the undefined value the OR (| |) operator can be used, It will now return the value BMW because the property model is undefined. But what if the name property is empty like below example
console.log(car.attributes.model | | "BMW" );
# => "BMW"
Now the problem is when the property model exists but has an empty, undefined or null value we will get the BMW value and this is not right.
//Car object
const car = {
attributes: {
year: 2021,
model: ""
}
}
console.log(car.attributes.model | | "BMW" );
# => "BMW"
The solution for this problem is to use the Nullish Coalescing Operator (??), Which will print the result as an empty string.
console.log(car.attributes.model ?? "BMW" );
# => ""
The Optional Chaining Operator ? allows you to read the value of a property located deep within an object without having to validate each property in the object. It works in a similar way than the chaining operator ., except that instead of causing an error if a reference is nullish, the expression will return a value of undefined.
A common way to validate properties was to do something like this:
const player = {
stats: {
stamina: 40
}
}
let stamina
if (player && player.stats) {
stamina = player.stats.stamina
}
This was done because calling player.stats.stamina directly could led into an error being thrown if stats didn't exists, and sometimes even the execution would stop.
Using the Optional Chaining Operator, we could do something like this:
const player = {
stats: {
stamina: 40
}
}
const stamina = player.stats?.stamina
The result is shorter and simpler, and in case stats didn't exists the value would be undefined, without an error being thrown.
const is a lexical declaration
default expects a HoistableDeclaration, ClassDeclaration or AssignmentExpression
and thus, export default const someVariable is a SynthaxError