LEARN ENGLISH

Javascript logical Interview

2024-01-22T09:14:00.000-08:00

----------------------------------------------

var a = 10;

let b = 20;

console.log(this.a) => 10

console.log(this.b) => undefined

variable defined using var has global scope so we can access it globally

variable defined using let has block scope so we can not get it

----------------------------------------------

(function(){

setTimeout(()=>console.log(1),2000)

console.log(2)

setTimeout(()=>console.log(3),0)

console.log(4)

})()

output:- 2 then 4 then 3 then 1

----------------------------------------------

setImmediate(()=>{

console.log("first")

})

Process.nextTick(()=>{

console.log("second")

})

console.log("Third")

=> output:- Third, second, first

----------------------------------------------

for(var i=0; i<10; i++){

setTimeout((function(i){

console.log(i)

})(i),10)

}

output:- 0,1,2,3,4,5,6,7,8,9

----------------------------------------------

for(var i=0; i<10; i++){

((x)=>{

setTimeout(function(){

console.log(x)

}x*1000)

})(i)

}

output:- 0,1,2,3,4,5,6,7,8,9

----------------------------------------------

(function(){

var x = 43

(function random()){

x++

console.log(x)

x = 21

})()

output:- NAN => as in function x is undefined then add to undefined = NAN

----------------------------------------------

Promise.resolve(1)

.then((x)=>x+1) //2

.then((x)=>{throw new Error("My Error")})

.catch(()=>1) //1

.then((x)=>x+1) //2

.then((x)=>console.log(x)) //2

.catch(console.error)

output:- 2

----------------------------------------------

const a = {'key':'value'}

const obj1 = a

a.key = value2

console.log(a) => {key:value2}

console.log(obj1) =>{key:value2}

----------------------------------------------

console.log(false == '0') ==> true => 0 is falsy value

console.log(false === '0') ==> false => it will also check type which is bool and string

----------------------------------------------

var a = 10

console.log(a)

function Task(){

var a = 20

console.log(a)

if(true){

a = 30

console.log(a)

}

console.log(a)

}

task()

output:- 10, 20, 30, 30, 10

let a = 10

console.log(a)

function Task(){

let a = 20

console.log(a)

if(true){

a = 30

console.log(a)

}

console.log(a)

}

task()

output:- 10, 20, 30, 20, 10

----------------------------------------------

=> will below fun work ?

goodMor("riya")

console.log(goodMor) // undefined

var goodMor = function (name){

console.log(name)

}

=> no => goodMor is not function

---------------

goodMor("riya")

console.log(goodMor) // error

let goodMor = function (name){

console.log(name)

}

=> no => goodMor can not access before initializataion

----------------------------------------------

function printThis(){

console.log(this)

}

printThis() // global obj is getting printed

let obj ={a:10,b:20,c:printThis}

obj.c()

----------------------------------------------

get output without let

for(var i=1; i<=2; i++){

setTimeout(function(){alert(i)},100)

}

output:-

for(var i=1; i<=2; i++){

print(i)

}

function print(i){

setTimeout(function(){

console.log(i)

},100)

}

----------------------------------------------

get the second last element for the array, array length keep changing

let arr = ["a","b","c","e"]

output:- arr[arr.length -2]

----------------------------------------------

console.log(3+'3') => 33

console.log(3-'3') => 0

ReactJS Interview Question and Answers

2024-01-22T09:13:00.000-08:00

1) what is react?

- open source javascript library

- used for building use interfaces

- simplifies creation of SPA using reusable component

2) what are the key feature of React ?

- virtual DOM

- component based architechture

- reusability and composition

- JSX

- declarative syntax

- Community system

- react hooks

3) What is DOM ? difference between HTML and DOM ?

- DOM - document object model

- represent web page as tree like structure

- allows js to dynamically access and manipulate content of web page

HTML - hyper text markup language

- it is just language

- html will be represent as DOM tree in memory

4) what is virtual DOM ? difference between dom and virtual dom ?

- Dom is real without it any web app can not interact or handle js

- virtual dom is only specific to react

- in real dom when there is small change it will re render whole layout which is time consuming

- in react app, react library will make exact copy of real dom and show it - is virtual dom

- virtual dom only render the changes and whole page

- in background react library keep comparing the changes in virtual and real dom and only the changes will be updated in real dom

- this update process is done by react library, is called reconcilation

5) what are react components ? what are the main element of it?

- building block of react app

- reusable independed piece of UI which makes combined UI

- class or function based

6) what is single page application?

- web app which has only single web page.

- content is dynamically updated without refreshing or loading new page

7) what are the avantage of react?

- we can built SPA

- open source (free to use)

- lightweight and very fast (virtual dom)

- supported by large Community

8) disadvantage of react ?

- for static web apps it is not choice

9) what is role of JSX in react?

- javascript xml

- use to write HTML like code

- jsx is converted to javascript using tool like babel

- it is easy to write and read code

- use to write declarative syntax in react

10) what is difference between declarative and imperative syntax?

- declarative

- focus on desired output without specifying step by step process

- jsx is used to write declarative syntax

function App(){

return <h1>Hello</h1>

}

- imperative

- involve step by step process for same output

- javascript has imperative syntax

function App(){

const element =document.createElement("h1")

element.textContent = "Hello"

document.body.appendChild(element)

}

11) what are the main file in react ?

- index.html - single page for react app

- App.js - main container or root component

- index.js - entry point for js, render main react component(App) into root dom element

12) difference between react and angular?

13) how react provides reusability and composition ?

- reusability - we can re-use component in app - header has one small component

- composition - creating new component by combining small components - App.js has many component

14) what are state, stateless, stateful, and state management ?

15) what are props ?

- way to pass data from parent to child component

16) what is NPM ? what is role of node module ?

- used to manage dependency of project

- install, manage and share package of javascript

17) what is role of public folder ?

- contain static asset that are served directly to user browser

- image, font etc

18) what are role of src folder?

- src folder is use to store all the source code of app

19) what is role of index.html ?

- index.html is single page of react which render when any user request

19) what is role of reactDom in react ?

- react dom is javascript library that render component to DOM or browser

- index.js is js file that replace root element of index.html with newly render component

20) what is function and return in App.js ?

- it takes props as arg and returns jsx

- return is use to return element from function

21) what is babel ?

- used to transpile jsx to js

22) what is fragment ?

- group multiple element without adding additional Dom element

23) what is spread operator ?

- used to spread an array or object

24) difference between compiler and transpiler ?

- Transpiler -Babel - tool to convert code from high level language(JSX) to another high level language(javascript)

- Compiler -high level language to low level language

25) what is function and class component ?

- functional component

- it is javascript function

- stateless but with help of hooks we can manage state

- lifecycle methods - no

- more readable

- this keyword - no

- render method -no

