Wednesday, April 19, 2023

What should knows as a Full stack developer

Javascript Concepts

  1. Promise
  2. Closures
  3. Anonymous Function
  4. Function statement vs function expression
  5. High order function
  6. First class function
  7. Call back function
  8. Message queue & event loop & call stack & execution context
  9. Javascript Engine
  10. IIFE: immediate invoke function expression
  11. This & call, apply, bind
  12. Module & namespace
  13. Module pattern
  14. Asyn & Await
  15. Hoisting
  16. Call stack
  17. Scope: block scope, lexical scope and var, let, const difference
  18. setTimeout vs set Interval vs setImmediate
  19. Synchronous vs Asynchronous
  20. Prototype
  21. Recursion
  22. currying
  23. ES6 Class
  24. Map, filter & reduce
  25. oops javascript
  26. Javascript Error types
  27. ES6 features
  28. Spread operator
  29. Polyfill for bind method
  30. memoize

Promise:

Promise is an object which represents the eventual completion of Asynchronous operation and its resulting value. Either fulfilled or rejected

States:

  1. Pending
  2. Fulfilled
  3. Rejected.


const API_ENTRIES = "https://api.publicapis.org/entries"

const promise = fetch(API_ENTRIES);

console.log(promise)

promise.then((response) => response.json()).then((data) => console.log(data.count))

axios.get(API_ENTRIES).then((data) => console.log('---',data.data.count))Closures
Closures:

A closure is the combination of function bundled together with its references to its lexical environment.

A closure give you access outer function scope from an inner function.

Closure are created when the function created time.



function init () {
	var name = 'siva'
  function displayname() {
  console.log('Hi '+ name);
  }
  displayname()
}
init();

simple explanation:

Function along with its lexical scope bundled together forms a closure 


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

console.log(z)

z();

console:

ƒ y() {
console.log(a);
}
---------
7

Flow:






Understand 'a' is reference to the variable.

function x () {
var a = 7
function y() {
console.log(a);
}
a = 100; //reinitialise a value before return
return y
}
const z = x();

console.log(z)

z();

console:


ƒ y() {
console.log(a);
}
------------
100


Just deep one more function:

function z() {
let b = 100
function x() {
let a = 200
function y() {
// 'a' referenced to parent lexical scope
// 'b' referenced to parent to parent lexical scope
console.log(a, b)
}
a = 300 //reinitialise a value
y() // call y
}
x() // call x
}
z() // call z

// output forms a two closure

// 300 100







Anonymous Function:

A function without name is a anonymous function. Anonymous function does not have an own identity. Normally anonymous function we are assigned as a variable. It act as a value it known as function expression. 

let anyfn = function () {
const ab =
'A function without name is a anonymous function'
console.log(ab)
}

anyfn()


Function Expression:

A function assigned as a variable is known as function expression

let fnexp = function () {
const ab =
'A function assigned as a variable is known as function expression'
console.log(ab)
}

fnexp()

Named Function Expression:

The named function statement assigned as a variable called named function expression

let nfnexp = function xyz() {
const ab =
'A named function statement assigned as a variable is known as function expression'
console.log(ab)
}

nfnexp()

Function statement:

create a function using function keyword with function name is called a function statement.

function xyz() {
const ab =
'function keyword with function name is known as function statement'
console.log(ab)
}

xyz()

Function Declaration:

Function statement also known as function declaration


Difference b/w function statement and function expression

function statement we can call any place in the javascript file. But function expression we can call after initialised the variable

//difference b/w fn statement vs fn expression

xyz() // xyz create a memory and the function assigned to xyz
b() // Uncaught ReferenceError: Cannot access 'b' before initialised

function xyz() {
const ab = 'function statement can execute, when the function is called'
console.log(ab)
}

let b = function () {
const expression =
'javascript engine initialise b is undefined in the memory, until the execution reaches variable b'
}

b() // b already initialised - no error

Difference b/w Arguments and Parameters

The values are passing inside the function as known as arguments
The function get the values as known as parameters

let b = function (param1, param2) {
const expression = 'Function get the values as known as parameter'
console.log(expression, param1 + param2)
}

b(1, 2) // Pass the value inside the function as know as Arguments


First Class function:

the functions can be assigned to any other variable or passed as an argument or can be returned by another function.


Higher order function:

A function that receives another function as an argument or that returns a new function or both is called Higher-order function. Higher-order functions are only possible because of the First-class function.

Call back function:

The function that we pass as an argument to another function is called the callback function.


Execution Context:

Everything javascript happen inside the execution Context 

There is two component in the execution context

  1. `Memory component` is known as variable environment
  2.  `Code Component` is known as Thread of execution

Memory component: 

key: value pairs of variable and function

Code component:

Code component as known as Tread of execution is like thread in which is whole code executed one line at a time. That means Javascript is synchronous single threaded language.

Synchronous single threaded - that means that javascript can only execute one command at a time and in a specific order. It can only go to the next line once the current line has been finished executing 


Vue JS:

1. Life cycle hooks

2. Difference between computed and methods

3. Watchers and deep watchers

4. Composition API

5. Event handling

6. Vuex

7. Vuetify

8. Bootstrap vue

9. How do you pass data from parent to child and all ways (provide and inject, event bus)

10. Routing

11. Authentication

12. Internationalisation - https://www.freecodecamp.org/news/how-to-add-internationalization-to-a-vue-application-d9cfdcabb03b/

13. Unit test case

14. Slots

15. event bus

No comments:

Post a Comment