DEV Community: Mavis

Auth0 in React and Node

Mavis — Mon, 27 Feb 2023 04:15:45 +0000

I recently implemented Auth0 in my personal side project. If you're interested in learning how to implement it in React and Node, feel free to take a look.

xychenxy / pirate-shopping

pirate-shopping

The pirate shopping project is one of my side projects that allows me to keep adding some tech to advance my skillset.

To do list breakdown

Deploy to AWS instead of Netlify, https://www.pirate-in-melbourne.com/ [Done]
Setup github actions, to push docker images to AWS ECR [Done]
Auth0 [Done]

Tech

Front-end

React 18, vite, TypeScript, Redux, Hooks, Firebase, Auth0 Login, CSS-in-JS

Backend

Node/Express framework

Others

AWS, Docker, GitHub Action, Netlify

How to run it

Please make sure docker have already installed.

Run ./run_docker.sh dev|prod

Production

docker build . -t xychenxy/pirate-shopping docker run -it -p 5000:5000 -e "NODE_ENV=production" xychenxy/pirate-shopping

View on GitHub

OAuth 2.0 is the industry-standard protocol for authorization. OAuth 2.0 focuses on client developer simplicity while providing specific authorization flows for web applications, desktop applications, mobile phones, and living room devices. Ref from https://oauth.net/2/

Auth0 is a software product that implement the OAuth 2.0 protocol.

The flow

The graph below illustrates that the client will receive two types of tokens (access and refresh) from the Authorization Server. The access token serves to protect the client's resources, while the refresh token enables the client to obtain new access and refresh tokens.

Let's see how to implement auth0 in react and node

React side

In react codebase, install @auth0/auth0-react



<Auth0Provider
    domain={import.meta.env.VITE_AUTH0_DOMAIN}
    clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
    authorizationParams={{
        redirect_uri: window.location.origin,
        audience: import.meta.env.VITE_AUTH0_AUDIENCE,
    }}
    onRedirectCallback={onRedirectCallback}
    // scope="read:current_user"
>
    {children}
</Auth0Provider>;

You also can use getAccessTokenSilently() to get new access token, see below example.

For some protected resources requests, make sure adding Bearer token into your request



headers: {Authorization: `Bearer token`}



useEffect(() => {
    try {
        const fetchAccessToken = async () => {
            const newAccessToken = await getAccessTokenSilently({
                authorizationParams: {
                    audience: import.meta.env.VITE_AUTH0_AUDIENCE,
                    scope: "read:current_user",
                },
            });

            localStorage.setItem("token", newAccessToken);
        };
        if (isAuthenticated) {
            fetchAccessToken();
        }
    } catch (e: Error) {
        console.log("error", e.message);
    }
}, [getAccessTokenSilently, isAuthenticated]);

Node side

In node codebase, express-jwt and jwks-rsa are useful to do the jwt check with auth0:



const jwtCheck = jwt({
    secret: jwks.expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: `https://${process.env.auth0_domain}/.well-known/jwks.json`,
    }),
    audience: process.env.audience,
    issuer: `https://${process.env.auth0_domain}/`,
    algorithms: ["RS256"],
});

Sometimes, if you want to get user info, it's not a good idea to put user info in your request, we can do it in this way:



const userInfo = await axios

    .get(https://</span><span class="p">${</span><span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">auth0_domain</span><span class="p">}</span><span class="s2">/userinfo, {

        headers: {

            Authorization: req.headers.authorization,

        },

    })

    .then((response) => {

        return response.data;

    });

Summary

Auth0 is a great product that allows us to implement authentication process quickly. Why not give it a try?

React Virtual DOM and DOM Diff

Mavis — Fri, 10 Feb 2023 00:34:00 +0000

Virtual DOM works by using JS objects to simulate the nodes of the DOM. At the early stage of building React, Facebook introduced virtual DOM in consideration of factors such as improving code abstraction ability, avoiding artificial DOM operation and reducing the overall risk of code.

