DEV Community: Jasmeet Singh Bali

🚀 Nestjs BareBones Controllers & ReqObjects

Jasmeet Singh Bali — Sun, 02 Jan 2022 13:40:35 +0000

🧩 features

typescript(disciplined)
oops(SOLID principles)
scalable/testable/loosely coupled production grade architecture boilerplate setup

👶 steps(understanding the blueprint)

npm i -g @nestjs/cli

            # cmd line
            nest -v

            # config your nest backend
            nest new nest-basics-api

            # choices
            npm or yarn or pnpm

**app.module.ts is the root of the api**

**everything is imported inside app.module and then this is exported and bootstrapped inside main.ts to create the nest backend**

🔧 building the api

1. 📩 Controllers

**Handles incoming request from client and sends back response**

** ✏ never write the buisness logic inside the controllers**

In nest we define controllers via decorators that provide meta data about what functionality a particular code block will have

**the access decorators import @nestjs/common**

            Controllers
                    |- student.controller.ts

            # student.controller.ts
            import { Controller } from @nestjs/common

            # Controller will tell nest that this is a controller based class

            @Controller('students')
            class StudentController {

            }

**every single route inside studentController is going to start as /students**

**it can be specified with a @get() decorator that this is a get request**

            @Get()
            getStudents(){
                // return all students data
            }

**make sure to import the student.controller.ts inside the app.module.ts**

✔ running dev server first time

                npm run start:dev
                # make sure the main.ts is just under the src directory

nested routes like /students/:studentId

            @Get('/:studentId')
            getStudentById(){
                return "Get Student By Id"
            }

🐱‍🚀🐱‍🚀🐱‍🚀TIRED OF REPETATIVE CONTROLLERS SETUP🐱‍🚀🐱‍🚀🐱‍🚀

Creating controllers through nestcli 🐱‍👤

https://docs.nestjs.com/controllers

            nest g controller <controllerName> --no-spec
            # only add --no-spec flag if you dont need unit test file for this controller

best practice is to put similir prefix routes in seprate controller

                # to run tests
                npm run test:watch

2. Request Objects (extracting pieces of info from request like params)

make use @param () decorator in Nest for GET

                # student object in student ID
                @Get('/:studentId')
                getStudentById(
                    @Param () params: {studentId: string}
                ) {
                    console.log(params)
                    return 'Get Student By Id';
                }

further it can be simplified while the required params can be destructured at the time of decorator defination

            # @Param('destructuredObjectFromParams')
            @Param ('studentId') studentId: string
            console.log(studentId)

make use @body () decorator in Nest for POST

                @Post()
                createStudent(
                    @Body() body
                ) {
                    return `Create's New Student with details\n ${JSON.stringify(body)}`;
                }

use @body & @Parma together for PUT

                @Put('/:studentId')
                updateStudentById(
                    @Param('studentId') studentId: string,
                    @Body() body
                ) {
                    return `Update's\n student id: ${JSON.stringify(studentId)}\n with new data ${body}`;
                }

Further their are @Query, @Session, @Next and @ip() that can be useful refer- https://docs.nestjs.com/controllers#request-object

                @Put('/:studentId')
                updateTeacherOfStudentById(
                    @Param('teachersId') teachersId: string,
                    @Param('studentId') studentId: string,
                    @Ip() clientIP: string 
                ) {
                    return `clientIP: ${clientIP}\nUpdate's Teacher with ID: ${teachersId}\n Associated To Student With Id: ${studentId}`;
                }

📚 refferences

codeSnippet : https://github.com/JasmeetSinghBali/TNG/tree/master/nest-basics-api
⛑ https://docs.nestjs.com/
🧪 https://docs.nestjs.com/fundamentals/testing

Closures in javascript...

Jasmeet Singh Bali — Sat, 04 Sep 2021 08:25:11 +0000

Function bind together with its lexical environment/scope(its local+parent scope)

  function x(){
    var a = 7;
    function y(){
      console.log(a)
    }
    y(); 
  }
  x();

  # output
  7

  # debugger for line 
  # console.log(a) 
  Closure(x)
  a:7

returning a function inside function

  function x(){
    var a = 7;
    function y(){
      console.log(a)
    }
    return y; 
  }
  let res = x();
  console.log(res);

  # output
  F:y(){
    console.log(a);
  }

though after returning from x() x is completely vannished from call stack, still y() will remember the variables and functions associated to it in closure

# the inner function remembers the binding variables and the functions due to closure and even after the function that calls inner function gets vanished from call stack the inner fnction will remember the refferences to the outer function.

