Javascript

Book Online

Found this which might be useful. [[1]]

Module Formats

Before I forget here are the two formats for JavaScript modules CommonJS and ES6 (EMCAScript modules)

Variables

let a = 50; // Can be changed but only valid in scope
var a = 50; // Can be changed but global
const a = 50 // Cannot be changed

Objects

You can create an object using this

const sessionId = 1;
const burke1 = sessionId
const burke2 = sessionId +1
const burke3 = sessionId +2
const burke4 = sessionId +3
const burke5 = sessionId +4

const mee = {
  burke1,
  burke2,
  burke3,
  burke4,
  burke5,
}

Will create a object with keys the same name as the values e.g.

mee.burke1 // = 1
mee.burke2 // = 2

Class Field declarations

You can declare classes like

testData = {
  { name = "Fred", age = 20 }
  { name = "Freda", age = 30 }
}

This will simplify the class state e.g. was

class App Extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            profile: testData,
        } 
    }
}

To

class App Extends React.Component {

    state = {
       profile: testData,
    }
}

Property Syntax

You can reference a property of an object via a variable. In the example below we have assigned c to myPropertyName.

const myPropertyName = 'c'

const myObject = {
  a: 5,
  b: 10,
  [myPropertyName]: 15
} 

console.log(myObject.c) // prints 15

Comparisons

The following would be true with loose comparisons

    if("20" == 20) {
       console.log("true");
    }
    else {
       console.log("false");
    }

But false with strict comparisons

    if("20" === 20) {
       console.log("true");
    }
    else {
       console.log("false");
    }

This is because the type is compared in strict comparisons

Array

Introduction

This is about immutable array because it seems this is the way with javascript.

Add Element to array in Object

Here is an example of adding an element

    // Given
    user = {
       name: "fred",
       surnname: "blogss", {
          cookies: [
             "token1",
             "token2",
             "token3"
          ]
       }
    }

    // Add the cookie to the user
    const newCookies = [...user.cookies, refreshToken];

    // Replace the cookies with the newCookies
    const newUser = { ...user, cookies: newCookies };

Remove Element using an index in an Object Array

Here is an example of removing an element from a given index

    // Given
    user = {
       name: "fred",
       surnname: "blogss", {
          cookies: [
             "token1",
             "token2",
             "token3"
          ]
       }
    }

    // We can remove the one we want with
    const tokenIndex = user.cookies.findIndex(
        (token) => token === refreshToken
    );

    const newCookies = [
      ...user.cookies.slice(0, tokenIndex),
      ...user.cookies.slice(tokenIndex + 1),
    ];

Replace an Element in an Object array

Replace a use in an array of users.

    // Given
    newUser = {
       id: 1,
       name: "fred",
       surnname: "blogss", {
          cookies: [
             "token1",
             "token2",
             "token3"
          ]
       }
    }

    this.userCollection = this.userCollection.map((user) => {
      let temp = user;
      if (temp.id === newUser.id) {
        temp = newUser;
      }
      return temp;
    });

Add

    const newArray = myArray.concat(newElement)

Filter

    const newArray = myArray.filter(
        n=> !myOtherArray.includes(n)
    }

Spread

Spreading array

const testData = {
  { name = "Fred", age = 20 }
  { name = "Freda", age = 30 }
}

Spread spreads them e.g.

    <Card {...testData[0]} />
    <Card {...testData[1]} />

Is the same as

    <Card { name="Fred"  age=20} />
    <Card { name="Freda" age=30} />

Appending to an array

    testData: [...prevState.testData, newTestData]

Map

Given we can spread elements we can also spread array e.g

    <div>
        {testData.map( element=> <Card {...element} />) }
    </div>

Rest

The rest operator will append remain attributes

const Susan = {
    firstName: "Susan",
    lastName: "Steward",
    legs: {
        leg1: "left",
        leg2: "right"
    },
    age: 14,
    hobbies: {
      hobby1: "singing",
      hobby2: "dancing"
    },
    arms: {
        arm1: "left",
        arm2: "right"
      }
    };
  
  const {age, ...rest} = Susan;

  console.log("Age:", age);
  console.log("Rest:", rest);

This outputs the following

Reduce

It can replace the filter() and find() methods and is also quite handy when doing map() and filter() methods on large amounts of data. Given

let staffs = [
  { name: "Susan", age: 14, salary: 100 },
  { name: "Daniel", age: 16, salary: 120 },
  { name: "Bruno", age: 56, salary: 400 },
  { name: "Jacob", age: 15, salary: 110 },
  { name: "Sam", age: 64, salary: 500 },
  { name: "Dave", age: 56, salary: 380 },
  { name: "Neils", age: 65, salary: 540 }
];

