Destructuring.

And trust me… once you understand this properly, your code will go from:

“Bhai thoda lamba hai…”

to

“Arre waah… clean code 😎”

Also, this is one of those features that makes you look like a pro developer in front of juniors.

So let’s break it down… in our style.

So, what does Destructuring mean?

Well technically!!!…

Destructuring is a way to unpack values from arrays or objects into separate variables.

Too technical again 😑

Let’s understand in our own way…

👉 Destructuring means: taking data out of a structure (array/object) and directly putting it into variables.

Simple.

The Problem (Before Destructuring)

Let’s say you have this object:

const user = {
  name: "Barun",
  age: 22,
  city: "Patna"
};

Now if you want to use these values:

const name = user.name;
const age = user.age;
const city = user.city;

console.log(name, age, city);

Works fine…

But imagine 10 properties…

or nested objects…

or APIs…

👉 You will cry 😭

Enter Destructuring 🚀

const user = {
  name: "Barun",
  age: 22,
  city: "Patna"
};

const { name, age, city } = user;

console.log(name, age, city);

बस्स्स्स… done.

No repetition. No headache.

Destructuring Arrays

Let’s start with arrays first.

const songs = ["Saiyaara", "Tum Hi Ho", "Kesariya"];

Without destructuring:

const first = songs[0];
const second = songs[1];
const third = songs[2];

With destructuring:

const [first, second, third] = songs;

console.log(first);  // Saiyaara
console.log(second); // Tum Hi Ho

👉 See the difference?

No indexing. No confusion.

Real-Life Example 🎧

Imagine your playlist:

const playlist = ["Workout Song", "Focus Song", "Sleep Song"];

const [workout, focus, sleep] = playlist;

Now your variables make sense.

Skipping Values in Arrays

const numbers = [10, 20, 30, 40];

const [first, , third] = numbers;

console.log(first); // 10
console.log(third); // 30

👉 That empty comma means: “ignore this value”

Destructuring Objects

Now comes the real power 💥

const student = {
  name: "Rahul",
  marks: 90,
  subject: "Maths"
};

Without destructuring:

const name = student.name;
const marks = student.marks;

With destructuring:

const { name, marks } = student;

console.log(name);  // Rahul
console.log(marks); // 90

Important Rule ⚠️

👉 Variable name must match the key name

const { name } = student; // correct

If you want a different name:

const { name: studentName } = student;

console.log(studentName);

Default Values

Now comes a lifesaver feature 🙏

const user = {
  name: "Barun"
};

Now if you try:

const { name, age } = user;

console.log(age); // undefined

But with default value:

const { name, age = 18 } = user;

console.log(age); // 18

👉 Useful when API doesn’t send data.

Real-world Scenario 🌍

const apiResponse = {
  username: "coder123"
};

const { username, isAdmin = false } = apiResponse;

console.log(isAdmin); // false

👉 No crash. Safe code.

Before vs After (The Real Truth)

Before 😵

const product = {
  title: "Laptop",
  price: 50000,
  brand: "HP"
};

const title = product.title;
const price = product.price;
const brand = product.brand;

After 😎

const { title, price, brand } = product;

👉 Cleaner 👉 Faster 👉 Less repetitive

Why Destructuring is Powerful?

Let me tell you like a senior developer would…

1. Less Repetition

No more object.property again and again.

2. Cleaner Code

Your code looks readable and professional.

3. Easy to Work with APIs

Most APIs return objects → destructuring saves time.

4. Better Naming

You can rename variables easily.

5. Default Safety

No more undefined errors.

One Last Example (Interview Style 💀)

const user = {
  name: "Barun",
  address: {
    city: "Patna"
  }
};

const { address: { city } } = user;

console.log(city); // Patna

👉 Nested destructuring… next level 🔥

Final Thoughts

Destructuring is not just a feature…

👉 It’s a habit.

Once you start using it, you won’t go back.

And trust me…

When you stop writing things like:

user.name
user.age
user.city

and start writing:

const { name, age, city } = user;

👉 You officially enter clean code territory.

Your Turn (Don’t Run Away 😏)

Q1

const marks = [50, 60, 70];

Destructure and print all values.

Q2

const student = {
  name: "Aman",
  age: 20
};

Extract name and give default value to city.

Q3

Fix this:

const user = { name: "Barun" };
const { age } = user;
console.log(age);

Try these… and don’t cheat 😄

And yes…

If you understood this properly…

👉 You are already ahead of 60% beginners.

बाकी 40% अभी भी user.name लिख रहे हैं 😏

Happy Coding 🚀 Keep Learning

Well technically!!!...

MDN says:

Destructuring assignment is a JavaScript expression that makes it possible to unpack values from arrays or properties from objects into distinct variables.

Hmm… again too technical, right? 😅

So let’s understand it in our own way.

In Simple Words…

Destructuring is like:

👉 Taking things out of a bag 👉 And putting them directly into your pockets

Without destructuring: You open the bag again and again.

With destructuring, you take everything out in one shot.

Why Do We Even Need This?

Let’s take a real-life example.

You ordered a Swiggy combo meal 🍔🍟🥤

Without destructuring:

const order = {
  burger: "Zinger Burger",
  fries: "Medium Fries",
  drink: "Coke"
};

const burger = order.burger;
const fries = order.fries;
const drink = order.drink;

Aree bhai… same object… again and again… 🤦‍♂️

Feels like calling your mom every 2 minutes:

“Maa where is burger?” “Maa where is fries?” “Maa where is drink?”

With Destructuring 😎

const order = {
  burger: "Zinger Burger",
  fries: "Medium Fries",
  drink: "Coke"
};

const { burger, fries, drink } = order;

console.log(burger, fries, drink);

बस… एक लाइन में सब निकाल लिया।

This is destructuring.

Destructuring Objects

Objects = key-value pairs

Let’s take a small clean example.

const student = {
  name: "Barun",
  age: 21,
  course: "BCA"
};

Without destructuring

const name = student.name;
const age = student.age;
const course = student.course;

With destructuring

const { name, age, course } = student;

Same result… less headache 😌

Small Visualization (Object → Variables)

Think like this:

student object
   ↓
{name, age, course}
   ↓
name = "Barun"
age = 21
course = "BCA"

Direct extraction.

Destructuring Arrays

Arrays are like your music playlist 🎧 (haan haan same example 😏)

const songs = ["Kesariya", "Tum Hi Ho", "Believer"];

Without destructuring

const firstSong = songs[0];
const secondSong = songs[1];

With destructuring

const [firstSong, secondSong] = songs;

Array Mapping Visualization

["Kesariya", "Tum Hi Ho", "Believer"]

   ↓       ↓
first   second

Index-based extraction.

Skipping Values

const [first, , third] = songs;

console.log(first); // Kesariya
console.log(third); // Believer

Second song ignored… just like your gym plan 💀

Default Values

Now real life problem 👇

What if value is missing?

const user = {
  name: "Barun"
};

Without default

const age = user.age;
console.log(age); // undefined

Now your code is crying 😭

With a default value

const { name, age = 18 } = user;

console.log(age); // 18

Boom 💥

Fallback mil gaya.

Real World Example

Imagine API response:

const response = {
  username: "barun_dev"
};

const { username, isLoggedIn = false } = response;

Now even if backend forgot 😅 Frontend safe hai.

Before vs After (Most Important Part)

Without Destructuring (Repetitive Code)

const user = {
  name: "Barun",
  age: 21,
  city: "Patna"
};

console.log(user.name);
console.log(user.age);
console.log(user.city);

With Destructuring

const { name, age, city } = user;

console.log(name);
console.log(age);
console.log(city);

Another Real Scenario (Function)

Without destructuring

function printUser(user) {
  console.log(user.name);
  console.log(user.age);
}

With destructuring

function printUser({ name, age }) {
  console.log(name);
  console.log(age);
}

Benefits of Destructuring

Let’s not behave like a theory teacher… but still 😏

1. Less repetitive code

No more user.user.user.user...

2. Cleaner & readable

Code looks like a premium version 💎

3. Faster writing

Developer happy → productivity high

4. Easy handling of API data

Frontend devs ka best friend

5. Default values = safer code

No undefined drama

One Small Brain Twist

const user = {
  name: "Barun",
  age: 21
};

const { name: username } = user;

console.log(username);

Output:

Barun

👉 Renaming also possible 😏

Final Thought

Destructuring is not just a feature…

It’s like:

👉 Upgrading from keypad phone to smartphone 👉 Same work… but smoother, faster, smarter

Homework (Yes, you can’t escape 😏)

Create this object:

const laptop = {
  brand: "Dell",
  price: 50000,
  ram: "16GB"
};

Tasks:

1. Extract all values using destructuring

2. Add default value for storage (256GB)

3. Rename brand → company while destructuring

4. Print everything

If you can solve this…

Then congratulations 🎉 You are officially not scared of destructuring anymore

And remember…

Good developers write code Smart developers write clean code

Destructuring = Step towards smartness 😎

Inspired by Barun style learning with real-life madness 🚀

And that is 👉 the new keyword in JavaScript

You might have seen code like this:

function User(name) {
  this.name = name;
}

const user1 = new User("Barun");

And someone told you:

"Use new to create objects"

Bas… khatam… story over.

But how does it actually work? Aree bhai… JavaScript koi magic show thodi hai 😄

Let’s break this properly.

So what does new actually do?

Technically (MDN type definition incoming 😅):

The new keyword creates an instance of an object from a constructor function.

Again… too technical.

In Simple Words

👉 new is like a factory machine

You give it a constructor… It gives you a ready-made object.

Just like:

• You go to Domino’s

• You order pizza

• You don’t build it… they build it

Same thing here.

Step by Step: What happens behind the scenes?

Whenever you write:

const user1 = new User("Barun");

JavaScript secretly does 4 steps.

And THIS is where real understanding starts.

Step 1: Empty object is created

const obj = {};

JavaScript creates a blank object.

Step 2: this points to that object

Inside constructor:

function User(name) {
  this.name = name;
}

👉 this now refers to that empty object

So internally:

obj.name = "Barun";

Step 3: Prototype is linked

This is where most people cry 😭

obj.__proto__ = User.prototype;

Don’t worry… we will understand this slowly.

Step 4: Object is returned

return obj;

And finally:

const user1 = obj;

Final Visual Flow (IMPORTANT)

Constructor → Object Creation → Return

User("Barun")
     ↓
[ empty object ]
     ↓
this → object
     ↓
prototype linked
     ↓
return object

Let’s build a real example

Because theory se zyada real life samajh aata hai

Example: Student System

function Student(name, marks) {
  this.name = name;
  this.marks = marks;

  this.print = function () {
    console.log(`\({this.name} scored \){this.marks}`);
  };
}

const s1 = new Student("Ravi", 80);
const s2 = new Student("Ankit", 60);

s1.print();
s2.print();

Real life understanding

Think like this:

• Constructor = Blueprint

• new = Machine

• Object = Final product

Like:

• Blueprint → "Make a chair"

• Machine → Factory

• Output → Chair

But wait… what is a Constructor?

Aree haan… yeh toh define hi nahi kiya 😅

Constructor Function

👉 A normal function… 👉 But used to create objects

Convention:

• First letter capital (not mandatory but important)

function Car(brand, price) {
  this.brand = brand;
  this.price = price;
}

Creating objects

const car1 = new Car("BMW", 5000000);
const car2 = new Car("Audi", 4000000);

Now tell me…

Did we manually create objects?

NO ❌

new did everything for us.

Now comes the REAL hero: Prototype

Most people skip this… and regret later.

Why prototypes?

Look at this:

function Student(name) {
  this.name = name;

  this.sayHi = function () {
    console.log("Hello");
  };
}

If you create 100 students…

👉 100 copies of sayHi will be created 😵

Memory waste.

Solution: Prototype

function Student(name) {
  this.name = name;
}

Student.prototype.sayHi = function () {
  console.log("Hello");
};

Now:

• Only ONE copy of sayHi

• All objects share it

How linking works?

When you do:

const s1 = new Student("Barun");

Behind the scenes:

s1.__proto__ === Student.prototype // true

Visual Understanding of Prototype Linking

Student Constructor
        ↓
Student.prototype  ---> sayHi()
        ↑
        |
      s1 object

👉 If s1 doesn’t find something… 👉 It looks into prototype

Like:

"Mere paas nahi hai… prototype bhai se puchta hu"

Important Observation (VERY IMPORTANT)

console.log(s1.sayHi());

Even though:

❌ sayHi is not inside s1 ✅ Still works

Because of prototype chain.

Constructor vs Instance (Clear this once and for all)

Example:

function User(name) {
  this.name = name;
}

const u1 = new User("Barun");

• User → constructor

• u1 → instance

Common Beginner Mistake 😭

const user = User("Barun"); // ❌ forgot new

What happens?

👉 this becomes window (or undefined in strict mode)

👉 Bugs start

Always remember