function x(){
    var a = 7;
    function y(){            
      console.log(a)     
    }
    return y; 
  }
  let res = x();
  res();

  OR

  function x(){
    var a = 7;
    return function y(){            
      console.log(a);     
    } 
  }
  let res = x();
  res();

  # output
  7

so whenever the inner function is returned within the other function then it is actually returning the closure of inner function+its lexical scope and it remembers the refferences to its parent

Some output prediction questions on closures

  function x(){
    var a = 7;
    function y(){            
      console.log(a);     
    }
    a = 100;
    return y; 
  }
  let res = x();
  res();

  # output
  100

remember the inner function on returning also returns the refference(original address) of the parent scope/lexical scope variables, and changing the value will direclty change that parent scoped variable also as shown above code

A multilevel closure

  function z(){
    var b = 900;  
    function x(){
      var a = 7;            
      function y(){
        console.log(a,b);
      }     
    y();
    }
    x();
  }
  z();

  # debugger at console.log(a,b)
  Closure (x)
  a:7
  Closure (z)
  b:900

Uses of Closures

Module Design Pattern
Currying
Functions like once
memoize
maintaining state in async world
setTimeouts
Iterators

setTimeout + Closures Interview Questions

        function x(){
          var i = 1;
          setTimeout(function(){
            console.log(i);
          },3000)
        }
        x();

        # output
        # prints 1 after 3 second from 
        # the time the x is called
        1

        function x(){
        var i = 1;
        setTimeout(function(){
          console.log(i);
        },3000);
        console.log("olaaa");
      }
      x();

      # output
      olaaa
      #after 3 seconds
      1

Remember tide,time and javascript dont wait for anyone

Tricky question problem is to print number from 1 to 5 like 1 should print after 1 second 2 should print in 2 second and so on

    function x(){
    for(var i=1;i<=5;i++){
      setTimeout(function(){
      console.log(i);
    },i * 1000);
    }
    console.log("olaaa");
  }
  x();

  # output
  olaaa
  6
  6
  6
  6
  6

the above code gives such output due to closure since the setTimeout callback is reffering to the memory space of i by the time the console.log(i) is executed the loop has already incremented to 6 and thus each time the console.log(i) now executes it prints 6.
to solve this problem we can use let instead of var, as let has block scope and each time loop runs i is a new variable altogether i.e new copy of i is made i.e different memory location is used for each changed value of i when using let
```
  function x(){
    for(let i=1; i <= 5; i++){
      setTimeout(function(){
      console.log(i);
    },i * 1000);
}
    console.log("olaaa");
}
x();

# output
olaaa
1
2
3
4
5
```

IMPORTANT Solution without using let via help of closures i.e making a function and putting the setTimeout inside of it so that each time the innerfunction is called it creates new memeory location for i

  function x(){
  for(var i=1; i <= 5; i++){
    # making a explicit closure for setTimeout
    function close(i){
      setTimeout(function(){
          console.log(i);
        },i * 1000);
    }
  # we are calling the close()  function with new copy of i  different memory location
  close(i);
  }
  console.log("olaaa");

}
x();

  # output
  olaaa
  1
  2
  3
  4
  5

You My Friend Have A Great Day!!

Block,Scope & Shadowing In javascript...

Jasmeet Singh Bali — Tue, 31 Aug 2021 08:03:02 +0000

Block?

                  # an empty block
                  {
                    //Compound statements
                  }

IMPORTANT Block combines multiple statements as a single unit so as javascript can execute multiple lines of code as multiple lines inside block act as single unit

                  # no use of block single line possible only
                  if(true) true;

                  # with use of block
                  # multiple lines can be written as a single unit where javascript expects only single statement
                  if(true){
                    const a =100; // line1
                    console.log(100); //line 2
                  }

Block Scope?

                {
                  // variables or
                  //functions that can be accessed inside this block
                  // is called BLOCK SCOPE
                }

When we run the code snippet-12, A Block scope is created where b and c are present while a is inside global scope even if it is declared inside a block

            # code snippet -12
            {
              var a = 10;
              let b = 100;
              const c = 1000;
            }
            console.log(a); // 10
            console.log(b); //  referrence error
            console.log(c); //  referrence error
            # Inside debugger

            # Block
            b: undefined
            c: undefined

            # Global
            a: undefined

that is the reason let and const are in block scope i.e seperate scope, and we can only access a in global scope while b and c in the block scope.

Shadowing in javascript

The variable declared inside the block takes preference i.e shadows the same named variable declared outside the block

              var a= 100;
              {
                var a=10;
                console.log(a);

              }

              # output
              10