How it works?

The process likes that use createElement to build virtual dom, and it return a plain object that describes its tag type, props properties, children, and so on. These Plain objects form a virtual DOM tree through a tree structure.

render function converts virtual dom into real dom, and mount real dom, like document.getElementById("root").appendChild(realDom).

When the status changes, There's diff functions to compare the difference of the virtual DOM tree before and after the change. Let's have a look below two graphs. There's four different places.

The diff function returns an object, includes all different nodes information, we can call it patches.

doPatch function bases on patches objects, will patch one by one on real dom.

Code snap examples

How createElement looks like?

class Element {
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children;
    }
}

function createElement(type, props, children) {
    return new Element(type, props, children);
}

More definitions about React.createElement

createElement – React

react.dev

How virtual dom looks like?

const oldVDom = createElement(
    "ul",
    {
        class: "ul",
        style: "width: 400px; height: 400px; background-color: pink;",
    },
    [
        createElement(
            "li",
            {
                class: "li-wrap",
                "data-index": 0,
            },
            [
                createElement(
                    "p",
                    {
                        class: "text",
                    },
                    ["The first tag"]
                ),
            ]
        ),
        createElement(
            "li",
            {
                class: "li-wrap",
                "data-index": 1,
            },
            [
                createElement(
                    "p",
                    {
                        class: "text",
                    },
                    [
                        createElement(
                            "span",
                            {
                                class: "span",
                            },
                            ["The second li tag, will be removed later on."]
                        ),
                    ]
                ),
            ]
        ),
        createElement(
            "li",
            {
                class: "li-wrap",
                "data-index": 2,
            },
            ["The third tag"]
        ),
    ]
);

How real dom looks like?

How render function looks like?

function render(vDom) {
    // destructure virtual dom
    const { type, props, children } = vDom;
    // transform type
    const el = document.createElement(type);
    // transform all props
    for (let key in props) {
        // transform different attributes
        setAttrs(el, key, props[key]);
    }

    children.map((c) => {
        // recursive, if child is Element, then call render function again
        // break condition is if child is not Element
        c = c instanceof Element ? render(c) : document.createTextNode(c);
        el.appendChild(c);
    });

    return el;
}

How to mount real dom?

function renderDom(rDom, rootEl) {
    rootEl.appendChild(rDom);
}
renderDom(rDom, document.getElementById("root"));

How patches look like?

const patches = {
    0: [
        {
            type: "ATTR",
            attrs: {
                class: "ul-wrap",
            },
        },
    ],
    3: [
        {
            type: "TEXT",
            text: "Update the first tag",
        },
    ],
    6: [
        {
            type: "REMOVE",
            index: 6,
        },
    ],
    7: [
        {
            type: "REPLACE",
            newNode: newNode,
        },
    ],
};

How domDiff look like?

let patches = {};
let vnIndex = 0;

function domDiff(oldVDom, newVDom) {
    let index = 0;
    vNodeWalk(oldVDom, newVDom, index);
    return patches;
}

function vNodeWalk(oldNode, newNode, index) {
    let vnPatch = [];

    /**
     * node can be
     *  Element {type:'', props:{}, children: []}
     *  text string
     *  null
     */
    if (!newNode) {
        // item was removed
        vnPatch.push({
            type: REMOVE,
            index,
        });
    } else if (typeof oldNode === "string" && typeof oldNode === "string") {
        // text change
        if (oldNode != newNode) {
            vnPatch.push({
                type: TEXT,
                text: newNode,
            });
        }
    } else if (oldNode.type === newNode.type) {
        const attrPatch = attrsWalk(oldNode.props, newNode.props);

        if (Object.keys(attrPatch).length > 0) {
            vnPatch.push({
                type: ATTR,
                attrs: attrPatch,
            });
        }

        childrenWalk(oldNode.children, newNode.children);
    } else {
        vnPatch.push({
            type: REPLACE,
            newNode,
        });
    }

    if (vnPatch.length > 0) {
        patches[index] = vnPatch;
    }
}