- clas component - defined using javascript classes

- stateful component using lifecycle methods

- render method is responsible for returning jsx

- lifecycle methods - yes

- less readable

- this keyword - yes

- render method - yes

26) what is prop drilling?

- process of passing props from high-level component to a deeply nested component through multiple layers of component

- solution of it is redux and context

27) how to pass data between class component ?

- this.props is used in child component to access data from parent component

28) role of this keyword?

- refer to instance of class

29) what is routing and router ?

- routing - allows to create SPA with navigation without need of refresh

- react router - library for handling routing

- way to define different routes and their corresponding component

- enable navigation and rendering of different component based on URL

30) what are hooks ?

- react hooks are react function provided by react

- allow function component to use state and lifecycle feature

- way to provide stateful logic - managing component state, performing side effect, using life cycle methods

31) what is useState() hook?

- enable function component to mange state

- accept initial state as param and return array

- the first ele is current state

- the second ele is function to update state

32) what is useEffect() hook?

- used to perform side effect in function component - data fetching, subscription or ops which need to be performd after initial render

- what is side effect - when page initialy render but data from api take time to render is call side effect

33) what is useContext hook?

- to access within components provied by context provider

34) what are controlled component ?

- component whose form element can be controlled by state

35) what are difference bet controlled and uncontrolled component?

- controlled

- value are controlled by react state

- event handler update react state

- re-render on state change

- recommended and statndard practice of form handling

- uncontrolled

- value are not controlled by react state

- no state update

- useRef() used to change value

- less re-rendering

36) what is code splitting?

- technique to split javascript bundle into smaller chunk which are loaded on demand

37) how to implement code splitting in react ?

- use react.lazy method to lazily import component - component is loaded only when needed

- wrap component with suspense method to handle loading

- suspense component is use to display a fallback ui while lazily loaded component is being fetch

38) what is higher order component ?

- component which takes another component as argument and adds extra feature to it

39) What is importance of key in react?

- help react to identify which item have changed, added or deleted in list

40) what is react context?

- way to share data between component without passing through every level of component

- it creates context provider to provide data and consumer to consume data.

41) what is render()?

- it returns JSX

- it is called whenever updates to state or props

42) Use of setState()?

- use to update state of component

- when called react re-render component with updated state

- any child component also re-render

43) what is useRef()?

- creates a ref object that can hold value across render

44) what is useMemo?

- memoize value to prevent un-necessary re-computation

- react will reuse the previous result untill a and b changes

const result = useMemo(()=>{return a + b},[a, b])

45) what is useCallback()?

- memoize function to prevent un-necessary re-creation

- useful when passing callback as dependency to child component

const handleClick = useCallback(()=>{},[])

46) what is difference between state and props ?

- props are read-only (immutable) - State is mutable

- props to pass data from one to other component - state holds information within component

- Props can be accessed by the child component - State cannot be accessed by child component

- Stateless component can have Props. - Stateless components cannot have State

- Props are external and controlled by - The State is internal and controlled by

whatever renders the component. the React Component itself.

47) what is webpack ?

- Webpack is module bundler for JavaScript.

- It takes various assets, such as JavaScript files, CSS stylesheets, and images, and bundles them together

48) what is in public folder ?

- used to store static assets

- %PUBLIC_URL% to access public asset

49) what is pws ?

50) what is robots.txt ?

51) what is node module ?

52)

53) what is jslint and eslint ?

54) what are the testing framework use in js and nodejs ?

55) what is difference between map and filter ?

- Map - Used when you want to transform each element in an array

- Filter - Used when you want to select only certain elements that meet a specific condition.

56) what is prototype and how it works ?

57) what is difference between call, apply and bind ?

58) what is difference between spread operator and rest operator ?

59) what is difference between element and component ?

60) what is pure component ?

61) what is map, filter, reduce?

62) what is arrow function?

63) what is difference between observables and promises?

64) Mention Higher order component's practical uses

65) what is difference in react and next routing?

66) what is state management?

67) what is ref in react?

- ref is reference to a DOM element or an instance of a component.

- to access and modify DOM elements without using props, states

68) what is forwardref in react?

69) what is interceptor?

70) what is react fiber?

71) what are react lifecycle methods?

72)

73) what is lazy loading?

- technique of delaying the loading of certain components or assets until they are actually needed

- improve the initial loading time of a web application by loading only the essential resources required for the initial view

- React.lazy() function allows to load a component lazily as a separate chunk when it's actually rendered

74) how to manage nested routes in terms of role based routing?

Interview question

2023-12-27T07:36:00.000-08:00

ReactJs

React - open source JavaScript library

JSX - javascript syntex extention that allows to write html-like code in react

Virtual DOM - it is lightweight copy of actual dom in memory

- when changes in state or props - react creates new Virtual Dom - compares it with previous one - updates only necessary part of actual dom

React component - building block of react app - reusable and independed piece of UI which makes combined UI

- class or function based

Keys - help react to identify which item have changed, added or deleted in list

React hook - function that allow developer to use state and other feature in function component

- way to provide stateful logic - managing component state, performing side effect, using life cycle methods

React Context - way to share data betwn component without passing through every level of component

- it create context provider to provide data and consumer to consume data.

diff function and class component

- function - simple and easy to read - function that accept props as argument and return JSX

- Class - javascript class that extends React.component class - it has feature like life cycle method and state

--------------------------------------------------------

ReactJs

--------------------------------------------------------

React - open source JavaScript library

JSX - javascript syntex extention that allows to write html-like code in react

Virtual DOM - it is lightweight copy of actual dom in memory

- when changes in state or props - react creates new Virtual Dom - compares it with previous one - updates only necessary part of actual dom

React component - building block of react app - reusable and independed piece of UI which makes combined UI

- class or function based

Keys - help react to identify which item have changed, added or deleted in list

React hook - function that allow developer to use state and other feature in function component

- way to provide stateful logic - managing component state, performing side effect, using life cycle methods

React Context - way to share data betwn component without passing through every level of component

- it create context provider to provide data and consumer to consume data.

diff function and class component

- function - simple and easy to read - function that accept props as argument and return JSX

- Class - javascript class that extends React.component class - it has feature like life cycle method and state

HOC - a function that takes a component and returns new component

// A simple HOC that logs the component's props