In addition to shadowing the var keyword variable will modify the same name variable value declared in the global scope
var a = 100;
{
var a=10
console.log(a);
}
console.log(a)

              # output
              10
              10

Case : Let keyword

Shadowing happens in let also

However In contrast to var the let keyword declared variable do not alter the value of the same let keyword variable in the global scope

              let b = 100;
              {
                let b = 20;
                console.log(b);
              }
              console.log(b);

              # output
              20
              100

              # debugger

              # Script
              b: 100

              # Block
              b: 20

              # Global

IMPORTANT - Shadowing works the similar way for the function scope also

              const c=100;
              function x(){
                const c = 30;
                console.log(c);
              }
              x();
              console.log(c);

              # output
              30
              100

I'llegal Shadowing

              # illegal shadowing
              let a= 20;
              {
                var a =10;
              }

              # output
              SyntaxError a has already been declared

              # legal shadowing
              # case-1
              let b =20;
              {
                let b=2;
              }
              # output
              No error runs perfectly

              # case-2
              var c =20;
              {
                let c=2;
              }
              # output
              No error runs perfectly

IMPORTANT From the above code snippet the point to note is that shadowing can only happen if a particular variable do not cross the boundry for the case of illegal shadowing declaring a var a inside a block will give error as the var keyword will be in the global scope and not in the block scope

              let a= 20;
              function x(){
                var a =10;
              }

              # output
              No error perfectly runs

IMPORTANT the arrow function behaves the same as normal function when Block Scope rules & shadowing are considered.

You My Friend Have A Great Day!!

Scope Chain,Scope & Lexical Environment in javascript...

Jasmeet Singh Bali — Mon, 30 Aug 2021 06:35:21 +0000

Scope is the area where a variable or function can be accessed.

                # code -snippet - 8
                function a(){
                  console.log(b);
                }
                var b = 10;
                a();

                # output
                10

though the function a() has its own local execution context
it can still access the global scope variable b inside of it.

            # code snippet -9
            function a(){
              c();
              function c(){
                console.log(b)
              }
            }
            var b = 10
            a();

            # output
            10

So a global scope variable can be accessed by a nested function also as shown in code snippet-9

            # code snippet -10
            function a(){
              var b= 10;
              c();
              function c(){

              }
            }
            a();
            console.log(b);

            # output
            b is not Not defined

Local scoped variables cannot be accesed inside global scope however global scoped variables can be accesed within local scope anywhere even in nested functions.

Scope and lexical environment

To understand this section you need to have the understanding of Execution Context proceed accordingly.

                    # for code snippet -10
                    # Call Stack

                    |    LEC for c()                             |
                    |   Memory |  Code                           |
                    |          |                                 |
                    |          |                                 |
                    |          |                                 |
                    |          |                                 |
                    | $lexical env of c()--> lexical env of   a()                                          |
                    |----------------------------------------
                    |    LEC for a()                             |
                    |   Memory |  Code                           |
                    |  b:10    |                                 |
                    |  c:{...} |                                 |
                    | $lexical env of a() -->lexical env of GEC  |                                            |
                    |------------------------------------------- |                                            |
                    |      GEC                                   |
                    |                                            |
                    |   Memory |  Code                           |
                    |  a:{...} |                                 |
                    |          |                                 |
                    | $lexical env of GEC --->null               |
                    |------------------------------------------- |

IMPORTANT- Each Time a execution context is created a lexical environment is created this lexical environment comprise of local memory+ its parent lexical environment

Lexical means a heirarchy i.e a sequence.

              lexical env of z = local memory of z + lexical env of z's parent

IMPORTANT - For the code snippet-10 we can say that function c() is sitting in the lexical scope of a function of a() i.e c() is lexically inside a(),while a() is lexically inside global scope.
So for the LEC c() its lexical env is pointing i.e reffering to the lexical env of a(), so c() will have access to lexical env of a() also.

Scope Chain

When inside of local execution context for a nested function and we are trying to access a variable that is defined inside the global scope then first the search begins inside of the local env and memory if not found it goes to the parent lexical env and searches their and so on until it either finds that variable or reaches to lexical env as null(parent of global execution context) this process or way of accessing/finding variable or function is called Scope Chain.

Conclusion -> The Combination of lexical env. and parent references constitute for Scope Chain Mechanism which in fact is used in accessing variable and functions in different scopes throughout the javascript program.

Key Takeaways

say z is a function invocation then a execution context is created with memory and code along with this a lexical env is also created for z.
Lexical env. of z = local memory of z + lexical env. of z's parent
Scope Chain Mechanism = lexical env. + references to parent**
Scope chain mechanism is used to understand where a particular variable or function is accessible.

