├── API & V8 └── index.html ├── DOM1 ├── Dom basics1.png ├── Dom basics2.png ├── HTML collections.png ├── Node List.png ├── Query Selector1.png └── index.html ├── DOM2 ├── index1.html └── index2.html ├── DOM3 └── index.html ├── Datatypes.js ├── Date.js ├── Events1 └── index.html ├── Functions1 ├── Func Basics1.js ├── Func Basics2.js ├── Func Basics3.js ├── Func Basics4.js └── Func Basics5.js ├── Functions2 ├── Arrow Function.js ├── IIFE.JS ├── Scope.js └── scope level .js ├── Intro.js ├── JS Notes.pdf ├── Memory.js ├── Miscellaneous └── closure.html ├── OOP's ├── Class.js ├── Prototype.js ├── bind.html ├── call.js ├── inheritance1.js ├── inheritance2.js ├── object.js ├── oop1.js ├── practice.js └── static.js ├── Objects Advance ├── Class get&set.js ├── function get& set.js ├── object get&set.js └── object.js ├── Objects1.js ├── Operations.js ├── Prefix Suffix.js ├── Primitive.js ├── Promise1 └── pr.js ├── Promise2 └── pr.js ├── README.md ├── TypeConversion.js ├── arrays.js ├── arrays2.js ├── comparison.js ├── control Flow 1 ├── Switch.js ├── if.js ├── ifelse.js └── truthy.js ├── control Flow 2 ├── Filter.js ├── For Loop.js ├── Reduce.js ├── for each.js ├── for-in Loop.js ├── for-of Loop.js └── while loop .js ├── math1.js ├── math2.js ├── nums.js ├── objects2.js ├── objects3.js └── string.js /API & V8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API & V8 7 | 8 | 9 | Value State Description 10 | 0 UNSENT Client has been created. open() not called yet. 11 | 1 OPENED open() has been called. 12 | 2 HEADERS_RECEIVED send() has been called, and headers and status are available. 13 | 3 LOADING Downloading; responseText holds partial data. 14 | 4 DONE The operation is complete. 15 | 16 | 35 | -------------------------------------------------------------------------------- /DOM1/Dom basics1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RabindraMishra-AIDS/JS-Tutorial/67aa4bf3ab2ef18b1611b8d866d9c8e1a9b1bf3f/DOM1/Dom basics1.png -------------------------------------------------------------------------------- /DOM1/Dom basics2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RabindraMishra-AIDS/JS-Tutorial/67aa4bf3ab2ef18b1611b8d866d9c8e1a9b1bf3f/DOM1/Dom basics2.png -------------------------------------------------------------------------------- /DOM1/HTML collections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RabindraMishra-AIDS/JS-Tutorial/67aa4bf3ab2ef18b1611b8d866d9c8e1a9b1bf3f/DOM1/HTML collections.png -------------------------------------------------------------------------------- /DOM1/Node List.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RabindraMishra-AIDS/JS-Tutorial/67aa4bf3ab2ef18b1611b8d866d9c8e1a9b1bf3f/DOM1/Node List.png -------------------------------------------------------------------------------- /DOM1/Query Selector1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RabindraMishra-AIDS/JS-Tutorial/67aa4bf3ab2ef18b1611b8d866d9c8e1a9b1bf3f/DOM1/Query Selector1.png -------------------------------------------------------------------------------- /DOM1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM INTRODUCTION 7 | 15 | 16 | 17 |
18 |

Learning DOM in Javascript. Test text

19 |
20 |

Lorem, ipsum dolor.

21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, eum?

22 |

Lorem.

23 |

Lorem ipsum dolor sit amet consectetur.

24 | 30 | 31 | -------------------------------------------------------------------------------- /DOM2/index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM Part2 7 | 13 | 14 | 15 |
16 |
Monday
17 |
Tuesday
18 |
Wednesday
19 |
Thursday
20 |
21 | 37 | 38 | -------------------------------------------------------------------------------- /DOM2/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dom is Fun 7 | 8 | 9 | 10 | 11 | 30 | -------------------------------------------------------------------------------- /DOM3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dom : Final Part 7 | 8 | 9 | 12 | 13 | 38 | -------------------------------------------------------------------------------- /Datatypes.js: -------------------------------------------------------------------------------- 1 | "use strict"; // Treat all codes as newer version 2 | //alert("Hello") we are using nodejs , not browser. 3 | console.log(3 + 3); console.log("Rabindra") 4 | //ecma script for standards 'tc39.es' 5 | const name="Rabindra" // String 6 | let age=45 //int 7 | let isLearningJavascript=true // Haa ya Na ie.Boolean 8 | let stat; // Khali hai no value assigned 9 | let state = null; // Khali nhi hai contains null 10 | 11 | //number 12 | //string 13 | //bigint 14 | //null => Standalone value 15 | //undefined => no value is assigned 16 | //symbol => unique 17 | 18 | 19 | // Maharati (Object) 20 | console.log(typeof state); 21 | console.log(typeof undefined); -------------------------------------------------------------------------------- /Date.js: -------------------------------------------------------------------------------- 1 | 2 | //------------------------------------------------------------------------ DATE -------------------------------------------------------------------------- 3 | 4 | // Date is arbitary compared from Jan 1, 1970 5 | // It is calculated in millisecond 6 | let myDate = new Date(); // creating a instance of myDate 7 | console.log(myDate.toString()); 8 | 9 | // Har ek method ka apna hi tarika hai we can use multiple methods 10 | console.log(myDate.toDateString()); 11 | console.log(myDate.toLocaleString()); 12 | console.log(myDate.toJSON()); 13 | console.log(myDate.toISOString()); 14 | 15 | // Date is also a object 16 | console.log(typeof myDate); 17 | 18 | // Creating a an arbitary Date ie, Khud ka date 19 | 20 | let myCreatedDate= new Date(2023,0,23) //In JS months starts with Zero 21 | console.log(myCreatedDate.toDateString()); 22 | 23 | // Creating Date as per Required Format DD-MM-YYYY 24 | let anotherDate=new Date("01-14-2023") 25 | console.log(anotherDate.toLocaleString()); 26 | 27 | let myTimeStamp = Date.now() //It will calculate time in millisecond 28 | console.log(myTimeStamp); 29 | 30 | 31 | // to compare it with previous date 32 | console.log(myCreatedDate.getTime()); 33 | 34 | 35 | // converting a date into seconds 36 | console.log(Date.now()/1000); 37 | 38 | // Used for writing Complex Dates 39 | let newDate = new Date() 40 | console.log(newDate.getMonth()+1); // displays which month is currently going on 41 | console.log(newDate.getDay()); 42 | 43 | // Locale string (best method ) 44 | // Locale String ke andar hum object Define karte hai and Bahut saare Parameters de Sakte hai 45 | 46 | newDate.toLocaleString('default',{ 47 | weekday: "long", 48 | }) 49 | -------------------------------------------------------------------------------- /Events1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Events 7 | 8 | 9 |