👉 If constructor → ALWAYS use new

Mental Model (Golden Rule)

Whenever you see new think:

👉 "Object ban raha hai internally"

Not:

👉 "Function call ho raha hai"

Quick Recap

• new creates object

• Sets this

• Links prototype

• Returns object

Homework (haan bhai… bhagna mat 😏)

Q1: Create a constructor Book

• title

• author

Add a method:

printDetails()

Q2: Move method to prototype

Q3: Check

book1.__proto__ === Book.prototype

Final Thought

Most people:

👉 Learn new in 5 minutes 👉 Struggle with it for 2 years

Because they never understood what happens behind the scenes

Now you know:

👉 JavaScript is not magic 👉 It’s just hidden steps

Agar yeh samajh gaya…

👉 Classes (ES6) will feel like child’s play

And trust me…

👉 80% devs skip this depth

Don’t be that dev. 🚀

Well technically!!!…

A callback is a function passed as an argument to another function and executed later.

Hmm… sounds like MDN uncle again entered the chat 😅

Let’s understand this in our own way.

Functions as Values (Yes, Functions are VIPs 👑)

In JavaScript, functions are not just… functions.

They are values.

Just like numbers, strings… even like your favourite song.

function sayHello() {
  console.log("Hello Bhai");
}

const greet = sayHello;

greet(); // Hello Bhai

See what happened?

We didn’t call sayHello, we stored it.

That means:

👉 Function = Value 👉 Value = Can be passed around

Now things start getting interesting…

Passing Function as Argument (Entry of Callback 🚪)

Let’s say your mom tells you:

"Go to the market… and after that call me"

Here “call me” is something you do after work is done.

That is exactly what callback is.

function doTask(taskName, callback) {
  console.log(`Doing task: ${taskName}`);
  callback();
}

function taskFinished() {
  console.log("Task completed. Reporting back 😎");
}

doTask("Buy Vegetables", taskFinished);

Output:

Doing task: Buy Vegetables
Task completed. Reporting back 😎

So here:

👉 taskFinished is a callback 👉 It is passed into doTask 👉 It is executed later

Visual Flow (How Callback Works 🧠)

Think like this:

doTask()
   ↓
Work happens
   ↓
Callback gets called

Simple life. No tension.

Now Real Problem Begins… Asynchronous World 🌍

Till now everything was simple.

But JavaScript is not simple…

It loves drama.

Example: Ordering Food 🍔

function orderFood(callback) {
  console.log("Order placed...");

  setTimeout(() => {
    console.log("Food delivered 🍕");
    callback();
  }, 2000);
}

function eatFood() {
  console.log("Eating food... happiness restored 😌");
}

orderFood(eatFood);

Output:

Order placed...
(wait 2 seconds)
Food delivered 🍕
Eating food... happiness restored 😌

Why callback here?

Because:

👉 Food delivery takes time 👉 We don’t want to block everything 👉 So we say: “When done… call this function”

This is asynchronous programming.

Why Callbacks Are Used?

Let’s make it crystal clear:

1. Handle delayed operations

Like:

• API calls

• File reading

• Database queries

2. Avoid blocking code

JavaScript is single-threaded.

If one thing blocks → everything blocks.

Callbacks help avoid that mess.

Common Real-Life Callback Scenarios

1. Button Click (Frontend)

button.addEventListener("click", function () {
  console.log("Button clicked!");
});

👉 User clicks → callback runs

2. API Call

fetchData(function (data) {
  console.log("Data received:", data);
});

👉 When data comes → callback runs

3. Timer

setTimeout(() => {
  console.log("Executed after 2 seconds");
}, 2000);

👉 Time finishes → callback runs

Now Comes The Villain 😈

Callback Hell (Nested Callbacks)

Everything was fine…

Until this happened:

loginUser(function () {
  getUserData(function () {
    getPosts(function () {
      displayPosts(function () {
        console.log("All done 😵");
      });
    });
  });
});

Look at this 😭

This is called:

👉 Callback Hell 👉 Pyramid of Doom 👉 “Why did I choose programming?” moment

Visual Representation of Callback Hell

loginUser
   ↓
 getUserData
   ↓
  getPosts
     ↓
   displayPosts
       ↓
     Done 😵

Indentation increasing = Happiness decreasing

What’s the Problem Here?

1. Hard to read

2. Hard to debug

3. Hard to maintain

4. One error → everything breaks

Basically:

👉 Code becomes spaghetti 🍝

Conceptual Understanding (Important ⚠️)

Callbacks are not bad.

Overusing nested callbacks is bad.

Just like:

• Sugar is fine

• Too much sugar → diabetes 😅

So What’s The Solution?

Modern JavaScript said:

“Enough is enough…”

And gave us:

👉 Promises 👉 Async/Await

(But that’s another blog… patience rakho 😏)

Final Summary (Revision Time 📚)

• Function can be treated as value

• Function can be passed as argument

• That passed function = Callback

• Callbacks are used in async operations

• Too many nested callbacks = Callback Hell

Real Talk Ending 😌

Callbacks are like instructions you leave for future.

“Bhai… jab kaam ho jaye… mujhe bata dena”

Simple.

But if you keep stacking instructions inside instructions inside instructions…

Even your brain will say:

“Main nahi kar raha… tu khud dekh le” 😭

Homework… Because I Care 😏

Try this:

1. Create a function downloadFile(callback)

2. Simulate delay using setTimeout

3. After download → call callback

4. Inside callback → print "File Ready"

Bonus:

Try creating nested callbacks and see where life starts hurting.

And yes…

If you understood this…

You are officially one step closer to escaping callback hell 😎

Have you ever written something like this in JavaScript?

const name = "Barun";
const age = 22;

const message = "My name is " + name + " and I am " + age + " years old.";
console.log(message);

And then after writing this… you just stared at the screen and thought…

“Yeh kya likh diya maine 😐”

The Problem with Traditional String Concatenation

Technically… what we are doing above is called string concatenation.

But practically… we are creating a mess.

Let’s see why.

Problem 1: Readability goes on leave 🏖️

const order = "User " + username + " has ordered " + itemCount + " items worth ₹" + totalAmount;

Now tell me honestly…

Can you read this in one go?

Or do you need chai + 2 min silence?

Problem 2: Too many + signs

Feels like maths class again.

"Hello " + name + ", welcome to " + company + ". Your ID is " + id

After a point, you don’t know what’s string… what’s variable… what’s life…

Problem 3: Multi-line strings = headache

const message = "Hello " + name + "\n" +
                "Welcome to our platform.\n" +
                "We hope you enjoy your stay.";

This is not coding.

This is suffering.

Enter Template Literals (The Hero 🦸)

Now JavaScript said…

“Developers are already crying… let me help them.”

And introduced Template Literals.

Template Literal Syntax

Instead of double quotes " " or single quotes ' '

We use backticks:

` `

Yes… that button you never used on your keyboard 😏

Embedding Variables (The Magic ✨)

Instead of +, we use:

${variable}

Let’s rewrite the same example:

const name = "Barun";
const age = 22;

const message = `My name is \({name} and I am \){age} years old.`;
console.log(message);

Now read this once…

Feels like English sentence, right?

No confusion.

No headache.

No “+ + + + +”.

Before vs After (Reality Check)

Old Way 😵

const message = "Hello " + name + ", your order of " + item + " is confirmed.";

New Way 😎

const message = `Hello \({name}, your order of \){item} is confirmed.`;

Difference dekha?

Old code = Puzzle New code = Sentence

Multi-line Strings (Finally Peace 🧘)

Earlier:

const email = "Hi " + name + ",\n" +
              "Your account has been created.\n" +
              "Thank you!";

Now:

const email = `Hi ${name},
Your account has been created.
Thank you!`;

No \n

No +

Bas seedha kaam.

Real World Example (Zindagi se juda hua 😄)

Imagine you are building an e-commerce app.

const user = "Ravi";
const product = "iPhone 15";
const price = 80000;

const message = `Hello ${user},
Your order for ${product} has been placed successfully.
Total Amount: ₹${price}`;

console.log(message);

Now this looks like a real message.

Not like some broken code experiment.

String Interpolation Visualization (Dimag mein picture banao 🧠)

Think like this:

Template Literal = Sentence + Placeholders

"Hello ${name}" → Hello Barun

${} acts like a slot machine

You put variable → it gives value

Use Cases in Modern JavaScript

Where do we actually use this?

Everywhere.

1. Logging

console.log(`User \({username} logged in at \){time}`);

2. HTML Templates (Frontend devs ka favourite)

const card = `
  <div>
    <h2>${title}</h2>
    <p>${description}</p>
  </div>
`;

3. API Responses

const error = `User with ID ${id} not found`;

4. Dynamic Messages

const status = `You have ${notifications} new notifications`;

One Hidden Superpower 🔥

You can even run expressions inside ${}

const a = 10;
const b = 20;

console.log(`Sum is ${a + b}`);

Output:

Sum is 30

Matlab… yeh sirf variable nahi… logic bhi samajhta hai.

Final Suggestion (Golden Rule 🏆)

Whenever you see yourself writing:

"Hello " + name + " something " + value

Stop right there.

Take a deep breath.

And convert it to:

`Hello \({name} something \){value}`

Conclusion

So what did we learn today?

• String concatenation works… but makes code ugly

• Template literals make code readable and clean

• ${} is your new best friend

• Multi-line strings become effortless

Homework (Haan bhai… bhagna mat 😏)

Create a message like:

Hello Aman,
You have 5 pending tasks.
Your total score is 87.

Using:

• Old concatenation

• Template literals

Then compare both.

And tell me honestly…

Which one feels like coding… and which one feels like torture?

And remember…

Good developers don’t just write code… They write readable code.

See you in next blog 🚀

Well technically!!!...

Errors are issues that occur when your JavaScript code stops executing as expected.

But wait…

This sounds like your maths teacher explaining integration 😵‍💫

So let’s understand this in our way.

When Life Breaks… JavaScript Also Breaks

Imagine this:

You are ordering food online 🍔

You click “Place Order”…

And suddenly… nothing happens.

No confirmation, no error, no refund

Just silence…

That… my friend… is what we call bad error handling.

Now let’s bring this to code.

console.log(user.name);

But…

const user = null;

Boom 💥

👉 Error: Cannot read properties of null

Types of Errors (Real Life Style)

JavaScript errors are mainly of 3 types:

1. Syntax Error

Your code is written incorrectly.

Like writing:

if (true {
  console.log("Hello");
}

Missing )… and JavaScript says:

👉 “Bhai pehle grammar seekh ke aa”

2. Runtime Error

Code runs… but crashes during execution.

const user = null;
console.log(user.name);

This is like:

You reached the restaurant… but it's closed 🚪

3. Logical Error

Code runs perfectly… but gives wrong result.

const total = 10 + "5"; // "105"

This is like:

You ordered pizza… got pineapple pizza 🍍🍕

Technically correct… emotionally wrong.

Now Comes the Hero — try & catch

So how do we handle errors?

JavaScript gives us a bodyguard 🛡️

👉 try...catch

try {
  const user = null;
  console.log(user.name);
} catch (error) {
  console.log("Something went wrong");
}

How it works?

• try → Run risky code

• catch → Handle error if it occurs

Real Life Example

You are transferring money 💸

try {
  transferMoney();
} catch (error) {
  console.log("Transaction failed. Please try again.");
}

Instead of app crashing…

👉 User sees a message 👉 Business saves reputation 👉 You save your job 😅

The Flow (Important)

Try to visualize this:

Start
  ↓
try block runs
  ↓
Error?
  ↓         ↓
No          Yes
↓           ↓
skip catch  catch runs
  ↓
finally runs (always)
  ↓
End

Yes… there is one more player 👇

The Finally Block (The Honest Worker)

No matter what happens…

finally will always run.

try {
  console.log("Trying...");
} catch (error) {
  console.log("Error occurred");
} finally {
  console.log("I will always run 😎");
}

Real Life Example

ATM Machine:

try {
  withdrawMoney();
} catch (error) {
  console.log("Transaction failed");
} finally {
  ejectCard(); // always happens
}

Even if money fails…

👉 Card always comes out

Throwing Custom Errors (Ab Developer Bolega 😎)

Sometimes default errors are not enough.

We want to control the message.

function withdraw(amount) {
  if (amount > 10000) {
    throw new Error("Limit exceeded bhai 😅");
  }
  return "Money withdrawn";
}

try {
  withdraw(20000);
} catch (error) {
  console.log(error.message);
}

Why This is Powerful?

Instead of random crash…

👉 You define the problem 👉 You define the message 👉 You guide the user

Graceful Failure (The Real Goal)

Good developers don’t write bug-free code…

👉 They write code that fails gracefully

Bad Example ❌ App crashes

Good Example ✅ App says:

“Something went wrong, please try again”

Debugging Benefits (Why You Should Care)

Error handling helps you:

• Find bugs faster 🔍