We can calculate the total with

const totalSalary = staffs.reduce((total, staff) => {
  total += staff.salary;
  return total;
},0)
console.log(totalSalary); // 2150

Better still add a new field

const salaryInfo = staffs.reduce(
  (total, staff) => {
    let staffTithe = staff.salary * 0.1;
    total.totalTithe += staffTithe;
    total['totalSalary'] += staff.salary;
    return total;
  },
  { totalSalary: 0, totalTithe: 0 }
);

console.log(salaryInfo); // { totalSalary: 2150 , totalTithe: 215 }

Optional Chaining

Most languages have this feature such is the dealing with nulls and undefined. Previously we had

let users = [
{
    name: "Sam",
    age: 64,
    hobby: "cooking",
    hobbies: {
      hobb1: "cooking",
      hobby2: "sleeping"
    }
  },
  { name: "Bruno", age: 56 },
  { name: "Dave", age: 56, hobby: "Football" },
  {
    name: "Jacob",
    age: 65,
    hobbies: {
      hobb1: "driving",
      hobby2: "sleeping"
    }
  }
];

And when used we get

users.forEach((user) => {
  console.log(user.hobbies.hobby2);
});

"sleeping"
error: Uncaught TypeError: user.hobbies is undefined

With optional chaining we can do

users.forEach((user) => {
  console.log(user ?.hobbies ?.hobby2);
});

functions

Simple Functions

const X = () => {
   console.log("Fred");
}

Arrow Functions

Not great for me so need to write it down.

Normal controller no function

  router.get('/customers', (req, res) => {
    console.log('this is me');
    // console.log(req.query);
    res.sendStatus(404);
  });

Let put if in a function. We need to make the function signature match the original

function iain(req, res) {
    console.log('this is me');
    console.log(req.query);
    res.sendStatus(404);
}

router.get('/customers', iain)

async now is

async function iain(req, res) {
    console.log('this is me');
    console.log(req.query);
    res.sendStatus(404);
}

router.get('/customers', iain)

Importing

Using export instead of export default means you have to use destruction to import e.g.

import {ActionTypes as types} from '../constants';

For this example constants.js file

import keyMirror from 'keyMirror';

export var ActionType = keyMirror ({
    THIS_IS_A_CONST = null
});

destructure

// const PI = Math.PI;
// const E = Math.E;
// const SQRT2 = Math.SQRT2; 

// Does the same
const {PI, E, SQRT2} = Math;

You can pass a cirucla to and the radius is automatically extracted. Precision can have a default but can also be passed.

const circle = {
    label: 'circleX',
    radius: 2,
};

const circleArea = {{radius}, {precision = 2} = {}) =>
  (PI * radius * radius).toFixed(precision);

console.log(
  circleArea(circle, {precision:5})
);

And arrays

const [first, ...restOfItems] = [10,20,30,40]

// First be 10, restOfitems is and array of 20,30,40

Template Strings

This is like c# interpolation using back ticks.

const html = `<div>${Math.random()}</div>`;

Promises and Async

Old approach to async

const fetchData = async () => {
  const resp = await fetch('https://api.github.com');
  const data = await resp.json();
  console.log(data);
};

fetchData();

New approach

const fetchData = async() => {

  const resp = await fetch('http::/api.github.com');
  const data = await resp.json();

  console.log(data);
}

fetchData();

Generators

The function * denotes a generator function. The function is executed until yield. Subsequent calls remember the value of yield and continue to the next yield

 function * myGen(i) 
 {
    while(true)
    {
       yield i = i * 10;
    }
 }

 fred = myGen(10);

 console.log(fred.next());
 console.log("Fred was ere 1");

 console.log(fred.next());
 console.log("Fred was ere 2");

 console.log(fred.next());
 console.log("Fred was ere 3");

Output would be{ value: 100, done: false }

Fred was ere 1
{ value: 1000, done: false }
Fred was ere 2
{ value: 10000, done: false }
Fred was ere 3

IFFE (Immediately Invoked Function Expression)

This I found very hard to understand so wanted to write it up.

Normal Function

This is how a standard function works in Java Script

 function sayHi() {
     alert("Hello, World!");
 }
 sayHi(); // shows "Hello, World!" as alert in browser.

• Lines 1–3 define a function named sayHi.
• On line 5 we call it with the usual “()” syntax to invoke the function.

Function Expression

