analistacarlosh/JavaScriptNotes.md

## JavaScriptNotes.md

      
    Raw
  

              JavaScriptNotes.md
            
          
    JavaScript notes references

Base references links:


https://en.wikipedia.org/wiki/ECMAScript
https://brendaneich.com/
https://twitter.com/BrendanEich
ES6, ES7 and ES8
-- https://www.youtube.com/watch?v=nZ1DMMsyVyI&amp=&t=209s
https://es6.io/

Call stack (single thread), Apis, CallBack queue, event loop

https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=9s
ES6 - ECMAScript 2015 edition

Javascript basics

function functionName (param, param2) {
return param1 + param2;
}
const functionName = (param1, param2) {
return param1 + param2;
}
let & const

var test = true; // is access like a global escope in the app


let is a variable that has a context inside of function;


const is like a constant is a umutable;


let name = "Carlos";


Arrow functions =>

Arrow functions allow us to write shorter function syntax:
let myFunction = (a, b) => a * b;
const doSomething = (param1 , param2) => {
return ('done');
}

const add = (a, b) => {
  return a + b;
}

the same of
const add = (a, b) => a + b;

another example:
// const add = (a, b) => a + b;
const addOne = (a) => a + 1;
const addOne = a => a + 1;
const addRandom = () => 1 + 2;
Oject, properties, function

const person = {
name: 'Max',
age: 29,
greet() {
console.log(name);
}
};
person.greet();
The Spread (...) Operator

The ... operator expands an iterable (like an array) into more elements:
The For/Of Loop

for (variable of iterable) {
// code block to be executed
}
JavaScript Maps

You can create a Map by passing an Array to the new Map() constructor:
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Set

A JavaScript Set is a collection of unique values.
Each value can only occur once in a Set.
A Set can hold any value of any data type.
array of unique values
Create a Set

const letters = new Set(["a","b","c"]);
call method

with call(), an object can use a method belonging to another object.
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
const person2 = {
firstName:"Mary",
lastName: "Doe"
}
// This will return "John Doe":
person.fullName.call(person1);
Apply

The apply() method is similar to the call() method (previous chapter).
person.fullName.apply(person1, ["Oslo", "Norway"]);
Bind

With the bind() method, an object can borrow a method from another object.
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
Class

JavaScript Classes are templates for JavaScript Objects.
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Promises

const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject();  // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful / },
function(error) { / code if some error */ }
);
The Symbol Type

A JavaScript Symbol is a primitive data type just like Number, String, or Boolean.
It represents a unique "hidden" identifier that no other code can accidentally access.
Default Parameter Values

function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Function Rest Parameter

The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:
String.includes()

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true
String.startsWith()
String.endsWith()
Array.from()
Array


find - return the value of the first element that matchs the function
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
return value > 18;
}
-findIndex()
const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Math.trunc(4.7) = 4 // return the round value
Math.sign(-4) // return true if is negative
Math.cbrt(8) // 2 return the cube root of x
Math.log2(x) // returns the base 2
The isNaN() Method
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
Modules are imported in two different ways:

import { name, age } from "./person.js";
import message from "./message.js";
Array functions

const test = [1, 2, 3, 4];
test.length
test.toString()
test.at(1)
test.join(" * ") - add * in between all values
Remove add elements - pop // remove , push // addw
concat() // merge two arrays
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
// Search array methods
indexOf()
lastIndexOf()
find()
findLast()
findIndex()
findLastIndex()
// Sort
array.sort()
array.reverse()
toSorted();
toReverse();
// Iteration
https://www.w3schools.com/js/js_array_iteration.asp
// map
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
console.log('numbers2:', numbers2);
function myFunction(value, index, array) {
return value * 2;
}
// flapMap
// array.filter()
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
// reduce
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
// every The every() method checks if all array values pass a test.
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
// some
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
// Array.keys()
Spread & Rest operators;

const copiedPerson = {..person};
console.log(copiedPerson);
const copiedArray = [...hobbies];
console.log(copiedArray);
Rest

const toArray = (arg1, arg2, arg3) => {
return [arg1, arg2, arg3];
}
const toArray = (...args) => {
return args;
}
Destructing

const person = {
name: 'Max',
age: 29,
greet() {
console.log(name);
}
};
const printName = ({ name }) => {
console.log(name);
}
printName(person);
// log just the name attribute
const { name, age } = person;
// define just the name and age attribute
const hobbies = ['Sports', 'Cooking'];
const [hobby1, hobby2] = hobbies;
nullish coalescing (??)

The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
const foo = null ?? 'default string';
console.log(foo);
// Expected output: "default string"
Optional chaining (?.)

The optional chaining (?.) operator accesses an object's property or calls a function. If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error.
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah',
},
};
const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined
console.log(adventurer.someNonExistentMethod?.());
// Expected output: undefined
ES7 - ECMAScript 2016 edition

ES8 - ECMAScript 2017 edition

ES9 - ECMAScript 2018 edition

https://www.youtube.com/watch?v=m9cTaYI95Zc&list=PLZriQCloF6GDuXF8RRPd1mIl9W2QXF-sQ&index=2
https://www.youtube.com/watch?v=1Gun2lRb5Gw&list=PL37ZVnwpeshG2YXJkun_lyNTtM-Qb3MKa&index=42
https://www.youtube.com/watch?v=u1kqx6AenYw&list=PL37ZVnwpeshG2YXJkun_lyNTtM-Qb3MKa&index=20
https://www.youtube.com/watch?v=zz_o7A0HET8&list=PL37ZVnwpeshGGVeMxXxCxjQZBJq5bqM7b&index=28