• Prevent app crashes 🚫

• Improve user experience ❤️

• Write production-ready code 🚀

One Small Example (Real World Combo)

function login(user) {
  try {
    if (!user) {
      throw new Error("User not found");
    }

    console.log("Welcome " + user.name);

  } catch (error) {
    console.log(error.message);
  } finally {
    console.log("Login attempt finished");
  }
}

login(null);

Output:

User not found
Login attempt finished

Final Thoughts

Errors are not enemies…

They are signals 🚨

They tell you:

👉 “Something is wrong… fix me”

If you ignore them…

Your app becomes chaos 😵

If you handle them…

You become a real developer 💪

Homework (Don’t Run Away 😏)

Q1

What will be the output?

try {
  console.log(a);
} catch (e) {
  console.log("Error handled");
}

Q2

Fix this code using try-catch:

const data = JSON.parse("{name: 'Barun'}");
console.log(data);

Q3

Create a function:

• If age < 18 → throw error

• Else → print "Access granted."

Last Line (Important)

A good developer writes code…

A great developer handles failure.

And trust me…

In real world…

Failure comes more often than success 😄

Inspired by the style and storytelling approach from the shared blog examples

Nested Arrays & Flattening

And trust me… if you understand this properly, you will start thinking like a developer… not like a “copy-paste engineer” 😌

Also… I am not going to start with heavy definitions… because honestly… kisi ko samajh nahi aata usse.

So what are Nested Arrays?

Technically…

A nested array is an array inside another array.

Simple? Too simple… suspiciously simple 🤨

Let’s understand it in our way.

Real Life Example

Imagine your WhatsApp groups:

• Family Group → messages

• Friends Group → messages

• Office Group → messages

Now if you store all groups:

[
  ["Hi beta", "Khana khaya?"],
  ["Bhai party kab?", "Match dekha?"],
  ["Deadline kal hai", "Meeting at 10"]
]

This… is a nested array

Visual Structure (Important)

Think like this:

[
  [1, 2],
  [3, 4],
  [5, 6]
]

• Outer array → main container

• Inner arrays → sub containers

Or in human language:

“Array ke andar aur array ghus gaya hai”

Problem Starts Here 😏

Now suppose interviewer asks:

👉 “Give me all elements in one single array”

Output should be:

[1, 2, 3, 4, 5, 6]

Now your brain:

“Easy hai bhai… dekh lenge”

But code likhne baithoge…

Tab samajh aayega asli struggle 😌

What is Flattening?

Flattening means:

👉 Converting nested arrays into a single-level array

Step by Step Thinking (Very Important)

Let’s take:

const arr = [1, [2, 3], [4, [5, 6]]];

Now think like a developer… not like a student.

Step 1: Check each element

• 1 → normal number → add

• [2,3] → array → open it

• [4,[5,6]] → array → open again

Step 2: Keep opening until no array left

Final result:

[1, 2, 3, 4, 5, 6]

Why Flattening is Useful?

Let’s be practical…

1. API Data

Sometimes backend sends:

[["apple", "banana"], ["mango"]]

But frontend needs:

["apple", "banana", "mango"]

2. E-commerce Example

Orders:

[
  ["shirt", "pant"],
  ["shoes"],
  ["watch", "belt"]
]

You want:

👉 total items sold

Flatten first → then count

3. Interview Favorite 😏

“Flatten this array without using built-in methods”

And then…

Candidate: 😵‍💫

Different Ways to Flatten Arrays

Now real game starts 🔥

1. Using flat() (Easy Mode 😌)

const arr = [1, [2, 3], [4, 5]];

const result = arr.flat();

console.log(result);
// [1, 2, 3, 4, 5]

Deep Nested?

arr.flat(Infinity)

2. Using Loop (Manual Thinking 🧠)

const arr = [1, [2, 3], [4, 5]];
let result = [];

for (let i = 0; i < arr.length; i++) {
  if (Array.isArray(arr[i])) {
    result.push(...arr[i]);
  } else {
    result.push(arr[i]);
  }
}

console.log(result);

3. Recursive Approach (Interview King 👑)

Now THIS is what interviewer wants.

function flatten(arr) {
  let result = [];

  for (let item of arr) {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
  }

  return result;
}

const arr = [1, [2, [3, 4]], 5];

console.log(flatten(arr));
// [1, 2, 3, 4, 5]

Why recursion?

Because…

“Array ke andar array ke andar array…”

Kitna andar jayega? 👉 Unknown

So we use recursion.

4. Using reduce()

Little advanced… but sexy 😏

const arr = [1, [2, [3, 4]], 5];

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

console.log(result);

Common Interview Scenarios

Now listen carefully… this is gold.

Scenario 1

👉 Flatten array without using .flat()

Expected answer: recursion

Scenario 2

👉 Flatten only one level

[1, [2,3], [4]]

Output:

[1,2,3,4]

Scenario 3

👉 Flatten to specific depth

arr.flat(2)

Scenario 4

👉 Count total elements in nested array

Hint:

👉 Flatten → then .length

How to Think (Most Important Part)

Whenever you see nested array:

Don’t panic ❌ Don’t jump to code ❌

Ask:

1. Is this element array?

2. If yes → go inside

3. If no → collect it

बस… problem solved.

Diagram Idea (Mental Visualization)

Think like onion layers 🧅

[1, [2, [3, [4]]]]

You keep peeling layers until:

👉 only numbers left

Small Assignment (Don’t Run 😏)

const arr = [1, [2, [3, [4, [5]]]]];

Tasks:

1. Flatten this array

2. Count total elements

3. Find sum of all elements

Final Words

Nested arrays are not difficult…

But your thinking makes it difficult.

Once you understand:

👉 “Check → Dive → Collect”

You can solve ANY flatten problem.

And remember…

Interview mein agar ye question aaya…

Aur aapne recursion laga diya…

Interviewer bolega:

“Yeh banda copy paste nahi karta… sochta hai” 😌🔥

अब जाओ… practice करो… warna next interview mein phir bolna padega:

“Sir… thoda hint de dijiye…” 😭

Well technically!!!...

MDN will say something like:

Spread syntax allows an iterable to be expanded, and rest collects multiple elements into a single variable.

Areee… ruk jao bhai… 😅
Ye sab thoda zyada “interview wali English” ho gayi.

Let’s understand this in our own way — the Barun style.

Spread vs Rest — Ekdum Simple Bhasha Mein

👉 Spread → Expand karta hai (failata hai)
👉 Rest → Collect karta hai (jodta hai)

बस इतना समझ लो… aadha kaam ho gaya.

Real Life Example (Sab clear ho jayega)

Socho tumhare paas ek Laddu ka dabba hai 🍬

Spread kya karega?

Dabba khol ke saare laddu table pe faila dega

Rest kya karega?

Table pe pade laddu ko wapas ek dabbe me jama karega

Spread Operator ( ... )

👉 Kya karta hai?

Array ya object ke andar ke values ko bahar nikaal deta hai

📦 Example 1: Array Expand karna

const numbers = [1, 2, 3];

// Without spread
console.log(numbers); 
// [1, 2, 3]

// With spread
console.log(...numbers); 
// 1 2 3

👉 Yaha kya hua?

Array toot gaya…

values alag alag ho gayi.

Example 2: Array Copy karna (Real Use Case)

const original = [1, 2, 3];
const copy = [...original];

console.log(copy);

👉 Ye shallow copy banata hai

👉 Original safe rehta hai

Example 3: Arrays Merge karna

const arr1 = [1, 2];
const arr2 = [3, 4];

const merged = [...arr1, ...arr2];

console.log(merged);
// [1, 2, 3, 4]

👉 Interview me sabse jyada poocha jaata hai 😏

Example 4: Objects me Spread

const user = {
  name: "Barun",
  age: 22
};

const updatedUser = {
  ...user,
  city: "Patna"
};

console.log(updatedUser);

👉 Old data + new data = done ✅

Rest Operator ( ... )

👉 Kya karta hai?

Multiple values ko ek variable me collect karta hai

Example 1: Function Arguments

function add(...numbers) {
  console.log(numbers);
}

add(1, 2, 3, 4);

👉 Output:

[1, 2, 3, 4]

👉 Sab values ek array me aa gayi

Example 2: Destructuring me Rest

const numbers = [1, 2, 3, 4];

const [first, ...rest] = numbers;

console.log(first); // 1
console.log(rest);  // [2, 3, 4]

👉 First alag

👉 Baaki sab ek bundle me

Spread vs Rest — Difference Samjho

Visual Soch (Diagram Type Samajh)

Spread

[1, 2, 3]  →  1  2  3

Rest

1  2  3  →  [1, 2, 3]

Real World Use Cases (Important hai bhai)

✅ 1. React me State Update

const user = {
  name: "Barun",
  age: 22
};

const updated = {
  ...user,
  age: 23
};

👉 Direct mutation nahi

👉 Clean update

✅ 2. Function me Unlimited Parameters

function totalPrice(...prices) {
  return prices.reduce((a, b) => a + b);
}

👉 Shopping cart jaisa system

✅ 3. API Data Merge

const apiData = { name: "Barun" };
const extraData = { role: "Developer" };

const final = { ...apiData, ...extraData };

👉 Backend + frontend data combine

Golden Rule (Yaad rakhna)

👉 Jab failana ho → Spread

👉 Jab jama karna ho → Rest

Common Confusion

function test(...args) {}  // Rest

const arr = [...numbers]; // Spread

👉 Same ...

👉 Kaam alag

🧪 Mini Assignment (Dimaag chalao)

Q1

const arr1 = [1, 2];
const arr2 = [3, 4];

const result = [...arr1, 5, ...arr2];
console.log(result);

Q2

function test(a, b, ...rest) {
  console.log(rest);
}

test(1, 2, 3, 4, 5);

Q3 (Thoda tricky 😏)

const [a, ...b] = [10, 20, 30, 40];

console.log(a);
console.log(b);

Final Words

Spread aur Rest dono ek hi family ke hai…

Bas ek extrovert hai (Spread)

aur ek introvert hai (Rest) 😅

Ek duniya me values failata hai

Dusra sabko ek jagah jama karta hai

Agar ye concept clear ho gaya na…

Toh aapka JavaScript ka level

“just learning” se

“developer thinking” me shift ho gaya 🚀

Chalo ab sach sach batao…

Pehle confuse the ya ab clear hai? 😏

At some point in your JavaScript journey, you created that one file.

You know the one.

• 1000+ lines

• Variables named data2, finalData, finalFinalData

• Functions doing 7 different things

• And a comment at the top:
  // TODO: clean this later

Congratulations. You’ve experienced life before modules.

Let’s fix that.

Why Are Modules Needed?

Imagine running a startup where:

• The CEO is also the developer

• The developer is also the HR

• The HR is also the chai wala

That’s exactly what your JavaScript file becomes without modules.

Everything is dumped into one place.

The Problems Start Like This:

1. Naming conflicts
   You create a function called calculate().
   Your teammate also creates a function called calculate().
   Boom. One overrides the other. Debugging begins. Tears follow.

2. No structure
   Authentication logic sits next to UI code, sitting next to API calls.
   It’s like putting your toothbrush in the fridge and milk in your cupboard.

3. Hard to maintain
   You change one thing → five things break.
   Now you're afraid to even press Ctrl + S.

Enter Modules (Your Code’s Personal Organizer)

Modules help you break your code into smaller, meaningful pieces.

Instead of one giant file, you get:

• auth.js

• api.js

• utils.js

• main.js

Each file has a clear responsibility.

Think of modules like different rooms in a house:

• Kitchen → cooking

• Bedroom → sleeping

• Bathroom → don’t ask questions

Everything has a place.

Exporting Functions or Values

Now that you've split your code, you need a way to share things between files.

That’s where exports come in.

Example:

// math.js

export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

Here, we are saying:

"Hey world, you can use add and PI from this file."

Importing Modules

Now let’s use those exported things somewhere else.

// app.js

import { add, PI } from './math.js';

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

Simple.

You export from one file and import into another.

It’s like ordering food from another room instead of cooking everything yourself.

Default vs Named Exports

This is where most people get confused. Let’s clear it once and for all.

Named Exports

You can export multiple things.

// utils.js

export const greet = () => "Hello"; 

export const bye = () => "Goodbye";

Import them like this:

import { greet, bye } from './utils.js';

Names must match exactly.

No drama allowed.

Default Export

You can export one main thing.

// logger.js
export default function log(message) {
  console.log(message);
}

Import it like this:

import log from './logger.js';

Notice:

• No curly braces

• You can rename it

import anythingYouWant from './logger.js';

JavaScript doesn't care. It’s chill like that.

Real-Life Analogy

Think of it like this:

Named exports = multiple people in a group chat

Default export = that one friend who always speaks for everyone

Benefits of Modular Code

Now let’s talk about why this actually matters.

1. Maintainability

Instead of digging through a jungle, you know exactly where things live.

Bug in authentication?