function childrenWalk(oldChildren, newChildren) {
    oldChildren.map((child, index) => {
        vNodeWalk(child, newChildren[index], ++vnIndex);
    });
}

How doPatch looks like?

let finalPatches = {};
let rnIndex = 0;

function doPatch(rDom, patches) {
    finalPatches = patches;
    rNodeWalk(rDom);
}

function rNodeWalk(rNode) {
    const rnPatch = finalPatches[rnIndex++];
    const childNodes = rNode.childNodes;

    [...childNodes].map((child) => {
        rNodeWalk(child);
    });

    if (rnPatch) {
        patchAction(rNode, rnPatch);
    }
}

function patchAction(rNode, rnPatch) {
    rnPatch.map((patch) => {
        switch (patch.type) {
            case ATTR:
                for (let key in patch.attrs) {
                    const value = patch.attrs[key];
                    if (value) {
                        setAttrs(rNode, key, value);
                    } else {
                        rNode.removeAttribute(key);
                    }
                }
                break;
            case TEXT:
                rNode.textContent = patch.text;
                break;
            case REPLACE:
                const newNode =
                    patch.newNode instanceof Element
                        ? render(patch.newNode)
                        : document.createTextNode(patch.newNode);
                rNode.parentNode.replaceChild(newNode, rNode);
                break;
            case REMOVE:
                rNode.parentNode.removeChild(rNode);
                break;
            default:
                break;
        }
    });
}

Closures In JavaScript

Mavis — Wed, 08 Feb 2023 04:23:47 +0000

Definition from MDN

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Playground

const sayHi = () => {
    const name = 'Nic'
    function sayIt(){console.log(`Hi, ${name}`)}
    return sayIt
}
const sayWhat = sayHi()
sayWhat()

In above case, what happen when call sayWhat(), the result is Hi, Nic.
If a function return something which have some references to this function scope variables, then the variables will be moved to closure box instead of collecting by garbage.
As sayHi contain sayIt, and sayIt is executed when sayWhat was called. Then the variable name in the sayHi will be removed to closure box as it's used in sayIt. when sayIt is executed, it will look for the name in its scope first, if cannot find it, then go to outer closure box to search. That's how closure works.

const sayHi = () => {
    setTimeout(() => {console.log(name)}, 4000)
    const name = 'Oodie'
}
sayHi()

In above case, what happen when call sayHi(), the result is Oodie. The explanation is the same as above.

What's the benefit from closures

Memory Efficient

In below case, every time we call heavyDuty function, we need to create a memory to store bigArray, as we call it many times, so it's kind of waste our memory. You may say, we can create big array outside of heavyDuty function. But that will pollute the global scope. That's why we apply closure here.

function heavyDuty(index){
    const bigArray = new Array(10000).fill('I am a big array')
    console.log('created!')
    return bigArray[index]
}
heavyDuty(8888) // created
heavyDuty(8888) // created
heavyDuty(8888) // created

Let apply closure to above case. We only need to create big array one time. And we can use it anywhere and anytime.

function heavyDutyWithClosure(){
    const bigArray = new Array(10000).fill('silly')
    console.log('created!')
    return function(index){
            // bigArray will always refer to outside bigArray
            return bigArray[index]
        }
}
const getHeavyDuty = heavyDutyWithClosure()
getHeavyDuty(8888)() // created
getHeavyDuty(8888)()
getHeavyDuty(8888)()

Encapsulation

const makeNuclearButton = () => {
    let timeWithoutDesctruction = 0;
    const passTime = () => timeWithoutDesctruction++;
    const totalPeaceTime = () => timeWithoutDesctruction++;
    const launch = () => {
        timeWithoutDesctruction = -1;
        return "boom";
    };
    setInterval(passTime, 1000);

    return {
        launch: launch,
        totalPeaceTime: totalPeaceTime,
    };
};
const ohno = makeNuclearButton();
console.log(ohno.totalPeaceTime()); // 0
// after 10 second, execute this
console.log(ohno.totalPeaceTime()); // 10
// after 2 second, execute this
console.log(ohno.totalPeaceTime()); // 12, as setInterval is working