We can assign a function to a variable in java script.

 var msg = "Hello, World!";
 var sayHi = function() {
     alert(msg);
 };
 
 sayHi(); // shows "Hello, World!" as alert in browser.

• Line 1 declares msg variable and assigns a string value to it.
• Lines 2–4 declare sayHi variable and assign a value to it that’s of function type.
• Line 6 calls this sayHi function.

Two Examples

Here are too examples of IFFE's

 // Variation 1
 (function() {
     alert("I am an IIFE!");
 }());
 
 // Variation 2
 (function() {
    alert("I am an IIFE, too!");
 })();

• In Variation 1, on line 4, parentheses () for invoking the function expression is contained inside the outer parentheses. The outer parentheses are needed to make a function expression out of that function.
• In Variation 2, on line 9, parentheses () for invoking the function expression is outside the wrapping parentheses for the function expression.

Private Variables

Probably needs saying for people who use older javascript but the parameters are private inside an IFFE

 (function IIFE_initGame() {
     // Private variables that no one has access to outside this IIFE
     var lives;
     var weapons;
     
     init(); 

     // Private function that no one has access to outside this IIFE
     function init() {
        lives = 5;
        weapons = 10;
     }
 }());

IFEs with a return value

We can return values like any other function with an IFFE

 var result = (function() {
     return "From IIFE";
 }());
 
 alert(result); // alerts "From IIFE"

Finally we can Pass Parameters

Not only IIFEs can return values, but IIFEs can also take arguments while they are invoked.

 (function IIFE(msg, times) {
     for (var i = 1; i <= times; i++) {
         console.log(msg);
     }
 }("Hello!", 5));

react functions and state

Normal function

function logRandom() {
    console.log(Math.random());
}

function Button() {
 const [count, setCounter] = useState(0);
 return <button onClick={logRandom}>{counter}</button>;
}

inline function

function Button() {
 const [count, setCounter] = useState(0);
 return <button onClick={

  function logRandom() {
      console.log(Math.random());
  }

 }>{counter}</button>;
}

inline arrow function definition

function Button() {

 // React useState hook
 const [count, setCounter] = useState(0);

 return <button 
   onClick={
      () = > console.log(Math.random())
   }
  >{counter}</button>;
}

Passing Props

function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment);
	return (
  	<button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

function Display(props) {
	return (
  	<div>{props.message}</div>
  );
}

function App() {
	const [counter, setCounter] = useState(0);
  const incrementCounter = (incrementValue) => setCounter(counter+incrementValue);
	return (
    <div>
      <Button onClickFunction={incrementCounter} increment={1} />
      <Button onClickFunction={incrementCounter} increment={5} />
      <Button onClickFunction={incrementCounter} increment={10} />
      <Button onClickFunction={incrementCounter} increment={100} />
      <Display message={counter}/>
    </div>  
  );
}

ReactDOM.render(
  <App />, 
  document.getElementById('mountNode'),
);

Console

This is a couple of bit did not know

Group

Outputs messages together

console.group('Group Name')
console.log('Hello 1')
console.log('Hello 1')
console.log('Hello 2')
console.groupEnd('Group Name')

Time

Outputs the time taken

for(var i = 0; i < 2000;i++) {
    console.log('Fun stuff')
}

CreateObjectURL and RevokeObjectURL

This allows you to create a local URL to be used for reference. An example would be a binary image stored in a blob.

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id = 'btnLoad'>Load</button>
    <button id = 'btnUnload'>Unload</button>

    <img src = "x" id = 'img1'>
    <img src = "x" id = 'img2'>
    <img src = "x" id = 'img3'>
    <img src = "x" id = 'img4'>

    <script>
    const btnLoad = document.getElementById("btnLoad")
    const btnUnload = document.getElementById("btnUnload")
    const img1 = document.getElementById("img1")
    const img2 = document.getElementById("img2")
    const img3 = document.getElementById("img3")
    const img4 = document.getElementById("img4")

    const imgs = []
    imgs.push(img1)
    imgs.push(img2)
    imgs.push(img3)
    imgs.push(img4)
    let objUrl = null;

    imgs.forEach(i => i.addEventListener("click", e => e.target.src = objUrl))

    btnUnload.addEventListener("click", e => URL.revokeObjectURL(objUrl))
    
    btnLoad.addEventListener("click", async e => {

        const result = await fetch("http://localhost:8080/test.png")
        const blob = await result.blob()
        objUrl = URL.createObjectURL(blob)
        alert(`object url created locally ${objUrl}`)

    })
    </script>
</body>
</html>

One Liners

Get count from Object

cart.map(item => item.quantity).reduce(previous, next) => previous + next,0) : 0}