Go to auth.js . Done.

1. Reusability

Write once, use everywhere.

Your formatDate() function can now travel across files like a freelancer.

1. Readability

A new developer joins your project.

Instead of saying:

"Yeah, bro, everything is in index.js."

You can say:

"Check the modules. It's structured."

Now you look professional.

1. Scalability

Your project grows.

Without modules → chaos grows faster

With modules → structure grows with it

1. Debugging Becomes Less Painful

Smaller files = smaller problems

Instead of:

"Something broke somewhere."

You get:

"Something broke here."

Big difference.

Final Thoughts

Modules don’t just organize your code.

They save your future self from suffering.

Because trust me:

Future you will open your old project and say, "Who wrote this garbage?"

And the answer will be: You.

So do yourself a favor.

Use modules.

Well technically!!!...

MdN

The Object type represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.

This was way to technicall, right? So let's understand it in our own way.

In Simple Words, an object is a non-primitive data type that can store data in the key : pair format, within curly brackets.

Examples:

const marks = {
    english: 34,
    maths:56,
    science: 40,
    hindi: 80,
    computer: 98,
    computers: 98
}

Yes, I know that I am more skilled at computers than in other subjects. But it doesn't mean other subjects are not important, but we have an unknown relationship with Computers. At least I do have it.

So, I got 34 in English, 56 in Maths, 40 in Science, 80 in Hindi, and 98 in Computer. But I don't know why the college has given me computer marks 2 time. No problem, we will see this later on and for the time beign we will ignore that.

How do we store this data in JS or in any other programming language?

In a variable?

Then, what if we have to add a few more subject marks?

We have to create more variables, right? Is it the most efficient way? No

So, the array should work right because it is built to store similar data into one place, right?

Just the array for marks will confuse that, which marks belong to which subject. So, we also need to have the subjects array and store subjects' names in the same order as the marks is stored.

And this will make more complications because to update the marks or to add any new subject marks, we have to make sure that both the variable or array sync with each other. And we have to manage two different variables.

So, then objects come into the picture.

const marks = {};

It can be created in multiple ways, but we are going to see some common ones.

The above code you can see is what we call variable initialisation or object literal. Which means first, we are declaring the variable with a name marks , and we are assigning the empty object with curly braces.

Now that we have created an empty object, how would we store the information and retrieve it?

There are mainly two ways to do that:

1. Using square brackets []

2. Using dot . notation.

We will see both one by one.

Square brackets.

const marks = {
    english: 34,
    maths:56,
    science: 40,
    hindi: 80,
    computer: 98
}


console.log(marks['english']);
console.log(marks['math']);
console.log(marks['science']);
console.log(marks['hindi']);
console.log(marks['computer']);

Dot Notations.

const marks = {
    english: 34,
    maths:56,
    science: 40,
    hindi: 80,
    computer: 98
}

console.log(marks.english);
console.log(marks.math);
console.log(marks.science);
console.log(marks.hindi);
console.log(marks.computer);

Key name with spacing will not work in dot notation. It will only work in square bracket notation.

40 is the minimum passing mark. I failed in English and just passed in science.

I got the marks 😱😰, and it's time to show this to devils 👿 (aree bhai itna bhi nhi samjte - parents - kya gunda bana ga ree tu).

But can I show this to my parents?

Wish me RIP ☠️...

But wait..... a minute.......

Is there any way that I could change the marks I obtained?

I guess so, then let's dive into how to update the object value and save my life from the devils.

const marks = {
    english: 34,
    maths:56,
    science: 40,
    hindi: 80,
    computer: 98
}

console.log("++++++++++++++")

// Lets save ourself by dot notation
marks.english = 49
marks.science = 48

console.log(marks.english);
console.log(marks.science);

// Lets save ourself by square bracket notation
marks['english'] = 50;
marks['science'] = 49;

console.log(marks['english']);
console.log(marks['science']);

Nice, just like we access the data from the object, we can also update the values. So, now I get a little bit of relief.

Now, college is college; they are saying that we have to give you the marks, and create your marksheet by yourself.

In My Mind: Well, good, I wanted that only.

But here is the problem, they have given me computer marks two times with extra s letter with one of the marks.

So, how could we remove that?

delete A keyword that you will find in almost all programming languages for deleting things at runtime from the memory.

So, how to use that?

const marks = { 
    english: 34, 
    maths:56, 
    science: 40, 
    hindi: 80, 
    computer: 98, 
    computers: 98 
}

delete marks['computers']; // yes you can use dot notation as well  `delete marks.computers;

console.log(marks);

So let's iterate through this marks object and try to create a report card now.

There are a couple of ways to loop through this object. We are going to see an uncommon way of doing that.

Object.entries()

.entries() It is the static method in Global Object that helps to convert the object into arrays.

Each key and value pair is converted into an array of 2 elements. The first element is the key, and the second element is the array.

Now all this 2 elements array are wrapped inside another array.

const marks = { 
    english: 34, 
    maths:56, 
    science: 40, 
    hindi: 80, 
    computer: 98,
}

const marks_array = Object.entries(marks);
console.log(marks_array);

Now we can iterate through marks_array , as it is easy to iterate through an array in comparison to objects.

const marks = { 
    english: 34, 
    maths:56, 
    science: 40, 
    hindi: 80, 
    computer: 98,
}

const marks_array = Object.entries(marks);

// Instead of [key, value] we can also write mark
// and can access the value like mark[0], mark[1]
// where mark[0] - key and mark[1] - value
// try to print the value of [key, value] inside the loop.
console.log("Barun Tiwary Report Card");
for (const [key, value] in marks_array) {
    console.log(`\({key.toUpperCase()}: \){value}`);
}

console.log("Barun is one of our very hard working student");
console.log("Please ask his friends to read the blog");
console.log("We are proud to tell that he studies in our college");
console.log("Principal: Ganja Dakla");

JavaScript Objects – Assignments

Assignment 1: Create & Access Student Data

Objective

• Understand object creation

• Learn dot vs bracket notation

• Work with key-value pairs

Question

Create an object called studentMarks with the following data:

• english → 45

• maths → 67

• science → 52

• computer science → 90 (note the space in key)

Tasks

1. Print all values using dot notation

2. Print all values using bracket notation

3. Try accessing "computer science" using dot notation

   • What happens? Why?

4. Fix it using the correct method

Assignment 2: Update, Delete & Fix the Data

Objective

• Learn updating values

• Delete properties

• Handle mistakes in objects

Question

Given this object:

const marks = {
  english: 34,
  maths: 56,
  science: 40,
  hindi: 80,
  computer: 98,
  computers: 98
};

Tasks

1. Update:

   • english → 50

   • science → 49

2. Delete the incorrect key (computers)

3. Add a new subject:

   • history → 77

4. Print the final object

Assignment 3: Build a Report Card System

Objective

• Learn Object.entries()

• Loop through objects

• Apply real-world logic

Question

Using this object:

const marks = {
  english: 50,
  maths: 56,
  science: 49,
  hindi: 80,
  computer: 98
};

Tasks

1. Convert the object into an array using Object.entries()

2. Loop through it and print:

ENGLISH: 50
MATHS: 56

1. Add logic:

   • If marks < 40 → print "Fail"

   • Else → print "Pass"

Example:

ENGLISH: 50 - Pass
SCIENCE: 49 - Pass

1. Print a final message:

   • "Student has successfully passed the exam"

   • Or failed if any subject < 40

Bonus Challenge

1. Calculate average marks

2. Find highest scoring subject

3. Find lowest scoring subject

Consider Arrays as the album in your music app where you store all your favourite music. It only contains your favourite music lists. This sounds a little familiar, right?

So, now you want a new set of albums in your music app that will store only music designed to help you feel calm and be more productive while you work. Now, what do you generally do? Obviously, Barun, we can create a new album where we will be storing all the calm, mindfulness, and meditation kind of music, which improves my productivity.

Exactly, unknowingly you have just created an array (Album) which contains all your music (data of the same type - category) related to work in one place.

Now, let's understand technically what an array is in JavaScript. As javascript have different sets of data types, which are Number, String, Boolean, Undefined, Null, Symbol, etc and at some point in time we need to store all the related data into a single place. So, where do we store all that data? YES, the answer is an array. Although we have other data structures where we can store similar data, but todays topic will only move around Array.

Now let's deep dive into the code.

The question is, how can we create an Array?

The code below explains how we create an array in JS.

// Creating an empty array named `empty_array`, you can name this anything, whatever you like, like masti_album;
const empty_array = [];