In above case, you can not change timeWithoutDesctruction, but can get it.
what if we don't want you to get launch function? just remove it from return object.

Exercise

Try to convert them by using closures.
Q1

let view
function initialize(){
    view = 'boom'
    console.log('view has been set!')
}
initialize() // view has been set!
initialize() // view has been set!
initialize() // view has been set!

Result

let view
function initialize(){
    let called = 0
    return function(){
        if(called > 0){
            return;
        }else{
            view = 'boom'
            console.log('view has been set!')
            called++
        }
    }

}
const startOnce = initialize() 
startOnce() // view has been set!
startOnce()
startOnce()

const array = [1,2,3,4]
for(var i=0; i<array.length; i++){
    setTimeout(function(){console.log('I am at index ' + i)}, 3000)
}
// I am at index 4
// I am at index 4
// I am at index 4
// I am at index 4, as var do not have block scope

Result

// easy way to fix them by keyword let
const array = [1,2,3,4]
for(let i=0; i<array.length; i++){
    setTimeout(function(){console.log('I am at index ' + i)}, 3000)
}
// I am at index 0
// I am at index 1
// I am at index 2
// I am at index 3

// easy way to fix them by keyword let
const array = [1,2,3,4]
for(var i=0; i<array.length; i++){
    setTimeout(function(){console.log('I am at index ' + i)}, 3000)
}
// I am at index 0
// I am at index 1
// I am at index 2
// I am at index 3

// let fix it by using IIFE
const array = [1,2,3,4]
for(var i=0; i<array.length; i++){
  (function(closureI){setTimeout(function() {console.log(closureI)})})(i)
}
// I am at index 0
// I am at index 1
// I am at index 2
// I am at index 3

Learn more about the IIFE

JavaScript Function Types

Mavis ・ Feb 6 ・ 1 min read

#javascript

Higher Order Function in JavaScript

Mavis — Wed, 08 Feb 2023 02:50:52 +0000

Higher Order Function (HOF) is a function that can take a function as an argument or a function that return another function.

Array.map is HOF, in below case, map receive an arrow function as an argument.

['cat', 'dog', 'bird'].map(animal => `Hi, ${animal}`)

Let's have a look another example

This function take num1 as an argument, then return a function function (num2) {return num1 * num2}. So it's HOF.

const multiplyBy = function (num1){
        return function (num2) {
            return num1 * num2
        }
}
const multiplyByTwo = multiplyBy(2)
const multiplyByFive = multiplyBy(5)
multiplyByTwo(5) // 10
multiplyByFive(5) // 25

Let's convert above method.

const multiplyBy = num1 => num2 =>  num1 * num2
multiplyBy(2)(5) // 10

Types in JavaScript

Mavis — Wed, 08 Feb 2023 02:00:55 +0000

Primitive types

typeof 5 // number
typeof true // boolean
typeof 'wow' // string
typeof undefined // undefined
typeof null // object
typeof Symbol('just me') // symbol since es6

Non-Primitive types

typeof {} // object
typeof [] // object
typeof function(){} // functio

Playground

Primitive is pass by value

In below case, variable a have an address refer to somewhere that memory hold value 5.
let b = a means it will copy value 5, and create a new memory for it to store, then b refer to this new memory location.

let a = 5
let b = a
console.log(a) // 5
console.log(b) // 5
b = 10
console.log(a) // 5
console.log(b) // 10

Non-Primitive is pass by reference

obj2 = obj1 means obj2 will refer to obj1 address.
so that obj1 and obj2 point to the same location where object store in memory

let obj1 = {name:'hui', password:'123'}
let obj2 = obj1
obj2.password = '456'
console.log(obj1) // 456
console.log(obj1) // 456

