Before Template literal

In programming we used string data type with alot of time. to print something we need string format . to show output in formatted way we need string . so before template literal we have to combine the string with plus (+) sign which is called string concatenation in programming .

lets see some examples :

we need to concatenate the variable with using plus operator to add two to more strings before template literal .

Benefits of Template Literals

The template literal solve mainly two problems:

1. string concatenation /string interpolation : we can do string interpolation just by using placeholders with like this ${}.

2. multi-line stings : this is huge benefits to use template literals to format the string in any format . It print same to same however you write inside the back ticks.

3. we can embed any variable and calculation inside the template literals

Reasons of bringing it

• Simplifying Concatenation: Previously, developers had to rely on the + operator to join strings and variables, which led to "cluttered" code that was difficult to read and maintain. Template literals allow direct variable embedding via ${}.

• Enabling Native Multi-line Support: In older versions of JS, you had to manually insert \n or use awkward concatenation to break a string into multiple lines. Template literals preserve line breaks and whitespace exactly as they are written.

• Reducing "Quote Clash": Using single and double quotes inside a string often required tricky backslash escaping (e.g., \' or \"). Since template literals use backticks (`), they can contain both types of quotes naturally.

• Advanced Processing (Tagged Templates): They introduced tagged templates, which allowed developers to process strings with a function before they were rendered. This innovation paved the way for powerful tools like Styled Conponents and GraphQL queries.

• Modernizing Functionality: JavaScript's string capabilities were lagging behind languages like Python or Ruby; template literals brought the language's string manipulation up to a competitive modern standard.

Summary

The template literal is introduced to remove the the messy and error prone while writing the string concatenation burden from developer. before it the developer nedd to think double times how to format it where to keep plus sign and space more frustration seems in developer. so template literal make easy that task . It helps to develop the dynamic content and multi line formatting easier.

What is Flatten means ?

Flatten array means converting nested arrays of many dept to single level array

Why we need to do that ?

Generally The developer who works in frontend need to show data which is coming from api to UI so . They prefer to come response in easy data structure as much as possible. when there is single level array then there are more easy to process data

• Looping through data becomes easy

• Easier to apply array methods like map, filter

• Easier to get required data from array and show on UI

• performance wise also single level array is good

Examples

const arr = [1, 2, [34, 10], [7, 9, [100]]];
console.log(arr); //[ 1, 2, [ 34, 10 ], [ 7, 9, [ 100 ] ] ]
console.log(arr.flat(Infinity)); // to flatten to more depth
// [ 1, 2, 34, 10, 7, 9, 100 ]

Different ways to flatten array

1 . using built in flat method

we can directly use flat array methods. It accepts depth of nested to give flatten output.

const alphas = ["a", "b", ["c"], ["d", ["e", ["f", ["g"]]]]];
console.log(alphas.flat(1)); // one level
console.log(alphas.flat(2)); // 2 level depth
console.log(alphas.flat(4)); // 4 level depth

/**
 *  [ "a", "b", "c", "d", [ "e", [ "f", [ "g" ] ] ] ]
[ "a", "b", "c", "d", "e", [ "f", [ "g" ] ] ]
[ "a", "b", "c", "d", "e", "f", "g" ]
 */

2 . using recursion

This is asked in interview . Just use recursion function to flatten array

//  using recursion
const flatten = (arr) => {
  return arr.reduce((acc, arr) => {
    return acc.concat(Array.isArray(arr) ? flatten(arr) : arr);
  }, []);
};

console.log(flatten(alphas));
// [ "a", "b", "c", "d", "e", "f", "g" ]

3 . using flatMap

it does two works flat + map . it only flatten array to one level

const result = [1, 2, [3, 4], [5, 6]].flatMap((i) => i);
console.log(result);
// [ 1, 2, 3, 4, 5, 6 ]

4 . using loop and spread

const flatResult = [];
for (let el of nums) {
  if (Array.isArray(el)) {
    flatResult.push(...el);
  } else {
    flatResult.push(el);
  }
}
console.log(flatResult);

Common Interview Questions

1 . Flat deeply nested array without flat()

using recursion

2 . Flatten array with unknown depth

use Infinity depth

array.flat(Infinity)

3 . Flatten and remove falsy values

arr.flat(Infinity).filter(Boolean)

Diagram showing recursion of flatten array

Summary

Flatten is process of converting the nested array of many depth into the one level or any required depth. There are different ways of doing flattening the array in JavaScript.

There is built in array method flat method which do shallow or deep flatten according to depth provide to it.

without using built in methods we can flatten the array by using recursive function call .

Just think when that huge lines of codes when written in only one file then how it possible to maintain the code . and also there will be very difficult to understand the code. and also when the files push into production , the one file is huge size which effect in performance.

In this article I discussed about the concept of modules and how it done in JavaScript.

Introduction about modules system

module means simple file it will be any file with any extension but we are in JavaScript. so Lets say the different JavaScript files which are created and handle properly and all files are interconnected on system so they can share and used code into one another file is modules system.

Problems without modules

problems are simple . The file size increase which becomes more complex o handle and we donot have idea about the what this code files is about.

This makes harder to refactor code and also maintain it when some bug arise we have to look on deeper inside file and it takes more time on just finding the code .

so module sytem introduces in JavaScript .

How to use modules system

we can used simple by using two keywords : Import and export . By word we can guess the what is it used for . Import is used to import another file code and export is use to export the code so that other file can import it for use it .

Types of modules in JavaScript

• Asynchronous Module Definition (AMD)

• Common JS

• Universal Module Definition (UMD)

• ES Modules

The official JavaScript module is ES Modules System in which we used import and export keyword .

Problems on not using module system

The problems are listed below :

• Global Scope pollution : The variables, function declaration all are global scope means easily access in different script file which can cause name collision and also some variable may get override.

• No dependency management : we have to load all the scripts manually in index.html file and also remember the order of maintaining to load the script files like one after another . If order does not maintain the code files cannot be used in another file.

• Hard to maintain and reuse the code

Appling the module system

It is easy to apply module system just by add the attribute type module in script tag . The entry script file means the file which call all other modules like main.js

like shown on below image

Types of Export and Import

There are two types of export and import the files.

1. Default export : The default export is done by simple export default <code>. Here code placeholder is for any variables, function, object any code which you want to export from file.

2. Named export : The named export is done by simple using export keyword before any code like export let score =0; or there is another way of doing by simply write many codes like function, variable and at last used export {add,score} . like this this is also one way .

Note : The default export should be only one in one code files and there is as many named export .

while importing

• Default import is simple by just import <name_of_code> from "<filename.js>". We can give any name while importing default export in place of <name_of_code> .

• Named Import : while importing named export , The curly braces is used like import {add,score} from './calculation.js" . the name must be same in named export

Exporting the code

Importing the code

Conclusion

The module system enables to write modular code means the different pattern where one code files share the code and we can use in another files making the code files isoated from one another .

It encapsulate our variables and functions which makes it private in that file so there is no chance of conflicting the name of variable and function. and It makes our projects scalable and maintainable.

Introduction of NodeJS

Nodejs is created on 2009 by using the chrome Javascript engine which is V8. The main motive of bringing nodejs is that obviously to run javascript outside of browser. It enables the door for building server side application. It is used to build highly scalable, efficient networking applications by using its powerful non-blocking event driven model.

Dive into some reasons of arrival of nodejs

• Server-Side JavaScript: Initially JavaScript is used in client side on the browser. It is just used for making website interactive, so nobody take it seriously but when nodejs arrives it is fully capable to build highly performant server side application , for making scalable full stack data intrensic application.

• Non-blocking I/O model : In past time, the server was multi-threaded means the each operation takes dedicated thread to execute and finished which is inefficent for high concurrent operations so nodejs is single threaded, non-blocking event driven I/O model which is more suitable to handle multiple thousands of concurrent tasks easily like reading file system , database query etc.

• unified language: it is simple both client and server side can be now built by using single language JavaScript.

• performance: nodejs is buit bu using high perfomant chrome v8 engine which compiles the JavaScript code into machine code and fast executes it.

• Rich eco system : nodejs comes with npm package manager which enables access of world largest ecosystem of libraries , frameworks and tools which are used to build application really fast in sort period of time.

• Real Time Applications: It is non-blocking event driven I/O model so It is more suitable to build I/O bound applications and data-intrensic applications like web-server, chat application, collaborative tool, online games etc.

what is meant by non-blocking and event driven model

Non-blocking event driven I/O model means it initiate input/output operation, without waiting them to finish. It delegates or offloads the tasks to the underlying sytem (kernel) or threadpool by libuv. so when the operation finish, It executed the associated callback which makes its more fast, efficient, responsiveness making ideal for high concurrency environments like web-servers.

Non-blocking I/O means when your code request data like reading files or some network request. It does not wait for the result. The system return the control immediately allowing to execute the other code.

Event-Driven Architecture: The program operates by listening the events when I/O tasks finished, the underlying system kernel signal that event occurred .

Event Loop : It is main core coordinator. It keeps monitoring the new tasks or finished I/O tasks. when a task completed, the loop picks up the associated callback and execute to it.

Why this model ?

The reasons behind it are:

• Scalability : It can handle high concurrency connections without blocking the main thread, you can handle significantly more traffic than thread per request model.

• Efficiency: It eliminated the idle time . The CPU doesnot have to wait for the slow response from hard dirve or network request.

• Suitability: It is highly suited to build I/O bound applications like web severs, chat applications, streaming applications etc.

What is meant by I/O tasks

It is simple the program interaction with external environment like reading and writing file system, database query, network request or logging some files data.

Summary

Nodejs is JavaScript run time environment which is based on non-blocking event driven I/O model that means It doesnot wait for tasks to finished, rather it offloads the I/O task to underlying sytem kernel or threadpool by libuv.

It is most suitable for handling high concurrency tasks meaning different tasks at same time which increase the efficiency , responsiveness , resources utilization especially on I/O bound operations .

The OOP is introduced to organize the code to make it more flexible and easier to maintain the codebase. If you do not maintain and organize the code then It will be totally mess in large codebase. so there are few structure or practice of organizing code. One of the is OOP.

User {
user
password
email
login(password) {
// login logic
}
upoadPhoto() {
// logic
}

Four Pillars of OOP

There are main 4 pillar or concept of oop :

1. Abstraction : In simple word abstraction means hiding the implementation of logic. example like in DOM there are many selectors given in document object like querySelector, addEventListner, which we can used it instead of knowing its actual implementation . we only need to just used it .It is great way of abstract the some methods from user.

2. Encapsulation : It is just making some properties and methods private so that They cannot be accessed outside of class.

3. Inheritance : It is known from itself meaning to make some property and method inherit from parent class. In JavaScript It is done by prototype so that it is called prototypal inherotance.

4. Polymorphism : It is taken from greek word . Its meaning is many form so The implementation of same methods in different way in different objects

Ways of OOP in JavaScript

In JavaScript there are 3 ways of creating blueprint of object. The blueprint means designing the model of objects, It is not real objects. It is just like map from which any number of real objects can create. so

1 . Constructor function : It is most used way of creating blueprints for object. It is just regular function but it is called by using new operator. The new operator does 4 things .

• It create empty object .

• It links the empty object with this keyword so that we can create property on object by using this keyword .

• It assign the prototype of Object to newly created instance of objects with new keyword.

• It implicitly return the objects.

2 . Es6 class : It is just Syntactic sugar of constructor function . In JavaScript The class is not behave as other programming language like Java, C++ . Under the hood it is just wrapper which do the same thing of constructor function . It is just easy to write and cleaner way because we do not have to manually set the prototype in it .

3 . Object.create : It is the way of creating object. It doesnot use any new operator, any prototype object. It is simple way and also easy to understand the way of JavaScript handle the inheritance by prototype. It shows clear picture. we have to set manually which object you want to set as prototype.

Constructor Function

// constructor function 
function TataCar(chassisNumber, modelName) {
  this.chassisNumber = chassisNumber;
  this.modelName = modelName;
  this.fuelLevel = 100;
  
// adding method inside function
// this is bad practice
  this.start= function (){
    console.log("Engine start")
  }
  
}

const car1 = new TataCar("MH-101", "Nexon");
const car2 = new TataCar("DL-202", "Harrier");
console.log(car1) ;
car1.start() ;

We can add the methods inside the constructor function but it is bad practice because when you create any objects then the method created and copied that much times for object. so It is not good for memory and performance. suppose we have create 1000 objects then there are 1000 copies of that methods . Its make our website slow. so we used prototype for adding methods and also common properties.

Prototype is the object which JavaScript add to all objects which is constructed by constructor function . So any methods or properties which is not own property of object then it search to the prototype and used it .

function TataCar(chassisNumber, modelName) {
  
  this.chassisNumber = chassisNumber;
  this.modelName = modelName;
  this.fuelLevel = 100;
}

TataCar.prototype.status = function () {
  return `Tata \({this.modelName} #\){this.chassisNumber} | Fuel: ${this.fuelLevel}`;
};

const car1 = new TataCar("MH-101", "Nexon");
const car2 = new TataCar("DL-202", "Harrier");
console.log(car1.modelName);
console.log(car2.modelName);
console.log(car1.status());
console.log(car2.status());

Es6 Class

// Es6 class
class Person {
  constructor(firstName, email, birthYear) {
    this.firstName = firstName;
    this.email = email ;
    this.birthYear = birthYear ;
  }
  calcAge() {
    return new Date().getFullYear() - this.birthYear ;
  }
  introduce() {
    console.log(`Hi, Myself \({this.firstName} and I am \){this.calcAge()} years old `)
  }
  
}
const shekhar = new Person("Shekhar", "shekhar12@mail.com", 1995) ;
const prahlad = new Person("Prahlad", "prahlad@mail.com", 2004) ;
console.log(shekhar);
// Person {firstName: 'Shekhar', email: 'shekhar12@mail.com'}
console.log(shekhar.email) ;
// shekhar12@mail.com
prahlad.introduce() 
// Hi, Myself Prahlad and I am 22 years old 

we have to keep following things into mind :

• The class is not hoisted even it is wrapper of constructor function.

• The code inside class is always executed in strict mode.

Object.create

It is very easy methods to do prototype chain and prototypal inheritance. It helps to set the object as the prototype.

const PersonProto = {
  calcAge() {
    return new Date().getFullYear() - this.birthYear ;
  },
  init(firstName, email, birthYear) {
    this.firstName = firstName ;
    this.email = email ; 
    this.birthYear = birthYear ;
  }
  
}
const sunita = Object.create(PersonProto) ;
sunita.init("Sunita", "sunita@mail.com", 2000) ;
console.log(sunita) ;
// {firstName: 'Sunita', email: 'sunita@mail.com', birthYear: 2000}

Inheritance by Constructor function

We do inheritance in constructor by setting the prototype by using Object.create. This is shown in below code :

// Inheritance of constructor function 

function  Person(name,age) {
  this.name = name ;
  this.age = age ;
}

Person.prototype.introduce = function(){
  return `Hello, I am \({this.name} of \){this.age} years old` ;
}

function Student (name,age,course) {
  Person.call(this,name,age) ;
  this.cource = course;
}
// set Person prototype to Student prototype
Student.prototype = Object.create(Person.prototype) ;



Student.prototype.enrolled = function () {
  return `\({this.name} is enrolled in \){this.cource}` ;
}
// to set constructor function to Student
Student.prototype.constructor = Student ;

const dipesh = new Student("Dipesh Tharu", 23,"Cohort2026") ;
console.log(dipesh) ;
// Student {name: 'Dipesh Tharu', age: 23, cource: 'Cohort2026'}
console.log(dipesh.enrolled())
// Dipesh Tharu is enrolled in Cohort2026
console.log(dipesh.introduce())
// Hello, I am Dipesh Tharu of 23 years old

// lets see chain 
// dipesh.__proto__ === Student.prototype 
console.log(dipesh.__proto__);
// it is Student prototype
// {enrolled: ƒ}

console.log(dipesh.__proto__.__proto__);
// it is Person prototype
// {introduce: ƒ}
console.log(dipesh.__proto__.__proto__.__proto__);
// It is global Object prototype
// {__defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, __lookupSetter__: ƒ, …}
console.log(dipesh.__proto__.__proto__.__proto__.__proto__);
// it is null 
// null

Inheritance by Es6 class

It is most easier to implement inheritance by class just by using extends keyword and used super keyword to set prototype of parent class.

// inheritance in class syntax

class Person {
  constructor(name,age) {
    this.name = name ;
    this.age = age;
  }
  introduce(){
    return `Hey,\({this.name} is of \){this.age} years old` ;
  }
}
class Student extends Person {
  constructor(name,age,course){
    super(name,age) 
    this.course = course ;
  }
  enrolled(){
    return `\({this.name} has enrolled in \){this.course}`
  }
}
const mohan = new Student("Mohan" , 20, "Cohort 2026") ;
console.log(mohan.introduce()) ;
console.log(mohan.enrolled()) ;

Summary

This is the way of doing OOP in JavaScript. Class is easier to use but we must know the inheritance done by using prototypal chain and it is called prototypal inheritance.

It is defined as the collection of data by name- value pairs. It stores data in key-value pairs. The functionality is called the methods in objects.

Ways of creating Objects

There are various ways of creating objects in JavaScript. The mot used is Object literal . The ways are shown below .

// ways of creating objects 
// 1. Object Literal {}
cost car = {
    brand : "Toyota",
    model : "Corolla"
}

// 2.new Object()
const carObj = new Object();
carObj.brand = "Toyota";
carObj.model = "Corolla";

//3.constructor function 
function Car (brand, model) {
    this.brand = brnd;
    this.model = model;
}
const myCar = new Car("Toyota", "Corolla") ;

// 4.Es6+ class
class MyCar {
    constructor(brand,model){
        this.brand = brand ;
        this.model = model ;
    }
    
}
const anotherCar = MyCar("Tata", "Nexon")

Accessing Property

There are two ways to access property in object . by dot notation and square bracket . so What is difference between them know by following examples :

// Accessing property 

const hero = {
  name: "Luna the Brave",
  class: "Mage",
  level: 12,
  health: 85,
  mana: 120,
  isAlive: true,
};
// get any property 
console.log(hero.name) ;
console.log(hero.level) ;

// suppose you want to add property which has some space, symbol 
// then we used bracket notation
hero["game-win"] = true ;
console.log(hero["game-win"]) ;

Adding and Deleting Property

It is easy to add property just by giving name and assign value and if any property need to delete do by using delete keyword.

hero.weapon = "fire";
console.log(hero.weapon) ;

// delete the property with delete keyword
delete hero.class

Checking property present in object

There are various ways to check the property is present or not in object .

// checking property is present or not 

console.log(hero.mana !==undefined) // true means it is present 
// if you access any property if not present it gives undefined
console.log(hero.power) // undefined

// There is good way to check by using in 
console.log("power" in hero) // false
// one thing to keep in mind it also check in  prototype like
console.log("toString" in hero) // true

// The best way to check only own property is hasOwnProperty
console.log(hero.hasOwnProperty("toString")) //false

Methods in Objects

Like Objects has methods in JavaScript. If anything has methods that are object in nature . So In JavaScript It is called everything is object under the hood .

There are Object.keys, Object.values and Object.entries . These are methods . It used for getting keys, values or entries of objects like

// methods in objects

const artifact = {
  name: "Obsidian Crown",
  era: "Ancient",
  value: 50000,
  material: "volcanic glass",
};
// What are the data type comes in using these methods 
const keys = Object.keys(artifact)
console.log(keys)
// ['name', 'era', 'value', 'material']
// all keys in arrays 
console.log(Array.isArray(keys)) // true


const values = Object.values(artifact) ;
console.log(values) ;
//  ['Obsidian Crown', 'Ancient', 50000, 'volcanic glass']
// arrays of values

// getting entries
const entries = Object.entries(artifact) ;
console.log(entries) ;
//  [Array(2), Array(2), Array(2), Array(2)]
// nested array with [[key1,value1], [key2,value2]]

Looping Through objects

We know Object is non iterable. It means we cannot directly use for of loop in objects . so we have to take help of these methods like Object.entries to get array and then loop through it .

// loop through it 
for(let [key,value] of Object.entries(artifact)){
    console.log(`\({key} : \){value}`)
}
// name : Obsidian Crown
// era : Ancient
// value : 50000
// material : volcanic glass
// there is one loop we can used in object which is 

// for in loop
for(let key in artifact){
console.log(key)
console.log(artifact[key])
}

Suppose we need to convert nested array into object then we have methods that is Object.fromEntries() . It converts the output of entries back to object.

// there is array of nested array 
const priceList = [
  ["Obsidian Crown", 50000],
  ["Ruby Pendant", 30000],
  ["Iron Shield", 5000],
];
const priceObj = Object.fromEntries(priceList) ;
console.log(priceObj) ;
// {Obsidian Crown: 50000, Ruby Pendant: 30000, Iron Shield: 5000}

Object.freeze and Object.seal

We know object are created and stored as reference in JavaScript . so It is mutable . We can add, delete and update the property of objects so We can Control it . We can freeze the entire object so It cannot get update, delete and add any new property in it .

The main difference between them is After the Object.freeze The Object becomes immutable means we can not change, add, delete the property but after Object.seal We can only change the existing property . The delete and addition is not allowed .

// concept of Object.freeze and Object.seal
const displayCase = {
  artifact: "Obsidian",
  location: "Hall A, Case 3",
  locked: true,
};

// displayCase.locked = false
// console.log(displayCase) ;
// it get changed so 
Object.freeze(displayCase) ;
displayCase.locked = false
console.log(displayCase) ;
// no change now
displayCase.version = "1.2.3" ;
console.log(displayCase)
// means after Object.freeze we cannot mutate the objects

// Object.seal 
// it is the method which enable us to change only the existing property 


const catalogEntry = {
  id: "ART-001",
  description: "Ancient Crows",
  verified: true,
};

Object.seal(catalogEntry);
catalogEntry.verified = false ;
console.log(catalogEntry)
// it only change the existing property
catalogEntry.price = 200;
console.log(catalogEntry) ;
// no new property add

delete catalogEntry.id
console.log(catalogEntry)
// no delete property

Configuring the property

Sometimes we need to configure the property in object so that they can be loopable, writable or can delete .

// configuring the property 
const secureArtificats = { name: "Ruby Pendant" };
Object.defineProperty(secureArtificats, "catalogId" , {
    value:"SEC-999",
    writable:true,
    enumerable:false,
    configurable:true ,
})
console.log(secureArtificats) ;
// {name: 'Ruby Pendant', catalogId: 'SEC-999'}

• writable : It means the value of property can be change. if true then we can change the value otherwise not.

• enumerable : it is for looping by using for of loop

• configurable : If it is true then we can delete property and also redefine the attributes of like writable, enumerable if it is true .

// configuring the property 
const secureArtificats = { name: "Ruby Pendant" };
Object.defineProperty(secureArtificats, "catelogId" , {
    value:"SEC-999",
    writable:false,
    enumerable:false,
    configurable:false ,
})
// console.log(secureArtificats) ;
// {name: 'Ruby Pendant', catalogId: 'SEC-999'}
console.log(secureArtificats.catelogId);
secureArtificats.catelogId = "HACKED";
console.log(secureArtificats.catelogId);

for (const [key, value] of Object.entries(secureArtificats)) {
    // only print the property which is emunerable
  console.log(`\({key} : \){value}`);
}

// SEC-999
// SEC-999
// name : Ruby Pendant

// to check property is dexcription 
// we have getOwnPropertyDescriptor
console.log(Object.getOwnPropertyDescriptor(secureArtificats, "name"))
// {value: 'Ruby Pendant', writable: true, enumerable: true, configurable: true

Difference between object and array

The main difference is the way of storing data . In objects we store in key value pair. but in array we just give name . In array there we get indexing starting from 0 . we have length property but i n object there is no such property and all keys are either string or Symbol.

There is one thing when we give numbers as key in object then JavaScript sorted it in run time.

const obj = {
    5:"chocolate",
    20:"noodles",
    10:"Chips",
    2:"Nothing"
    
}
console.log(obj)
//{2: 'Nothing', 5: 'chocolate', 10: 'Chips', 20: 'noodles'}

Summary

This is all about object in JavaScript. It store data in name value pair. It is very easy to create and used in our program .

In JavaScript , There is If , else if and else and switch statement used for making decision and control the clow of program .

Statement Vs Expression

statement is the block of code that we do not store in variable. It is individually block and It do not return value. It may contain expressions. for examples like if-else, for loop etc.

expressions means the unit of code that resolved to result . like 2+3, name + " " + location

If , Else If , Else

This is classical syntax which is used for conditional in programming that is also in JavaScript. When the result of expression is true then if block execute and other than that else block execute .

if true then if block run and if we want to check more condition then else if run otherwise else run .

// if

let num = 7
if (num ===7){
    console.log("7 for a reson")
}
console.log("here is end") ;

// if-else 
// check positive and negative

num = -3; 
if(num > 0) {
    console.log("Number is positive") ;
} else {
    console.log("Number is negative") ;
}


// to check zero consitiin also 
// else if used 
num =0 ;
if(num > 0) {
    console.log("Number is positive") ;
}else if(num < 0) {
    console.log("Number is negative") ;
}else {
    console.log("Number is exactly zero") ;
}

If else and Switch Case

Both are used for conditional branching but they have different use cases and performance characteristics.

if-else :

it executes the code blocks on the basis of boolean conditionals. They are versatile and can handle complex conditions with operators .

let score = 78 ; 
// score is sequentially check \
if(score >=90) {
    console.log("Grade A") ;
}else if (score >=80) {
    console.log("Grade B") ;
}else if(score >=70) {
    console.log("Grade C") ;
}else if(score >=60) {
    console.log("Grade D")
}else {
    console.log("Fail")
}
    

Advantages :

• It is versatile and can be used to handle complex logic conditions including operators.

• It is easier to use with simple and small set of conditions.

Disadvantages :

• It can be slower for large conditionals as it execute sequentially.

• It will be hard to read and maintain for nested conditions.

Switch Case :

It is used to execute the blocks of code for multiple options based on the value for single expressions. like

let days = 6;
switch(days) {
    case 1 :
        console.log("Sunday") ;
        break;
    case 2 :
      console.log("Monday") ;
      break;  
    case 3 :
        console.log("Tuesday") ;
        brak ;
    case 4:
        console.log("Wednesday") ;
        break;
    case 5 :
        console.log("Thursday") ;
        break;
    case 6 :
        console.log("Friday") ;
        break;
    case 7 :
        console.log("Saturday") ;
        break;
    default :
        console.log("Invalid day") ;
        
}

///////////////////////////////////////////////////
let day ="friday"
switch (day) {
        // can handle multiple case if you want to execute same code 
        // for multiple cases
        // if you do not break 
        // if faLL to the next case until found break
        
    case "saturday":
    case "sunday" :
        console.log("Cohort class");
        console.log("Weekend") ;
        console.log("Learning and Coding Day") ;
        break;

    case "monday":
    case "tuesday":
     console.log("Assignment day") ;
        break;
    case "wednesday" :
        console.log("Blog Day") ;
        break;
    case "thursday":
        console.log("T-Class Day") ;
        console.log("Bonus session and How to use brain to remember anything") ;
        console.log("By Akash Sir @yntp") ;
        break;
    case "friday" :
        console.log("Peer Class Day") ;
        break;

    default :
        console.log("Enjoy day");
  
}

Advantages:

• It is fast for larger conditions as it use jump table.

• It is easier to read and maintain multiple conditions.

Disadvantages :

• It can only used for equality. It does not used for complex logical expressions.

• We have to use break statement carefully to prevent unintended fall-through.

When to use which :

It is simple. If you need to handle complex logic building which includes large number of logical expressions then you can go with if else .

but if you need to choose one among the multiple options and it is to check equality then this is proper place to use switch case.

Most of time 99 .5% of time we go through if else if statement.

Truthy and Falsy Values

In JavaScript there is concept of truthy and falsy because we can give any thing as value in conditional . Truthy means the boolean value comes true on conversion of values . same for falsy it gives false . The falsy values are :

• false

• 0 , -0, 0n

• "", '', ``

• null

• undefined

• NaN

• document.all

These are falsy values which return false on conditionals . Besides these all are truthy in JavaScript like [], {}, "0", true etc.

Summary

This is all about conditional control flow in JavaScript. It is used to handle logical expressions and used to execute code on the basics of decisions in programming, It is used to build complex logic and easy to handle block of code on the basis of our logic.

Ways of creating date in JavaScript

There are 4 ways of creating date.

1. simple using new Date() . It gives current date and time based on your system timezone.

2. using string like new Date("Mar3, 2026")

3. using numbers arguments like new Date(2026, 2,3,10,20)

4. using timestamps new Date(Date.now())

// 4 ways of creating date 

const now = new Date() ;
 console.log(now) ;  // Tue Mar 03 2026 11:03:05 GMT+0545 (Nepal Time)

// by string format 
 console.log(new Date("Mar 03, 2026")) ;
 console.log(new Date("2026-3-3")) ;
 console.log(new Date("feb 28, 2026")) ; // Sat Feb 28 2026 00:00:00 GMT+0545 (Nepal Time)
 console.log(new Date("feb 30, 2026")) ;  
// JS does auto correct the date 2 days in march
 // Mon Mar 02 2026 00:00:00 GMT+0545 (Nepal Time)
// console.log(new Date("3/3/2026")) ; // avoid using may behave differently in different browsers

// 3.by numbers arguments

console.log(new Date(0)) 
// this gives from where JS start to calculate timestamp 
// Thu Jan 01 1970 05:30:00 GMT+0530 (Nepal Time) 
// any invalid arguments give same data Jan 01, 1970

console.log(new Date(2026, 10, 29, 1, 10)) 
// year , month, day, hours, minutes, seconds
// month is 0 based 

// 4. by timestamps
// to get current timestamps calculate from Jan 01 , 1970
console.log(Date.now()) // 1772515848019
console.log(new Date(1772515848019))

Date Objects

There are many methods to get year, month, day, hours, minutes , seconds and many date related info .

// methods in Date

const now = new Date() ;
// gives current date and time 

// to get year use getFullYear
console.log(now.getFullYear()) // 2026
console.log(now.getMonth())  // 0 based 0 = Jan 
console.log(now.getDate())  // day of months
console.log(now.getDay())  // day of weeks 0 = sun
console.log(now.getHours())  // get hours
console.log(now.getMinutes())  // get minutes
console.log(now.getSeconds())  // get seconds
console.log(now.getTime())   // give timestamps
console.log(Date.now()) // fast way to get current timeStamps

Different Date Formatting Style

There are so many ways to show date format .

// formatting date
console.log(now) ; 
console.log(now.toString()) ;  
// it is defult way of showing date
// same as new Date()
// it gives long string with date and time 
// not ideal for UI 

console.log(now.toDateString()) ; 
// it gives only date
// Tue Mar 03 2026
// weekday month day year

console.log(now.toTimeString()) ; 
// it gives time  with time zone
// 12:11:58 GMT+0545 (Nepal Time)

console.log(now.toLocaleString());
// it is most useful 
// it gives date and time based on your locale like "en-us"
// 3/3/2026, 12:14:05 PM

console.log(now.toLocaleDateString());
// locale date 
// 3/3/2026

// similarlt to get locale time
console.log(now.toLocaleTimeString());
// 12:16:22 PM

console.log(now.toISOString())
// 2026-03-03T06:31:57.682Z

console.log(now.toUTCString())
// Tue, 03 Mar 2026 06:33:02 GMT

// custom ways of showing date

const month = String(now.getMonth()).padStart(2, "0");
const day = String(now.getDate()).padStart(2,"0") ;
const year = now.getFullYear()
// dd-mm-yyy
const formatted = `\({day}/\){month}/${year}`;
console.log(formatted) // 03/02/2026

// custom date 
console.log(now.toLocaleDateString()) 
// depends upon on your locale it gives date
// 3/3/2026

// now format it 
const formatDate = now.toLocaleDateString("en-US", {
    year:"numeric",
    month:"short",
    day:"2-digit"
})
console.log(formatDate)
// March 3, 2026
// month : "short" || "long" || "narrow"
// year, day : "numeric" , "2-digit"

// Date and Time Together 
console.log(now.toLocaleString())
// 3/3/2026, 12:32:48 PM

const formatDateAndTime = now.toLocaleString("en-US", {
    year:"numeric",
    month:"long",
    day:"2-digit",
    hour:"2-digit",
    minute:"2-digit",
    second:"2-digit"
})

console.log(formatDateAndTime)
// March 03, 2026 at 12:35 PM

// in YYYY-MM-DD API friendly 
console.log(now.toISOString())
// 2026-03-03T06:52:33.070Z
// now split on basis of T
console.log(now.toISOString().split("T")[0]) // 2026-03-03

// Time format 
const formatTime = now.toLocaleTimeString("en-US", {
    hour:"2-digit",
    minute:"2-digit",
    hour12 : false
})
console.log(formatTime)
// 12:40

// Locale is in format lie language-country
console.log(navigator.language) // to check locale on your system
// every locale has different style

console.log(now.toLocaleDateString("en-US")) // 3/3/2026
console.log(now.toLocaleDateString("en-GB")) // 03/03/2026
console.log(now.toLocaleDateString("de-DE")) // 3.3.2026

//Locale tells JavaScript how people in a specific country display dates, numbers, and text.

// JavaScript Date internally stores time in UTC.
// it is standard global time doesnot depend on yor country timezone
// your system clock offset

// MongoDB stores time in toISOString format 
// it ends with Z

Operation with Date

we can add and subtract date . The Date converts into timestamps when you convert date into numbers so It can be add and subtract.

// operations in date
const date1 = new Date();
const date2 = new Date("2026-03-04")
const diff = date2 - date1
console.log(diff) 
console.log(Math.round(diff/(1000 * 60*60*24))) // 1
console.log(date2 > date1) // true
console.log(date2 < date1) // false
// 60609462 
// it is in milliseconds
// convert into days by dividing with (1000 * 60*60*24)

Problems with Date handling in JavaScript

Date combines date, time , timezone, timestamp all in one object when you call new Date().

• TimeZoe confusion

• Month are 0 indexed

• It is mutable when date is add or subtract it nutates original date variable.

• Inconsistent in string parsing like new Date("03/04/2026") . what is this march 4 or April 3 ? Different browsers interpret this differently . only ISO format is safe .

• DST (Daylight Saving Time) problems

Solutions

There are many packages to help us to deal with date and time if projects use complex date then some are

• date-fns

• dayjs

• moment

• for future date handling in JS Temporal objects used instead of date.

Conclusion

This is all about date and time in JavaScript. Developer need to go through a lot of works to handle through by date object in JavaScript. so we need to either handle manually or used third party npm packages .

Thanks for reading this article. I hope It will help you to understand Date object in JavaScript.

In this article , we discussed about variable and data type in JavaScript.

What is Variable and why it is needed ?

It is the name given to the value which is stored in the memory and It is used to access and manipulate the value by variable throughout the program. It is holding the information which can access or change during execution of program.

It is used because of following reasons :It provide name to the value that gonna be stored in memory so It can easily accessed and manipulated during the execution of program

Characteristics of Variables :

1. Named Storage : It is name which is also called identifier that is given to the memory location where data can be stored. let x = 5 ;

2. Dynamic Values : The value of variable can change during execution of program . x = x+10;

3. Data types : It can hold different types of data like number, string, boolean etc.

4. Scope : The variable has scope . It means where the variable are accessible in the program. If it is bloc scope then it is not accessible outside of that block . global scope variable is accessible overall the program . It depends upon use case in which scope you want to define the variable.

// declaring and initializing the variable 
var yourName = "Lollipop" ;
var price ; // declaring
price = 5 ; // initializing

// used in expressions
const info = "Hi I am " + yourName + " and my price is Rs." + price ;
console.log(info) ; // Hi I am Lollipop and my price is Rs.5

// updating the values
price = 10 ;
console.log("Price : ", price) ;  // Price :  10

// const variable cannot change
const gender = male ;
gender = female ; // Error : Assignment to const variable

Naming convention for variable

There are certain rules for declaring the name of variable in JavaScript . They are :

1. It only starts with letters or $ or _ .

2. It doesnot start with numbers like let 1num = 10 ;

3. No reserved words are allowed to used as variable . There are some reserved words of language like let , const , function , for, some, every , this, while, do, if, else, class, extends, and many which is keywords which is used in programming in JavaScript.

4. There is convention to write the variable name in camelCase and it must be descriptive and meaningful because It is name and name must be descriptive which is very useful to understand about the code what it is used for .

5. No space is allowed and others special characters in the name of variable .

Way of declaring variables

There are 3 ways of declaring variables in JavaScript . by using var, let and const . But In Today modern JavaScript we used let and const only .

var is traditional way before es6 . It has few issues .

1. It is function scoped .

2. It creates variable in global window object .

3. It get hoisted means we can access it before declare in code .

but let and const are introduced in es6 and it is block scoped and solve the problems which is in var .

let is same as var by varying nature . It value can be changed during the program but const is constant . it value cannot be changed throughout the program and we need to initialize in one line . like const myName = "Dipesh" ;

Primitive Data Type in JavaScript

Primitive means It is single value and stored and copied by value . There are 7 different primitive types . They are

// primitive data types

// 1. number
let a = 10 ; 
let total = 200.78 ;
let balance = 25_00_000 ;
let age = 23 ; 

// 2. string
let userName = "Dipesh Chaudhary" ;
let getIn = "Chaicode Cohort 2026" ;
 
// 3. Boolean
let isCohortStd = true ;
let isRude = false ;

// 4. null
let gf = null ;

// 5.undefined 
let job ;

// 6. bigint
let aura = 999999999999999999n; // we can say Infinity

// 7. Symbol
const nationalId = Symbol("Dipesh") ;

Simple Scoping Understanding

Scope is the place where we can access the value of variable.

There are Block and Global scope in JavaScript.

// scoping discussion

console.log(userName) ; // global scope
// not inside any function means global 

function goToGym(gymName) {
    console.log("Gym name is ", gymName)
}
goToGym("BodyBuilder")
// console.log(gymName); // gymName is not accessible
// ReferenceError: gymName is not defined

// we can give block scope by curly braces
{
    let myCount = 98 ; 
    const myBirthPlace = "Lahan" ;
    const myMotherTongue = "Tharu , Maithili " ;
}
// console.log(myCount) ; 
// if variable name is not found suppose inside function , or any block like if 
// then it look up outside of it which is also called variable lookup 
// it is called scope chain 
    

Comparison Table

Temporal Dead Zone (TDZ) is the area before declaration and initialization of let and const variable where we cannot access the value before assign the value.

Scoping Diagram

Conclusion

The variable is container like a box which holds the reference of memory location where value is stored. I hope It is worth for reading and understanding the variable and scoping of variable.

To solve this problem , we used array . It is just storing values which are same in nature in one variable name. It has many benefits .

1. It provides collection in one variable name.

2. The items are easily accessible and update by using index.

3. Fast retrieval of data from memory .

4. There are a lot of methods to work with data.

5. Array stored data on order manner. so for ordered collection array is used

In JavaScript both array and object are of object type. The main difference is array stored data in ordered way so whenever ordered matter we use array.

// suppose i need to make super hero array 
const superman = "Superman" ;
const ironMan = "Ironman" ;
const thor = "Thor" ;
const hulk = "HULK" ;
// this should be one collection 
// when someone say 10 heroes , we have to make 10 variables 
// so what is best array is best to store these type of data 

const superHeroes = [superman, ironMan, thor, hulk];
console.log(superHeroes) ; // ['Superman', 'Ironman', 'Thor', 'HULK']

Ways of creating array

There are many ways of creating arrays in JavaScript .

first is Array Constructor and second is Array literal which is just [].

// ways of creating arrays
// 1. Array constructor

const friends = new Array("Sudip", "Akash", "Rakesh");
console.log(friends)

// by just Array
const fruits = Array("Mango", "Grapes", "Watermelon", "Litchi") ;
console.log(fruits)
// when one items add
const numbers = new Array(7)
console.log(numbers) // it create empty slot   [empty × 7]

// 2. Array literal
const ourSirs = ["Hitesh", "Piyush", "Anirudh", "Akash"] ;
console.log(ourSirs) // ['Hitesh', 'Piyush', 'Anirudh', 'Akash']

Accessing and Updating Elements

Elements is members of array. It is ordered so It is 0 indexed. we can access by using index which is assign to each elements of array.

// Accesssing elements in array
const colors = ["red", "pink", "orange", "blue"] ; 
// accessing first 
colors[0] // red
// accessing last 
colors[3] // blue
// every array has length property so we can used to find length 
console.log(colors.length) // 4
colors[colors.length - 1] // last element accessing

for updating also same just access and update with new item .

// updating items in array
// change blue to green
colors[3] = "green"
console.log(colors) // (4) ['red', 'pink', 'orange', 'green']

Looping in Array

We need array to store group of data so that we can perform some operations on overall data easily . This is easily done by looping in array elements .

There are many looping methods available in JavaScript. They are :

// Looping in arrays 

// baiscs for loop 
for(let i = 0; i<colors.length; i++){
   const upper = colors[i].toUpperCase() ;
    // console.log(upper) ;   // RED PINK ORANGE GREEN
}
// for of loop 
// it is same as for loop but it doesnot need counter variable like for loop
for(let color of colors){
    console.log(color) ;
}

// forEach 
colors.forEach(function (color){
    console.log(color) ;
})

How Array stored in JavaScript

We know that creating and storing of array is by reference in JavaScript. There are two memory callstack and heap memory . All primitives data are stored in callstack and Object type stored in hep memory . It is because Object are growing in nature. They can grow and shrink dynamically so It is stored in Heap memory and the variable are stored in callstack and it is pointing to the reference in heap memory .

when we give like about[5] = "Developer" it create empty slot in 4 index . The undefined is value in JavaScript which is default value of JavaScript if variable is not assign any value .

Summary

This is all about array and It is very much used and basics data structure in JavaScript . It is dynamic in nature. We can store different type of data in arrays and there is no issue. we can access many built in methods which make easy to work with array . The typeof array is object and when you create and store it in variable it is just reference stored in variable . so when we copy the reference only copy which point to same array or objects in JavaScript . so It is not actual copy of array.

Every operators return different type of data.

1. Arithmetic operator : It is just mathematic operator. It is used for basics math operations like addition, subtraction, multiplication, division and remainder.

2. Comparison operator : It is used for comparing data. It is used for making decision and it return Boolean. like > , < , >=, <=,!==

3. Assignment operator : It is used for assigning data like =, +=, -=, *=,++, --

4. Logical Operator : This is used for combining logics in conditionals using || , &&, !

Truth Table

Examples for all operators

Arithmetic operators

// addition
let a =2, b = 3;
console.log(a+b) // 5

console.log(a-b)// -1
console.log(a*b)// 6
console.log(a / b)   // 0.666
console.log(a % b) // 2

Comparison operator

// comparison like >, >=, <, <=, ==, ===, !==, !=
let a=1, b=2;
// greater than
console.log(a > b) // false
// less than
console.log(a < b) // true
// greater than equal
console.log(a >= b) // false
// less than equal
console.log(a <= b) // true
//  double equal
console.log(a == b) // false
// triple equal
console.log(a === b) // false
// not equal to  
console.log(a !== b) // true

Logical operator

// logical operator
// want to make decison like after 4 baje wakeup 
// between 12 and  4 sleeping
let age = 20

if(age >=18)
    console.log("You can give vote")
else
    console.log("You are not allowed to give vote")

Assignment operator

// assignment 
let a = 10;
console.log(a +=20) // 30
console.log(a -=20) //10
console.log(a *=20) //200
console.log(a++) //200
console.log(++a)//202
console.log(a--) // 202
console.log(--a) //200

Complex Operator Precedence

Operator precedence determines the order in which operators in an expression are calculated. This is similar as PEMDAS / BODMAs.

It also depends upon associativity of operator . It is of two ways : left to right and right to left.

// operator

let a=b=10 ; 
// here value of a =10 and b=10;
// first b =10 and 
// then a = b which is 10
// this is associativity which is right to left

let result = 2 + 4 ** 3 // 
// first exponential done which is  ** 3
// addition done
// this is operator precedence ** has high precedence than + 

// Note simple for no confusion just used parens () for grouping 
let sum =  2 + 5 + (3 * 2)

Difference between double and triple equal

double equality is loosely equality so it doesnot check type it only check value like 2 =="2" JS do coherce on data due to this many bug arise so we try to use === instead of == . === is strict equality so it check both type and value so it is reliable and most used instead of ==.

Summary

operator is used for logic building and solving calculations and return the results. There are many operators for the different purpose and it return different type of data which make easier to process and used the data for logic building.

Initially It is pending state. first singer write the song then after record in studio and plan to release date. This is the process time so In this state the results is undefined . There is no new song in the channel.

After record and planned the date , the song is ready to released and the song released . This is the fulfilled state. and the results value is new song which fans or viewers can see and listen in his channel.

but when there comes some technical issues and some disputes between the director and the singer then the song could not get to release on time then this is rejected state . In this case the singer may post sorry message on channel post or may come live to say sorry to his fans.

Now lets learn about some methods in promise by the excitement of fans.

const singerPromise = new Promise((resolve, reject) => {
  const songReady = true;
  const conflictWithDirector = false;

  if (songReady && !conflictWithDirector) {
    resolve("Song released on channel 🎶");
  } else {
    reject("Song release failed due to issues 😢");
  }
});

singerPromise
  .then((message) => console.log("Fulfilled:", message))
  .catch((error) => console.log("Rejected:", error));

Some Methods

i. Promise.all

All fans are excited for new album release. if all songs come at once in the channel then it is fulfilled state. if any song may not release the it ruins the experience of fans to listen the album so it is rejected state.

const song1 = Promise.resolve("Track 1 released");
const song2 = Promise.resolve("Track 2 released");
const song3 = Promise.reject("Track 3 failed");

Promise.all([song1, song2, song3])
  .then((messages) => console.log("Album released:", messages))
  .catch((error) => console.log("Album failed:", error));

ii. Promise.any

The fans become happy on the first drop of a song of the album. it is fulfilled state . it does not matter for other songs released or fail to release.

const song1 = Promise.reject("Track 1 failed");
const song2 = Promise.resolve("Track 2 released");
const song3 = Promise.reject("Track 3 failed");

Promise.any([song1, song2, song3])
  .then((message) => console.log("Fans are happy with:", message))
  .catch((error) => console.log("No song released:", error));

iii. Promise.allSettled

This is the total records of the song . the fans or audience get to know which song is released or fail .

const song1 = Promise.resolve("Track 1 released");
const song2 = Promise.reject("Track 2 failed");
const song3 = Promise.resolve("Track 3 released");

Promise.allSettled([song1, song2, song3])
  .then((results) => {
    results.forEach((result, index) => {
      console.log(`Track ${index + 1}:`, result.status, result.reason || result.value);
    });
  });

iv. Promise.race

It is like race . which song released first got millions of views so The first released determines the outcomes .

const song1 = new Promise((resolve) => setTimeout(resolve, 3000, "Track 1 released"));
const song2 = new Promise((resolve) => setTimeout(resolve, 1000, "Track 2 released"));

Promise.race([song1, song2])
  .then((message) => console.log("First song out:", message));

Summary

So this is the singer analogy to understand the promise in JavaScript in easy way.

Data Types In JavaScript

The types of data that we have to deal while working with JS. There are very few data types in JS. They are classified as :

a. Primitive Type : It is defined as single type of data which is immutable ( does not change ) and when you copy it it actually create another variable and store copy data. so when you change one variable , it does not change original variable. There are 7 types of primitive type they are:

1. number : simple any type of number is number type data, positive, negative, decimal, zero , Infinity all comes under number type

2. string : string is sequence of characters. so in JS , string is written as three ways : by single quotes ('apple') , double quotes ("apple") or by back tick which is under Esc key `apple`

3. boolean : It is very simple type. it has only two values either true or false.

4. null : null is data type in JS. It represents as no value for variable. if you want to give no value then assign variable with null like let temperature = null ;

5. undefined : it is also another data type. It is defined as the variable is not set with any value. like you declare a variable but does not assign with any value then JS engines set it undefined.

6. bigint : It is also another type which is used to represent large integer value . it is simple and easy to create by giving n at end of number like let bigNum = 1028389226822n ;

7. symbol : It is the type which is used to create unique label . It is used for creating unique label .

b. Non-Primitive data type : The data which is not primitive means it is mutable in nature which means when you try to copy by simply assigning variable with another variable then it does not copy the value rather it is another name for that variable and when you change it , it also change to original variable. examples like array, objects , Map, Set etc.

In this article lets discuss and learn about array in JS and its some methods . It is awesome to work with array in JS.

Array and Its Introduction

n JavaScript , array is object type data structure which is used to store collection or group of data. In array single name is given and store data , In JS , we can store different type of data in single array .

const buyMushroom = [
  'I',
  'mushroom',
  50,
  true,
  function () {
    return buyMushroom[0] + ' can cook ' + buyMushroom[1];
  },
  ['tomato', 'chilly', 'dhaniya'],
];
console.log(buyMushroom[4]()); // I can cook mushroom

it is flexible in JavaScript. We can store any type of data and do our needed work .

Methods of creating Array

There are so many ways to creating array. some are

// methods of creating Array
// 1. Array constructor
const citiesOfNepal = Array('Janakpur', 'Lumbini','Chitwan', 'Kathmandu', 'Pokhara')
console.log(citiesOfNepal)

// 2. Array.of()
const sameCities = Array.of(
  'Janakpur',
  'Lumbini',
  'Chitwan',
  'Kathmandu',
  'Pokhara'
);
console.log(sameCities);

//3 . Array.from()
const againSameCities = Array.from(sameCities)
console.log(againSameCities);

// 4. literal method (Most used and simple way)
const beautifulCities = ["Kathmandu", "Lumbini", "Pokhara", "Chitwan","Janakpur", "Solukhumbu"]
console.log(beautifulCities);

// output 
// [ "Janakpur", "Lumbini", "Chitwan", "Kathmandu", "Pokhara" ]
// [ "Janakpur", "Lumbini", "Chitwan", "Kathmandu", "Pokhara" ]
// [ "Janakpur", "Lumbini", "Chitwan", "Kathmandu", "Pokhara" ]
// [ "Kathmandu", "Lumbini", "Pokhara", "Chitwan", "Janakpur", "Solukhumbu" ]

There are difference between the way they create array.

1. Array() and Array.of() : while giving single arguments to them . Array() create empty-slots of that much of arguments given and Array.of() create array with single element

2. Array.from() : It is mostly used to create array from array like structure like In DOM There comes nodelist while querySelectorAll() and also it is used to create array programatically like of particular length.

const oneEl = Array(10)
const oneElOf = Array.of(10)
const nums1To10 = Array.from(({length:10}));
console.log(oneEl, oneElOf, nums1To10)

// output
// [ 10 x empty items ] [ 10 ] [ undefined, undefined, undefined, undefined, undefined,
//   undefined, undefined, undefined, undefined, undefined
// ]

const arrNums1To10 = Array.from(({length:10}), (_, i)=>i+1);
console.log(arrNums1To10) //  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

We use array because there are so many methods which make us easy to work with data. so let's know about some most used methods in arrays.

As it is non primitive type so There are methods which effect original array and other methods return new array without affecting original array .

Methods that mutate array

i. push : It is just method which is used to push data in array at end . It return new length of array.

ii. pop : It is method which is used to remove one element from array from end. it return removed element of array.

iii. unshift : It is another method which is used to again add item in array at start . it again return new length of array.

iv. shift : It is used to remove element from start. It again return remove element .

v. splice : It is the method which is used to remove to more than one elements. It is used to replace , modify , delete items of array. It return removed items . If no items removed it simply give empty array []. It includes array.splice(start, deleteCount, [item1, item2,...])

// mutating method

let vegetables = ['potato'];

// push method to add brinjal
vegetables.push('brinjal');
console.log(vegetables) // ['potato','brinjal' ]
vegetables.push('pumpkin', 'reddish', 'Cauli', 'Jackfruit')
console.log(vegetables); 
// [ "potato", "brinjal", "pumpkin", "reddish", "Cauli", "Jackfruit" ]

// pop  method to remove
const removedItem = vegetables.pop() // remove last Jackfruit 
console.log(removedItem, vegetables)
// Jackfruit [ "potato", "brinjal", "pumpkin", "reddish", "Cauli" ]

// unshift 
vegetables.unshift("Ladyfinger")  // ['Ladyfinger', ...]
// [ "Ladyfinger", "potato", "brinjal", "pumpkin", "reddish", "Cauli" ]
console.log( vegetables);
// shift 
vegetables.shift() // remove first item at start

// splice method 
console.log(vegetables) // [ "potato", "brinjal", "pumpkin", "reddish", "Cauli" ]

// remove more than 1 itens from anywhere in array

vegetables.splice(1,2) // remove 2 items start from 1 Index
//[ "potato", "reddish", "Cauli" ]
console.log(vegetables)

// add items in array at any position
vegetables.splice(1, 0 , "Naaf Saag", "Rhai Saag") // add items from 1 Index 
// [ "potato", "Naaf Saag", "Rhai Saag", "reddish", "Cauli" ]

console.log(vegetables);

// replace items of array
vegetables.splice(0,1,"Potatoes") // delete and add is like replace
console.log(vegetables);

// splice also remove from end by taking negative Index
vegetables.splice(-2,1) // remove item at second position from end
console.log(vegetables)

Methods That return new Array

These are methods which do not mutate original array rather it return new array which we can store in variable and used it .

i. slice : It is the methods which is used as taking part of array means slice the portion which you want and also used to copy entire array. It take start and end index , end index is exclusive. for eg : arr.slice(1,5) , start index is 1 and end is 5 but 5 index does not include . We can easily find out how many items we get in new array by difference the end-start so 5-1 is 4 .

ii. flat : it is method which is used to flatten the array . It accepts depth to which part you want to flat it.

iii. concat : it is simple method which is used to concat two or more than two array and return new array.

iv. Other methods are map, filter, reduce

// methods that return new array

let houseAnimals = ['cow', 'goat', 'ox', 'buffalo', 'horse', 'donkey',  'dog', 'cat','peacock', 'parrot', 'pigeon', 'hen', 'duck', 'bee']

// let make birds group
// slice 
const birds =  houseAnimals.slice(8)
const myHouseAnimals = houseAnimals.slice(0,4) //['cow', 'goat', 'ox', 'buffalo']

console.log(birds) // [ "peacock", "parrot", "pigeon", "hen", "duck", "bee" ]
// original array still same 
// console.log(houseAnimals)

//concat
const myTotalAnimals = myHouseAnimals.concat(["pigeon", "bee"])
console.log(myTotalAnimals)

// flat the nested array
const nestedAnimals = ["rabbit", birds, [["ostrich", "sparrow", "fox"]]]
console.log(nestedAnimals)
/*[ "rabbit", [ "peacock", "parrot", "pigeon", "hen", "duck", "bee" ], 
  [
    [ "ostrich", "sparrow", "fox" ]
  ] 
]
*/
console.log(nestedAnimals.flat()) // by default depth is 1
// [ "rabbit", "peacock", "parrot", "pigeon", "hen", "duck", "bee", [ "ostrich", "sparrow", "fox" ] ]

console.log(birds.concat(["sparrow"], ["ostrich"]))
console.log(Array.from({length:4}).fill(1,1,3)) // [ undefined, 1, 1, undefined ]

// map , filter, reduce , flatMap these are mostly used to do some tasks in array 
//map is used to perform any operations which you want to do with all items in array
// it is used to take some property and create array from array of objects

const tasks = [
  {
    id: 1,
    name: 'wake up at 4am',
    isDone: true,
  },
  {
    id: 2,
    name: 'do exercise and meditation',
    isDone: false,
  },
  {
    id: 3,
    name: 'finish assignments',
    isDone: false,
  },
  {
    id: 4,
    name: 'play football',
    isDone: true,

  },
];
// get name of all task
const allTasksByName = tasks.map(task=>task.name)
console.log(allTasksByName) 
//[ "wake up at 4am", "do exercise and meditation", "finish assignments", "play football" ]

// get all done tasks
// console.log(tasks.filter(task=>task.isDone))
/**
 * [
  {
    id: 1,
    name: "wake up at 4am",
    isDone: true,
  }, {
    id: 4,
    name: "play football",
    isDone: true,
  }
]
 */

// reduce is so versatile and powerful methods
// mainly it is used to sum of all values and find total 
const movements = [100, 2000, 20000, -500, 1000, 12000]
const total = movements.reduce((total,mov)=>{
  console.log(`current is \({total} : item is \){mov}`)
  return total + mov
},0)
/**
 * current is 0 : item is 100
current is 100 : item is 2000
current is 2100 : item is 20000
current is 22100 : item is -500
current is 21600 : item is 1000
current is 22600 : item is 12000
34600
 */
// console.log(movements.reduce((total, mov)=>total+mov,0))
// console.log(total)

Looping in Arrays

There are lots of methods to iterate through arrays. like map, filter, reduce , forEach and traditional loops like for, in JS for of loop also.

i. forEach : it is methods which accepts function as parameters that run for each element at once.

Things to consider in it :

1. It does not has break statement means there is no use of break and continue keyword.

2. It accepts synchronous function . means It does not wait for promises . There is no effect of async and await .

Searching methods in array

There need to search items in array so there are also so many methods to do that few of them are : indexOf, includes, find, findIndex, findLastIndex, lasyIndexOf , filter, some, every etc

i. indexOf : it gives index of element if not found return -1 . arr.indexOf(3)

ii. lastIndexOf : it is same as indexOf , only it start to search from last. arr.lastIndexOf(5)

iii. includes : It is most used method. It is used to search elements is present or not in array. it return boolean . arr.includes("apple")

iv. find : It accepts callback function and return the first match of conditional . if not found return undefined. arr.find(item=>item.price <10)

v. findIndex : It return index of matched conditional. if not found return -1. arr.findIndex(item=>item.name="Mango")

vi. findLastIndex : same as findIndex only it start to serach from last.

vii. filter : It is methods which create new array of elements that match the conditional passed in it.

viii. some : it is method which is used to return true when any one element satisfy the condition. otherwise false.

ix. every : it is used to check is every element satisfy the condition. It return true if all match the condition otherwise false.

// forEach is used to call the function for all items in array and perform what the function apply to all items . simple so It is called Higher Order Function in JavaScript
vegetables.forEach(vege=>console.log(vege))

Summary

So Array is most used in JavaScript to store different type of value at one variable name. It provides inbuilt methods to perform operations. so it is easy to work with array elements.

It is very easy to construct and used array in JavaScript.

I hope you liked all this info if you want to read more you can visit MDN Docs :

MDN ARRAYS

Popular programming languages are Javascript, Python, Java, C++, and many more. Each on of them are used on the basis of what we need to develop and build like software development, machine learning, gaming , data analysis etc.

In this article we discussed about the JavaScript one of most popular language which is widely used from browser to server, web app to mobile app, desktop app, machine code and more .

Beginning of world

In 1995, Brendan Eich was hired to develop one lightweight scripting language to add interactivity in Netscape navigator browser. it was initially developed in just 10 days and since evolved to become one of the widely used programming language.

Initially it was named Mocha. then changed to LiveScript . In that days Java was widely famous and everyone talking about that so to bring on the eyes of people . It was named JavaScript. However Both are different paradigm language There are no any similarity and Both have different take and purpose.

The microsoft developed its own JScript. and many other browser implement their own Javascript so to bring consistency on the use of JavaScript. Netscape submitted for standardization to ECMA International and The standard specification built and written for Javascript is known as ECMAScript(ECMA-262) and the first edition was released in June 1997.

ES3

It was released in December 1999, It added the features of Regex, try/catch block and new string methods. which makes it more serious programming language.

In 2005, AJAX and Web 2.0 enables the dynamic contents updates without full page loads. It helps in making applications like Gmail and Google maps much more interaction and dynamic apps.

V8 Engine and NodeJs

In 2008, Google released chrome browser with high performance V8 Javascript engine. which complied Javascript code directly to machine code. We can run Javascript directly on browser due to this engine in chrome. It was open source so Ryan Dahl takeout the V8 engine and wraps with C++ bindings and create the Javascript run time environment to run Javascript outside the browser for the first time. That is NodeJs . There are large package directories with millions of packages called NPM.

and by this It opens the gate so we can used Javascript to build server side apps which makes Javascript more powerful.

Modern Javascript (2010- present)

The major updates comes in ES6 in 2015. It brought many changes in language. There are addition of many features which enables today way of writing Javascript in much more cleaner and modular way. Features like (let/const, Classes, Modules,arrow function, promises) making it more robust for large applications. The standard committee (TC39) then shifted to release update or some new addition of smaller features on every year.

The Frameworks and Libraries

The Javascript capture all over the Software development field. so In 2010s saw the rise of powerful libraries and frameworks like Angular JS, then on 2013 the most favorite among many developers The React introduces by facebook, and on 2014 Vue.js. These are JavaScript frameworks and libraries that simplified the development of single page applications easy . The frontend engineers do their job on these tools.

TypeScript:

In 2012 Microsoft introduced the strict type of Javascript which is superset of Javascript . it is Typescript. It add type safety and make it more less error and bug free on writing Javascript in large codebase.

Summary

This is the journey of Javascript to become the most used programming language. It is High level Programming Language so it is most human friendly to learn and write the code and It helps to develop the software, server side backend , mobile apps, games, CLI tools , whatever you can think all the things can be done with JS .

The ecosystem of JavaScript is really very vast . you can find any tools, packages to do specific tasks on NPM which makes it more easy to build software in JavaScript.

Without the use of Emmet the workflow is very slow . you have to manually write all those HTML boilerplate code and manually write the completely full tag starting from angular brackets to close the angular brackets. The benefits of Emmet are :

• it helps to complete the boilerplate code.

• it completes the code with abbr. tag name like p for paragraph , img for image

• it really speed our code writing and increase our speed and makes easier to write boring html with most fun way.

Some Emmet Shortcut for HTML

1 . for creating HTML documents (boilerplates)

Use ! exclamation mark for boilerplate.

2 . Create any Tag just by name

When you want any Element just type the name of tag like p= paragraph, img = image, inp = input It means just by some starting letter you get suggestions on code editors and when you press Tab or Enter key you get complete Element . In this way You can increase your speed on writing markup.

There are some relation We ca generate by using Emmet abbreviation :

- emmet shortcut:
  - create div : `div` 
  - create parent & child relation :
    div > P
  - create siblings : + 
    div+p+img
  - multiplication : *
    ul>Li*5{hello}
  - attribute operator : []
    a[href="]
  - text operator: {}
    h2{hello}
  - Numbering operator: $
    ul>li.item$*5
  - grouping operator: ()
    (header>ul>li*3)+footer>p{copyright &copy 2025}

Summary

Hence Emmet is very powerful toolkit that increase speed up the markup structure . we just have to learn the abbreviate format and apply daily basics for practice and muscle memory. It helps to write boring tag in immediate way and increase and increase our speed . so It is very useful for beginner because when they Knew it they work as professionals in the HTML and CSS syntax.

More Resources :

Emmet CheetSheet for HTML and CSS

We need to define the stylesheet because User Agent stylesheet are different according to the browser so to make our styles work same in all browser we need to write our CSS.

What Is CSS

CSS stands for Cascading Stylesheet . lets break down the terms :

Stylesheet : Stylesheet is simply the styles files that can apply to element of webpage. It is some set of rules for applying CSS.

Cascading : How CSS applied in elements , HTML is defined by Cascading. In basics term Cascading is overwriting the default browser stylesheet which is also called User-Agent Stylesheet. It is overwriting the CSS with our own CSS rules . when you search meaning of Cascading , It is action of something that is falling or flowing downwards like waterfall. it is fit in CSS . the bottom styles got apply when same property change to same element.

But There are difference between overwriting and Cascading .

Overwriting : When there Will be overwriting in some property then beside all property will erase . and for applying previous styles. we need to write the property again .

Cascading : In Cascading There is no need to write previous styles . It is like combining the previous styles and new property or change property to the element.

// there is button
button {
background-color : tomato;
color: #000;
padding: 10px 20px;
}
button {
border : none;
}
// in this both button styles got combine and apply in button element .
// upper property + bottom proprty combine together.

Ways of Applying CSS :

There are 3 ways of applying CSS . They are :

• Inline CSS : It is apply in HTML on the tag with the style attribute .it is like <p style=”color:red; font-size:20px”>Consistency and Community</p. Its pros are we can style the element on the same line, it is easy to write . but its cons are it makes our html files more messy . we cannot reused our style again in different element .

• Internal CSS : it is used inside html file in head tag under style tag . it makes the separation of our html and CSS and helps to solve the problem that is in inline CSS . we can write reusable css , there is separate place for html and CSS but when we want to apply same stylesheet in another file then we have to copy all the styles to another file which is not good that makes our work double

• External CSS : this is way of writing CSS in separate file and apply in html by Linking the CSS files with link tag under head. just write css into separate file and no need to worry about html and whenever that is need to apply . no matter how much files just link the style.css into all those files your style applied.

Ways of Writing CSS in Internal or External Styles

We need to apply CSS in Some format to write css in Internal or External Stylesheet. we have to decide about selector .

Selector : it is just the selecting of element of HTML where you want to apply css . like h1, p, button, img, body, ul, li , input etc.

There are different types of ways of selecting Element :

i. By direct Tag-name : It is most forward and direct way of styling any element of HTML just by writing the name of tag . It selects all the same tag and apply styles.

ii. Combining elements with Comma : h1 , h2 , h3 {color : magenta} this apply the styles to the all element which includes with comma separarted . it is useful to combine the elements to apply some common styles to multiple elements.

The Cascading is good but to be more specific about our styling we can used class and id selector.

iii. Class Selector : class is used for grouping the elements on the basis of class attribute .it use . for selector.

• one element may have multiple classname .

• one class may apply to multiple element.

It has more specific than above two selecting methods.

iv. Id Selector : It is unique and for only one element . It is like id card , email . It has more specificity so styles under ID selector applied . it use dot # for selector.

// class slector 
.btn {
padding: 10px 20px;
border : 0px;
background-color: #000;
color : #fff;
}
//id seletor
#red-btn {
color : red;
}

v. Descendent Selector : The descendant selector in CSS is used to select elements that are descendants of a specified element. This means that the selected elements can be nested at any level within the specified ancestor element in the DOM tree. The descendant selector is represented by a space between two selectors . like

// nav > ul > li in this we can select li directly by descendent selector
// there might me many li in our html so we tell that only li which is descendent of nav
nav li {
color : blue;
font-size : 24px;
margin-bottom :5px;
}

v. !important : it has more specificity than all. The !important rule is used to give a CSS declaration higher priority than other declarations. When a property is marked as !important, it overrides all previous styling rules for that specific property on that element, regardless of specificity. However, overusing !important can make the CSS code difficult to maintain and debug. It should be used sparingly and only when necessary.

Note: Specificity and Cascading determine how styles need to get apply on element.

Analogy

Specificity flow top to bottom in below image :

Some Common Emmet used In CSS

w -> for width
w10 -> width 10px
w100% -> width 100%

/* similar for height*/
h ---> height
h10 ----> height 10px
h100% ----> height 100%

/* background*/
bg ---> background #000
bgc#000 ---> background-colr: #000
bg----> background
bgi---> background-image
bgr -> background-repeat 

/* we can give value by colon */
bgr:n --> background-reeat:no-repeat
bgs:cover--> background-size : cover
bgp -> background-position

/*for color*/
c = color #000
c:red = color : red
c#fff = color : #fff

/* font*/
fs = font-style italic
fz = font-size 
fz22px = font-size : 22px
fw = font -weight
fw900 = font-weight:900
lh = line-height
lh1.5 = line-height : 1.5

/*Text */
ta = text-align
tac = text-align: center
td = text-decoration :none
tt = text-transform

/* Border */
bd = border
bdrs = border-radius
bdrs50% = border-radius: 50%
/*Some More */
m = margin
t= top
d = display
pos = position
z= z-index
l= left
b = bottom
ov = overflow
d:f = dislay:flex
jc:c = justify-content:center
ai:c = align=-items: center

// we can give value by : or just by starting letter like
df = display:flex; || d:f = display :flex;

Summary

CSS provides beauty to the elements by using Cascading and specificity technique. It is used for styling the webpage. There are many libraries and CSS frameworks in the market which helps to write CSS or used the inbuilt components in our project which increase our productivity .

Some CSS Libraries are : Bootstap, Bulma, Tailwind etc.

Some component-Library are : Shadcn, Daisy, Ant Design, Material Ui, Chakra Ui , Mantine etc.

More Resources :

CSS Cheat Sheet

What Is HTML

HTML is created under WWW. it is created to provide proper structure to the document so the browser understand how to render the text on screen . Every things are text but HTML helps to give meaning of the different text like for image , there is img tag, for paragraph there is p tag , for bold and big heading/ main title of webpage , There is h1 tag , for link which is most important on the basis of which it is also called HyperText , There is a tag for it.

For every thing there are markup which is called Tag in HTML. Tags are used to define proper content that need to show on the screen . In HTML5 There are something called Semantic Tag. Semantic means provide meaning and structure which is easier to understand for both Browser and Developer. It is very important for SEO, screen readers and other tools to access and interpret with the content of webpage.

Some Semantic Tags are :

a . header : to show heading of website. <header></header>

b . nav : to show navigation links on website . <nav></nav>

c . main : it is used for main content of webpage . <main></main>

d . aside : it is used for secondary info or additional information for webpage or mainly for sidebar . <aside></side>

e . section ,article : section is used for section of page like About section, C.T.A. section, Testimonial section and article is used for mainly define one product , like on ecommerce website . the detail page for single product there article Tag is used for one product. <section></section> and <article></article>

f. footer : footer is used for defining footer of website which is mainly at the bottom of page . it includes info about copyright . links of some extra resources . <footer></footer>

About Tag , Content, Element

from above section , We say Tag is used for markup the text. Tag has opening and closing part. The starting of Tag begins by <Tagname> and the ending part is </TagName>.

Content itself got meaning that the text which is written inside the between Opening Tag and Closing Tag is known as Content of Tag. on relation It is Child of Tag.

Element is Overall structure of Tag with content. When Tag is used in webpage then it is called element . like paragraph we use p tag and when we used in code and it display on browser then we called it paragraph element or p tag.

By above scenario we can say There are few Tags which do not contain content between them so that is called void tag or self closing tag .

1 . Paired Tag : It always comes with opening and closing tag so it is called paired tags like <p></p>, <strong></strong>, <date></date>, <code></code>, <div></div>.

2 . unpaired /empty/ void : it has only starting tag like <img />, <br />, <hr />, <input />. the slash at end gives developer about the the tag is self closed which makes developer easier to understand code. so always used slash at the end of empty tag . it is good for understanding purpose.

Some Most Used Tags

Below is image showing HTML Code with most used Tag and Its output on browser.

Block and Inline Elements

Everything , every tag is displayed like rectangular box on browser screen. by default some elements are taking full width or some elements are taking content-size width. on the basis of that Elements are classified into two types :

a. Block Level Element : These are the elements display as full width on the screen .The new Element comes after these type of elements into new line. examples like div , p, h1-h6, nav, ul, li, ol, br, hr …

b. Inline Level Element : These are the elements who took only content-size width. and the another inline element comes side by side . examples : img, a, button,span,input, label,strong,em,i…

Behind the Scenes

We know that browser can understand HTML so the browser engine got C++ written code who understand the HTML and convert into proper structure that can be rendered on screen the Parsed HTML is called DOM which can be selected , modified and updated by using Javascript.

Summary

HTML is HyperText Markup Programming Language that is used for creating structure of webpage . It is used for defining the content that can be shown on the screen by using tags

Overview

Browser load files , convert into raw bytes (0,1), character encoding (utf-8), tokenization(h1,p,html,body), relation between element (parent,child), formed nodelist , create DOM . on parallel CSS also parsed , CSSOM created , merged DOM and CSSOM formed Render Tree, browser calculate size and position of element on render tree, painted into pixels and finally render on screen. JS →DOM when JS comes before DOM then first JS load and execute so it takes more priority but when CSSOM ←JS .JS executes halted until the CSS get ready.

How Browser Render Website Behind The Scene

All the browsers have some common UI like

• Address Bar for inserting URL

• back and forward button

• Bookmark button

• Reloading and Stopping button to reload and stop the current documents

• Home button that brings to Home page

High Level Overview of Browser

The main components of browser are :

1 . The User Interface : it includes the UI part of browser. address bar , bookmark button , back/forward button, reload and stop button, homepage redirect button .

2 . Browser Engine : it is middleman of browser. It is like traffic controller. every instruction is pass through Browser engine. it gives the required instruction to required part of browser (dispatcher). like when user type URL then it tells networking layer for make network request to fetch the requested resources and then it gives to rendering engine. some are :

• **Blink (**Chrome, Edge, Brave , new version of Opera)

• Webkit (Safari)

• Gecko (Mozilla FireFox)

3 . Rendering Engine : it is responsible for displaying requested data on screen. suppose the request is show webpage then first it parse HTML, CSS and then display the parsed content on screen.

4 . Networking : it is responsible for network calls. like HTTP request .

5 . Javascript Interpreter : It parse and execute scripts, Javascript code .

6 . UI backend : It manages the UI of browser like where to show menus , back and forward button , Bookmark button , extensions and also it captures the events like mouse click, scrolls. It uses operating system Interface. for eg : when user click back button then it capture the click event and pass to browser engine and browser engine pass this to rendering engine and then rendering engine shows previous content.

7 . Disk Api : it is data persistence layer . it includes local storage, session storage. It is used to store some pieces of information in the form of cookies or session.

HTML

User use browser to request the resources they want. browser request server for response. server can send text, file, json, image, video, audio etc. server send response on the basis of request. but how user can request for resources . for this WWW is created.

WWW (World Wide Web ) is standards that is proposed to define the way to share and get data from server. It did three things

• HTTP : http is created . it is used to get the data from server without accessing server. it is used to transfer resources from client to server and vice-versa . it works on application layer. it is used to make request of data from server.

• HTML : HTML is Markup language that is used to structure the webpage. without html , there is no structure of documents and which makes user more difficult to read and understand the resources so HTML gives tags that gives some meaning and structure and some visual representation on screen.

• URL Format : It define the way in which request can be done . like https://chaicode.com, https://dipeshchaudhary.name.np . whatever the resources to fetch define the URL in proper format.

Tim Berner Lee want to make some type of formatting Language that is used to define the writing way of documents because all the documents are in text format and also server responds back text response and when it render into screen it looks messy , not user friendly. it is more difficult to understand what are the heading and more important message of documents. so He created HTML which includes many tags that are used to define proper structure for documents and when it store on the server and when browser requested the documents , the server responds back with text in format of HTML . after that It renders on the screen .

HTML does three things :

1 . It makes the documents looks good.

2 . It provides proper meaning and structure of webpage.

3 . It includes hyperlink to link other resources inside one resource.

Structure Of Tag

Tag has following structure:

1 . Opening Tag : it is opening of tag . it use angular brackets <>

2 . Closing Tag : It use </> to close tag .

There are two types of Tag :

a. Paired Tag : it comes into pairs of opening and closing tag. like <p></p>, <h1></h1>,<div></div>

b. Unpaired Tag : it only comes with opening tag . it is also known as empty tag. like <br>, <hr>

c. Self closing tag : the unpaired tags which used slash (/) at the end of opening tag to self closed . like <img /> , <input /> which is most common in react or XHTML

The complete structure of tag is called element .it includes starting tag, optional content , and closing tag like <p>This is paragraph </> . on complete way it is called paragraph element.

<p>Hi I am Paragraph Tag </p>

The Hyperlink make another call to sever for resource in format of like https://docs.chaicode.com.

Tags are predefined element which are used to structure webpage like

1. for big and bold heading use h1 . it has 6 variants from h1-h6

2 . for paragraph and text use p tag

3 . to display image use img

4 . to display audio and video use audio and video tag

5 . for hyperlink use anchor tag which is a

There are attributes used in tag , it provides look and behavior of tag . it is define inside opening tag and typically looks as name = “value” format

<a href="https://chaicode.com" target="_blank">chaicode</a>
<img src="logo.png" alt="Logo of company" width="200" height="100">

When browser request through http to get homepage of chaicode.com then it request through URL like http://chaicode.com. The server does not understand that it want html format of text so browser also send additional information to sever which is called headers .there is Content-Type : text/html so that server responds back the html to the browser and browser render the html into screen.

How Browser Render HTML

When browser receive HTML as response from server . The server respond back with Content-Type : text/html . then the browser start the following process behind the scene :

1 . Parsing : implementation of rules to make the code understandable for browser. the raw HTML and CSS parsed and construct the tree which is understandable for browser to render on screen. It has one works to form DOM Tree . There are two types of parsing :

a . Conventional Parsing : CSS and Javascript are parsed by Conventional Parsing

b . Unconventional Parsing : HTML is Unconventional Parsing

The following steps involves in rendering webpage :

1 . Building DOM : The browser start by fetching HTML by HTTP Request. it tokenizes the element and form DOM Tree which contains content of page and hierarchy of element . It can be modified by using Javascript.

2 . Creating CSSOM : In parallel , Browser fetches the css files and start to create CSSOM . This tree maps styles the elements. The parsing of HTML stops until the CSSOM is ready. so optimizing CSS files by media or using preload can speed up the rendering process.

3 . Generating Render Tree : The DOM and CSSOM are merged to form render tree . It only includes visible elements with computed styles . The <meta> and display:none elements are excluded.

4 . Constructing Frames : Frame are constructed on the basis of Render Tree . It is like rectangular object for each element/node.

5 . Layout (Reflow) : the browser calculates the exact size and position on the basis of CSS Box model(flexbox, css grid). Any Dom or styles change trigger the Reflow which are costly on performance. It is more computational or calculation heavy task.

**6 . Painting :**The render tree painted into pixels. then the browser apply color, border, shadow , images . complex effects like gradients can slow this process. It is more related to visuals like creative side of determining color, border, image etc.

7 . Rendering : This is displaying the render tree on screen.

Why There is www before domain name in URL

WWW is standard and it reflect that the response coming back from server is html format so It obvious the user that the requesting data comes about the webpage that will bring the webpage. so there is www used in URL when to make website call or when we need HTML response from server.

like https://www.chaicode.com it gives landing page of most useful and beautiful Chaicode website. and Server who return html response is called web server.

Summary

Browser is so powerful and it is OS in itself. There are so many layers which work together to run the applications, software efficiently and smoothly .This was the the overview of the browser internal how browser make call the http request to the server and server responds back as the response on the basis of requested data and then the browser look to the header where there is Content-Type then the rendering process start . first parsed HTML and CSS to create render tree and then the browser create frame and do the process of reflow and painting means showing in pixels and then finally the webpage of website got render n he screen . Through Browser Most of people are connected to Internet.

More Resources :

• Blogs on Browser Inernals by developer.chrome

• https://youtu.be/5rLFYtXHo9s

Computers are connected on Internet to share information , communicates with other computer. For communication some rules required just like Grammer is needed for english speaking . These rules called Protocols in computer language. TCP is communication protocol of internet suite and it operates at Transport layer of OSI model which is short form of (Open System Interconnection).

Understanding the basics

Before diving on the 3-way handshake process . let’s learn about to main players in any network communication :

• Client : This is the computer who request the information or service

• Server : This is computer or system who provides the requested information or services

Now Imagine you want to visit website how the browser and the server are connect with each other. That’s where the 3-way handshake enter the scene.

3-Way Handshake Process

Step 1: SYN (Synchronize)

Imagine you computer which is client want to talk to server . To start conversation . client send special message like saying “Hello , can we chat ?”. This message called SYN Packet. It includes a secret code which is called sequence number to keep things organized for future talks. It is like client raising hand to get attention of server and say “Hey , I’d like to connect with you !”

What is Sequence Number

It is like putting number on your message so that other side knows in which number message are sent. Each message got unique number so that it helps to check the message received in right order or not.

Step 2 : SYN-ACK (Synchronize-Acknowledge)

When server receive “Hello” Client message (SYN Packet). The server acknowledges the client's message and says, "Yes, I got your request to chat! Let's do it." The server also shares its own secret code (sequence number) with the client. This second step is like the server responding, "Hey, I heard you! I'm ready to connect too."

Step 3: ACK (Acknowledge)

Now, the client, having received the server's friendly wave (SYN-ACK packet), gives a virtual high-five back. It says, "Great! I'm ready to chat too." The client also includes its own secret code, increasing it by one. When the server gets this high-five (ACK packet), it also increases its secret code. This third step is like both sides saying, "We're good to go! Let's start our conversation."

So, after these three friendly steps, the client and server are now connected and ready to share information like good pals chatting away! This whole process is called the 3-Way Handshake because it involves three steps, kind of like a friendly greeting before diving into a conversation.

What is TCP

TCP, or Transmission Control Protocol, is a crucial part of the Internet Protocol (IP) suite. It operates in the transport layer and is responsible for establishing, maintaining, and completing connections between devices. TCP ensures reliable and connection-oriented communication, making sure that data reaches its destination accurately and in the right order.

TCP is widely used in applications that require dependable and accurate data delivery, such as web browsing, email, file transfer (FTP), and remote terminal access like SSH.

TCP does 3 things:

• It breaks the message into small packets.

• it numbers them so they arrive in right order

• it checks the every packet received

• if something missing , resends it

TCP Flags

These are special flags that help control communication between the sender and receiver. These flags provide specific information about the communication.

1 . SYN (Synchronize):

Used to start a connection. When a client wants to establish a connection with a server, it sends a TCP packet with the SYN flag set. The server responds with a SYN-ACK packet.

2 .ACK (Acknowledge):

Indicates the acknowledgment field. It confirms that data has been received correctly.

3 .FIN (Finish):

Signals the sender to close the connection. Both the client and server use this flag to end the connection.

4 .RST (Reset):

Resets the connection. This flag is used when there's an error or an unknown condition, and the connection needs to be terminated immediately.

These flags exist as bits in the TCP header and are set or unset to convey specific information. They play a role in indicating the state of the connection. For example, in the TCP handshake, SYN and ACK flags are used, while in connection termination, the FIN flag is utilized. Together, these flags allow TCP to effectively manage and control communication between devices.

Why is 3-Way Handshake Important ?

• Reliability: It ensures that both the client and server are ready to communicate before sharing data.

• Security: The handshake helps prevent unauthorized access and ensures a secure connection.

• Error Handling: If any step fails, the connection isn't established, preventing potential issues.

**

Conclusion**

The 3-Way Handshake might sound complex, but it's essentially a digital greeting that ensures a smooth and secure conversation between your device and the server. Just like introducing yourself before starting a chat with a friend, the handshake establishes a reliable connection, making the vast world of computer networking a little less mysterious for beginners. So, the next time while browse a website or send a message, remember the friendly 3-Way Handshake that makes it all possible!