// Creating an array, which stores all the songs which you listent on the regular basis, named `regular_album`. Again, you can name this anything.
const regular_album = ['Balam Pichkari', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

So, in the above code, we have created 2 different arrays.

The first array is empty; it doesn't contain any songs. The second array contains the regular song names, which are of the string data type.

Now, if I ask you, tell me in the regular_album list, the song name 'Jhmka Jira Re' is in which place?

You would answer that it is in the 2nd place, right?

Well !!!...

Technically, you are correct, but technically, you are not 😅😅😅.

Areee... don't be so confused. I was just kidding. But on a serious note. You are wrong.

Technically, in JavaScript or even in any other programming language, the counting (Indexing) in the array starts from 0. So, the 'Jhumka Gira Re', the 2nd element in the arrays, is in the 1st index.

Element and Index are two different things.

1. An element is data

2. An index is where that element(data) is positioned

And this position or index starts from 0 in the array.

So, now if I ask you, 'Saiyaara', is in which position or index, then what is your answer?

Aree Uncle and Aunties, not in 5th position,

'Saiyaara' is the data, and the data is stored in the 4th index or position, because the index starts from 0. And if we start counting the position of this song from 0 in the regular_album array, then its position comes 4.

That means the index of this song is 4th, not 5th.

So, lets see how to access the element and perform some operations in it, in code.

const regular_album = ['Balam Pichkari', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

Above, I have defined the array as we discussed in the last example.

Now let's print the 2nd element, not the index. So, first, tell me what's the value of the 2nd element?

// regular_album[1] = "Jhumka Gira Re"
console.log(regular_album[1]);

1st element = 0 index

2nd element = 1 index

3rd element = 2 index

Likewise, when we go to the 2nd element, which is stored in the 1st index. Then, our final output of the code will be Jhumka Gira Re

Ohh god, I listen to the same song in the repeat mode for decades just like Anirudh Bhiaya listens. Now I also want to move on and replace my old regular songs with new ones. So, how should I do it?

Let's learn this.

As we already know, using the square bracket just after the variable name in which the array is stored with the index value, we can access the element at that index. In the same way, we can replace the old value with a new one.

Do you wanna see??

Really, do you wanna update your old and clumsy regular song with a new one?

So, just follow along with the code.

// Creating an empty array named `empty_array`, you can name this anything, whatever you like, like masti_album;
const empty_array = [];

// Creating an array, which stores all the songs which you listent on the regular basis, named `regular_album`. Again, you can name this anything.
const regular_album = ['Balam Pichkari', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

// Holi season has passed on and you want to replace 'Balam Pichkari' with something new, just like below.
regular_album[0] = 'Dancing with ghost';

console.log(regular_album);

Ohh.. god, I taught you how to replace your old song with a new one. Now you can update any song in the same way. Have FUN!!!...

You always listen to the list of songs, but do you really know how many songs you listen to on a daily basis??

No?

I knew it, I knew it.

Don't worry, we have something called length property in the array, which can help us count the total number of elements in the array list. So, using that, we can count how many total songs are in your playlists.

Let's do it, guys

 // Creating an empty array named `empty_array`, you can name this anything, whatever you like, like masti_album;
const empty_array = [];

// Creating an array, which stores all the songs which you listent on the regular basis, named `regular_album`. Again, you can name this anything.
const regular_album = ['Dancing with ghost', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

// Total Songs you listen on daily basis.
console.log(regular_album.length) // Output: 6

Total Element in the Array = last index + 1

or vise versa

Last Index = Total Element in the Array - 1

['Dancing with ghost', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana']

0 index, 1 index 2 index 3 index

Total Length = 4

Ok, I taught you a couple of things like:

1. How is your list of songs stored effectively in one place?

2. How are your old songs replaced with new ones under the hood?

3. How do you get to know how many songs you listent in a day?

But still, you should have a question in your mind about how your songs are played one by one, right?

No!!!

You didn't think about that?

What are your thinking capabilities, Uncle & Aunties? Where are you thinking?

AI has ruined your thinking capability.

But no worries, I am here to recover that only. I have taken the "Thaka" of teaching you guys, so here I am.

Let's learn how to do that!!!

So, below is the code for iterating (looping) your song. Or how your songs are beign played one by one.

const songs = [];


const songs = ['Dancing with ghost', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];


for (let i = 0; i < songs.length; i++) {
    console.log(reglar_album[i]);
}

Dry Run:

songs = ['Dancing with ghost', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

Loop:
----

i        i < songs.length        output(songs[i])            i++
--       ----------------        ----------------            ---
0        0 < 6                   'Dancing with ghost'        0
1        1 < 6                   'Jhumka Gira Re'            1
2        2 < 6                   'Dum Maro Dum'              2
3        3 < 6                   'Didi Tera Devar Deewana'   3
4        4 < 6                   'Saiyaara'                  4
5        5 < 6                   'Aavan Jaavan'              5
6        6 < 6                   Loop Breaks;

Now, if you still can't understand how your songs are being played, then God saves you in this hardcore world in the AI ERA.

Yes, Homework… Don’t Run Away 😏

Alright Uncle & Aunties…
Enough theory. Enough songs. Enough blaming AI for everything.

Now it's your turn to prove that your brain is still working.

We are going to do the same thing we did with songs, but this time with movies.

Why movies?

Because let's be honest…
You probably remember movie names faster than JavaScript concepts.

So let's start.

1. Create Your Movie Album

   Create an array called favourite_movies movies that stores 5 movie names that you really like.

   But wait… make sure you actually have exactly 5 elements in the array.

   Not 4.
   Not 6.

   JavaScript will not complain, but your teacher might.

2. Find the First Movie

   Print the first movie from the array.

   Remember something important:

   Arrays in JavaScript do not start counting from 1.

   If you start counting from 1… your code will politely give you the wrong answer.

3. Find the Last Movie (Without Hardcoding)

   Print the last movie in the array.

   But here is the rule:

   You are NOT allowed to directly write the index number.

   Meaning this is not allowed:

   favourite_movies[4]
   

   Your code should still work even if someone later adds more movies to the array.

   Think carefully.

   JavaScript has already told you how many elements exist.

4. Replace One Movie

   Assume you got bored of one movie.

   Replace the 3rd movie in the array with a new movie name of your choice.

   Small brain teaser:

   The question says 3rd movie.

   But arrays start from 0.

   So choose the index carefully or your replacement will happen somewhere else.

5. Print All Movies One by One

   Use a for loop to print every movie in the array.

   But here is the tiny trap:

   Your loop should not try to access an index that does not exist.

   If your loop runs one extra time, JavaScript will happily print undefined.

   Which means your loop condition is wrong.

Operators are the way to perform mathematical operations in any programming language, and yes, JavaScript also has many of them.

Generally, there are at most 3 types of operators

1. Arithmetical operators

2. Logical Operators

3. Relational Operators

You will find many others as well, but most will be in one of the types above.

Arithmetical Operators

These are the operators that perform mathematical operations such as addition and subtraction.

% is not percentage in programming. It is called modulus (returns the remainder).

Some operators:

1. [ + ] Addition

2. [ - ] Subtraction

3. [ * ] Multiplication

4. [ / ] Multiplication

5. [ % ] Modulus

All the above operators you would have used in your life, right, so I'm just explaining about the modulus (%) operator

In the above image, as you can see, I have done a simple division, which we learn in our schools.

So the answer is 25 / 2 = 12.5 right, which we also called Quotient in Division. But in modulus, we divide the number until we get the remainder (Integer Quotient, not decimal), and then the remainder, which we get, is the final result of modulus.

We use modulus in the same way we use division; just in case of modulus, we replace the division symbol (/) with the modulus symbol (%).

Now we also have Unary Operator, which comes under the Arithmetic Operators. Unary Operator means the operator which perform action with just a sinlge operands.

In programming operands means a variable, constant , value or expression on which operations can be performed by operators.

Like In:

const cirecleArea = 2 * Math.pi * r ^ 2;

const squareArea = ( length + breadth ) * 2

In above code 2, Math.pi, length, breadth are the operand in which operations are performed by operators.

Unary Operators have 2 things with them

1. The symbols, which are the Increment Operator ( ++ ) and the Decrement Operator ( -- )

2. Position of these Operators: Prefix (Before the operand) and Postfix (After the operand)

First, lets undertstand the concept of positions.

When we write something like ++a In our code, it represents a prefix increment operator because the Increment (++) operator is used before the operand (a). Similarly, when we write like a++ In our code, it represents a postfix increment operator because the Increment (++) operator is used after the operand (a).

Ok, now you would have understood the meaning of postfix and prefix in unary operators. Now let's understand what does this (++) and (--) symbols do and how the final values are evaluated.

The final evaluation is not just depended on the unary operator but also on the position it is used. Also always keep in mind that ++ or -- operators only increase or decrease the value with 1 only not less that that nor more than that. But when it will increase or decrease will depends on the position it is beign used.

Below is the simple code given. Run that in your browser or in your Node environment. Then continue reading the blog to understand the real meaning of it.

let a = 10;
console.log(++a);
console.log(++a);
console.log(a);
console.log(a++);
console.log(a++);
console.log(a);

let b = 10;
console.log(--b);
console.log(--b);
console.log(b);
console.log(b--);
console.log(b--);
console.log(b);

Whenever we use the increment operator in the prefix position, it increments the value by 1 instantly of that operand. And when we use the increment operatorin the postfix position, it doesn't increment the value at the very instant, but whenever we use it in the future, then it will add 1 to that operand.

I know, I know, the last line is a little confusing, but bear with me, read the last sentence 2-3 times, and continue reading.

let a = 10;
// As we are using increment operator in prefix position, it will update the value of a from 10 -> 11 instantly
console.log(++a); // output: ++a = a + 1 = 10 + 1 = 11

// Now as the value of 'a' is updated to 11, from here onward the value of 'a' will be 11 until an unless we update it to something else.
// And now this time as we are using the increment operator but this time in postfix position, it will not update the value at the instant. Instead it will forward that if 'a' is used in the future or not, if yes, it will add on that place
console.log(a++); // output: a++ = a = 11
// From the previous line 'a++'
console.log(a);   // output: a = a + 1 = 11 + 1 = 12

Below is the visual representation of similar code.

This is how you can visualize the whole process of the unary operator. And in case of the decrement operator, you just have to decrease the value by one, like below.

Hopefully, you have understood the concept of Unary Operator, and to test that, there is a little task for you guys. Do let me know the answer in the comments.

// Q1. 
let a = 10, b = 20;
const finalValue = ++a + ++b - b-- - a-- + a++ - --b
console.log(finalValue);

// Q2.
for (var i = 10; i < 20; ++i) {
    console.log(i);
    i += 2 // i += 2 => i = i + 2 => i = 2 + 2 => i = 4;
}

// Q3.
for (var i = 10; --i > 0; i--) {
    console.log(i);
}

Question 1 is a little bit tricky, so I am providing the visual solution to that as well.

Relational Operators

The next set of operators we have in our bucket list is Relational Operator.

You would be familiar with this, as it is also taught in school; the operators are <, >, <=, >=, !=, ==

But, is javascript we also have === . Now you will ask what the difference is between double equal two and triple equal two. Nothing much, like double equal too is too strict, but triple equal to is very strict, like your maths teacher who cuts your whole marks even if the last line of your solution is wrong.

Whenever you use the double equal sign, JavaScript tries to convert the data into nearly all possible data types (implicit data type conversion) so that both the values can match. Just like your English teacher who sometimes forgives your grammar or spelling mistakes and gives you the full marks.

The Golden Rule Most Senior Engineers Follow

Use this mental rule:

Always use === and !==
unless you have a very specific reason not to.

This prevents JavaScript type coercion chaos.

Because things like this exist:

[] == false   // true
"" == 0       // true
"0" == false  // true

JavaScript code example for all the Relational Operators.

const age = 10 == "10";
const marks = 45 === "45";

console.log(age);   // Output: true
console.log(marks); // Output: false


const userAge = 18;

if (userAge === 18) {
  console.log("User is exactly 18");
}

const status = "inactive";

if (status !== "active") {
  console.log("User cannot access dashboard");
}

const score = 90;

if (score > 80) {
  console.log("Excellent performance");
}

const temperature = 10;

if (temperature < 15) {
  console.log("It's cold outside");
}

const age = 18;

if (age >= 18) {
  console.log("Allowed to vote");
}

const itemsInCart = 5;

if (itemsInCart <= 10) {
  console.log("Eligible for small package shipping");
}

// Real world senarios

function canAccessDashboard(user) {

  if (user === null) return false;

  if (user.role !== "admin") return false;

  if (user.loginAttempts >= 5) return false;

  return true;
}

Logical Operator

Let's move to logical operators.

So what exactly are logical operators?

They help us to make logical decisions, like whether we should do this or that.

We have 3 different operators under logical operators:

1. And ( && )

2. Or ( && )

3. Not ( && )

Let's go inside the code and understand its working.

1. && (AND operator)

Think of && as a strict parent.

Everything must be correct.
If one condition fails, the whole plan is cancelled.

Real life example

You want to go out with friends.

But your mom says:

You can go out IF
you finish homework AND clean your room

So the rule becomes:

homeworkDone && roomClean

Code version:

const homeworkDone = true
const roomClean = false

if (homeworkDone && roomClean) {
  console.log("You can go outside")
} else {
  console.log("Stay at home and suffer")
}

Since the room is not clean:

true && false → false

Result:

Stay at home

The AND operator is basically saying:

“No shortcuts. Everything must be done.”

Example from real apps:

if (userLoggedIn && userRole === "admin") {
  console.log("Access granted")
}

Meaning:

User must be logged in
AND
User must be admin

Otherwise:

Security guard says: "Nice try."

2. || (OR operator)

This one behaves like a lazy friend. Only one condition needs to be true.

Real life example

You’re ordering food.

Your brain says:

If pizza OR burger is available, I will eat.

Expression:

pizzaAvailable || burgerAvailable

Code:

const pizzaAvailable = false
const burgerAvailable = true

if (pizzaAvailable || burgerAvailable) {
  console.log("Food secured. Happiness restored.")
}

Output:

Food secured. Happiness restored.

Even though pizza is unavailable, burger saves the day.

OR operator basically says:

“I’m not picky. Just give me something.”

3. ! (NOT operator)

This is the opposite machine.

It flips truth like a light switch.

Real-life example

Your brain is checking Monday morning motivation.

motivated = false

Then someone asks:

Are you NOT motivated?

Code:

const motivated = false

if (!motivated) {
  console.log("Back to sleep")
}

! flips the value:

!false → true

So the output is:

Back to sleep

NOT operator basically says:

“Whatever this was… do the opposite.”

Assignments

Guess the Output

const a = 10;
const b = "10";
const c = 20;

console.log(a == b);
console.log(a === b);
console.log(a != b);
console.log(c > a);
console.log(a < c);
console.log(a >= 10);
console.log(c <= 15);

Fix the Logic

const marks = "40";

if (marks == 40) {
    console.log("Student scored exactly 40");
}

if (marks >= 40) {
    console.log("Student passed");
}

if (marks < 40) {
    console.log("Student failed");
}

if (marks != 100) {
    console.log("Student did not get full marks");
}

cURL (Client URL) is a utility tool built on top of multiple underlying libraries, including libcurl, libcurl-easy, libcurl-share, and more. In this article, we will learn how to use this tool throughout the Software Development journey.

But before that lets understand about the server.

What is a server?

It is just like your personal laptop or computer that serves something. It could be anything from files to web pages. Simple right?

So, what does it look like?

Though there is no face to it, if you want, you can buy your own server as well for just a few hundred rupees.

Here I own 2 different servers.

• First server is running the famous n8n automation tool for my social media automation.

• And the other server serves the website I own.

This is what a server looks like. Yes, it is the os without any graphics, mostly.

Now, in my second server, I have some web apps. To test those web apps or to interact with them, we can use terminals. But what if we just need to check if the website is up and running, or we need to create some automation that checks every hour if it is up or not?

So, this can be done using cURL.

Now, what exactly is cURL?

It is the tool that helps us to transfer data from or to the server using a URL. And as we know, there are multiple ways we can connect to a server like http, ftp, mqtt and other; cURL supports most of them. Which means we can connect to the server via most of the protocols and transfer or download data through it.

First command.

Now let's make our very first curl request to a server.

curl protocol://resource-path

The above is the very basic way of using the cURL command, where we first tell the terminal to use curl the tool, and then we specify from where to get the resource.

So what actually happens?

• The curl created a request with the resource information

• Made a request to that resource based on the protocol and flags passed

• Collect the response and print it into the STDIN or in simple words, in the terminal.

Now we got to know about request and response. So what are these now?

As you can see above, when you request any website in your browser, it requests that domain just like we did it using curl. When we open that request, we see there is something called Response Headers and Request Headers.

So, in requests, we define multiple things like.

• methods

• path

• root domain

• content-type

• protocols

and many more things, though, which server understands what we are trying to access.

And just like the request server create response with the same information, in addition with extra information that we request to the server.

API calling.

Now lets move on to how to make api request while testing APIs or for doing reverse engineering.

Before moving ahead, we first need to understand some nuances of the API, like

• Methods : There are multiple methods that we can use to make an API request

  1. GET → It is used to request some resource from the server

  2. POST → It is used to create a new resource in the DB through the server.

  3. PUT → It is used to update the existing resources.

• Content-Type : What type of content are we requesting from the server, like JSON, form data, or what?

• Authorization : It is used to verify our authenticity, which means we tell the server look, I have access to this specific API, here is the key (Access Token). Check this and let me access the resource.

Now lets make some API requests to real servers and see what happens.

Getting Joke from API

curl -X GET -H “Accept: application/json” https://icanhazdadoke.com

As you can see, we have successfully made our 2nd API request using curl.

Explanation

-X GET → X flag defines which method we want to use, like GET, POST, PUT, DELETE, or what.

-H “Accept: application/json” → It defines what type of content we are expecting.

And finally, we added the actual API https://icanhazdadjoke.com where we need to make an API request to get the response.

Let me know if you want a more detailed article around cURL.

NOTE: There is no sponsherhip from any company for this blog.

In this article, with the real world analogy, we are going to learn about how the internet works and the key hardware and software components which helps us to access the internet.

Analogy

Barun is renting the new office for his new business. He runs a software development agency named RF-Automation, where he helps businesses to automate their time-consuming operational tasks and build the software for them. Till now, he was working alone from his home, now he wants to rent the office and hire 10-20 employees to expand his agency.

Now, Barun has hired 15 employes mix of Software Developer, Project Manager, and other roles. Also, he has rented an office near HSR Layout in Bangalore. He has also arranged 10 computers, a few printers, and other office furniture to make it look like an agency. Now he need the access to the internet. But currently he does not have any. So, he opened the Airtel thanks app and applied to get access to the high-speed internet available.

On the same evening, the engineer from Airtel arrives at the office location to install Airtel X Stream Wi-Fi. First, he finds the available spot on the nearest Airtel Fiber (Fiber Access Terminal) Box so that he can connect the Airtel Modem (ZYXEL Modem + Router) to it and give him access to the internet.

FAT Box → Fiber Access Terminal Box is the main devices installed in the apartments, flats and other premises for distributing the internet from the main fiber cables to the multiple individual subscriber.

Airtel uses modem of ZYXEL company which build networking related solutions.

Once the engineer finds the available spot near his premise inside the fat box, then he add the new fiber optic cable into that spot, which is connected to the coaxial cable, which will then go to inside the office, where the engineer will install the Airtel Wi-Fi or modem.

The black coaxial cable you can see in the above image is the cable that will go to the home modem, as shown in the image. Finally, the engineer joined the black coaxial cable with the fiber optic cable, and it is connected to the ZYXEL Modem. Now, from this modem, Barun can use the internet in his whole office wirelessly.

Now, still there is still an issue; he has 10 computers and a few printers. A few of the computers have the Wi-Fi capabilities, but a few computers and printers can’t use the internet through a modem as they don’t have wifi capabilites in them. Barun can’t spend more money on buying wifi connector, so he decided to add a switch. He bought a switch from D-Link (DES 1008A), which will connect the modem to the computers and printer, which doesn’t have wifi capabilites.

Now, Barun can run the agency smoothly.

Technical Knowledge

Hub

Barun has not used Hub as he knows how dumb hub it is. Though it is one of the early devices from the early internet era, which helps to connect multiple computers in the LAN (Local Area Network → your home network, which consists of your mobile phones, printers, laptop, PCs, etc), it is still not a relevant network device to use. And still some of the broadcasting features of the Hub is used in your home wifi router.

A hub is a dumb device that broadcasts data from one device to all the other devices connected to the hub, as shown in the image below.

• Hub is usefull to connect multiple device in the local area to share information.

• Hub broadcasts data from device A to all the other devices connected to it. The devices recieves the data and compare its mac address (unique id for each devices world wide) to the mac address in the data packet (recivers mac address). If both mac address matches, the device consume the data; otherwise, it drops the data packet.

• Because of its broadcasting nature, it has several drawbacks like when device A sends the data to device B, and at the same time, if device C sends the data to device D, there is a collision in the hub. As the data of device C and device A travel at the same time, they will collide, and the data gets lost. Becuase of this, it is also called SIngle Collision Domain.

Switch

It is the smartest alternative of hub. It knows which device is connected to which port. And it helps devices to connect locally and form a topology like bus, start, mesh, and others.

• It uses the computers/devices MAC (Media Access Control) Address to identify each devices uniquely and route the data packets to the specific device.

• Switch, when installed fresh or reset, doesn’t know the MAC Address of any devices connected to it. When the device sends the first data from device A to device B, switch first broadcasts the message and sees who receives it, and stores that information into a CAM (Content Addressable Memory) table. Likewise, it learns the MAC address of all the connected devices and the port they are connected to.

• CAM is the high-speed hardware component built inside the switch that helps it to maintain records of MAC and its respective port. It also helps to forward Ethernet frames near instantly using hardware-based lookup.

A switch is only used inside the LAN (Local Area Network), unlike a router, which is used to connect the LAN to the internet.

Router & Modem

Sometimes people confuse a router and a modem and use this word interchangeably. Because these days the ISP (Internet Service Providers) like Airtel, JIO and other provided both in the same device. But both of these have different working mechanisms.

As shown in the image above, there is the Modem in the left side and a router on the right side. They are both identical right, just the router has one antenna (In some case you would see more than one). So what’s the difference?

MoDem (Modulator De-Modulator)

As the name suggest it's the guy who is actually responsible for converting the analog signal coming from the ISP’s coaxial cable (or through any other medium like DSL, Satellite, or others) into the digital signal that can be consumed by your LAN devices.

As you can see in the image above modem can only be used with one device. It cannot be connected to multiple devices because its primary use is to convert the analog signals to digital signals, which computers and other devices can understand. This is the reason why we use a router on top of the Modem in the LAN to get the digital signal (Internet) into the router and then route the data packets to multiple devices connected to it respectively.

Router

Again, as the name suggests, it routes the incoming data from the modem to the devices in the LAN. A router can consist of a wireless Access Point and a wired (RJ45) interface.

The router's main purpose is to distribute the data packets between your networks and the outside world (without internet, we can also utilize the router to share data between local devices). Just like switches, a router is also a smart network device, even better than a switch.

Nowadays, routers come with built-in switches and a basic firewall as well. A router also has the functionality of assigning an IP address to the devices in the network, so that they can be identified easily for sharing data.

Firewall

A firewall is a network security device that monitors incoming and outgoing traffic based on configurable security rules (rules can be changed accordingly). It helps us to protect the internal networks from the outside world (untrusted networks/Internet) or maintain a barrier between VLANs (Virtual Local Area Network).

Firewalls can be hardware or software both.

If you are new to Git then first read this internal of git article to have a basic understanding of Git. This article will be divided into three parts. In each part, we will discuss two categories of commands.

6 Categories of basic Git commands.

1. Project Setup

   • git clone

   • git init

2. Daily Workflow

   • git status

   • git add

   • git commit

3. Branching & Navigating

   • git branch

   • git checkout

   • git merge

4. Sharing & Updating

   • git pull

   • git push

   • git fetch

5. Inspecting & Comparing

   • git log

   • git diff

6. Handling Interruptions & Mistakes

   • git stash

   • git reset

   • git revert

Let’s dive deep into each of these commands.

Project Setup.

git init

If you do not have git installed in your computer, do it from this article.

This category provides help to set up your new Git project locally or clone any other project from GitHub.

First, learn about how to create a local git project.

To do so, we will use git init a command, but before that, first set up the project with a name git-commands

mkdir git-commands
cd git-commands

# Once folder is created and we are inside this folder we can initialize a git repository here.
git init

# Git is the command line tool and init is the flag which tells the git to initialize
# the new git project in the curent folder. This command is responsible for creating
# .git folder inside the current folder.

Once we are done with creating a new git project locally, we can run git status the command to see if it is actually done or not.

git status helps to check the current project status. We will look into this in this article.

git clone

If you want to clone another GitHub repository, there are a few more commands and steps to follow. However, that is not covered in this article. We might discuss it later, so feel free to continue. If you run into any issues, please let me know in the comments or reach out to me on Twitter. I'll be happy to help you.

So, how to clone a project?

First, grab the URL of the HTTPS URL of the GitHub project, and then we just need to use a simple git command as follows.

# git clone url_of_the_git_project_to_clone
git clone https://github.com/Barun355/chess-frontend

Once done, you will see the chess-frontend codebase is cloned into your current folder.

After cloning the project, you can go into the project, contribute to it, and then push the changes by raising PRs and all.

Daily Workflow

We explored the essential commands you should know before moving forward. Now, let's look at another simple example to understand the basic commands we will use about 60-70% of the time.

So, let's take an example from the last article.

Here we already have a project set up named git-internal where we have done some of the work.

git status

We have already seen this command. It helps us display the current state of our working directory and staging area. It also shows us the current tree inside the working directory.

It is primarily used for:

• Identify changes: Show modified, new, or deleted files.

• Check staging area: Determine which changesareready to be committed

• Verify working tree: Confirm if your project is in a clean state (i.e., nothing to commit).

Common options

• git status -s (Short format) : Provides a more compact, summarized output.

• git status -b : Displays branch tracking information

• git status -v : Shows verbose details, including the textual changes of uncommitted files

Technical Explanation

The status options show 3 different things in the output for a simple project:

1. Difference between the index file (staging area) and the current HEAD Commit (Latest Commit).

2. Difference between the working tree and the index file (staging area)

3. And finally, files and folders that are not being tracked by git yet. This excludes all the files and folders that are listed in .gitignore file.

git add

This command allows you to move changes in files or newly created files that are not yet tracked by Git to the index (staging area). Here, all updates are stored before being included in the next commit.

To showcase the add option, we will first create a greet.js and loop.js file, and we will see the most basic way of using this option.

# create greet.js file
touch greet.js loop.js

# greet.js
const greet = `Hello Barun Tiwary`;
console.log(`${greet}`);

// loop.js
for (let i = 1; i <= 10; i++){
    console.log(`Current value of i is ${i}`);
}

Now, as we have created all the required files, I will demonstrate the most basic way of using add option.

# git add filename
git add greet.js
git add loop.js

After running the code above, we have moved our newly created untracked files into the index (staging area). Although we did this one by one, it's not practical if we have hundreds or thousands of files to track. In that case, we can use the dot (.) option.

# git add .
# (.) represents all the files exluding files matching regex in the .gitignore file
git add .

Note: Whenever we make changes to a file, create a new file, or delete an existing file in a Git-initialized project, we need to run the add command for all those changes to track them.

git commit

Now, let's explore the most important Git options that actually store the code's history. First, we will look at the basic commands, and then we will explore the optional flags.

# git commt -m "write a meaningful message to store with the commit history."
git commit -m "Added greet and loop js files"

• commit : The options to commit the changes from the index (staging) area.

• -m “…” : This allows us to write the commit message directly while executing the commit command.

If you want, you can skip the -m flag. Doing so will open the Vim editor by default, where you can add the commit message and then save the changes. We are using the -m option because it is convenient.

Okay, so far we have covered two categories of basic Git commands, and we will cover the rest in upcoming articles.

Open your favourite terminal as this article is going to be full of praticals.

To understand the working of Git, we will create a project named git-internal using the command given below.

mkdir git-internal

Then we will go inside the project folder using the cd git-internal command

Once the project folder is set up, we are ready to understand the internal working of git. Before that, we are going to build the mental model for the problem of code tracking, resonate with its solution, and then we will go into the jargon of GIT.

Let's suppose we are building a product that tells us the weather information about the city we asked for. For that, we definitely need a code in a file that we can run to get our desired output. And for this article, we are going to use JavaScript as the programming language to build this software.

So, we are going to create a file named index.js vim index.js I am using Vim as the terminal editor; feel free to use any code editor for this project. And as soon as we create the index file, I guess we should track it that some file has been created in the git-internal folder, right? But how? Let’s leave it for now and write a simple JavaScript code, then run the code using the command `node index.js`.

We should see the simple output in the terminal saying “Weather Report”.

But wait… a minute, where is the code to find the weather report of a given city? Don’t worry, at the end of the article, you will have one with you.

Till now, what has happened?

1. We created a file named index.js

2. We have written a simple console log code in that file

Simple right?

We should have tracked these 2 things and such other activities inside the folder git-internal . So, should we store these changes/activities in the database or somewhere but where?

Let’s suppose we store this in a database, at 03sec, 6:59 pm, 31st Dec 2025, a file is created inside git-internal a folder. At 30sec, 6:59 pm, 31st Dec 2025, some code is added. We are tracking activities, which include file creation and any changes within the file, such as adding, deleting, or updating characters (spaces, new lines, or new characters). But what about codes? How are we going to track at what time exactly what code changes? In our case, we are tracking every change in any character, right?

So, it can be a very comput-intensive task, and also maintaining the history of code changes is also very difficult, right? And storing, reading, updating, and deleting activities can trigger way more database calls, which can break the database. And yes, there are a lot of optimised databases available for high-frequency operations, but it doesn’t mean that if something exists, we can use it anywhere. Using those databases can be expensive and also not make any sense in this.

So what is the solution then?….

Fine, no problem, we can’t perform high-frequency operations with the database for just tracking the code changes, but what if we track operations/changes in a block? I mean, we make some changes, like create new files, add a bunch of code/features, update the existing code for improvement, and other things we want to do. Then once we are done with our changes, we can store this update in our database at once, right?

Fine, we got a solution, but still we have to make queries to databases via api calls. And if our network is not stable or for some reason we are not able to connect to the database, then what? Though we have solved the problem of tracking a code. Which is create new project → make changes → track changes → store it into db → update the code → track changes → store it into db → and continue in the loop. But what if the database is not available?

One thing we can do is to store all the tracked files, updates, and changes in a file or folder inside the same project root folder. Can we do that?

Why not? If we can store these things in a database, we can also store them in files. Awesome, so we have almost solved the problems with the first principal and got the way git operates internally.

BUT WAIT!!!!….

So far, whatever we understood didn’t include any technical words or jargon that Git uses. So, let’s dive into it and relate whatever we understand so far to Git's internal working.

Git jargon

Now it’s time to create a git repository inside the folder we created git-internal.

Before creating a git repository using git init In the command inside the root folder, there is only 1 file. And after initializing git in the folder, it still has that file only, nothing else. As we have discussed earlier, there should be some folder or files that git will use to track the code.

Yes, it creates a folder, but it is hidden because git does not want to expose these folders by default to anyone and track the changes anonymously. So, we can’t see those changes?…

Not really, we can still see those, though the folder is hidden, but we can still access it using the command ls -al or ll in Linux terminal (My system is Ubuntu 22.x version

You can also see the success message that git shows Initialized my Git repository in /folder/path/.git . And after running the command ls -la It not only displays the files and folders in the current directory, including hidden files, but also provides additional details for each file and folder.

Hidden files and folders start with dot (.), just like git have one .git

If we go into this folder and run ls We will see a bunch of files and folders.

1. branches (folder)

   This is the folder that contains all the branch info you create in the repositories.

2. config (file)

   This file contains the local, repository-specific configuration that controls how git operates in that specific repository. This configuration overwrites any global or system-wide configuration for the project.

   It stores a bunch of information like:

   • Remote repository URL

   • Branch-specific configuration.

   • User info. (Though the userinfo is globally set in git. But it can also be different for any specific repository/project)

3. description (file)

   It just contains a single line statement Unnamed repository; edit this file 'description' to name the repository . However, it typically contains a description of the project in plain text.

4. HEAD (file)

   This file contains the reference to the latest active branch, which itself references the actual commit hash. (Don’t worry, we are going to see all about hashes, object types, and all).

5. hooks (folder)

   This folder contains some sample scripts, or we can also create our own scripts that can run in the different stages of git. Like just after staging the changes, committing the current stage, before merging branches, or before pushing the changes to the remote repository.

6. info (folder)

   This folder contains local and private information about the repository, which is not intended to be shared with any other repositories or developers. The main file inside this folder is exclude which acts as the private gitignore file, but unlike the gitignore Files are private to the local repository and are not shared on GitHub.

7. objects (folder)

   It is the main culprit inside .git . A folder that contains all the changes inside, which are tracked. There are 3 types of objects in git.

   • Commit

   • Tree

   • Blob

We are going to discuss all three objects in detail, with how git stores them.

8. refs (folder)

   objects folders store the actual tracked files and their SHA-1 hash, which is not easy to remember. Every time we need to access the file history, we need to access it using the SHA-1 hash of the respective files or folders. So, to store the easy and memorable names of these SHA-1 hashes, we use the refs folder.
   It contains:

   • heads

   • tags

Now, we have a decent understanding of what git has inside its folder. Now let’s go through the different states of git to get an understanding of how git flow works, then we will be back to understand Objects (folder) and refs (folder), which we need to understand only for now.

The image above is taken from the official git page.

There are a total of 4 states in Git (If we are just using git locally).

1. Untracked

2. Unmodified

3. Modified

4. Staged

There is one more state called Commit.

When we initialize a git repository in a folder, it is called working directory in Git terms. This contains all the Untracked files initially.

Untracked State

This is the state of files that are not tracked by git yet. Which means git is not aware of these files. We need to tell git explicitly to track this file. So, as in the Git state image shown. We can change the file’s state from Untracked to Staged so that it can get tracked through Git. But before that, we can add some working code so that we have something to work upon.

So, now we have hard-coded the different city weather reports in index.js file.

// index.js
console.log("Weather Report Applications");

const weather_report = {
    "jsr": {
        "city": "Jamshedpur",
        "temperature": "30°C",
        "condition": "Sunny"
    },
    "del": {
        "city": "Delhi",
        "temperature": "35°C",
        "condition": "Hot"
    },
    "mum": {
        "city": "Mumbai",
        "temperature": "28°C",
        "condition": "Humid"
    }
}

Still, the index.js file is untracked. Let’s move it into the staging area or state with the below command.

git add index.js

Instead of manually adding the file in the command git add file1 file2 .. we can add all the files at once using git add . , it will add all the files in the current folder in staged area.

Now, as you can see. Our index.js file is moved to the staging area, and the status of the index.js file is changed to A in the VS Code GitHub sidebar, which says Index Added. Also in the terminal, you can see the file is being tracked.

In git staging area is also called Index. Which mean staging area contain all the files updated codebase and it is ready to commit that means it will be save in the git local storage area which is in objects folder that contain commits, trees and blobs.

Once we are at the staging area, we can now either commit the final changes or update more content → add all the changes to the staging area again, and finally commit it so that Git can store the final changes in its local storage (Object → Blob).

Below is the command to commit the changes.

git commit -m “short message for the changes you made”

So, till now, what we have done.

1. We created a folder and added the index.js file with some code.

2. Initialized the git repo in the same folder.

3. Added the index.js file into the staging area

4. Commit the staged file

Now we are unmodified where the index.js has been tracked and stored in the git object storage. Simply, we can also tell that “We have committed our first version of the code.”

Next, we can add the new features, fix the bugs, update some code, and again move it tothe staging area and commit another version of the code.

So, let’s complete the code for finding weather information.

const readline = require('readline');

const weather_report = {
    "jsr": {
        "city": "Jamshedpur",
        "temperature": "30°C",
        "condition": "Sunny"
    },
    "del": {
        "city": "Delhi",
        "temperature": "35°C",
        "condition": "Hot"
    },
    "mum": {
        "city": "Mumbai",
        "temperature": "28°C",
        "condition": "Humid"
    }
}

function getWeatherReport(cityCode) {
    const report = weather_report[cityCode];
    if (report) {
        return `City: ${report.city}, Temperature: ${report.temperature}, Condition: ${report.condition}`;
    } else {
        return "City code not found.";
    }
}

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
})

rl.question("Enter city code (jsr, del, mum): ", (cityCode) => {
    const report = getWeatherReport(cityCode)
    console.log(report)
    rl.close();
})

The code is simple to understand.

1. We have imported readline (An inbuilt node package to take input from the user)

2. weather_report A constant that stores the weather report of 3 different places.

3. getWeatherReport() A method that takes the cityCode as an argument and finds the weather of the respective city and returns it in a readable way.

4. const rl = readline.createInterface({ input: process.stdin, output: process.stdout }) This helps Node.js to create an interface that will help us to take input from the user and show some output in the terminal via standard input and output.

5. And finally, we are asking the city code from the user and showing them the result.

Don’t worry if you don’t understand the code.

As you can see, as soon as we added some code after making a commit, the file status changed to M which means it is now in a modified state whe

re we have updated the file. This means we have added some code to this file, but what git doesn’t know.

To make Git aware of the changes, we need to stage them again. So let’s do it.

Now, as you can see, Git says clearly that this index.js file is modified and also staged (obviously after doing it). Now, let’s commit it so that the new version of the code is stored in the Git object storage.

Now you can see in the terminal above that the working tree is clean, which means the 2nd version of code is also stored in the Git Object storage system. Also, in VS Code, you can see that there are no symbols on the right side of the file name, which confirms this.

We will cover the final part, Objects & Refs, in the next section of this blog since this one is already longer than usual.

Thank you for reading till this point. The next part will come soon.

Taking the analogy of the product Recipe Reveal as an example, which has a decent amount of frontend and backend code in it, it provides all the Indian Recipes in a single place with a tool to track your health goals and other features. The developers faced a problem in the initial stage of building this product, which was the collaboration for different features like recipe filters component in all recipes page, personalised AI chatbot component, time-based recipe suggestion component in the hero section, and a lot of others, and tracking which team member has implemented which part of the product.

Initially, they used the traditional Pendrive System, where the tech lead created the first version of the product, which included just a landing page listing the top recipe of the platform, featured recipes, about Recipe Reveal, and a few other sections. He launched the product on PeerList and shared it with his network. People loved it and demanded more features. But with the rising demand for features, the tech lead realized he couldn't implement all of them himself and decided to get help from some junior developers to ship those features. He created a zip file of the current codebase and shared it with his two junior developers on a pendrive. The first developer's task was to build the recipes page, where users could search for specific recipes from their database with premium filters, and the second developer's task was to add the AI-based personalized chatbot. Finally, the tech lead was implementing the Auth system, where users could sign up for the platform and access the features built by the team.

Now, as soon as the tech lead got the implemented feature on the pendrive, he realized that he had made a blunder. The pendrives looked identical, and he couldn't recognize which one contained the code he was looking for; that was fine, as he could see after inserting it into the computer. But the main problem was integrating the code provided by the developer into the code he had, because there was still a lot of work to do, and there was no point in taking help from others if he had to integrate the code himself, wasting his time. Interestingly, he was also unable to track which developer had made what changes after a certain iteration on the codebase. All three of them had their own version of the product: the tech lead had the first version with some features, the first developer had a codebase with some features, and the other developer also had his own version of the code with other features. And in the future, if the new version had a bug and it still got into production, there was no way to backtrack to the previous working version of the code and revert to it.

It was a total mess; the main problem was:

1. Code Tracking

2. Collaboration

So, what is the solution?

The tech lead comes up with the Idea to build a simple tool that they can install on a pendrive, which will track the code changes and who made the change in them, track the time, and store the different versions of the code in the same pendrive. The reason for building this tool is to solve the code tracking and debugging problem.

Now, whenever someone changes even a single line or character, the tool tracks who made the changes at what time, and what the changes are. And more importantly, they were able to revert to the working version of the code in case they pushed the breaking changes to production, patched the breaking changes, and again pushed the working code into production.

This tool solves the one major problem, which is Code Tracking. Now there is still one problem: multiple developers can’t work on the same code in parallel, and also there is confusion about which version of the code is the final one and can be pushed to production. Like the 1st developer added the filters in the recipes pages, the 2nd developer added the chat interface, and the tech lead added the authentication flow, still there are 3 different versions of the code. We still can’t finalize which version of the code should be in production, and we still need to merge all the code into a single source code manually; that may cause other issues in production.

This problem was addressed by creating a central server that stores all the different versions of the code using the same tool installed in the pendrive, but with additional features like maintaining a single source of truth on which developers can rely. Like, now the tech lead has completely moved all the code from the pendrive to the central server, which also has the main version of the code, which will be in production, and other versions as well. So that other developers can work independently, and after the final changes, it can be merged into the main version very easily.

In the market, there are a lot of similar tools like the tech lead build for their team, which are Git, Mercurial, Fossil, etc, and the central servers like Github, Gitlab, BitBucket, AWS CodeCommit, and many more.

Project Name: Contact Management System (Basic Version)

Description: Create a simple CLI-based contact management system.

Flow and Features:

1. Use strings for storing names and contact details.

2. Use lists to maintain a collection of contacts.

3. Perform operations like adding, updating, deleting, and viewing contacts.

4. Use sets to ensure no duplicate contact names.

5. Use tuples to store immutable contact details (e.g., name, phone number).

6. Use dictionaries to map contact names to details for efficient searching.

Prerequisites.

Introduction to Strings and In-Built Data Structures.

Strings in Python

Strings are sequences of characters enclosed in quotes. Python supports single, double, and triple quotes for strings.

Creating Strings:

# Single-quoted string
greeting = 'Hello'

# Double-quoted string
name = "World"

# Triple-quoted string (used for multi-line strings)
message = '''This is a
multi-line string.'''

Accessing Characters in a String:

Strings in Python are indexed, starting from 0 for the first character.

text = "Python"
print(text[0])  # Output: 'P'
print(text[0:3]   # Output: 'Pyt' ([startIndex: lastIndex] - select from the startIndex to lastIndex - 1)
print(text[-1]) # Output: 'n' (negative index for last character)
print(text[-2])# Output: 'o'

Common String Methods:

text = "python programming"
print(text.upper())       # Output: 'PYTHON PROGRAMMING' (Converts to uppercase)
print(text.lower())       # Output: 'python programming' (Converts to lowercase)
print(text.capitalize())  # Output: 'Python programming' (Capitalizes the first character)
print(text.replace("python", "Java"))  # Output: 'Java Programming' Replace substring

String Slicing:

You can extract a portion of a string using slicing.

text = "Python"
print(text[0:3])  # Output: 'Pyt' (characters from index 0 to 2)
print(text[:3])   # Output: 'Pyt' (same as above)
print(text[3:])   # Output: 'hon' (from index 3 to the end)

Lists in Python

A list is a collection of items (elements) that are ordered and changeable. Lists are created using square brackets [].

Creating Lists:

# Creating a list of integers
numbers = [1, 2, 3, 4]

# Creating a mixed list
mixed = [1, "hello", 3.5, True]

Accessing List Items:

Lists use zero-based indexing.

fruits = ["apple", "banana", "cherry"]
print(fruits[0])  # Output: 'apple'
print(fruits[-1]) # Output: 'cherry'

Modifying List Items:

Lists are mutable, so you can change their content.

fruits = ["apple", "banana", "cherry"]
fruits[1] = "blueberry"
print(fruits)  # Output: ['apple', 'blueberry', 'cherry']

Common List Methods:

numbers = [1, 2, 3]
numbers.append(4)        # Adds an item to the end
numbers.insert(1, 1.5)   # Inserts 1.5 at index 1
numbers.remove(2)        # Removes the first occurrence of 2
numbers.sort()           # Sorts the list
print(numbers)           # Output: [1, 1.5, 3, 4]

List Slicing:

numbers = [10, 20, 30, 40, 50]
print(numbers[1:4])  # Output: [20, 30, 40] (items at index 1, 2, and 3)
print(numbers[:3])   # Output: [10, 20, 30]
print(numbers[3:])   # Output: [40, 50]

1.2.1 Set

Sets in Python

A set is a collection of unique, unordered elements. Sets are created using curly braces {} or the set() function.

Creating a Set:

# Using curly braces
fruits = {"apple", "banana", "cherry"}

# Using the set() function
numbers = set([1, 2, 3, 4])

# Empty set
empty_set = set()

Accessing Elements in a Set:

Since sets are unordered, you cannot access elements using an index. You can use a loop:

for fruit in fruits:
    print(fruit)

Adding, Deleting, and Updating Elements:

# Adding elements
fruits.add("orange")

# Removing elements
fruits.remove("banana")  # Raises an error if not found
fruits.discard("banana") # Does not raise an error

# Updating with multiple elements
fruits.update(["kiwi", "mango"])

Python Set Operations:

A = {1, 2, 3}
B = {3, 4, 5}

print(A.union(B))        # Output: {1, 2, 3, 4, 5}
print(A.intersection(B)) # Output: {3}
print(A.difference(B))   # Output: {1, 2}
print(A.symmetric_difference(B)) # Output: {1, 2, 4, 5}

1.3.1 Tuple

Tuples in Python

A tuple is an immutable, ordered collection of elements. Tuples are created using parentheses ().

Creating Tuples:

# Empty tuple
empty_tuple = ()

# Tuple with elements
numbers = (1, 2, 3)

# Mixed tuple
mixed = (1, "hello", 3.5)

Accessing Tuples:

You can use indexing and slicing with tuples just like lists.

tuple_data = ("a", "b", "c", "d")
print(tuple_data[1])    # Output: 'b'
print(tuple_data[1:3])  # Output: ('b', 'c')

Tuples are Immutable:

Tuples cannot be modified after creation.

numbers = (1, 2, 3)
# numbers[1] = 4  # This will raise a TypeError

Built-In Tuple Functions:

numbers = (10, 20, 30)
print(len(numbers))      # Output: 3
print(max(numbers))      # Output: 30
print(min(numbers))      # Output: 10

1.4.1 Dictionary

Dictionaries in Python

A dictionary is an unordered collection of key-value pairs. Keys must be unique, and values can be of any type.

Creating Dictionaries:

# Using curly braces
details = {"name": "Alice", "age": 25, "city": "New York"}

# Using the dict() function
details = dict(name="Bob", age=30, city="London")

Accessing Items in Dictionaries:

details = {"name": "Alice", "age": 25}
print(details["name"])  # Output: 'Alice'
print(details.get("age")) # Output: 25

Adding, Upda

ting, and Removing Items:

# Adding or updating
details["city"] = "Paris"

# Removing
removed = details.pop("age")  # Removes 'age' and returns its value
details.clear()  # Clears the entire dictionary

Properties of Dictionary Keys:

• Keys must be unique.

• Keys must be immutable (e.g., strings, numbers, tuples).

Built-In Dictionary Methods:

details = {"name": "Alice", "age": 25}
print(details.keys())    # Output: dict_keys(['name', 'age'])
print(details.values())  # Output: dict_values(['Alice', 25])
print(details.items())   # Output: dict_items([('name', 'Alice'), ('age', 25)]

Project

# Contact Management System (Basic Version)
# This program is a simple CLI-based contact management system that demonstrates
# the use of strings, lists, sets, tuples, and dictionaries in Python.

# Contact management system data structure
# Dictionary to map contact names (keys) to tuples containing contact details (values)
contacts = {}

# Set to ensure no duplicate contact names
contact_names = set()

def add_contact():
    """Adds a new contact to the system."""
    name = input("Enter contact name: ").strip()
    if name in contact_names:
        print(f"Contact with name '{name}' already exists.\\n")
        return

    phone = input("Enter phone number: ").strip()
    email = input("Enter email address: ").strip()

    # Use a tuple to store immutable contact details
    contact_details = (phone, email)

    # Add to dictionary and set
    contacts[name] = contact_details
    contact_names.add(name)
    print(f"Contact '{name}' added successfully.\\n")

def view_contacts():
    """Displays all contacts in the system."""
    if not contacts:
        print("No contacts available.\\n")
        return

    print("\\n--- Contact List ---")
    for name, details in contacts.items():
        phone, email = details
        print(f"Name: {name}, Phone: {phone}, Email: {email}")
    print()

def update_contact():
    """Updates an existing contact."""
    name = input("Enter the name of the contact to update: ").strip()
    if name not in contact_names:
        print(f"Contact '{name}' does not exist.\\n")
        return

    phone = input("Enter new phone number: ").strip()
    email = input("Enter new email address: ").strip()

    # Update contact details
    contacts[name] = (phone, email)
    print(f"Contact '{name}' updated successfully.\\n")

def delete_contact():
    """Deletes a contact from the system."""
    name = input("Enter the name of the contact to delete: ").strip()
    if name not in contact_names:
        print(f"Contact '{name}' does not exist.\\n")
        return

    # Remove from dictionary and set
    del contacts[name]
    contact_names.remove(name)
    print(f"Contact '{name}' deleted successfully.\\n")

def search_contact():
    """Searches for a contact by name."""
    name = input("Enter the name of the contact to search: ").strip()
    if name in contacts:
        phone, email = contacts[name]
        print(f"\\nContact found: Name: {name}, Phone: {phone}, Email: {email}\\n")
    else:
        print(f"Contact '{name}' not found.\\n")

def main_menu():
    """Displays the main menu and handles user input."""
    while True:
        print("\\n--- Contact Management System ---")
        print("1. Add Contact")
        print("2. View Contacts")
        print("3. Update Contact")
        print("4. Delete Contact")
        print("5. Search Contact")
        print("6. Exit")

        choice = input("Enter your choice (1-6): ").strip()

        if choice == '1':
            add_contact()
        elif choice == '2':
            view_contacts()
        elif choice == '3':
            update_contact()
        elif choice == '4':
            delete_contact()
        elif choice == '5':
            search_contact()
        elif choice == '6':
            print("Exiting Contact Management System. Goodbye!")
            break
        else:
            print("Invalid choice. Please try again.\\n")

# Run the main menu
if __name__ == "__main__":
    main_menu()

Coding is an invaluable skill in today's tech-driven world, and with the resources available in 2025, teaching yourself to code has never been more accessible. Whether you aspire to become a web developer, data scientist, or software engineer, this guide will walk you through the steps to master coding on your own.

Step 1: Define Your Goals

Before diving in, it's essential to clarify why you want to learn coding. Are you building a web app? Pursuing a tech career? Creating a personal project? Defining your goals will help you choose the right programming languages and learning resources.

Step 2: Choose the Right Programming Language

Not all programming languages are created equal, and the best one to start with depends on your goals:

• Web Development: HTML, CSS, JavaScript, and frameworks like React or Angular.

• Data Science & Machine Learning: Python, R, and SQL.

• Mobile App Development: Swift for iOS, Kotlin for Android, or React Native for cross-platform apps.

• Game Development: C# with Unity or C++ for Unreal Engine.

• General Software Development: Java, Python, or C++.

Step 3: Leverage Online Platforms and Resources

2025 offers a plethora of platforms to learn to code effectively:

1. Interactive Platforms: Codecademy, freeCodeCamp, and LeetCode for hands-on coding.

2. Video Tutorials: YouTube channels like Piyush Garg, Chai aur Code, and CodeWithHarry.

3. Online Courses: Platforms like Udemy, Coursera, and edX.

4. Documentation and Blogs: Read official documentation and follow tech blogs for in-depth understanding.

Step 4: Practice Regularly

Consistency is key when learning to code. Dedicate at least an hour daily to practice. Start with small projects like a personal website or a calculator app, and gradually tackle more complex tasks.

Step 5: Join Coding Communities

Engage with online and local coding communities. Platforms like GitHub, Stack Overflow, and Reddit (‘r/learnprogramming’) are excellent for sharing your progress, seeking help, and networking with other learners and professionals.

Step 6: Build Real-World Projects

Hands-on experience is critical. Start by solving real-world problems or contributing to open-source projects. Building projects like a to-do list app, blog, or e-commerce site will help you solidify your skills.

Step 7: Leverage AI Tools

In 2025, AI-driven coding assistants like GitHub Copilot, ChatGPT, and Bolt.New can accelerate your learning. Use these tools to understand code syntax, debug issues, and explore advanced concepts effortlessly.

Step 8: Embrace Failure and Debugging

Mistakes are inevitable in coding. Learn to debug efficiently by using tools like browser developer tools, logging techniques, and debugger utilities in IDEs. Debugging is a skill in itself, and mastering it will make you a better coder.

Step 9: Expand Your Knowledge

Once comfortable with basics, explore advanced topics:

• Algorithms and data structures

• Design patterns and software architecture

• Version control systems like Git

• Frameworks and libraries for your chosen language

Step 10: Stay Updated

Technology evolves rapidly. Subscribe to newsletters, follow tech influencers, and stay updated with the latest trends. Regularly revisit and refine your skills to stay relevant in the ever-changing tech landscape.

Final Thoughts

Learning to code is a journey that requires dedication, patience, and a curious mindset. With the abundance of resources available in 2025, teaching yourself coding has never been more feasible. Follow these steps, stay consistent, and you'll be on your way to mastering coding and achieving your goals.

Happy coding!

Step 1: Create a GitHub Account

1. Visit GitHub: Go to GitHub.com.

2. Sign Up: Click on Sign up in the top-right corner.

3. Fill in Your Details: Choose a username, email, and password.

4. Verify Your Email: Check your inbox and confirm your email address.

Step 2: Create a New Repository

1. Log in to GitHub

2. Create a Repository:

Click the + icon in the top-right corner and select New repository.

Enter a repository name (e.g., "React-Portfolio").

Add an optional description if needed.

Choose between Public (visible to everyone) or Private (only you can access it).

Click Create repository.

Step 3: Upload Your React Project

1. Build Your React Project

To ensure you're uploading the optimized version of your project:

Open your project in a terminal.

Run the command:

npm run build

This will create a build folder in your project directory, which contains the optimized version of your React app.

2. Upload to GitHub

1. Open the repository you created on GitHub.

2. Click upload existing files.

3. Drag and drop the contents of the build folder into the upload area.

4. Add a commit message (e.g., "Initial upload of React project").

5. Click Commit changes to finalize the upload

Step 4: Update Your React Project

Whenever you make changes to your React project and need to update it on GitHub, follow these steps:

1. Build the Updated Project

After making changes, rebuild your project by running:

npm run build

This will update the build folder with your latest changes.

2. Upload the Updated Files

1. Open your repository on GitHub.

2. Click Add file > Upload files

3. Drag and drop the updated files from your build folder.

You can upload only the updated files or replace all files in the repository.

4. Add a commit message (e.g., "Updated project with new features").

5. Click Commit changes to save the updates.

Conclusion

Using GitHub’s drag-and-drop feature, you can easily upload and update your React projects without needing technical tools like Git. This method is beginner-friendly and

perfect for quickly sharing your work online. Keep your repository updated to reflect the latest version of your project.