You My Friend Have A Great Day!!

Undefined Vs Not defined in javascript...

Jasmeet Singh Bali — Sun, 29 Aug 2021 08:51:55 +0000

Whenever we define a variable then the execution context in the first phase i.e memory allocation phase will provide a placeholder named as undefined to that variable
- Not defined is error thrown out by the JS Engine when we are trying to access any variable that has not been assigned any memory by the execution context
```
          # code snippet-4
          console.log(a); // undefined (for the memory allocation phase)
          var a = 7;

          console.log(x); // not defined
          console.log(a); // 7 (after code execution phase)
```

Important Conclusions/Takeaways

for the code snippet-4 the line console.log(a); represents hoisting in javascript that means accessing variable before they are defined, and the reason why a hoisted variable gives undefined as output is because of the execution context memory allocation phase as every javascript program on execution will create a memory even before the actual execution of the javascript code happens. If you want to understand what execution context is then refer my Execution Context Article

An Interesting thing to note is that the state of the variable changes from undefined to not undefined if we have initialized some value to it or provided some value to it in later part of the code

              # code snippet-5
              var a;
              console.log(a); //undefined
              a=10;

              if(a===undefined){
                consle.log("a is undefined");
              }
              else{
                console.log("a is not undefined");
              }

              # output:

              undefined
              // for uninitialized variable a

              a is not undefined
              // after initializing variable a as 10

You My Friend Have A Great Day!!

Execution Context ? Exploring The Core Concepts Of javascript...

Jasmeet Singh Bali — Sat, 28 Aug 2021 07:21:15 +0000

Everything in javascript happens inside of Global Execution Context(GEC).

You can visualize this execution context as a big magical box.

2 Main Components Of GEC are -

Memory also called Variable Environment

Code also called Thread Of Execution

    # code snippet-1
    var n =2;
    function square(num){
      var ans = num *num;
      return ans;
    }
    var square2 = square(n);
    var square4 = square(4);

    # after running the above code snippet
    # a global context execution is created with two components Memory and Code.

    Memory | Code
           |
           |
           |

Execution Context is created in two phases >

a) Memory Creation Phase

Allocation of memory space to all variables and functions.

      # for the code snippet-1
      # global execution context first phase

      Memory                 |  Code
      n: undefined           |
      square: {entire        |
         body of             |
         the function}       |
      square2: undefined     |
      square4: undefined     |
                             |
                             |

undefined is a placeholder for variables declared in the js code, while whole body of the function act as placeholder for functions in memory allocation.

b) Code Execution Phase

      # for the code snippet-1
      # global execution context Second phase

      Memory                 |  Code
      n: 2                   | initializes value of n and change happens in memory  
      square: {entire        |  Nothing Happens
         body of             |
         the function}       |
      square2: undefined     |   function invocation is understood a new Execution Context is created
      square4: undefined     |
                             |
                             |

When a function invocation is encountered a new execution context is created consider it like a nested context execution inside of global execution context
Same two phases i.e memory creation phase and code execution phase are followed for local/nested context execution for a function invocation

b.1) Local/nested execution context on function invocation

      # for the code snippet-1
      # global execution context second phase square2 with local execution context phase 1 memory creation

      Memory                 |  Code
      square2: undefined     |    Memory               | Code
                             |   num :undefined        |
                             |   ans: undefined        |
                             |                         |

     # global execution context second phase square2 with local execution context phase 2 Code execution

     Memory                 |  Code
     square2: returns 4     |    Memory               | Code
                            |   num :2                | initializes n to 2
                            |   ans: 4                | computation happens ans = 2*2
                            |                         |

control of the program returned back to global context execution from local context execution
Similar procedure happens for square4 function invocation

Call Stack

All the Execution Context creation,deletion and control transfer happens via Stack i.e a call stack

At the bottom of the stack is the Global Execution Context, and when function is invoked and new local execution context is created that local execution context is placed in top of stack.

              # LEC- local execution context created during function invokation
              # GEC - Global execution context created in the beginning of javascript source code.

              # Call stack managing Execution Context
              # creation for execution context it is pushed into call stack
              # deletion for execution context it is
              pop of the stack

              |             |
              |             |
              | LEC1/LEC2   |
              | GEC         |
              ---------------

LEC 1 two phases happens then control goes to GEC
Similarly then LEC2 is pushed into top of stack it complete its two phases memory creation and code execution and then give control back to GEC

Understanding Global Execution Context helps in determining why javascript behaves weird as compared to other programming languages.

You my friend have a great day!!