Amazing image

10 |
11 | 19 |
20 | 21 | 54 | -------------------------------------------------------------------------------- /Functions1/Func Basics1.js: -------------------------------------------------------------------------------- 1 | //======================= Functions ========================================================== 2 | //To understand Functions we need to learn about Memory Management in Javascript 3 | // Function keyword 4 | 5 | function sayMyname() 6 | { 7 | console.log('M'); 8 | console.log('I'); 9 | console.log('S'); 10 | console.log('h'); 11 | console.log('R'); 12 | console.log('A'); 13 | } 14 | // sayMyname() Function Call 15 | 16 | function addtwoNumbers(number1,number2) //Parameters 17 | { 18 | console.log(number1+number2); 19 | } 20 | addtwoNumbers(5,6); 21 | addtwoNumbers(3,"4"); //Concatenates "3"+"4" 22 | addtwoNumbers(8,null); //Arguments 23 | -------------------------------------------------------------------------------- /Functions1/Func Basics2.js: -------------------------------------------------------------------------------- 1 | //=========================== Function ================================================ 2 | // Beginners Mistake 3 | function addTwoNumbers(number1,number2) 4 | { 5 | console.log(number1+number2); 6 | } 7 | 8 | const result = addTwoNumbers(3,5) 9 | console.log(`Result is ${result}`); //But result showing is undefined. 10 | //Return apne aap mai concept hai and addTwoNumber is not returning anything. 11 | 12 | function add(n1,n2){ 13 | let result=n1+n2; 14 | return result 15 | //Return ke baad koi function kaam nhi karega thus no code after return keyword. 16 | } 17 | const new_result= add(9,11); 18 | console.log(new_result); // now add function is returning the value. 19 | -------------------------------------------------------------------------------- /Functions1/Func Basics3.js: -------------------------------------------------------------------------------- 1 | //=========================== Javascript Functions ==================================================== 2 | function loginUserMessage(username) 3 | { 4 | return `${username} just logged in` 5 | } 6 | loginUserMessage("Rabindra") // Now in this function will execute but it has only returned the value.Didn't Print it 7 | const result=loginUserMessage("Rabindra") 8 | console.log(result); //output: Rabindra Just Loggedin. 9 | 10 | 11 | // If no argument is given in function it will show undefined just Loggedin 12 | //Thus we need to use it with if else ladder 13 | 14 | function loggin(username){ 15 | if(username== undefined){ // we can also write it as if(!username) 16 | console.log(`Please Enter Username`); 17 | } 18 | return `${username} just loggedin.` 19 | } 20 | 21 | //We can also define bydefault argument thus no need to write if () statements eg: 22 | function logginnew(username="rabindra") //Bydefault 23 | { 24 | return`${username} just loggedin.` 25 | } -------------------------------------------------------------------------------- /Functions1/Func Basics4.js: -------------------------------------------------------------------------------- 1 | //======================== JavaScrit =================================================== 2 | //Supose , Gift shopping card in this we not know the number of numbers we need to add 3 | //Because it depends on how many items a users select 4 | 5 | function calculateCartPrice(...num1) 6 | { 7 | return num1 8 | } 9 | //For passing too many values 10 | //In this case we can use ... "Rest"/"Spread" 11 | //Depending on the use case it i seither called as rest or spread. 12 | //... it packs all the values insinde a bundle 13 | 14 | console.log(calculateCartPrice(200,400,500,2000)); //In this case it will pack all these values in an Array. -------------------------------------------------------------------------------- /Functions1/Func Basics5.js: -------------------------------------------------------------------------------- 1 | //---------------------------- CaseStudy ---------------------------------------------------------- 2 | function calculateCartPrice(val1,val2,...num1){ 3 | return num1 4 | } 5 | console.log(calculateCartPrice(200,400,500,2000)); 6 | //Ye case mai array banega [500,2000] becasue val1 will get 200,val2 will get 400 7 | 8 | const user={ 9 | username:"Rabindra", 10 | price:999 11 | } 12 | function handleObject(anyObject) 13 | { 14 | console.log(`Username is ${anyObject.username} and price is ${anyObject.price}`); 15 | } 16 | handleObject(user) //Giving user as an argument which is an object 17 | 18 | 19 | 20 | //============================================ Understanding the Problem ========================================= 21 | //suppose user object has a property called prices and you hav ewriitten in your function anyObject.price 22 | //Probably you won't be knowing the property name of the passed object 23 | //eg: 24 | const new_user={ 25 | username:"Rabindra", 26 | prices:199 27 | } 28 | handleObject(new_user); // here price will come undefined because name given is prices 29 | //Thus we require type safety for handling such cases 30 | 31 | 32 | handleObject({ 33 | username:"Mishra", 34 | price:399 35 | }) 36 | 37 | const myNewArray = [200,400,100,600] 38 | function returnSecondValue(getArray){ 39 | return getArray[1] 40 | } 41 | console.log(returnSecondValue(myNewArray)); //Both ways we can pass the aurgument 42 | console.log(returnSecondValue([200,400,500,1000])) 43 | -------------------------------------------------------------------------------- /Functions2/Arrow Function.js: -------------------------------------------------------------------------------- 1 | //======================= Understanding this keyword ================================ 2 | //It is used to define the current context 3 | const user={ 4 | username:"Rabindra", 5 | id:34, 6 | Message:function() 7 | { 8 | console.log(`${this.username} Welcome to our website`); 9 | console.log(this); 10 | 11 | 12 | } 13 | } 14 | user.Message() 15 | user.username="Rahul" 16 | user.Message() 17 | // We cannot use This keyword inside the function 18 | const fun=function rabindra(){ 19 | username="Utkarsh"; 20 | console.log(this) 21 | console.log(`${this.username} is a good boy`); 22 | 23 | 24 | } 25 | fun() 26 | //Arrow Function 27 | const fun2= (username) =>{ 28 | console.log(`${this.username}`); 29 | 30 | } 31 | fun2('Rahul') //Now it will come undefined. 32 | 33 | //Implicit Return 34 | add2 =(n1,n2)=>(n1+n1) 35 | console.log(add2(11,34)); 36 | -------------------------------------------------------------------------------- /Functions2/IIFE.JS: -------------------------------------------------------------------------------- 1 | // Immediately Invoked Function Expression 2 | //Used to run functions immediately to avoid Global Pollution 3 | (function work (){ 4 | console.log("Database connected") 5 | })(); //Semicolon is important for so that writing two iife is possible and scope is seperated -------------------------------------------------------------------------------- /Functions2/Scope.js: -------------------------------------------------------------------------------- 1 | //============================================== Global , Local Scope=================================================== 2 | let a=10 3 | let b=4 4 | function fun(){ 5 | let a=5 6 | } 7 | console.log(a); // Output will come 10 because local value should be leaked outside the function 8 | 9 | //****************************** Problem with var ***************************************/ 10 | const b1=50 11 | if (true) 12 | { 13 | var c=67 14 | console.log(b1) // It can acess global variable 15 | } 16 | console.log(c); // Here output will be 67 ie. leakage of scope 17 | 18 | 19 | -------------------------------------------------------------------------------- /Functions2/scope level .js: -------------------------------------------------------------------------------- 1 | if (true) 2 | { 3 | let username = 'Rabindra' 4 | if (username == 'Rabindra') 5 | { 6 | const website="TCTE"; 7 | console.log(username + " " + website); 8 | 9 | } 10 | //console.log(website); //Will throw the error because website out of scope. 11 | 12 | } 13 | //========================= Mini Hoisting ===================================================== 14 | const add= function(n1,n2) // this is mini hoisting 15 | { 16 | return n1+n2 17 | } 18 | m=add(4,5) 19 | console.log(m); 20 | -------------------------------------------------------------------------------- /Intro.js: -------------------------------------------------------------------------------- 1 | const accountId=1356 2 | let user_name="Rabindra" 3 | let rollno; 4 | user_name1="Himanshu" 5 | rollno=23 6 | rollno=18 7 | /* 8 | Prefer not to use var becasue of its scope problem 9 | */ 10 | console.table([accountId,user_name,rollno,user_name1]); 11 | -------------------------------------------------------------------------------- /JS Notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RabindraMishra-AIDS/JS-Tutorial/67aa4bf3ab2ef18b1611b8d866d9c8e1a9b1bf3f/JS Notes.pdf -------------------------------------------------------------------------------- /Memory.js: -------------------------------------------------------------------------------- 1 | let myyoutube="Rabindra" 2 | let anotheryoutube=myyoutube 3 | myyoutube="Mishra" 4 | console.log(myyoutube) 5 | console.log(anotheryoutube); 6 | 7 | /* ---------------------------------------------- Heap Allocation (Non Primitive) ---------------------------------------------------- */ 8 | let userone = { 9 | email:"g@mail", 10 | age:23 11 | 12 | } 13 | let usertwo=userone 14 | usertwo.age=45 15 | userone.email="update@mail" 16 | console.log(userone); 17 | console.log(usertwo); -------------------------------------------------------------------------------- /Miscellaneous/closure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Closure 7 | 8 | 9 | 10 | 11 | 21 | -------------------------------------------------------------------------------- /OOP's/Class.js: -------------------------------------------------------------------------------- 1 | //ES6 Ke baad se classes can be accessed in JS 2 | //Note: It is just an syntactical sugar 3 | //Can contain properties and Methods 4 | //Syntax: Class user{ constructor(); } //Contructor apne app ban jaata hai in class eg:- 5 | 6 | class user{ 7 | constructor(name,age,friend){ 8 | this.name=name 9 | this.age=age, 10 | this.friend=friend 11 | } 12 | Password(){ 13 | console.log(`Encrypted Password is: ${this.age + this.name}`); 14 | 15 | } 16 | } 17 | const Rabindra = new user('Mishra',23,'Himanshu_Jha') 18 | console.log(Rabindra,Rabindra.Password()); 19 | 20 | //Behind the scene 21 | 22 | 23 | // function user(name,age,friend){ 24 | // this.name=name, 25 | // this.age=age, 26 | // this.friend=friend 27 | // } 28 | // //Injecting the Method 29 | // user.prototype.Password= function(){ 30 | // console.log(`Encrypted Password is: ${this.age + this.name}`); 31 | // } -------------------------------------------------------------------------------- /OOP's/Prototype.js: -------------------------------------------------------------------------------- 1 | //Array.String -----------> Object ------------------------>Null 2 | //This is called as protoypal behaviour of js 3 | const hero=['Shaktiman','Krishh','Spiderman'] 4 | const heropower={ 5 | shaktiman:'laser', 6 | krishh:'Speed', 7 | Spiderman:'Sling' 8 | } 9 | Object.prototype.rabindra=function(){ 10 | console.log('Rabindra is present in all objects'); //Method injection 11 | 12 | } 13 | hero.rabindra() //Excuted===injected successfully 14 | heropower.rabindra() //Executed===injected successfully -------------------------------------------------------------------------------- /OOP's/bind.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React 7 | 8 | 9 | 10 | 11 | 30 | -------------------------------------------------------------------------------- /OOP's/call.js: -------------------------------------------------------------------------------- 1 | //========================== Requirement of call================================== 2 | //Problem with 'this' Keyword is function(){ call()}. ie Function inside function. 3 | //In such scenarioes this usually represents global execution adn refers to window object. 4 | //In such scenarios 'this' keyword is unable to fin dthe current conetxt. 5 | //Thus we need to use call to execute inner function and pass context of parent function to inner function 6 | //eg:- 7 | function Setusername(username){ 8 | this.username=username 9 | console.log('Executed'); 10 | 11 | } 12 | function user(name,email,friend,age){ 13 | this.email=email, 14 | this.age=age, 15 | this.friend=friend, 16 | Setusername.call(this,name) //Thi sis used to hold back the value of child function from call stack. 17 | } 18 | const Mishra= new user('Rabindra','google@.com','Dasrath Patel',23) 19 | console.log(Mishra); 20 | -------------------------------------------------------------------------------- /OOP's/inheritance1.js: -------------------------------------------------------------------------------- 1 | //Every Object has a new instances & Properties 2 | //To share information among objects we can use inheritance 3 | const name={ 4 | username:"Rabindra" 5 | } 6 | const age={ 7 | userage:23 8 | } 9 | const status={ 10 | loggedin:true, 11 | __proto__:age //Inheriting age obkject 12 | } 13 | console.log(status.userage); //Thus accessing the information 14 | 15 | //Modern Syntax 16 | Object.setPrototypeOf(age, name) //age ke andar name 17 | console.log(age.username); 18 | 19 | 20 | -------------------------------------------------------------------------------- /OOP's/inheritance2.js: -------------------------------------------------------------------------------- 1 | // ========================= Inheritance in Class ============================= 2 | class parent{ 3 | greet(){ 4 | console.log(`Hello Bacho, Kaise ho aap Sabhi`); 5 | 6 | } 7 | } 8 | class child extends parent{ 9 | fun(){ 10 | super.greet() 11 | } 12 | } 13 | const maze= new child() 14 | maze.fun() 15 | -------------------------------------------------------------------------------- /OOP's/object.js: -------------------------------------------------------------------------------- 1 | //============================== Javascript follows prototypal behaviour =========================== 2 | //In javascript each and everything is almost an object 3 | // Array ---------------> Object --------------------------> Null 4 | function multiply5(num){ 5 | return num*5 6 | } 7 | //We can use function as an object due to its prototypal behaviour eg: 8 | multiply5.power=3 9 | console.log(multiply5(6)); 10 | console.log(multiply5.power); 11 | console.log(multiply5.prototype); 12 | 13 | 14 | -------------------------------------------------------------------------------- /OOP's/oop1.js: -------------------------------------------------------------------------------- 1 | //============================== Object Oriented Programming================================== 2 | //It is collection of properties and methods 3 | //Object Literal 4 | // Keyword :- a)classes b)constructor c)Prototypes d)Instances 5 | 6 | const user={ 7 | name:'Rabindra', 8 | age:55, 9 | SignedIn:true, 10 | getDetails: function(){ 11 | console.log('Details found'); 12 | } 13 | } 14 | //name,age,SignedIn are properties while getDetails is a method. 15 | console.log(user); 16 | //eg:2 17 | const anotheruser={ 18 | name:'Vignesh Iyer', 19 | age:33, 20 | getuserDetail: ()=> {console.log(this) } //It will print all context of this object 21 | } 22 | console.log(anotheruser); 23 | 24 | //Constructors are used to create new instances of same objects 25 | //eg: const promise= new Promise() 26 | 27 | function User1(name,age,gender,signedin){ 28 | this.name=name; 29 | this.age; 30 | this.gender=gender; 31 | this.signedin=signedin; 32 | return this //Without return also th efunction will return it 33 | } 34 | const rabindra= new User1('Rabindra',21,'Male',true) 35 | const Kanishk = new User1('Kanishk Mandrelia',19,'Male',false) 36 | const Utkarsh = new User1('Utkarsh',45,'Male',false) 37 | const riya= new User1('Riya',10,'Female',true) 38 | console.log('Rabindra:',rabindra); 39 | console.log('Kanishk :',Kanishk); 40 | console.log('Utkarsh :',Utkarsh); 41 | console.log('Riya :',riya); 42 | //new keyword is impoertant to create different instance otherwise it will overwrite the other instances 43 | //Constructor Keyword 44 | console.log(rabindra.constructor); 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /OOP's/practice.js: -------------------------------------------------------------------------------- 1 | class hello{ 2 | constructor(name){ 3 | this.name=name 4 | }; 5 | fun(){ 6 | console.log(this); 7 | 8 | } 9 | 10 | } 11 | let n= new hello('Rabindra') 12 | n.fun() //Getting the current context of class -------------------------------------------------------------------------------- /OOP's/static.js: -------------------------------------------------------------------------------- 1 | // Static keyword is used to prevent theh acces of a property,method within a class 2 | //eg: 3 | class user{ 4 | constructor(username,age){ 5 | this.username=username 6 | this.age=age+5 7 | } 8 | logme(){ 9 | console.log(`Name of user is ${this.username}`); 10 | } 11 | static id(){ 12 | return 'Id is 123' 13 | } 14 | } 15 | const Jha=new user('Abhinav',40) 16 | //console.log(Jha.id()); //We dont have access of id method due to static keyword 17 | 18 | //Evenchild class cannot acess it 19 | class child extends user{ 20 | constructor(username,email,age){ 21 | super(username,age) 22 | this.email=email 23 | } 24 | } 25 | const newuser=new child('Joel Pothen','Joel@gmail.com',40) 26 | console.log(child.id()); //this will return the id beacuse directly acessing it from class 27 | console.log(child.name); 28 | console.log(newuser.age); 29 | 30 | console.log(newuser.id()); 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Objects Advance/Class get&set.js: -------------------------------------------------------------------------------- 1 | //============================Getter and setters ============================== 2 | //Can be used to prevent the access of properties 3 | //Getter ke sath setter must be written ony on eis not allowed 4 | //Property name and get & set Method Name must be same. 5 | class user{ 6 | constructor(email,passwd){ 7 | this.email=email 8 | this.passwd=passwd 9 | } 10 | get passwd(){ 11 | return `Encrypted passwd is ${this._passwd + Math.floor(Math.random()*10)}` 12 | } 13 | set passwd(value){ //Some changes if it is not made during set or get maximum call stack error will occur 14 | this._passwd=value 15 | } 16 | 17 | } 18 | const game= new user('cricket@.com','abc') 19 | console.log(game.passwd); 20 | -------------------------------------------------------------------------------- /Objects Advance/function get& set.js: -------------------------------------------------------------------------------- 1 | // Defining get and set inside properties of a function 2 | //Before class (ES6) we used to use get & set Like this 3 | //using Object.defineProperty() 4 | 5 | function user(email,password){ 6 | this._email=email 7 | this._password=password //Purposefully we are changing the name of the variable. 8 | Object.defineProperty(this,'email',{ //Ye Method ko apna ek this dena padega for context. 9 | get:function(){ 10 | return this._email.toUpperCase(); 11 | }, 12 | set:function(value){ 13 | this._email=value 14 | } 15 | }) 16 | } 17 | const JS=new user('Ronadlo@ai','an45i') 18 | console.log(JS.email); 19 | -------------------------------------------------------------------------------- /Objects Advance/object get&set.js: -------------------------------------------------------------------------------- 1 | // Objects 2 | //Facory Function: On the basis of the Object it will create function and properties 3 | //Factory Function: Object.create() we also have this in an array. 4 | 5 | const School={ 6 | _email:"hfchs[holy Family convent High School & Junior College.]", 7 | _address:'Vasai (East)', 8 | get address(){ 9 | return `Address of HFCHS is ${this._address}` 10 | }, 11 | set address(value){ 12 | this._address=value 13 | } 14 | } 15 | const school= Object.create(School) 16 | console.log(school.address); 17 | //Here set is been treated as property an dnot a method and thus can acess using {.address} and not [._address] -------------------------------------------------------------------------------- /Objects Advance/object.js: -------------------------------------------------------------------------------- 1 | //===================== Objects (Behind the scenes) ================================ 2 | //Q.? acn we change the value of Math.PI and why? 3 | //Ans :NO,because writable,enumerable,configurable is set to false for all of these. 4 | 5 | console.log(Math.PI); //3.14159.... 6 | Math.PI=7 //It cannot be overwwritten 7 | console.log(Math.PI); // 3.14159......... 8 | //Why? 9 | console.log(Object.getOwnPropertyDescriptor(Math,'PI')); //Math is module name while PI is property name 10 | //eg: simply writing Math will show undefined because we are here asking for property descriptor and not Module 11 | 12 | //We can also define our own properties for an object 13 | const Friend={ 14 | name:'Shreyas Singh', 15 | age:22, 16 | isLoggedIn:true 17 | } 18 | Object.defineProperty(Friend,'age',{ 19 | writable:false, 20 | enumerable:false 21 | }) 22 | console.log(Object.getOwnPropertyDescriptor(Friend,'age')); 23 | 24 | 25 | //Concept of Looping Now, here age property we have defined enumerable=false thus during iteration on friend Object age property will not be displayed 26 | 27 | for (let [key,value] of Object.entries(Friend)){ 28 | if (typeof value!== 'function'){ //Discuss this security check 29 | console.log(`Key :${key} Value:${value}`); 30 | } 31 | } -------------------------------------------------------------------------------- /Objects1.js: -------------------------------------------------------------------------------- 1 | //============================= Objects in Javascript ==================================================== 2 | //can be defined in two ways 1)Literals 2)Constructors 3 | //Singleton (apne tareka ek hi object hai ) 4 | //constructor se hamesha singleton banta hai but not in case of literals 5 | // Object.create (this one way of creating objects and called as constructors) 6 | 7 | const empty={} // Empty object an dis literal 8 | 9 | //we have a unique datatype of symbol 10 | const mySym=Symbol("key1") 11 | 12 | 13 | const JsUser={ // Here we can define any key unlike arrays always starts with 0,1,2,3,4,... 14 | name:"Rabindra", 15 | "full name":"Rabindra Mishra", 16 | age:21, 17 | [mySym]:"myKey1", 18 | Location:"Jaipur", 19 | email:"Rabindra.amazon.com", 20 | isLoggedIn:false, 21 | lastLoginDays:["Monday","Saturday"] 22 | } 23 | 24 | //Accessing our objects 25 | console.log(JsUser.email); 26 | //Method2 for accessing 27 | console.log(JsUser["email"]); // Accessing this way we need to specify " "quotes becasue email " 28 | 29 | 30 | //Q.) Why do we need to consider method 2 of accessng ? Ans : Because "full name" cannot be accessed using dor method 31 | console.log(JsUser["full name"]); 32 | 33 | //Similarly we can acess symbol inside a object using squared parenthesis. [ ] 34 | console.log(JsUser[mySym]); 35 | 36 | //Overwriting our object Values 37 | JsUser.email="Rabindra@google.com" 38 | 39 | //We can also freeze an object so that no one should oupdat ethe values 40 | 41 | //Object.freeze(JsUser) 42 | 43 | //No updating it will not throw any error but updation will not get propogated 44 | JsUser.email="UtkarshRoy@" 45 | 46 | //In javascript you can also treat functions as variables 47 | JsUser.greeting = function(){ 48 | console.log("hello Js User"); 49 | } 50 | console.log(JsUser.greeting); //It will return a Function 51 | console.log(JsUser.greeting()); // Here it will print hello Js User 52 | 53 | //String se backticks mai convert karna hai. This is called as String Interpolation 54 | JsUser.Two=function(){ 55 | console.log(`Hello Motto ${this.name}`) //Refrencing same object we use $this 56 | } 57 | console.log(JsUser.Two()) -------------------------------------------------------------------------------- /Operations.js: -------------------------------------------------------------------------------- 1 | //************************************Operations************************************************************** */ 2 | let str1="Rabindra" 3 | let str2=" Mishra" 4 | let str3=str1+str2 5 | console.log(str3) 6 | console.log("1"+2+2); 7 | console.log("1"+"2"); 8 | console.log(2+2+"3") 9 | console.log(true); 10 | console.log(+true) 11 | console.log(+""); 12 | 13 | -------------------------------------------------------------------------------- /Prefix Suffix.js: -------------------------------------------------------------------------------- 1 | 2 | /* ----------------------- Understanding Prefix and Postfix---------------------------------------------------*/ 3 | 4 | let x=3 5 | let z=3 6 | const y=x++; 7 | const a=++z; 8 | console.log(x,y,z,a); -------------------------------------------------------------------------------- /Primitive.js: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------- Data Types Summary ------------------------------------------------------------ */ 2 | // There are two types of Datatypes: 1) Primitive 2) Non Primitive. 3 | // These datatypes are classified based on the the memory and the way they are accessed. 4 | 5 | 6 | // Primitive Datatypes are accessed using call by value while Non primitive is used as call by reference. 7 | 8 | 9 | // Primitive : string,number, BigInt, boolean , null, undefined, symbol 10 | // Non Primitve : Arrays , objects , functions 11 | 12 | let name="Rabindra"; 13 | let age=23; 14 | const surname="Mishra"; 15 | let email; //undefined 16 | let score=null; 17 | const id=Symbol('123') // Always used along with ID's we use this in react. 18 | const anotherid=Symbol('123') // Although input is same but return value will be diffrent ie. object 19 | console.log(id === anotherid) 20 | console.table([age,email,score,id,name]) 21 | 22 | -------------------------------------------------------------------------------- /Promise1/pr.js: -------------------------------------------------------------------------------- 1 | //==================================== Promises ======================================== 2 | //3 states of promises in Javascript [Note: Promise is an object] 3 | //a)Pending b)fulfilled c) Reject 4 | //Promise has 2 parts resolve and rejection 5 | 6 | 7 | const promise1=new Promise(function(resolve,reject){ 8 | setTimeout(function(){ 9 | console.log("Async task 1"); 10 | resolve() 11 | },1000) //Dekay is been introduced. 12 | 13 | }) 14 | //Now to link then with promise we need to include resolve() 15 | promise1.then( function(){ 16 | console.log("Task1 consumed"); 17 | }) 18 | 19 | //Method 2 20 | //We can also write it as one component eg: 21 | const promise2=new Promise(function (resolve,reject){ 22 | setTimeout(function(){ 23 | console.log("Async Task2"); 24 | resolve() 25 | },1000) 26 | }).then(()=> console.log("Task2 consumed")) 27 | 28 | //Method 3 29 | //we can also pass teh data from resolve 30 | const promise3=new Promise(function(resolve,reject){ 31 | setTimeout(function(){ 32 | resolve({name:"Rabindra",Age:21}) //we can pass any of the data like object,arrays, etc 33 | },1000) 34 | }).then((user)=> { 35 | console.log(user); //Data is received and is been given the name user and printing the user ie.Object 36 | 37 | }) 38 | 39 | //Chaining is done to return the data ie. we cannot return the data directly from then() method 40 | //Method 4 41 | const promise4=new Promise(function(resolve,reject){ 42 | setTimeout(function(){ 43 | let error=false //error is set to false 44 | if(!error){ 45 | resolve({name:"Mishra",friend:"Sagar Naidu(carmel)"}) 46 | } 47 | else{ 48 | reject("Oops! Something went wrong.") 49 | } 50 | },1000) 51 | 52 | }).then((user)=>{ 53 | console.log(user); 54 | return user.friend //this return will be passed onto next chain and thus cannot be accessed directly and requires chaining. 55 | 56 | }) 57 | .then((username)=>{ //Chaining 58 | console.log(username); 59 | 60 | }) 61 | .finally(()=> console.log("Executed Finally")) //By default {jo hoga woh print /execute kardenge } -------------------------------------------------------------------------------- /Promise2/pr.js: -------------------------------------------------------------------------------- 1 | //======================================== Promise (Part 2)========================================= 2 | const promise5=new Promise(function(resolve,reject){ 3 | setTimeout(function(){ 4 | let error=false 5 | if(!error){ 6 | resolve({name:"Rabindra",friend:"Shaktiwell"}) 7 | } 8 | else{ 9 | reject("JS went wrong somewhere.") 10 | } 11 | },1000) 12 | }) 13 | 14 | //using async instead of then 15 | async function consumepromise5(){ 16 | const rep =await promise5 17 | try{ //Using try and catch block for safety 18 | console.log(rep.friend); 19 | }catch(err){ 20 | console.log(err); 21 | 22 | } 23 | 24 | } 25 | consumepromise5() //Calling the function 26 | 27 | //========================== Method 2 ==================================== 28 | async function getAllusers(){ 29 | try{ 30 | const response=await fetch('https://jsonplaceholder.typicode.com/users') //we can use async without await 31 | const data= await response.json() 32 | console.log(data); 33 | 34 | } 35 | catch (error){ 36 | console.log(error); 37 | 38 | } 39 | } 40 | getAllusers() -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | JavaScript Image 2 | 3 | 4 | -------------------------------------------------------------------------------- /TypeConversion.js: -------------------------------------------------------------------------------- 1 | let score='33' 2 | console.log(typeof score); 3 | console.log(typeof (score)); 4 | let valueinNumber = Number(score) 5 | console.log(typeof valueinNumber); 6 | console.log(valueinNumber); 7 | // Case study two 8 | let score1='33ab' 9 | console.log(typeof score); 10 | console.log(typeof (score)); 11 | let valueinnumber1=Number(score1) 12 | console.log(typeof valueinnumber1); 13 | console.log(valueinnumber1); 14 | -------------------------------------------------------------------------------- /arrays.js: -------------------------------------------------------------------------------- 1 | //**************************************** Arrays ************************************************* 2 | 3 | const myArr1 = [0,4,56,33,'Rabindra '] //Collection of multiple items in a single variable 4 | 5 | // Arrays in Js are resizeable unlike c++ 6 | console.log(myArr1) 7 | console.log(myArr1[2]); 8 | 9 | //Arrays create a shallow copies 10 | 11 | //Method2 to declare a Array 12 | 13 | const myArr2=new Array(1,2,3,4) 14 | 15 | //Length of an array 16 | console.log(myArr1.length); 17 | 18 | // Push() in my array 19 | myArr2.push(6) //Adds at the last 20 | console.log(myArr2); 21 | 22 | //pop() removes the latest element in the array 23 | myArr2.pop() 24 | console.log(myArr2); 25 | 26 | 27 | //Unshift() adds element at the first of the array and shifts remaining element thus time consuming operation 28 | myArr2.unshift(5) 29 | console.log(myArr2); 30 | 31 | //Similarly we have shift operation ie.Remove the first element 32 | myArr2.shift() // No argument required 33 | console.log(myArr2); 34 | 35 | // Finding index & whether the element is presetn in the array or not 36 | console.log(myArr1.includes(4)); 37 | console.log(myArr1.indexOf(2)); // Since two is not present iska output index will be -1 38 | 39 | 40 | //======== Join () ============================== 41 | const newarr=myArr1.join() // Combines and joins all elements of a array but returns a string Datatypes 42 | console.log(newarr); 43 | 44 | 45 | 46 | //------------------ Slice & Splice ----------------------------------------- 47 | 48 | console.log("A",myArr1); 49 | const myn1=myArr1.slice(1,3) // It will include index 1,2 3 excluded 50 | console.log("B",myArr1, myn1); 51 | 52 | 53 | //Splice() 54 | //Manipulates original array ie. removes the the spliced elements from original element and in this range is included 55 | const Splice=[0,34,5,6,4,2] 56 | newsplice=Splice.splice(1,3) 57 | console.log(Splice); -------------------------------------------------------------------------------- /arrays2.js: -------------------------------------------------------------------------------- 1 | //========================= Arrays Part 2 ========================================== 2 | const marvel_heros=['thor','Ironman','spiderman'] //String can either be written in '' or "" quotes 3 | const dc_heros=['Superman','flash','batman'] 4 | 5 | 6 | //Puchong a complete string into another string 7 | marvel_heros.push(dc_heros); 8 | console.log(marvel_heros); 9 | // It will push it as single element of array ['thor','Ironamn','spiderman',['Superman','flash','batman']] 10 | marvel_heros.pop() 11 | 12 | 13 | const allheros= marvel_heros.concat(dc_heros) 14 | console.log(allheros); // Now this concatenates exactly 15 | //Note concat function does not modifies the existing array only returns a new array 16 | 17 | 18 | // Spread Operator easier way than concat 19 | const allnewheros= [...dc_heros,...marvel_heros] // we mostly used spread operator. 20 | console.log(allnewheros); 21 | 22 | 23 | // Array's ke andar Arrays 24 | const another_arr=[1,23,4,[4,5,6],[6,7,[4,5]]] 25 | 26 | const real_another_array= another_arr.flat(2) //Here we can also give input as Infinity flat will recursively combine array element into 1 and here we need to mention the depth of our recursion here we choose 2 becasue we had array ke andar array 27 | console.log(real_another_array); 28 | 29 | //isArray() checks whether It is an array or not eg: 30 | console.log(Array.isArray('Rabindra')); // will return true/False 31 | 32 | //Simiarly we can also conver object, strings into array 33 | console.log(Array.from("Rabindra")); 34 | 35 | 36 | console.log(Array.from({name:"Rabindra"})); // Giving Object to converted into Array 37 | 38 | let score1=100 39 | let score2=200 40 | let score3=300 41 | 42 | // of function : Returns a new element from set of elements 43 | console.log(Array.of(score1,score2,score3)); -------------------------------------------------------------------------------- /comparison.js: -------------------------------------------------------------------------------- 1 | // Comparison of same datatypes 2 | console.log(2>1) 3 | console.log(2==2) 4 | console.log(56<=589) 5 | console.log(45<40) 6 | // Problematic comparisions ie. All these are unpredictable 7 | console.log(null>0) 8 | console.log(null==0) 9 | console.log(null>=0) 10 | console.log(undefined==0) 11 | -------------------------------------------------------------------------------- /control Flow 1/Switch.js: -------------------------------------------------------------------------------- 1 | // switch(key) 2 | // { 3 | // case value: 4 | // break; 5 | // default: 6 | // break; 7 | // } 8 | const month=3 9 | switch(month) //Break is zaruri hai because jaha par bhi match hojaayega uske baad ka saara code run hoga irrespective of the value.except default 10 | { 11 | case 1: 12 | console.log("January"); 13 | break; 14 | case 2: 15 | console.log("February"); 16 | break; 17 | case 3: 18 | console.log("March"); 19 | break; 20 | case 4: 21 | console.log("April"); 22 | break; 23 | case 5: 24 | console.log("May"); 25 | break; 26 | case 6: 27 | console.log("June"); 28 | break; 29 | case 7: 30 | console.log("July"); 31 | break; 32 | case 8: 33 | console.log("August"); 34 | break; 35 | case 9: 36 | console.log("September"); 37 | break; 38 | case 10: 39 | console.log("October"); 40 | break; 41 | case 11: 42 | console.log("November"); 43 | break; 44 | case 12: 45 | console.log("December"); 46 | break; 47 | default: 48 | console.log("Invalid Number") 49 | break; 50 | } -------------------------------------------------------------------------------- /control Flow 1/if.js: -------------------------------------------------------------------------------- 1 | // ============================ IF ============================== 2 | //Syntax : if(condition){ } Condition must be true 3 | const user={ 4 | username:"Rabindra", 5 | Loggedin:true, 6 | age:23 7 | } 8 | if (user.Loggedin) 9 | { 10 | console.log(`${user.username} is LoggedIN and age is ${user.age}`); 11 | 12 | } -------------------------------------------------------------------------------- /control Flow 1/ifelse.js: -------------------------------------------------------------------------------- 1 | const temperature=41 2 | if (temperature <40){ 3 | console.log('Not so Hot'); 4 | 5 | } 6 | else{ 7 | console.log("It's too Hot"); 8 | 9 | } 10 | //=========== Nested If Else ================= 11 | const balance=1000 12 | if (balance<500) 13 | { 14 | console.log("Balance less than 500 "); 15 | 16 | } 17 | else if(balance <750) 18 | { 19 | console.log("Balance less than 750"); 20 | 21 | } 22 | else{ 23 | console.log('Balance more than 750'); 24 | 25 | } 26 | 27 | //Creating a User login id for an website 28 | const userLoggedIn=true 29 | const debitcard=true 30 | const loggedInFromGoogle=false 31 | const loggedInFromemail = true 32 | // Both must be true for shopping 33 | if(userLoggedIn && debitcard) // If any one is false it becomes false 34 | { 35 | console.log('user is allowed to do Shopping '); 36 | 37 | } 38 | if (loggedInFromGoogle || loggedInFromemail){ 39 | console.log("User is LoggedIn"); 40 | 41 | } -------------------------------------------------------------------------------- /control Flow 1/truthy.js: -------------------------------------------------------------------------------- 1 | //============================= Understanding Truthy Value ============================================= 2 | const email="Rabindra@gmail" //Will automatically be considered as True 3 | if (email){ 4 | console.log("Got User Email"); 5 | } 6 | else{ 7 | console.log("Not got user Email"); 8 | 9 | } 10 | const new_email="" //Will be considered as false 11 | if (new_email){ 12 | console.log("Got User Email"); 13 | } 14 | else{ 15 | console.log("Not got user Email"); 16 | 17 | } 18 | //===================== Falsy Values =============================== 19 | // false,0,-0,null,undefined,Nan,"",BigInt on (Rest all truthy Values) 20 | 21 | //===================== Interview truthy values ===================== 22 | // "False","0","Undefined",[],{}," ", empty function ie. Function() { } 23 | 24 | // Checking empty array 25 | const arr=[] 26 | if(arr.length===0) 27 | { 28 | console.log("Empty Array"); 29 | } 30 | else{ 31 | console.log("Not an Empty Array"); 32 | 33 | } 34 | 35 | 36 | //Checking for an Empty Object 37 | const empty={} 38 | if (Object.keys(empty).length===0){ 39 | console.log("Given Object is Empty"); 40 | 41 | } 42 | else{ 43 | console.log("Given Object is not Empty"); 44 | 45 | } 46 | 47 | 48 | //Nullish Coalescing Operator (??) null??Undefined [Used for type safety in case of nullor undefined values] 49 | let val1; 50 | val1=5??10 // first non null value get assigned 51 | console.log("Val1",val1); 52 | 53 | let val2; 54 | val2=null??50 55 | console.log("Val2",val2); 56 | 57 | let val3=undefined??33 58 | console.log("Val3",val3); 59 | 60 | 61 | //============================= Terniary Operator ============================== 62 | //Syntax: Condition ? true:False 63 | const price=100 64 | price<=100?console.log("Price is less than 100"):console.log("Price is Greater than 100"); 65 | ; 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /control Flow 2/Filter.js: -------------------------------------------------------------------------------- 1 | //Filter method will also return the values 2 | const arr=[23,1,4,7,8,10] 3 | m=arr.filter( (n)=> n>6) 4 | console.log(m); 5 | 6 | //Understanding the chaining concept 7 | console.log(arr); 8 | k=arr.map((n)=> n+2).map((n)=> n*2) 9 | console.log(k); 10 | 11 | //ek chain ka result will be passed on to another chain.chaining can be of any length -------------------------------------------------------------------------------- /control Flow 2/For Loop.js: -------------------------------------------------------------------------------- 1 | // for 2 | for (let index =0;index<10;index++){ 3 | const element=index; 4 | if (element == 5){ 5 | console.log("5 is the best Number"); 6 | 7 | } 8 | console.log(element); 9 | } 10 | //we will not have any acess of the element variable outside the loop 11 | 12 | // Loop ke andar loop 13 | for (let i=0;i<3;i++){ 14 | console.log(`Outer loop Value:${i}`); 15 | for(let j=0;j<3;j++){ 16 | console.log("Value j",j); 17 | 18 | } 19 | 20 | } 21 | 22 | let myarray =["Rahul Chauhan","Utkarsh Roy","Himanshu Jha","Ayush pandey","Shiwam Tiwari","Dasrath Patel","Vivek Shah","Shan","Kanishk Mandrelia","Shiwam Mamgain","Aman Gupta","Aman Singh","Sharukh Syyed"] 23 | for (let index = 0; index < myarray.length; index++) { 24 | const element=myarray[index]; 25 | console.log(element); 26 | } 27 | 28 | // Keywords: Break,continue these are used to manipulate Break and Continue 29 | 30 | //understanding Continue Statement 31 | for (let i=0;i<4;i++){ 32 | if (i=== 2){ // continue ke baad woh iteration ke liye aage run nhi hoga 33 | continue; 34 | } 35 | console.log(i); 36 | 37 | } 38 | 39 | //understanding Break 40 | for (let i=0;i<4;i++){ 41 | if (i=== 2){ // 0,1 hi print hoga 42 | break; 43 | } 44 | console.log(i); 45 | 46 | } -------------------------------------------------------------------------------- /control Flow 2/Reduce.js: -------------------------------------------------------------------------------- 1 | //================================= Reduce() ======================================================== 2 | // Reduce it is a reducer callback function. 3 | //Has an accumulator and currentValue along with the InitialValue 4 | //In first iteration intinalvalue is passed onto accumulator 5 | //Afterwards result of accumulator and currentvalue gets stored in Accumulator 6 | //CurrentValue denotes current iteration ka value while accumulator is a free empty variable eg; 7 | const myNums=[1,23,4] 8 | let result=myNums.reduce( (acc,cv)=>{ 9 | return acc+cv; 10 | }, 0) //Here 0 is an Accumulator. 11 | console.log(result); 12 | 13 | //Method2 14 | const arr=[1,2,3] 15 | initialvalue=0 16 | let m=arr.reduce( (accumulator,currentValue)=>accumulator+currentValue,initialvalue); 17 | console.log(m); 18 | 19 | -------------------------------------------------------------------------------- /control Flow 2/for each.js: -------------------------------------------------------------------------------- 1 | //==================== for each it is an callback function ======================================= 2 | //It does not returns anything (V.V IMP) 3 | const coding =['js','python','swift'] 4 | coding.forEach( function(val){ 5 | val+=" Wow" 6 | console.log(val); 7 | 8 | }) 9 | 10 | //Using Array Function 11 | coding.forEach( (num)=>{ 12 | console.log(num +1) 13 | }) 14 | //forEach also gives us multiple things ie.item,index,arrlist 15 | const mynum=[23,45,56,78] 16 | mynum.forEach( (num,index,a)=>{ 17 | console.log(num,index,a); 18 | 19 | }) 20 | 21 | // Arrays ke andar objects 22 | const arr=[ 23 | { 24 | name:"Rahul", 25 | gender:"Male" 26 | }, 27 | { name:"Priyanka", 28 | gender:"Female" 29 | 30 | } 31 | ] 32 | arr.forEach( function (item){ 33 | console.log(item.name); 34 | 35 | }) 36 | 37 | 38 | 39 | //Map() callback function similiar to foreach but returns the value (Preferable by my sir) 40 | const number=[1,2,3] 41 | newnum=number.map( (n)=>{ 42 | return n+10 43 | }) 44 | console.log(newnum); 45 | -------------------------------------------------------------------------------- /control Flow 2/for-in Loop.js: -------------------------------------------------------------------------------- 1 | // for in loop can be used to iterate over a object 2 | const user={ 3 | name:"Rabindra", 4 | age:23 5 | } 6 | for (i in user){ //It will only print the keys of the object 7 | console.log(i); 8 | 9 | } 10 | //For printing the values 11 | for (i in user){ 12 | console.log(user[i]); 13 | } 14 | 15 | //It can also be applied on array 16 | let arr=['Rabindra','Ayush Pandey','Himanshu Jha'] 17 | for (i in arr){ 18 | console.log(arr[i]); 19 | } 20 | // Cannot be applied on map 21 | const map=new Map() 22 | map.set("1",'India') 23 | map.set("1","Russia") 24 | map.set("3","China") 25 | for (i in map){ 26 | console.log(i); 27 | 28 | } -------------------------------------------------------------------------------- /control Flow 2/for-of Loop.js: -------------------------------------------------------------------------------- 1 | arr=[23,'rabindra',45,56] 2 | 3 | for ( const num of arr ){ 4 | console.log(num) 5 | } 6 | //Applying this on string 7 | const greet="Good Morning, Utkarsh" 8 | for (let i of greet){ 9 | console.log(i); 10 | 11 | } 12 | for (let i in greet){ //For in will giv ethe index 13 | console.log(greet[i]); 14 | 15 | } 16 | // Objects are not iterable using for of loop 17 | const map = new Map() 18 | map.set("Roy",1) 19 | map.set("Jha",2) 20 | map.set("Mishra",3) 21 | map.set("Singh",4) 22 | map.set("Yadav",5) 23 | console.log(map); 24 | //Applying Iteration on map 25 | for (let [key,value] of map){ //This is called as destructuring of map 26 | console.log(`Key: ${key} ->${value}`); 27 | 28 | } 29 | 30 | //Destructuring of map is required otherwise it will give output in the form of arrays eg. 31 | for(const i of map){ 32 | console.log(i,typeof i); 33 | 34 | } 35 | -------------------------------------------------------------------------------- /control Flow 2/while loop .js: -------------------------------------------------------------------------------- 1 | index=0 2 | while(index<6){ 3 | console.log(index) 4 | index+=2 5 | } 6 | //Applyying while loop on array 7 | const arr=["Chandan Choudhary","Roshan Jha","Saurabh Mishra","Bivek Mishra","Raunak Thakur"] 8 | let a=0 9 | while(ains 15 | console.log(ins); // This is called as destructure 16 | //eg: In React we use destructuring this way 17 | // const navbar = ({}) =>{ 18 | 19 | // } 20 | // navbar(company="Rabindra") 21 | 22 | 23 | 24 | //=========================================================== API ================================================= 25 | //In short Apna kaam dusre ke sar par daalna e: waiter ko vada pav lane bola 26 | //Backend values aati hai JSON pehle XML mai aati thi which used to be very complex. 27 | 28 | 29 | //JSON Structure (Keys also as string and values also as a string except Numbers) 30 | // { 31 | // 'name':"Rabindra", 32 | // 'course':"This is JS" 33 | // } 34 | [ //Sometimes you can also get array of Objects as a JSON File. 35 | {}, 36 | {}, 37 | {} 38 | ] 39 | //We can use various tools like JS Formatter to beautify long JSON Format file. -------------------------------------------------------------------------------- /string.js: -------------------------------------------------------------------------------- 1 | const name="Rabindra" 2 | const repoCount=50; 3 | //console.log(name + repoCount + " Value") However this is not recommended 4 | // String Interpolation 5 | 6 | console.log(`Hello, my name is ${name} and my repo count is ${repoCount}`); 7 | 8 | //Method2 o fdeclaring a string 9 | const gamename=new String('RabindraM') // Here it will create object 10 | console.log(gamename) 11 | console.log(gamename[0]); 12 | console.log(gamename.__proto__); // Gives an Object 13 | 14 | // important Methods of String 15 | console.log(gamename.length) 16 | console.log(gamename.toUpperCase()); // It is a Function but it will not change original value 17 | 18 | // Finding characters based on Index 19 | console.log(gamename.charAt(2)); // It will tell which character is at index 2 20 | SSS 21 | // Finding index based on character 22 | console.log(gamename.indexOf('a')) 23 | 24 | // Please do a String documentation from mdn after running it from console 25 | 26 | const newString=gamename.substring(0,4) // zero se 3 tak ke characters return hoga , Always starts with zero if neagtive input given 27 | console.log(newString); 28 | 29 | const anotherString=gamename.slice(0,4) //Can also give give negative index in slixe function 30 | 31 | 32 | const newStringOne=" Rabindra " //in this case this extraspaces are unnecessary 33 | console.log(newStringOne.trim()); // Browser Compatibility 34 | 35 | 36 | 37 | // Replace Function 38 | const url= "https://en.wikipedia.org/wiki/ Twitter" // There ar echances that your url may contain spaces hence browser does not understand this spaces and replace them with numbers and thus creates problems. eg "https://en.wikipedia.org/wiki/%24Twitter" 39 | console.log(url.replace(' ','-')); 40 | 41 | // Finding certain key word exist or not in a string 42 | console.log(url.includes('Twitter')) 43 | 44 | // Converting our string object into array using split function 45 | const arr=url.split('-') 46 | console.log(arr); --------------------------------------------------------------------------------