Javascript Concepts
- Promise
- Closures
- Anonymous Function
- Function statement vs function expression
- High order function
- First class function
- Call back function
- Message queue & event loop & call stack & execution context
- Javascript Engine
-
IIFE: immediate invoke function expression
-
This & call, apply, bind
- Module & namespace
- Module pattern
- Asyn & Await
- Hoisting
- Call stack
-
Scope: block scope, lexical scope and var, let, const difference
-
setTimeout vs set Interval vs setImmediate
-
Synchronous vs Asynchronous
- Prototype
- Recursion
- currying
- ES6 Class
- Map, filter & reduce
- oops javascript
- Javascript Error types
- ES6 features
- Spread operator
- Polyfill for bind method
- memoize
Promise:
Promise is an object which represents the eventual completion of
Asynchronous operation and its resulting value. Either fulfilled or
rejected
States:
- Pending
- Fulfilled
- 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
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
- `Memory component` is known as variable environment
- `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