const withLogger = (WrappedComponent) => {

return class WithLogger extends React.Component {

componentDidMount() {

console.log('Props:', this.props);

}

render() {

return <WrappedComponent {...this.props} />;

}

};

// Usage of the HOC

const EnhancedComponent = withLogger(MyComponent);

render() - it returns JSX - it is called whenever updates to state or props

setState() - use to update state of component - when called react re-render component with updated state - any child component also re-render

prop driling - process of passing props from high-level component to a deeply nested component - context and redux

React Router - way to define different routes and their corresponding component

- allow to render different component based on current URL

- browserRouter, Route and Link to handle routing

React Fragment - group multiple element togather without addition DOM element

--------------------------------------------------------

Hooks in react js

--------------------------------------------------------

useState - manage state in function compo

useEffect - perform side effect in function comp (e.g data fetching, subscription, dom manipulation ) after rendering

useContext - access value of context provider within function comp

useReducer -

useRef - creates a ref object that can hold value across render

useMemo - memoize value to prevent un-necessary re-computation

useCallback - memoize function to prevent un-necessary re-creation

useMemo - use to memoize result of function or computation - prevent un-necessary execution of function

const result = useMemo(()=>{return a + b},[a, b]) => react will reuse the previous result untill a and b changes

useCallback - to memoize callback fun, preventing un -necessary re-creation of function render

- useful when passing callback as dependency to child component

const handleClick = useCallback(()=>{},[])

--------------------------------------------------------

NextJs

--------------------------------------------------------

SSR and SSG - pre-render pages at build time (ssg) or request time (ssr)

SSR - process of rendering react component on server and sending generated HTML to client

- improve initial page load time

- improve search engine optimization

- to implement SSR in nodejs with react, we can use next

getStaticProps - function to fetch data at build time and pass it as props to page compo - returns props

- used in static site generation(SSG) to pre-render pages with fetched data

=> Example:

=> The news data is returned as props, which can be accessed in the News component.

=> During the build process, Next.js will call the getStaticProps function and wait for the asynchronous operation to complete.

=> The fetched data is stored in the news variable.

=> The props object is returned with the news data, which will be passed to the News component as props

=> The revalidate property is set to 1, which means that the page will be re-generated every 1 second (during development) or when a new request is made (in production). This is useful for dynamic data updates

=> By using getStaticProps, you ensure that the news data is fetched at build time and passed as props to the News component.

=> This allows Next.js to generate a static version of the page with the fetched data, providing better performance and SEO benefits

export default function News({ news }) {

return (

)}

export async function getStaticProps(){

let news = {}

return {

props:{news:news}

}

getServerSideProps:-

--------------------

=> allows to fetch data on every request made to page

=> used in SSR to fetch data dynamically at run time

Here's an explanation of how the getServerSideProps method works:

=> When a request is made to a page that includes the getServerSideProps method, Next.js calls this function on the server.

=> Inside the getServerSideProps function, you can fetch data from an API, a database, or any other data source using asynchronous operations like fetch.

=> The fetched data is typically stored in variables in data variable.

=> You return an object in props key. This data will be passed as props to the page component.

=> The page component, along with the fetched data as props, is then rendered on the server and sent as a response to the client.

=> The getServerSideProps method is useful when you have dynamic data that needs to be fetched and rendered on each request, such as personalized user data, real-time data, or data that frequently changes. It enables server-side rendering for the specific page, allowing you to fetch and render data dynamically on the server.

export default function MyPage({ data }) {

// Use the fetched data in your page component

return (

<div>

<h1>{data.title}</h1>

<p>{data.description}</p>

</div>

);

}

export async function getServerSideProps() {

// Fetch data from an API or database

const res = await fetch('https://api.example.com/data');

const data = await res.json();

// Return the data as props

return {

props: {

data,

};

}

getStaticPaths function

- use for dynamic route generation in nextjs

Diff getServerSideProps and useEffect

- both used in next.js for data fetching and handling side effect

getServerSideProps: -

- executed on server-side during every request

- fetch data before rendering and provide props to page

useEffect:-

- executed on client side after component has render

- it run after inital render

--------------------------------------------------------

NodeJS

--------------------------------------------------------

- single threaded

- event loop and non-blocking i/o to handle multiple request

event loop

- it checks for new event in queue and execute one by one in loop to handle multiple req

non-blocking

- nodejs initate operation and continue execute without waiting for other i/o when i/o operation finish callback returns result

Diff single thread multi thread

- referes to handling consurrent task and executing task

single thread

- only one thread of execution

- program sequentially executes in single flow

- task or operation is processed in sequential manner

- program can work on single taks at a time

- if task takes long time, it can block sub sequent task

- leading delay in overall execution

multi thread

- multiple thread of execution

- each thread represent separate flow in program

- multiple task performed simultaneously using multiple thread

- each thread can perform specific task

- allowing parallel execution of task

- threads can communicate with each other and share data

os module - provides info related to operating sys

querystring - provide method to parse and format url query string

crypto - provide crypto graphic functionality

- generating hash, encrypting, decrypting data, working with signature

File upload in nodejs

const multer = require("multer")

const storage = multer.diskStorage({

destination:(req,file,cb)=>{

cb(null,'uploads/')

}

filename:(req,file,cb)=>{

cb(null,Date.now())

}

})

const upload = multer({storage:storage})

--------------------------------------------------------

path module

--------------------------------------------------------

- to join path segments

- to resolve relative paths

- to extract file extentions

path.resolve() - returns absolute path of project - C:\Users\junior node\Desktop\pramay

path.resolve("public","image","logo.png") - returns absolute path of file or directory - C:\Users\junior node\Desktop\pramay\public\images\logo.png

path.resolve(__dirname) - returns abs path of current dir

path.resolve(__filename) - returns abs path of current file

path.join("/usr", "local", "bin", "app.js") - \usr\local\bin\app.js

path.dirname("C:\\Users\\junior node\\Desktop\\pramay\\public\\images\\logo.png) - C:\Users\junior node\Desktop\pramay\public\images

path.extname("C:\\Users\\junior node\\Desktop\\pramay\\public\\images\\logo.png") - .png

path.normalize("C:\\Users\\junior node\\Desktop\\pramay\\..\\images\\logo.png") - C:\Users\junior node\Desktop\images\logo.png - it resolves . and ..

path.isAbsolute("file.txt") - false - returns boolean for abs path

path.relative("C:\\Users\\junior node\\Desktop\\pramay\\images\\logo.png", "C:\\Users\\junior node\\Desktop") - ..\..\.. - returns relative path to given arg

path.sep => returns / for win and \ for linux

--------------------------------------------------------

socket

--------------------------------------------------------

web sockets - communication protocol, enables real time, bi-directional data transfer bet client and server

socket.emit(eventName, data) => send event to specific connected client/socket - one-to-one communication

io.emit - send event to all connected client/sockets - one-to-many

socket.join(room)

socket.leave(room)

=> socket.emit() => to emit data to only current connected socket

=> io.emit() => to emit data to all connected socket

=> socket.broadcast.emit() => to emit data to all other socket except current connected

=> io.to(room).emit(eventName,data) => to emit data to only given room

--------------------------------------------------------

fs module

--------------------------------------------------------

fs - to create, delete and modify files, as well as to read content async or sync way

form submission - it can be handle by middleware like body-parser to parse multipart/formdata

env - it is use to store configuration setting for nodejs

- to access env use process.env object

--------------------------------------------------------

Http

--------------------------------------------------------

- to create http and https server

- making http request

--------------------------------------------------------

Stream in nodejs

--------------------------------------------------------

- to handle data streaming

- enable large amount of data processing by working with chunk instead of entire data

--------------------------------------------------------

hook in nodejs

--------------------------------------------------------

hook - mechanisam to modify operation or event in app

- to register or execute custom code when certain event occurs

- middleware act as hook - it modify req and res

app.use((req,res,next)=>{

next() - pass control to next middleware

})

- pre and post hook in mongoose - mongoose provides hook to modify document before and after they are executed

userSchema.pre('save', function(next) {

console.log('Saving user:', this.name);

next();

});

- webhook

- user defined http callback

- allow external service to be notified when certain event occur in app

- hooks to execute custom code when receving notification

- triggered by new register, payment confirmation ,data updates

- GitHub Webhooks

- Payment Gateway Webhooks

--------------------------------------------------------

Event in nodejs

--------------------------------------------------------

Event hook -

- you can define and emit custom events using EventEmitter

- other part of app can listen to this event and execute specific action when they are trigger

const EventEmitter = require('events');

class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();

// Define a hook (custom event)

myEmitter.on('customEvent', (data) => {

console.log('Custom event triggered:', data);

});

// Trigger the hook (emit the custom event)

myEmitter.emit('customEvent', { message: 'Hello, World!' });

--------------------------------------------------------

MongoDb

--------------------------------------------------------

- noSql database

- document oriented database

- it stores data in JSON format

- schemaless, no need to define schema

advantage

- easy to scale up or down

- supports data partitioning

- use dynamic db schema

- use javascript obj

- supports primary and secondary index

- supports field, range-based, string pattern matching type queries

features of mongodb

- indexing - it supports unique,compound,full-text index

- Aggregation -provides aggregation framework for data processing

- TTl - it supports ttl for data that should expire at certain time

- Sharding - process of splitting data across machines

BSON - binary JSON - binary encoded json like docs

document - JSON like data structure

Collection - group of MongoDb documents

databases - group of collections

mongo shell - javascript shell that allows mongodb from command line

ObjectId - 12 byte unique id - primary key - generated based on timestamp, machine id, process id, random string

findOne - returns first doc match

find - returns all doc

index - it is data structure - improves speed of data retrival

aggregation - a feature of mongo - provides data transformation and process using pipeline

- allows filter, project, group and ops

sharding - process of distributing data across multiple machine

- use for horizontal scaling and improve performance

Replica set - Replica set is group of mongodb servers that maintan same data set

- it provides high availabilty

- it has primary node and one or more secondary node

Primary node - it accept write operation

performance improve

- creating index

- proper schema design

- lean method

$lookup

- performs left out join net current collection and another collection

{

$lookup: {

from: "foreignCollection",

localField: "localField",

foreignField: "foreignField",

as: "outputArray"

}

mongodump - to create binary export of content of database

mongorestore - restore content of db from binary export created by mongodump

$text - to enable text search

diff sharding and replication

- sharding - distributing data across multiple machine - improve horizontal scaling

- replication - creating copy across multiple server - to enhance high availability

mongostate - provides a real-time, human-readable view statistics

--------------------------------------------------------

lean()

--------------------------------------------------------

Message.find({ type: 1 }).select("title -_id").lean()

- to retrieve plain JavaScript objects rather than Mongoose documents,

Reduced Overhead:- Mongoose documents come with additional metadata and methods

Memory Efficiency: - Mongoose documents can consume more memory

Faster Serialization: - plain JavaScript objects are usually faster to serialize into JSON,

Note:- lose some of the Mongoose-specific features and methods that documents provide

--------------------------------------------------------

MongoDB Query

--------------------------------------------------------

User.find({ age: { $gte: 21 } })

User.updateOne({ name: 'John Doe' }, { age: 26 })

User.updateMany({ age: { $lt: 21 } }, { $set: { isUnderage: true } })

User.deleteOne({ name: 'John Doe' })

User.deleteMany({ age: { $gte: 60 } })

User.countDocuments({ age: { $gte: 21 } })

User.aggregate([

{ $match: { age: { $gte: 21 } } },

{ $group: { _id: '$age', count: { $sum: 1 } } }

]) // returns age wise total

--------------------------------------------------------

GraphQL

--------------------------------------------------------

const GET_ALL_SLUGS = gql`

query {

posts {

data {

attributes {

slug

}

const GET_ALL_AUTHORS = gql`

query {

authors {

data {

attributes {

name

description

about

createdAt

social

image {

data {

attributes {

url

name

}

const GET_SINGLE_AUTHOR = gql`

query ($id: ID!) {

author(id: $id) {

data {

attributes {

name

description

social

createdAt

about

image {

data {

attributes {

url

}

const GET_AUTHORBY_NAME = gql`

query ($name1: String!) {

authors(filters: { name: { eq: $name1 } }) {

data {

attributes {

name

description

social

createdAt

about

image {

data {

attributes {

url

}

const GET_TAG = gql`

query ($id: ID!) {

tag(id: $id) {

data {

attributes {

name

}

const GET_ALL_TAG = gql`

query {

tags {

data {

attributes {

name

}

const GET_ALL_POST = gql`

query {

posts {

data {

attributes {

title

description

createdAt

content

slug

status

image {

data {

attributes {

url

}

author {

data {

attributes {

name

description

social

about

image {

data {

attributes {

url

}

categories {

data {

attributes {

name

}

tags {

data {

attributes {

name

}

const GET_SINGLE_POST = gql`

query ($id: ID!) {

post(id: $id) {

data {

attributes {

title

description

categories {

data {

attributes {

name

}

author {

data {

attributes {

name

about

image {

data {

attributes {

url

name

}

const GET_POSTBY_SLUG = gql`

query ($urlSlug: String!) {

posts(filters: { slug: { eq: $urlSlug } }) {

data {

attributes {

title

description

createdAt

content

slug

image {

data {

attributes {

url

}

categories {

data {

attributes {

name

}

author {

data {

attributes {

name

about

image {

data {

attributes {

url

name

}

tags {

data {

attributes {

name

}

const GET_POSTBY_CATEGORY = gql`

query ($category: String!) {

posts(filters: { categories: { name: { eq: $category } } }) {

data {

attributes {

title

description

createdAt

content

slug

image {

data {

attributes {

url

}

categories {

data {

attributes {

name

}

author {

data {

attributes {

name

about

image {

data {

attributes {

url

name

}

tags {

data {

attributes {

name

}

const GET_POSTBY_TAG = gql`

query ($tag: String!) {

posts(filters: { tags: { name: { eq: $tag } } }) {

data {

attributes {

title

description

createdAt

content

slug

image {

data {

attributes {

url

}

categories {

data {

attributes {

name

}

author {

data {

attributes {

name

about

image {

data {

attributes {

url

name

}

tags {

data {

attributes {

name

}

const GET_ALL_CATEGORY = gql`

query {

categories {

data {

attributes {

name

}

const GET_CATEGORY = gql`

query ($id: ID) {

category(id: $id) {

data {

attributes {

name

createdAt

}

-----------------------------------------------------------

logical Questions

-----------------------------------------------------------

1) in - {a:1, b:2, c:3} out -{ a: 3, b: 6, c: 9 }

let input = {a:1, b:2, c:3}

Object.entries(input) => [[a,1],[b,2]]

Object.fromEntries(Object.entries(input)) => {a:1, b:2, c:3}

Object.fromEntries(Object.entries(input).map(([key, value]) => [key, value * 3])); // returns { a: 3, b: 6, c: 9 }

--------------------------------------------------------

2) return even num from arr

let arr = [1,2,3,4,5]

arr.filter((item)=>item % 2 ===2)

--------------------------------------------------------

3) get unique array from two array

let arr1 = [1, 2, 3, 4, 5, 6, 7];

let arr2 = [2, 4, 7, 4];

let combinedSet = new Set([...arr1, ...arr2]);

console.log(Array.from(combinedSet));

let uniqueArray = arr1.concat(arr2).filter((value, index, self) => { return self.indexOf(value) === index});

indexOf() - it will return index and check if element is first occurance in array

--------------------------------------------------------

*****

* *

*****

***

****

*****

***

****

*****

****

***

* *

******

***

*****

*******

*********

*******

*****

***

* *

*********

***

*****

*******

*********

*******

*****

***

* *

*********

*******

*****

***

*****

*******

*********

***

****

*****

****

***

****

*****

****

***

*** ***

***** *****

***********

*********

*******

*****

***

1 2

1 2 3

1 2 3 4

1 2 3 4 5

We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.

We need to run a loop to print n numbers in each row, where n is the row number. This forms the internal loop.

In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows).

For each row, we need to print numbers from num = 1 to num = n.

Example : For the 5th row, n = 5. The internal loop goes from num = 1 to num = 5. The 5th row becomes: 1 2 3 4 5

let str = "";

for (i = 1; i <= 5; i++) {

for (j = 1; j <= i; j++) {

str += j + " ";

}

str += "\n";

}

console.log(str);

2 2

3 3 3

4 4 4 4

5 5 5 5 5

let str = "";

for (i = 1; i <= 5; i++) {

for (j = 1; j <= i; j++) {

str += i + " ";

}

str += "\n";

}

console.log(str);

2 3

4 5 6

7 8 9 10

let str = "";

let sum = 1;

for (i = 1; i <= 4; i++) {

for (j = 1; j <= i; j++) {

str += sum + " ";

sum++;

}

str += "\n";

}

console.log(str);

12345

1234

123

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = 1; j <= n + 1 - i; j++) {

str += j;

}

str += "\n";

}

console.log(str);

123

12345

1234567

123456789

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= n - i; n++) {

str += " ";

}

for (k = 1; k <= 2 * n - 1; k++) {

str += k;

}

str += "\n";

}

console.log(str);

*****

let str = "";

for (i = 1; i <= 5; i++) {

for (j = 1; j <= 5; j++) {

str += "*";

}

str += "\n";

}

console.log(str);

*****

* *

*****

let str = "";

for (i = 1; i <= 5; i++) {

for (j = 1; j <= 5; j++) {

if (i == 1 || i == 5) {

str += "*";

} else {

if (j == 1 || j == 5) {

str += "*";

} else {

str += " ";

}

str += "\n";

}

console.log(str);

***

****

*****

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = 1; j <= n - i; j++) {

str += " ";

}

for (k = 1; k <= i; k++) {

str += "*";

}

str += "\n";

}

console.log(str);

***

****

*****

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= i; j++) {

str += "*";

}

str += "\n";

}

console.log(str);

***

*****

*******

*********

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= n - i; j++) {

str += " ";

}

for (k = 1; k <= 2 * i - 1; k++) {

str += "*";

}

str += "\n";

}

console.log(str);

54321

5432

543

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = 5; i <= j; j--) {

str += j;

}

str += "\n";

}

console.log(str);

* *

******

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= i; j++) {

if (j == 1 || j == i || i == n) {

str += "*";

} else {

str += " ";

}

str += "\n";

}

console.log(str);

*****

****

***

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = n; j >= i; j--) {

str += "*";

}

str += "\n";

}

console.log(str);

AAA

AAAA

AAAAA

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = 1; j <= i; j++) {

str += "A";

}

str += "\n";

}

console.log(str);

AAAAA

AAAA

AAA

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = n; j >= i; j--) {

str += "A";

}

str += "\n";

}

console.log(str);

$$$

$$$$

%%%%%

%%%%

%%%

let n = 9;

let str = "";

for (i = 1; i <= n; i++) {

if (i <= 4) {

for (j = 1; j <= i; j++) {

str += "$";

}

} else {

for (k = 5; k + 4 >= i; k--) {

str += "%";

}

str += "\n";

}

console.log(str);

AAAAA

AAAA

AAA

BBB

BBBB

BBBBB

let n = 11;

let str = "";

for (i = 1; i <= n; i++) {

if (i <= 5) {

for (j = 5; j >= i; j--) {

str += "A";

}

} else if (i == 6) {

str += " ";

} else {

for (k = 7; k <= i; k++) {

str += "B";

}

str += "\n";

}

console.log(str);

* * * * *

* * * *

* * *

* *

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (k = 1; k <= i - 1; k++) {

str += " ";

}

for (j = 1; j <= n + 1 - i; j++) {

str += "*";

}

str += "\n";

}

console.log(str);

* * * * *

* * * *

* * *

* *

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= n + 1 - i; j++) {

str += "*";

}

str += "\n";

}

console.log(str);- a function that takes a component and returns new component

// A simple HOC that logs the component's props

const withLogger = (WrappedComponent) => {

return class WithLogger extends React.Component {

componentDidMount() {

console.log('Props:', this.props);

}

render() {

return <WrappedComponent {...this.props} />;

}

};

// Usage of the HOC

const EnhancedComponent = withLogger(MyComponent);

render() - it returns JSX - it is called whenever updates to state or props

setState() - use to update state of component - when called react re-render component with updated state - any child component also re-render

prop driling - process of passing props from high-level component to a deeply nested component - context and redux

React Router - way to define different routes and their corresponding component

- allow to render different component based on current URL

- browserRouter, Route and Link to handle routing

React Fragment - group multiple element togather without addition DOM element

--------------------------------------------------------

Hooks in react js

--------------------------------------------------------

useState - manage state in function compo

useEffect - perform side effect in function comp (e.g data fetching, subscription, dom manipulation ) after rendering

useContext - access value of context provider within function comp

useReducer -

useRef - creates a ref object that can hold value across render

useMemo - memoize value to prevent un-necessary re-computation

useCallback - memoize function to prevent un-necessary re-creation

useMemo - use to memoize result of function or computation - prevent un-necessary execution of function

const result = useMemo(()=>{return a + b},[a, b]) => react will reuse the previous result untill a and b changes

useCallback - to memoize callback fun, preventing un -necessary re-creation of function render

- useful when passing callback as dependency to child component

const handleClick = useCallback(()=>{},[])

--------------------------------------------------------

NextJs

--------------------------------------------------------

SSR and SSG - pre-render pages at build time (ssg) or request time (ssr)

SSR - process of rendering react component on server and sending generated HTML to client

- improve initial page load time

- improve search engine optimization

- to implement SSR in nodejs with react, we can use next

getStaticProps - function to fetch data at build time and pass it as props to page compo - returns props

- used in static site generation(SSG) to pre-render pages with fetched data

=> Example:

=> The news data is returned as props, which can be accessed in the News component.

=> During the build process, Next.js will call the getStaticProps function and wait for the asynchronous operation to complete.

=> The fetched data is stored in the news variable.

=> The props object is returned with the news data, which will be passed to the News component as props

=> By using getStaticProps, you ensure that the news data is fetched at build time and passed as props to the News component.

=> This allows Next.js to generate a static version of the page with the fetched data, providing better performance and SEO benefits

export default function News({ news }) {

return (

)}

export async function getStaticProps(){

let news = {}

return {

props:{news:news}

}

getServerSideProps:-

--------------------

=> allows to fetch data on every request made to page

=> used in SSR to fetch data dynamically at run time

Here's an explanation of how the getServerSideProps method works:

=> When a request is made to a page that includes the getServerSideProps method, Next.js calls this function on the server.

=> Inside the getServerSideProps function, you can fetch data from an API, a database, or any other data source using asynchronous operations like fetch.

=> The fetched data is typically stored in variables in data variable.

=> You return an object in props key. This data will be passed as props to the page component.

=> The page component, along with the fetched data as props, is then rendered on the server and sent as a response to the client.

export default function MyPage({ data }) {

// Use the fetched data in your page component

return (

<div>

<h1>{data.title}</h1>

<p>{data.description}</p>

</div>

);

}

export async function getServerSideProps() {

// Fetch data from an API or database

const res = await fetch('https://api.example.com/data');

const data = await res.json();

// Return the data as props

return {

props: {

data,

};

}

getStaticPaths function

- use for dynamic route generation in nextjs

--------------------------------------

Diff getServerSideProps and useEffect

--------------------------------------

- both used in next.js for data fetching and handling side effect

getServerSideProps: -

- executed on server-side during every request

- fetch data before rendering and provide props to page

useEffect:-

- executed on client side after component has render

- it run after inital render

--------------------------------------------------------

NodeJS

--------------------------------------------------------

- single threaded

- event loop and non-blocking i/o to handle multiple request

event loop

- it checks for new event in queue and execute one by one in loop to handle multiple req

non-blocking

- nodejs initate operation and continue execute without waiting for other i/o when i/o operation finish callback returns result

--------------------------------------------------------

Diff single thread multi thread

--------------------------------------------------------

- referes to handling consurrent task and executing task

single thread

- only one thread of execution

- program sequentially executes in single flow

- task or operation is processed in sequential manner

- program can work on single taks at a time

- if task takes long time, it can block sub sequent task

- leading delay in overall execution

multi thread

- multiple thread of execution

- each thread represent separate flow in program

- multiple task performed simultaneously using multiple thread

- each thread can perform specific task

- allowing parallel execution of task

- threads can communicate with each other and share data

os module - provides info related to operating sys

querystring - provide method to parse and format url query string

crypto - provide crypto graphic functionality

- generating hash, encrypting, decrypting data, working with signature

--------------------------------------------------------

File upload in nodejs

--------------------------------------------------------

const multer = require("multer")

const storage = multer.diskStorage({

destination:(req,file,cb)=>{

cb(null,'uploads/')

}

filename:(req,file,cb)=>{

cb(null,Date.now())

}

})

const upload = multer({storage:storage})

--------------------------------------------------------

path module

--------------------------------------------------------

- to join path segments

- to resolve relative paths

- to extract file extentions

path.resolve() - returns absolute path of project - C:\Users\junior node\Desktop\pramay

path.resolve("public","image","logo.png") - returns absolute path of file or directory - C:\Users\junior node\Desktop\pramay\public\images\logo.png

path.resolve(__dirname) - returns abs path of current dir

path.resolve(__filename) - returns abs path of current file

path.join("/usr", "local", "bin", "app.js") - \usr\local\bin\app.js

path.dirname("C:\\Users\\junior node\\Desktop\\pramay\\public\\images\\logo.png) - C:\Users\junior node\Desktop\pramay\public\images

path.extname("C:\\Users\\junior node\\Desktop\\pramay\\public\\images\\logo.png") - .png

path.normalize("C:\\Users\\junior node\\Desktop\\pramay\\..\\images\\logo.png") - C:\Users\junior node\Desktop\images\logo.png - it resolves . and ..

path.isAbsolute("file.txt") - false - returns boolean for abs path

path.relative("C:\\Users\\junior node\\Desktop\\pramay\\images\\logo.png", "C:\\Users\\junior node\\Desktop") - ..\..\.. - returns relative path to given arg

path.sep => returns / for win and \ for linux

--------------------------------------------------------

socket

--------------------------------------------------------

web sockets - communication protocol, enables real time, bi-directional data transfer bet client and server

socket.emit(eventName, data) => send event to specific connected client/socket - one-to-one communication

io.emit - send event to all connected client/sockets - one-to-many

socket.join(room)

socket.leave(room)

=> socket.emit() => to emit data to only current connected socket

=> io.emit() => to emit data to all connected socket

=> socket.broadcast.emit() => to emit data to all other socket except current connected

=> io.to(room).emit(eventName,data) => to emit data to only given room

--------------------------------------------------------

fs module

--------------------------------------------------------

fs - to create, delete and modify files, as well as to read content async or sync way

form submission - it can be handle by middleware like body-parser to parse multipart/formdata

env - it is use to store configuration setting for nodejs

- to access env use process.env object

--------------------------------------------------------

Http

--------------------------------------------------------

- to create http and https server

- making http request

--------------------------------------------------------

Stream in nodejs

--------------------------------------------------------

- to handle data streaming

- enable large amount of data processing by working with chunk instead of entire data

--------------------------------------------------------

hook

--------------------------------------------------------

hook - mechanisam to modify operation or event in app

- to register or execute custom code when certain event occurs

- middleware act as hook - it modify req and res

app.use((req,res,next)=>{

next() - pass control to next middleware

})

- pre and post hook in mongoose - mongoose provides hook to modify document before and after they are executed

userSchema.pre('save', function(next) {

console.log('Saving user:', this.name);

next();

});

- webhook

- user defined http callback

- allow external service to be notified when certain event occur in app

- hooks to execute custom code when receving notification

- triggered by new register, payment confirmation ,data updates

- GitHub Webhooks

- Payment Gateway Webhooks

--------------------------------------------------------

Event in nodejs

--------------------------------------------------------

Event hook -

- you can define and emit custom events using EventEmitter

- other part of app can listen to this event and execute specific action when they are trigger

const EventEmitter = require('events');

class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();

// Define a hook (custom event)

myEmitter.on('customEvent', (data) => {

console.log('Custom event triggered:', data);

});

// Trigger the hook (emit the custom event)

myEmitter.emit('customEvent', { message: 'Hello, World!' });

--------------------------------------------------------

MongoDb

--------------------------------------------------------

- noSql database

- document oriented database

- it stores data in JSON format

- schemaless, no need to define schema

advantage

- easy to scale up or down

- supports data partitioning

- use dynamic db schema

- use javascript obj

- supports primary and secondary index

- supports field, range-based, string pattern matching type queries

features of mongodb

- indexing - it supports unique,compound,full-text index

- Aggregation -provides aggregation framework for data processing

- TTl - it supports ttl for data that should expire at certain time

- Sharding - process of splitting data across machines

BSON - binary JSON - binary encoded json like docs

document - JSON like data structure

Collection - group of MongoDb documents

databases - group of collections

mongo shell - javascript shell that allows mongodb from command line

ObjectId - 12 byte unique id - primary key - generated based on timestamp, machine id, process id, random string

findOne - returns first doc match

find - returns all doc

index - it is data structure - improves speed of data retrival

aggregation - a feature of mongo - provides data transformation and process using pipeline

- allows filter, project, group and ops

sharding - process of distributing data across multiple machine

- use for horizontal scaling and improve performance

Replica set - Replica set is group of mongodb servers that maintan same data set

- it provides high availabilty

- it has primary node and one or more secondary node

Primary node - it accept write operation

performance improve

- creating index

- proper schema design

- lean method

$lookup

- performs left out join net current collection and another collection

{

$lookup: {

from: "foreignCollection",

localField: "localField",

foreignField: "foreignField",

as: "outputArray"

}

mongodump - to create binary export of content of database

mongorestore - restore content of db from binary export created by mongodump

$text - to enable text search

diff sharding and replication

- sharding - distributing data across multiple machine - improve horizontal scaling

- replication - creating copy across multiple server - to enhance high availability

mongostate - provides a real-time, human-readable view statistics

--------------------------------------------------------

lean()

--------------------------------------------------------

Message.find({ type: 1 }).select("title -_id").lean()

- to retrieve plain JavaScript objects rather than Mongoose documents,

Reduced Overhead:- Mongoose documents come with additional metadata and methods

Memory Efficiency: - Mongoose documents can consume more memory

Faster Serialization: - plain JavaScript objects are usually faster to serialize into JSON,

Note:- lose some of the Mongoose-specific features and methods that documents provide

--------------------------------------------------------

MongoDB Query

--------------------------------------------------------

User.find({ age: { $gte: 21 } })

User.updateOne({ name: 'John Doe' }, { age: 26 })

User.updateMany({ age: { $lt: 21 } }, { $set: { isUnderage: true } })

User.deleteOne({ name: 'John Doe' })

User.deleteMany({ age: { $gte: 60 } })

User.countDocuments({ age: { $gte: 21 } })

User.aggregate([

{ $match: { age: { $gte: 21 } } },

{ $group: { _id: '$age', count: { $sum: 1 } } }

]) // returns age wise total

--------------------------------------------------------

--------------- Linux ---------------

--------------------------------------------------------

zip

--------------------------------------------------------

--> To zip any folder in ubuntu

zip -r my_project.zip . --exclude=node_modules/ --exclude=dist/ --exclude=other_folder/

==> zip first 1000 files

---> zip -r 1000.zip $(ls | head -n 1000)

=> zip from 100 to next limit

---> zip -r next_100_files.zip $(ls | tail -n +101 | head -n 100)

--------------------------------------------------------

cron job in apache linux

--------------------------------------------------------

--> To list cron jobs running

crontab -l

--> to open cron file in edit mode

crontab -e

--> exit from crontab edit file

ctrl + z

--> open crontab with editor

EDITOR=nano crontab -e

--------------------------------------------------------

server time setting

--------------------------------------------------------

==> check server timezone

---> timedatectl

==> set timezone on server

---> sudo timedatectl set-timezone Asia/Singapore

--------------------------------------------------------

GraphQL

--------------------------------------------------------

const GET_ALL_SLUGS = gql`

query {

posts {

data {

attributes {

slug

}

const GET_ALL_AUTHORS = gql`

query {

authors {

data {

attributes {

name

description

about

createdAt

social

image {

data {

attributes {

url

name

}

const GET_SINGLE_AUTHOR = gql`

query ($id: ID!) {

author(id: $id) {

data {

attributes {

name

description

social

createdAt

about

image {

data {

attributes {

url

}

const GET_AUTHORBY_NAME = gql`

query ($name1: String!) {

authors(filters: { name: { eq: $name1 } }) {

data {

attributes {

name

description

social

createdAt

about

image {

data {

attributes {

url

}

const GET_TAG = gql`

query ($id: ID!) {

tag(id: $id) {

data {

attributes {

name

}

const GET_ALL_TAG = gql`

query {

tags {

data {

attributes {

name

}

const GET_ALL_POST = gql`

query {

posts {

data {

attributes {

title

description

createdAt

content

slug

status

image {

data {

attributes {

url

}

author {

data {

attributes {

name

description

social

about

image {

data {

attributes {

url

}

categories {

data {

attributes {

name

}

tags {

data {

attributes {

name

}

const GET_SINGLE_POST = gql`

query ($id: ID!) {

post(id: $id) {

data {

attributes {

title

description

categories {

data {

attributes {

name

}

author {

data {

attributes {

name

about

image {

data {

attributes {

url

name

}

const GET_POSTBY_SLUG = gql`

query ($urlSlug: String!) {

posts(filters: { slug: { eq: $urlSlug } }) {

data {

attributes {

title

description

createdAt

content

slug

image {

data {

attributes {

url

}

categories {

data {

attributes {

name

}

author {

data {

attributes {

name

about

image {

data {

attributes {

url

name

}

tags {

data {

attributes {

name

}

const GET_POSTBY_CATEGORY = gql`

query ($category: String!) {

posts(filters: { categories: { name: { eq: $category } } }) {

data {

attributes {

title

description

createdAt

content

slug

image {

data {

attributes {

url

}

categories {

data {

attributes {

name

}

author {

data {

attributes {

name

about

image {

data {

attributes {

url

name

}

tags {

data {

attributes {

name

}

const GET_POSTBY_TAG = gql`

query ($tag: String!) {

posts(filters: { tags: { name: { eq: $tag } } }) {

data {

attributes {

title

description

createdAt

content

slug

image {

data {

attributes {

url

}

categories {

data {

attributes {

name

}

author {

data {

attributes {

name

about

image {

data {

attributes {

url

name

}

tags {

data {

attributes {

name

}

const GET_ALL_CATEGORY = gql`

query {

categories {

data {

attributes {

name

}

const GET_CATEGORY = gql`

query ($id: ID) {

category(id: $id) {

data {

attributes {

name

createdAt

}

-----------------------------------------------------------

logical Questions

-----------------------------------------------------------

1) in - {a:1, b:2, c:3} out -{ a: 3, b: 6, c: 9 }

let input = {a:1, b:2, c:3}

Object.entries(input) => [[a,1],[b,2]]

Object.fromEntries(Object.entries(input)) => {a:1, b:2, c:3}

Object.fromEntries(Object.entries(input).map(([key, value]) => [key, value * 3])); // returns { a: 3, b: 6, c: 9 }

--------------------------------------------------------

2) return even num from arr

let arr = [1,2,3,4,5]

arr.filter((item)=>item % 2 ===2)

--------------------------------------------------------

3) get unique array from two array

let arr1 = [1, 2, 3, 4, 5, 6, 7];

let arr2 = [2, 4, 7, 4];

let combinedSet = new Set([...arr1, ...arr2]);

console.log(Array.from(combinedSet));

let uniqueArray = arr1.concat(arr2).filter((value, index, self) => { return self.indexOf(value) === index});

indexOf() - it will return index and check if element is first occurance in array

--------------------------------------------------------

*****

* *

*****

***

****

*****

***

****

*****

****

***

* *

******

***

*****

*******

*********

*******

*****

***

* *

*********

***

*****

*******

*********

*******

*****

***

* *

*********

*******

*****

***

*****

*******

*********

***

****

*****

****

***

****

*****

****

***

*** ***

***** *****

***********

*********

*******

*****

***

1 2

1 2 3

1 2 3 4

1 2 3 4 5

We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.

We need to run a loop to print n numbers in each row, where n is the row number. This forms the internal loop.

In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows).

For each row, we need to print numbers from num = 1 to num = n.

Example : For the 5th row, n = 5. The internal loop goes from num = 1 to num = 5. The 5th row becomes: 1 2 3 4 5

let str = "";

for (i = 1; i <= 5; i++) {

for (j = 1; j <= i; j++) {

str += j + " ";

}

str += "\n";

}

console.log(str);

2 2

3 3 3

4 4 4 4

5 5 5 5 5

let str = "";

for (i = 1; i <= 5; i++) {

for (j = 1; j <= i; j++) {

str += i + " ";

}

str += "\n";

}

console.log(str);

2 3

4 5 6

7 8 9 10

let str = "";

let sum = 1;

for (i = 1; i <= 4; i++) {

for (j = 1; j <= i; j++) {

str += sum + " ";

sum++;

}

str += "\n";

}

console.log(str);

12345

1234

123

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = 1; j <= n + 1 - i; j++) {

str += j;

}

str += "\n";

}

console.log(str);

123

12345

1234567

123456789

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= n - i; n++) {

str += " ";

}

for (k = 1; k <= 2 * n - 1; k++) {

str += k;

}

str += "\n";

}

console.log(str);

*****

let str = "";

for (i = 1; i <= 5; i++) {

for (j = 1; j <= 5; j++) {

str += "*";

}

str += "\n";

}

console.log(str);

*****

* *

*****

let str = "";

for (i = 1; i <= 5; i++) {

for (j = 1; j <= 5; j++) {

if (i == 1 || i == 5) {

str += "*";

} else {

if (j == 1 || j == 5) {

str += "*";

} else {

str += " ";

}

str += "\n";

}

console.log(str);

***

****

*****

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = 1; j <= n - i; j++) {

str += " ";

}

for (k = 1; k <= i; k++) {

str += "*";

}

str += "\n";

}

console.log(str);

***

****

*****

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= i; j++) {

str += "*";

}

str += "\n";

}

console.log(str);

***

*****

*******

*********

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= n - i; j++) {

str += " ";

}

for (k = 1; k <= 2 * i - 1; k++) {

str += "*";

}

str += "\n";

}

console.log(str);

54321

5432

543

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = 5; i <= j; j--) {

str += j;

}

str += "\n";

}

console.log(str);

* *

******

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= i; j++) {

if (j == 1 || j == i || i == n) {

str += "*";

} else {

str += " ";

}

str += "\n";

}

console.log(str);

*****

****

***

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = n; j >= i; j--) {

str += "*";

}

str += "\n";

}

console.log(str);

AAA

AAAA

AAAAA

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = 1; j <= i; j++) {

str += "A";

}

str += "\n";

}

console.log(str);

AAAAA

AAAA

AAA

let str = "";

let n = 5;

for (i = 1; i <= n; i++) {

for (j = n; j >= i; j--) {

str += "A";

}

str += "\n";

}

console.log(str);

$$$

$$$$

%%%%%

%%%%

%%%

let n = 9;

let str = "";

for (i = 1; i <= n; i++) {

if (i <= 4) {

for (j = 1; j <= i; j++) {

str += "$";

}

} else {

for (k = 5; k + 4 >= i; k--) {

str += "%";

}

str += "\n";

}

console.log(str);

AAAAA

AAAA

AAA

BBB

BBBB

BBBBB

let n = 11;

let str = "";

for (i = 1; i <= n; i++) {

if (i <= 5) {

for (j = 5; j >= i; j--) {

str += "A";

}

} else if (i == 6) {

str += " ";

} else {

for (k = 7; k <= i; k++) {

str += "B";

}

str += "\n";

}

console.log(str);

* * * * *

* * * *

* * *

* *

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (k = 1; k <= i - 1; k++) {

str += " ";

}

for (j = 1; j <= n + 1 - i; j++) {

str += "*";

}

str += "\n";

}

console.log(str);

* * * * *

* * * *

* * *

* *

let n = 5;

let str = "";

for (i = 1; i <= n; i++) {

for (j = 1; j <= n + 1 - i; j++) {

str += "*";

}

str += "\n";

}

console.log(str);