Call, Apply, Bind in JavaScript

Mavis — Wed, 08 Feb 2023 00:27:41 +0000

Definitions

Call method is used to change the context of the invoke function. In other words, to change the keyword this inside the function.

Apply method is similar to Call, the only different is that Apply method can receive an array as argument.

Bind method will return a new function - bind function. The keyword this will refer to the first argument.

Examples

Call

In below case, archer only have two properties, name and health. He want to use heal() method to manager him health for temporary. So he don't need to create a new heal function, he can use call method to borrow heal().

const wizard = {
    name: 'Merlin',
    health: 50,
    heal(){
        return this.health = 100
    }
}
const archer = {
    name :'Robin',
    health: 30
}
console.log('1', archer) // {name: 'Robin', health: 30}
wizard.heal.call(archer) // this in heal() point to archer
console.log('2', archer) // {name: 'Robin', health: 100}

const wizard = {
    name: 'Merlin',
    health: 50,
    heal(num1, num2){
        return this.health += num1 + num2
    }
}
const archer = {
    name :'Robin',
    health: 30
}
console.log('1', archer) // {name: 'Robin', health: 30}
wizard.heal.call(archer, 50, 30) // this in heal() point to archer
console.log('2', archer) // {name: 'Robin', health: 110}
wizard.heal.call(archer, 50, 30, 100) // only take the first two


wizard.heal.call(archer, 50) // if only put 1 parameter
console.log('2', archer) // {name: 'Robin', health: NaN}

Apply

Similar to Call, the only different is that receive an array as argument

const wizard = {
    name: 'Merlin',
    health: 50,
    heal(num1, num2){
        return this.health += num1 + num2
    }
}
const archer = {
    name :'Robin',
    health: 30
}
console.log('1', archer) // {name: 'Robin', health: 30}
wizard.heal.apply(archer, [50, 30]) // this in heal() point to archer
console.log('2', archer) // {name: 'Robin', health: 110}

wizard.heal.apply(archer, 50) // type error, only accept array
wizard.heal.apply(archer, [50,50,50]) // only pick the first two
wizard.heal.apply(archer, [50]) // NaN, at least 2 parameter

Bind

fun fact, archer wants to borrow a heal() from wizard, but he want to use it later on. So he can use bind method, as bind method will return a new function, he can use it whenever he wants.

const wizard = {
    name: 'Merlin',
    health: 50,
    heal(num1, num2){
        return this.health += num1 + num2
    }
}
const archer = {
    name :'Robin',
    health: 30
}
console.log('1', archer) // {name: 'Robin', health: 30}
// bind will return a function
const healArcher = wizard.heal.bind(archer, 50, 30) 
healArcher() // {name: 'Robin', health: 110}

Summary

call and apply are useful for borrowing methods from an object

bind is useful for call function later on

this always refer to who want to borrow or bind other function

Function scope vs Block scope

Mavis — Tue, 07 Feb 2023 11:33:24 +0000

Function Scope

When declare a variable inside a function, it only can be used inside this function, and can not be used outside this function.

Block Scope

When declare a variable inside a {}, it can not be used outside the block.
keyword let and const was introduced since ES6, and provide Block Scope fro JavaScript.

Example

if ( 5 > 4 ) {
    var secrete = '123'
}
console.log(secrete) // 123, as js do not have block scope

function a () {
    var aSecrete = '123'
}
console.log(aSecrete) // Reference error

function loop(){
    for(var i = 0; i < 5; i++){
        console.log(i)
    }
    console.log('final', i) // i got hoisted
}
loop() // 0, 1, 2, 3, 4, 5

function loop(){
    for(let i = 0; i < 5; i++){
        console.log(i)
    }
    console.log('final', i)
}
loop() // Reference Error, i is not defined

this keyword quiz

Mavis — Tue, 07 Feb 2023 05:20:38 +0000

