Variables Declarations

  • var - global
  • let - block scoped
  • const - maintain constant values

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

Arrow functions

Resource: https://youtu.be/NCwa_xi0Uuc?t=835

Arrow functions - short syntax for writing function expressions
"=>" is called fat arrow
No return keyword is necessary when only returning one statement

const hello = () => {return "hello"}; // with return keyword
const hello = () => "hello"; // no or 2 or more parameters, must have Parentheses
const hello = name => "Hello " + name; // no Parentheses required for 1 Parentheses
 

 

Arrow functions with Rest

const numbers = (first, ...rest) => rest;

 

functions default parameters

const multiply= (a,b=3) => a*b;
console.log(multiply(3)); // result: 9 

 

Loops: for, foreach, in

for/of loop iterateable object,array,string, maps, list, etc

const colors = ["blue","red","green","orange"];
for(let color of colors){
    console.log('color=', color); 
}
for (let [index, color] of colors.entries()) {
    // your code goes here    
}
 
// used in sharepoint
for (let [index, color] of Object.entries(colors)) {
    // your code goes here    
}
 
colors.forEach(function (color, i) {
     // your code goes here
});
 
// Loop Array
for (var i=0; i< colors.length; i++) {
    i // is the index
    colors[i] // is the item
}
// Loop Object
let object = {};
for (var prop in object) {
    prop // is the property name
    object[prop] // is the property value - the item
}
 

 

Rest operator

EXAMPLE 1

const sum = (a, b) => {
    console.log(a + b);
}

 

EXAMPLE 2

// first and second parameters will be calculated and the rest will be ignored
sum(1, 2, 3, 4, 5, 6); // result: 3 because 1+2=3

 

EXAMPLE 3

const sum = (...a) => {
    console.log(a);
}
sum(1, 2, 3, 4, 5, 6); // result: Array(6) [ 1, 2, 3, 4, 5, 6 ]

 

EXAMPLE 4

const sum = (...a) => {
    console.log(...a);
}
sum(1, 2, 3, 4, 5, 6); // result: 1 2 3 4 5 6

 

EXAMPLE 5  add all the sum of the array

const sum = (...arr) => {
    console.log(...arr);
    let total = 0;
    // loop through array
    for (let number of arr) {
        total += number;
    }
    console.log('total=', total);
}
sum(1, 2, 3, 4, 5, 6); // result: 1 2 3 4 5 6 total= 21

 

EXAMPLE 6

const sum = (a, b, ...arr) => {
    console.log(a); // result: 1
    console.log(b); // result: 2
    console.log(arr); // Array(4) [ 3, 4, 5, 6 ]
}
sum(1, 2, 3, 4, 5, 6);

 

Spread operator

concat array. is represented with thre dots ...

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1]; // arr1 is not affected
let arr4 = [...arr1, ...arr2];
let arr5 = [...arr1, ...arr2,7,8,9];
console.log('arr3=', arr3); // result: arr3 = Array(3) [ 1, 2, 3 ]
console.log('arr4=', arr4); // result: arr4 = Array(6) [ 1, 2, 3, 4, 5, 6 ]
console.log('arr5=', arr5); // result: arr5 = Array(9) [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]


 

Template literals

use backticks ``

let fullname = `My name is John ${lastname}`;

 

Array Deconstructing

extrac multiple values from data stored in objects or array

let color = ['blue', 'green', 'red', 'yellow'];
console.log(color[2]); // result: red

let [a, b, c, d] = color;
console.log('d=', d); // result: d= yellow
console.log([a, , , d]); // result: Array(4) [ "blue", <2 empty slots>, "yellow" ]


 

Objects Deconstructing

extrac multiple values from data stored in objects

EXAMPLE 1

let location = {
    state: "California",
    capital: "Sacramento",
    population: 9000000
}
console.log(location.state); // California
let {state,capital,population}=location;
console.log(state); // California
console.log(capital); //  Sacramento
console.log(population); // 9000000 

 

EXAMPLE 2

let location = {
    state: "California",
    capital: "Sacramento",
    population: 9000000
}
let{state,capital:city,population}=location;
//console.log(capital); // ERROR: Uncaught ReferenceError: capital is not defined
console.log(city); // California

 

EXAMPLE 3

let location = {
    state: "California",
    capital: "Sacramento",
    population: 9000000,
    food:{
        american: "burger",
        mexican: "tacos",
        italian: "pizza"
    }
}
let{state,capital,population,food}=location;
console.log(food); // Object { american: "burger", mexican: "tacos", italian: "pizza" }
console.log(food.mexican); // tacos

 

EXAMPLE 4

let location = {
    state: "California",
    capital: "Sacramento",
    population: 9000000,
    food:{
        american: "burger",
        mexican: "tacos",
        italian: "pizza"
    }
}
let{state,capital,population,food}=location;
let {american,mexican} = food;
console.log(american); // burger
console.log(mexican); // tacos

 

string methods CASE SENSITIVE

// String.includes() returns true if found within string
let lang = "Javascript";
console.log('lang=', lang.includes('Javascript')); // true

// String.startsWith() returns true if found within string
let lang = "Javascript";
console.log(lang.startsWith('Java') ); // true

// String.endsWith() returns true if found within string
let lang = "Javascript";
console.log(lang.endsWith('t') ); // true
console.log(lang.endsWith('T') ); // false

// String.repeat()
let lang = "php";
console.log(lang.repeat(3) ); // phpphpphp

 

ARRAY METHODS

Array.form() - split a word into an array
returns an array object from any object with a length property or any iterable object

const color = Array.from('red');
console.log('color=', color); // color =  Array(3) [ "r", "e", "d" ]

 

Array.Keys()
returns an array iterator object with the keys of an array

let colors = ['blue', 'green', 'red', 'yellow'];
const key=colors.keys();
console.log('key=', key); // Array Iterator {  }
for(let color of colors){
    console.log('color=', color);
}

 

Math Methods

 

 // Math.trunc() returns integer part
console.log('trunc ',Math.trunc(2.23)); // result: 2
console.log('trunc ',Math.trunc(-2.23)); // result: -2

// Math.sign() returns -1 ,0 or 1 based on the value of element
console.log('sign ',Math.sign(2)); // result: 1
console.log('sign ',Math.sign(0)); // result: 0
console.log('sign ',Math.sign(-2)); // result: -1

// Math.cbrt() returns cube root of an element
console.log('cbrt ',Math.cbrt(8)); // result: 2
console.log('cbrt ',Math.cbrt(125)); // result: 5

// Math.sqrt() returns square root
console.log('sqrt ',Math.sqrt(4)); // result: 2
console.log('sqrt ',Math.sqrt(81)); // result: 9

// Math.log2() returns base 2 algorithm
console.log('log2 ',Math.log2(2)); // result: 1

 

Deconstructing: inherited

Arrays:

let myScores = [100, 200, 300];
let [a, b, c] = myScores;
console.log(a, b, c); //Results 100 200 300

Objects:

let myScores = {
    a: 100,
    b: 200,
    c: 300
};
let { a, b, c } = myScores;
console.log(a, b, c); //Results 100 200 300

Spread Operator

Copy all or some parts of an array, object, or string into another array, object, or string

const arrayOne = [10, 20, 30];
const arrayTwo = [40, 50, 60];
const allArrays = [...arrayOne, ...arrayTwo];
console.log(allArrays); //10, 20, 30, 40, 50, 60
const maxNumber = Math.max(...allArrays);
console.log(maxNumber) //60

combine the spread operator with deconstructing