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 |
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 |
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);
--------------------------------------------------------------------------------