In most cases, the value of this
is determined by how a function is called (runtime binding).

Let's have a look some examples

Q1

function a(){
  function b(){
    console.log(this) // window
    function c(){
      "use strict";
      console.log(this) // undefined
    }
    c()
  }
  b()
}
a()

In a function with strict mode, this is undefined.

Q2

var name = 'A'

function special(){
  console.log(this.name)
}

var girl = {
  name:'B',
  detail: function(){
    console.log(this.name)
  },
  woman: {
    name: 'C',
    detail: function(){
      console.log(this.name)
    }
  },
  special: special
}
girl.detail() // b
girl.woman.detail() // c
girl.special() // b

girl.detail(), in detail function, this point to girl object
girl.woman.detail(), in detail function, this point to woman object
girl.special(), in special function, this point to girl.

Q3

var name = 'red'

function a(){
  var name = 'white'
  console.log(this.name)
}
function d(i){
  return i()
}
var b = {
  name:'yellow',
  detail: function(){
    console.log(this.name)
  },
  bibi: function(){
    console.log(this.name + 'bibi is called.')
    return function(){
      console.log(this.name)
    }
  }
}
b.detail() // yellow, b call detail function, so 
var c = b.detail
c() // red

b.a = a
a() // red
b.a() // yellow

var e = b.bibi() // yellow bibi is called.
d(b.detail) // red
e() // red

b.detail(), b call detail function, so in detail function scope, this points to object b.
var c = b.detail, assign detail function to variable c
c(), in this function, this point to window
var e = b.bibi(), b.bibi() means execute bibi function, and return a new function to var e.

Q4

const obj = {
    name: 'xiu',
    sing() {
        return 'lalalal ' + this.name
    },
    singAgain(){
        return this.sing() + this.name
    }
}
obj.sing() // lalalal xiu

Q5

function importantPerson(){console.log(this.name)}
const name = 'sunny'
const obj1 = {
    name:'xiu',
    importantPerson:importantPerson
}
const obj2 = {
    name:'gou',
    importantPerson:importantPerson
}
importantPerson() //sunny
obj1.importantPerson() // xiu
obj2.importantPerson() // gou

Q6

const a = function(){
    console.log(this) // window
    const b = function(){
        console.log(this) // window
        const c = {
            hi: function(){
                console.log(this) 
            }
        }
        c.hi() // object c, as c call hi function
    }
    b()
}
a()

Q7

const obj = {
    name: 'xiu',
    sing() {
           console.log('a', this) // obj
           var anotherFunc = function(){
              console.log('b', this) // window
           }
       anotherFunc()
        }
}
obj.sing()

Q8

const obj = {
    name: 'xiu',
    sing() {
           console.log('a', this) // obj
           var anotherFunc = () => {
              console.log('b', this) // obj
           }
       anotherFunc()
        }
}
obj.sing()

in arrow function, they don't have this keyword, they inherit it from their parent.

Q9

const obj = {
    name: 'xiu',
    hobbies: ['coding','sleeping'],
    show() {
        this.hobbies.map((hobby) => {
           console.log(`${this.name} loves ${hobby}`)})
    },
    showAgain() {
         this.hobbies.map(function(hobby){
           console.log(`${this.name} loves ${hobby}`)
    })}
}
obj.show()
obj.showAgain()

obj.show(), as it's arrow function in show(), so this point to obj
obj.showAgain(), this point to window,

Q10

let f = function(){
    console.log('1',this) \\ window
    const say = () => {
        console.log('2',this)
    }
    say() \\ window
}
f()

Q11

const a = {
  say(){
    console.log('a',this)
    const b = function(){
      console.log('b', this)
      const f = () => {
        console.log('f',this)
      }
      f()
    }
    b()
    const d = () => {
      console.log('d', this)
    }
    d()
  },
}
a.say()

// a: a
// b: window
// f: window
// d: a

Hoisting quiz

Mavis — Mon, 06 Feb 2023 12:42:09 +0000

There are some fun hoisting quiz here, and I will keep adding more. Not only focusing the result, but also trying to understand why. Here's article may help you understand Execution Context and Hoisting.

Execution Context in JavaScript

Mavis ・ Feb 7 ・ 3 min read

#javascript

console.log('1')
console.log(teddy)
var teddy = 'bear'
function sing() {console.log('ohhh la la')}

======= result =======
1
undefined

console.log('1')
console.log(teddy)
console.log(sing())
var teddy = 'bear'
function sing() {console.log('ohhh la la')}

======= result =======
1
undefined
ohhh la la // as function declaration are hoisted
undefined // ignore, as there's 2 console.log()

console.log('1')
console.log(teddy)
console.log(sing())
var teddy = 'bear'
(function sing() {console.log('ohhh la la')})

======= result =======
1
undefined
ReferenceError: sing is not defined // as it see bracket then fn, JavaScript engine doesn't hoist it.

console.log('1')
console.log(teddy)
let teddy = 'bear' // change it to let or const

======= result =======
1
ReferenceError: teddy is not defined // keyword let | const do not hoist

console.log(sing())
console.log(sing2)

// function expression
var sing2 = function() {console.log('uhhh la la')}

// function declaration
function sing() {console.log('ohhh la la')}

console.log(sing2())

======= result =======
ohhh la la
undefined //as it see var, so sing2 is undefined
uhhh la la

console.log(sing())
console.log(sing2())

// function expression
var sing2 = function() {console.log('uhhh la la')}

// function declaration
function sing() {console.log('ohhh la la')}

console.log(sing2())

======= result =======
ohhh la la
undefined //as it see var, so sing2 is undefined
TypeError: sing2 is not a function // sing2 is undefined

var one = 1 // hoisting it to undefined
var one = 2 // ignore it, as one have already hoisted
console.log(one)

======= result =======
2

console.log(a) 
console.log(a())
a()
function a() {console.log('hi')}

======= result =======
ƒ a() {console.log('hi')}
hi
undefined
hi

a()
function a() {console.log('hi')}
a()
function a() {console.log('bye')}
a()

======= result =======
bye // same as var, rewrite content
bye
bye

Q10

var favouriteFood = 'grapes'

var foodThoughts = function () {
    console.log('Original favourite food: ' + favouriteFood)
    var favouriteFood = 'sushi'
    console.log("new favourite food: " + favouriteFood)
}

foodThoughts()

======= result =======
Original favourite food: undefined
Original favourite food: sushi

Explain

creating execution context hoisting favouriteFood and foodThoughts, all of them are undefined
execution phrase, favouriteFood is grapes, foodThoughts is equal to a function, then creating a new execution context for it.

New execution context repeat above in foodThoughts

creating execution context hoisting favouriteFood is undefined
execution phrase first is undefined, second is sushi

Q11

var favouriteFood = 'grapes'
var foodThoughts = function () {
    console.log('Original favourite food: ' + favouriteFood)
    console.log("new favourite food: " + favouriteFood)
}

foodThoughts()

======= result =======
Original favourite food: grapes
Original favourite food: grapes

JavaScript Function Types

Mavis — Mon, 06 Feb 2023 12:06:23 +0000

Function declaration
Function expression
Arrow function
Immediately Invoked Function Expression (IIFE)

Function declaration

It starts with keyword function. () is the grouping operator.

function name(){}

Function expression

It's used in statements, like assigning a function to a variable.

const great = function () {...}
great()

Arrow function

It's introduced since ES6, and used to shorten the code

const great = () => {}

Immediately Invoked Function Expression (IIFE)

An IIEF is a JavaScript function that runs as soon as it is defined.
IIFE contains two major parts

The first is the anonymous functions with lexical scope enclosed within the Grouping Operator. This can avoid polluting the global scope

The second part creates the immediately invoked function expression (), the JavaScript engine will directly interpret the function

(function(){})()
(()=>{})()