Forem: Vinayagam

React Basics for Beginners

Vinayagam — Thu, 16 Apr 2026 10:51:43 +0000

My First Steps in Learning React

When I started web development, I knew HTML, CSS, and basic JavaScript. I could build simple websites, but when projects became bigger, I started facing problems. I repeated the same code many times, and managing everything became difficult.

Then I started learning React. At first, it was confusing, but slowly I understood the basics and it became easier.

What is React?

React is a JavaScript library used to build user interfaces. It was created by Facebook.

In simple words, React helps us build websites by dividing them into small parts called components. Each component handles one part of the page like header, footer, or content.

Why use React?

React makes development easier and cleaner.

It helps to organize code
It allows reusing components
It is easy to update and maintain
It improves performance

React updates only the changed part of the page, so it is faster than normal websites.

What is a Reusable Component?

Reusable component means writing code once and using it many times.

Instead of repeating code like this:

<button>Click</button>
<button>Click</button>
<button>Click</button>

We can create one component:

function Button() {
  return <button>Click</button>;
}

And reuse it:

<Button />
<Button />
<Button />

This makes code simple and clean.

Using Reusable Components in a Blog

In a blog, every post looks similar. So we can create one component and reuse it.

function PostCard(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </div>
  );
}

Now use it like this:

<PostCard title="React Basics" content="Learning step by step" />
<PostCard title="JavaScript Tips" content="Practice daily" />

This saves time and avoids repetition.

SPA and MPA

SPA means Single Page Application. It loads one page and updates content without reloading. React uses this method, so it feels fast.

MPA means Multi Page Application. It loads a new page every time we click something. It is slower compared to SPA.

Main difference:
SPA does not reload page, MPA reloads page every time.

Library and Framework

A library is a tool that helps us do specific tasks. We control how to use it. React is a library.

A framework is a full structure for building applications. It controls the flow. Examples are Angular and Django.

Main difference:
In a library, we control the code. In a framework, the framework controls everything.

Writing Test Cases for a To-Do List Application

Vinayagam — Wed, 15 Apr 2026 03:01:55 +0000

Introduction

When I started learning software testing, I chose a To-Do List application for practice because it is simple and easy to understand. It also has basic features that are commonly used in many applications.

Application Features

A To-Do List application allows users to:

Add a task
Edit a task
Delete a task
Mark a task as completed

These features are enough to understand how testing works.

Test Case Format

To write test cases, I used a simple table format with columns like BRS, Test Case ID, Scenario, Steps, Test Data, Expected Result, Actual Result, and Result. This format helps to keep everything organized and clear.

Testcase:To-do list

Test Design Approach

While creating test cases, I focused on three main types:

Positive testing: checking normal functionality like adding or deleting a task
Negative testing: checking invalid inputs like empty task
Edge cases: checking limits like long text or multiple tasks

Explanation of Test Cases

Each test case covers one function of the application. For example, adding a task checks whether the task is saved properly, and deleting a task checks whether it is removed from the list. Other cases like editing and marking tasks ensure that all features are working correctly.

Key Learning

From this, I learned that test cases should be simple and easy to understand. It is important to test both valid and invalid scenarios. Thinking from a user perspective also helps in writing better test cases.

Basic Concepts of Installation and Deployment

Vinayagam — Sun, 12 Apr 2026 02:14:04 +0000

Introduction

When I started learning programming, I came across two words: installation and deployment.

At the beginning, I did not clearly understand them. After practicing, I learned that both are important and used at different stages.

In this blog, I am sharing my understanding in a simple way.

Installation

Installation is setting up software on a computer so we can use it.

Before writing code, we need tools like code editors or software. These tools do not work until we install them on our system.

For example, I downloaded Visual Studio Code and installed it on my laptop. After that, I was able to open it and start coding.

This process is called installation.

Simple flow:

Download → Install → Use

Some common software we install:

Visual Studio Code
XAMPP
JMeter
Web browsers

Installation happens only on our computer.

Deployment

Deployment is making a project available for others.

When I create a project, it stays only on my laptop. Other people cannot see it. To share it, I need to upload it to the internet.

For example, I created a website and then uploaded it to GitHub. After that, others were able to open and use it.

This process is called deployment.

Simple flow:

Create → Upload → Share

Deployment usually happens using:

GitHub
Hosting servers
Cloud platforms

Deployment makes the project live.

Difference

Installation is for setting up tools.
Deployment is for sharing projects.

Installation happens at the beginning.
Deployment happens at the end.

Installation is used by developers.
Deployment is used by users.

My Understanding

Installation is the first step in development. Without installing tools, I cannot start coding.

Deployment is the final step. After finishing a project, I deploy it so others can use it.

Both are important parts of the development process.

Building a Simple Product Card Interface Using HTML, CSS, and JavaScript

Vinayagam — Thu, 09 Apr 2026 16:08:20 +0000

Simple Product Card Using HTML, CSS, and JavaScript

In this small project, I created a product card layout similar to shopping websites like Amazon or Flipkart. The page shows different products in a grid format, and each product card contains an image, product title, price, and an Add Cart button. I also added previous and next buttons to change the product images.

This project is useful for beginners who want to learn how HTML, CSS, and JavaScript work together to build a simple shopping interface.

Getting Product Data from API

Instead of writing product details manually in HTML, I used an API to load the product data automatically.

async function item() {
    let response = await fetch('https://api.escuelajs.co/api/v1/products')
    let data = await response.json()
    return data
}

The fetch() function sends a request to the API and gets product information such as title, price, and images. After that, the response is converted into JSON format so it can be used inside JavaScript.

This is how many modern websites get data from servers.

Creating Product Cards Dynamically

After getting the product data, JavaScript goes through each product and creates a card for it.

item().then((products) => {
    products.forEach(product => {

Instead of writing many HTML cards manually, JavaScript creates them automatically using DOM methods. This saves time and makes the website dynamic.

Each card contains:

Product image
Previous button
Next button
Product title
Product price
Add Cart button
Cart quantity counter

Showing Product Images

Every product has one or more images. The image is displayed using the image source from the API.

image.src = images.length > 0 ? images[index] : ""

This code checks if images exist. If images are available, it shows the first image.

Image Slider Feature

Some products contain multiple images. To show them, I added Previous (◀) and Next (▶) buttons.

pre.onclick = function () {
    index--
    if (index < 0) {
        index = images.length - 1
    }
    image.src = images[index]
}

next.onclick = function () {
    index++
    if (index >= images.length) {
        index = 0
    }
    image.src = images[index]
}

These buttons allow users to switch between product images, which makes the product card more interactive.

Add to Cart Function

Each product card has an Add Cart button. When the user clicks the button, the number next to it increases.

button.onclick = function () {
    quantity++
    count.innerText = quantity
}

This is a simple way to show how many times a product has been added.

In real e-commerce websites, this value is stored in a shopping cart system.

Styling the Product Cards

CSS is used to make the cards look clean and professional. The products are arranged in a grid layout so they adjust automatically based on screen size.

Some design features used in this project:

Card shadow effect
Hover animation
Clean product image display
Clear title and price text
Bright Add Cart button

These styles help make the page look more like a real shopping website.

What I Learned from This Project

By building this project, I learned several important web development concepts:

How to fetch data from an API
How to use JavaScript DOM methods
How to create elements dynamically
How to handle button click events
How to design product cards using CSS

This project helped me understand how dynamic web pages work.

From Buttons to Logic: Building a Calculator in JavaScript

Vinayagam — Sat, 04 Apr 2026 10:51:05 +0000

Introduction

I built a simple calculator using HTML, CSS, and JavaScript. At first, it looks like a small and straightforward project, but while building it, I realized it involves more logical thinking than expected. Instead of writing complex calculation logic manually, I used JavaScript’s built-in eval() function to evaluate expressions quickly and efficiently.

Core JavaScript Functions

let result = document.getElementById("result");

function add(value) {
    result.value += value;
}

function calculate() {
    result.value = eval(result.value);
}

function clearAll() {
    result.value = "";
}

function deleteLast() {
    result.value = result.value.slice(0, -1);
}

Code Explanation

add(value)

Adds numbers and operators to the input field. Every button click updates the display and builds the expression step by step.

calculate() with eval()

Takes the complete expression (for example, "2+3*4") and evaluates it using eval(). It returns the correct result based on operator precedence and acts as the core logic of the calculator.

clearAll()

Clears the entire display. This allows the user to reset and start a new calculation.

deleteLast()

Removes the last entered character. This helps in correcting mistakes without clearing everything. Example: 123 becomes 12.

Important Note About eval()

The eval() function evaluates a string as JavaScript code. While it simplifies the calculator logic, it should not be used in production applications because it can execute any JavaScript code. It is suitable for learning and small projects.

Challenges Faced

Building the UI was simple, but handling user input correctly required more attention. Users can enter invalid expressions, press multiple operators, or create unexpected combinations. Debugging these cases took time and helped improve problem-solving skills.

Another challenge was improving user experience. Features like delete and clear may look small, but they play an important role in making the calculator usable and practical.

What I Learned

This project helped me understand DOM manipulation, event handling, and how JavaScript evaluates expressions. It also improved my ability to handle user input and write cleaner functions.

I also realized that small projects are powerful for learning. They help in understanding real-world problems and improving coding confidence.

Future Improvements

Add keyboard input support
Prevent invalid expressions
Add advanced operations like percentage and square root
Replace eval() with safer logic

Conclusion

Even though a calculator seems like a basic project, it provides valuable hands-on experience in building real-world applications. It combines UI design, logic building, and problem-solving in a simple but effective way.

Projects like this help build strong fundamentals and prepare for more advanced development work.

From API Response to Readable Data: Fetch and JSON in JavaScript

Vinayagam — Fri, 03 Apr 2026 04:23:45 +0000

Introduction

In JavaScript, fetch() is used to request data from APIs. The data is usually returned in JSON format, which must be converted into a JavaScript object to be usable.

How Fetch Works

A request is sent to the API using fetch().
A response is received from the server.
The response data (JSON) is converted into a JavaScript object.
The data is accessed and used in the application.

Basic Example

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => console.log(data));

Understanding API Data

Example JSON response:

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "email": "leanne@gmail.com"
  }
]

After conversion, the data can be accessed as a JavaScript object:

console.log(data[0].name);
console.log(data[0].email);

Accessing Specific Values

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => {
    console.log(data[0].name);
    console.log(data[1].email);
  });

Looping Through Data

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => {
    data.forEach(user => {
      console.log(user.name);
    });
  });

Using Async/Await

async function getUsers() {
  let response = await fetch("https://jsonplaceholder.typicode.com/users");
  let data = await response.json();
  console.log(data);
}

getUsers();

Formatting Data for Readability

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => {
    data.forEach(user => {
      console.log("Name: " + user.name);
      console.log("Email: " + user.email);
    });
  });

Working with API Data

When data is received from an API, it is in JSON format. After using response.json(), it becomes a JavaScript object.

You can then:

Access values using data.property
Access array elements using data[index]
Access nested data using data[index].property.subproperty

Example:

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => {
    console.log(data[0].address.city);
  });

You can also transform or filter the data:

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => {
    let names = data.map(user => user.name);
    console.log(names);
  });

Common Mistake

Incorrect:

fetch(url).then(response => console.log(response));

Correct:

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

To work with API data in JavaScript:

Use fetch() to request data
Convert the response using response.json()
Access and format the data as needed

This process allows you to transform raw API data into a readable and usable format.

JavaScript Promises: I Promise I’ll Explain This Clearly

Vinayagam — Sun, 29 Mar 2026 12:13:42 +0000

Promises in JavaScript

A Simple Guide to Understanding Asynchronous Code

Introduction

Have you ever faced this situation in JavaScript?

You write some code, expect a result immediately… but it doesn’t come on time.
Instead, your program behaves unexpectedly.

This happens because JavaScript handles many operations asynchronously.

To solve this and make code cleaner and more structured, JavaScript introduced Promises.

The Problem: Callback Hell

Before Promises, developers relied on callbacks to handle asynchronous tasks.

setTimeout(function () {
  console.log("Step 1");
  setTimeout(function () {
    console.log("Step 2");
    setTimeout(function () {
      console.log("Step 3");
    }, 1000);
  }, 1000);
}, 1000);

Why is this a problem?

Code becomes deeply nested
Hard to read and understand
Difficult to debug and maintain

This situation is called callback hell.

What is a Promise?

A Promise is a JavaScript object that represents the eventual result of an asynchronous operation.

Simple Definition

A Promise is like a commitment that:

A result will come in the future
It will either be successful or fail

Real-Life Analogy

Think of ordering food online:

Pending → Order is being prepared
Fulfilled → Food delivered successfully
Rejected → Order cancelled

This is exactly how a Promise works.

States of a Promise

A Promise has three states:

Pending
The operation is still in progress
Fulfilled (Resolved)
The operation completed successfully
Rejected
The operation failed

Once a Promise is completed (fulfilled or rejected), it becomes settled and cannot change.

Creating a Promise

let promise = new Promise(function (resolve, reject) {
  let success = true;

  if (success) {
    resolve("Operation successful");
  } else {
    reject("Operation failed");
  }
});

Using a Promise

To handle the result, we use:

.then() for success
.catch() for errors

promise
  .then(function (result) {
    console.log(result);
  })
  .catch(function (error) {
    console.log(error);
  });

Example with Delay

let dataPromise = new Promise(function (resolve) {
  setTimeout(function () {
    resolve("Data received after 2 seconds");
  }, 2000);
});

dataPromise.then(function (data) {
  console.log(data);
});

What happens here?

The task starts
JavaScript continues executing other code
After 2 seconds, the result is returned

Why Use Promises?

Promises make asynchronous code:

Cleaner and more readable
Easier to manage
Free from deep nesting

They replace messy callback structures with a clear flow.

Promise Chaining

Promises allow multiple operations to be connected in sequence:

new Promise(function (resolve) {
  resolve(10);
})
  .then(function (num) {
    return num * 2;
  })
  .then(function (num) {
    return num * 3;
  })
  .then(function (result) {
    console.log(result);
  });

Explanation

Each .then():

Receives the result from the previous step
Processes it
Passes it to the next step

Handling Errors

new Promise(function (resolve, reject) {
  reject("Something went wrong");
})
  .then(function (result) {
    console.log(result);
  })
  .catch(function (error) {
    console.log(error);
  });

Explanation

If something fails, .catch() handles the error
Helps keep code clean and safe

Async/Await (Modern Approach)

Promises become even easier with async/await:

async function fetchData() {
  let result = await Promise.resolve("Data loaded");
  console.log(result);
}

fetchData();

Why use this?

Looks like normal synchronous code
Easier to read and understand
Better debugging

Advantages of Promises

Improves readability
Simplifies error handling
Supports chaining
Works perfectly with async/await

Summary

A Promise represents a future value
It has three states: pending, fulfilled, and rejected
.then() handles success and .catch() handles errors
Promises improve code clarity and structure

Sync vs Async in JavaScript (Explained in the Simplest Way)

Vinayagam — Fri, 27 Mar 2026 13:41:40 +0000

Introduction

When learning JavaScript, one of the most important concepts you will come across is synchronous and asynchronous programming. Understanding this topic helps you write better code and build faster, smoother web applications.

In simple terms, it explains how JavaScript handles tasks — whether it waits for one task to finish or moves on to the next.

What is Synchronous JavaScript?

Synchronous JavaScript means that code runs one line at a time, in order. Each task must complete before the next one starts.

Key Idea:

JavaScript waits for each step to finish before moving forward.

Example of Synchronous Code

console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

Output:

Step 1
Step 2
Step 3

Explanation

The code runs line by line.
"Step 2" will not run until "Step 1" is finished.
This is simple and easy to understand.

Problem with Synchronous Code

Let’s look at a slightly longer example:

console.log("Start");

for (let i = 0; i < 5; i++) {
  console.log("Working...");
}

console.log("End");

Output:

Start
Working...
Working...
Working...
Working...
Working...
End

What’s Happening?

JavaScript is busy executing the loop.
It cannot do anything else until the loop finishes.
This blocks the program.

Disadvantages

Slows down applications
Freezes the user interface
Poor user experience

What is Asynchronous JavaScript?

Asynchronous JavaScript allows the program to start a task and continue executing other code without waiting for that task to finish.

Key Idea:

JavaScript does not block execution while waiting for long operations.

Example of Asynchronous Code

console.log("Start");

setTimeout(function () {
  console.log("Task completed");
}, 2000);

console.log("End");

Output:

Start
End
Task completed

Explanation

The setTimeout function is handled in the background.
JavaScript continues executing the next line immediately.
After 2 seconds, the message is printed.

Why Asynchronous Programming is Important

JavaScript is a single-threaded language, which means it can only do one thing at a time.

If everything were synchronous:

Web pages would freeze
User interactions would stop
Applications would feel slow

Asynchronous programming solves this problem by allowing tasks like:

API calls
Timers
File loading

to run in the background.

Real-Life Example

Synchronous

You go to a shop
You wait in line
You get your item
Then you leave

Everything happens one after another.

Asynchronous

You order food online
You do other work
Food is delivered later

Tasks happen without blocking your time.

How JavaScript Handles Asynchronous Code

JavaScript uses a system that includes:

1. Web APIs

Handles background tasks like:

setTimeout
API requests

2. Callback Queue

Stores completed tasks.

3. Event Loop

Checks when the main thread is free and executes queued tasks.

Types of Asynchronous Methods

1. Callback

A function is executed after a delay.

2. Promise

Promises help manage asynchronous operations more cleanly.

3. Async/Await

This is the modern and easiest way to handle asynchronous code.

Difference Between Synchronous and Asynchronous

Feature	Synchronous	Asynchronous
Execution	One after another	Runs in background
Blocking	Yes	No
Performance	Slower	Faster
Use Case	Simple tasks	API calls, timers

Summary

Synchronous code runs step by step and waits for each task.
Asynchronous code allows tasks to run in the background.
Asynchronous programming improves performance and user experience.
Common async methods include callbacks, promises, and async/await.

JavaScript DOM Explained: Concepts, Examples, and Interview Questions

Vinayagam — Thu, 26 Mar 2026 15:32:28 +0000

🌐 Complete Guide to DOM in JavaScript (Beginner to Advanced)

📌 Introduction

In modern web development, creating interactive and dynamic web pages is essential. This is where the Document Object Model (DOM) plays a crucial role. The DOM acts as a bridge between HTML and JavaScript, allowing developers to control and manipulate web pages programmatically.

This blog provides a complete understanding of the DOM, starting from basic definitions to advanced concepts, along with interview questions and answers.

🧠 What is DOM?

📖 Definition

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree of objects, where each object corresponds to a part of the document.

JavaScript uses the DOM to:

Access HTML elements
Modify content
Change styles
Handle events
Create dynamic web pages

💡 Simple Explanation

Think of a webpage as a tree structure:

The entire webpage = Root node (document)
HTML tags = Elements (nodes)
Content inside elements = Text nodes

This structure allows JavaScript to easily navigate and update the page.

🌳 Example of DOM Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph</p>
  </body>
</html>

DOM Tree Representation:

Document
 └── html
     ├── head
     │   └── title
     └── body
         ├── h1
         └── p

⚙️ DOM Manipulation in JavaScript

🔍 Selecting Elements

JavaScript provides multiple ways to select elements:

document.getElementById("id")
document.getElementsByClassName("class")
document.getElementsByTagName("tag")
document.querySelector("selector")
document.querySelectorAll("selector")

Example:

let heading = document.getElementById("title");

✏️ Changing Content

document.getElementById("demo").innerHTML = "Hello JavaScript";

Explanation:

innerHTML allows inserting HTML content
It replaces existing content

🎨 Changing Styles

document.getElementById("demo").style.color = "blue";
document.getElementById("demo").style.fontSize = "20px";

➕ Creating Elements

let newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph";
document.body.appendChild(newPara);

❌ Removing Elements

let element = document.getElementById("demo");
element.remove();

🔄 Replacing Elements

let newElement = document.createElement("h2");
newElement.textContent = "New Heading";

let oldElement = document.getElementById("old");
oldElement.replaceWith(newElement);

🎯 Event Handling in DOM

Events allow interaction between user and webpage.

📌 Common Events

click
mouseover
mouseout
keydown
submit

🧪 Example

document.getElementById("btn").addEventListener("click", function() {
  alert("Button Clicked!");
});

🔥 Event Types

1. Event Bubbling

Event starts from child and moves upward.

2. Event Capturing

Event starts from parent and moves downward.

⚡ Event Delegation

Instead of adding multiple event listeners, we add one listener to the parent.

document.getElementById("parent").addEventListener("click", function(e) {
  console.log(e.target);
});

🧱 Types of DOM Nodes

Element Node → <div>, <p>
Text Node → Text inside elements
Attribute Node → id, class
Comment Node → Comments in HTML

🔑 Important DOM Properties

innerHTML
textContent
innerText
style
value
parentNode
childNodes
firstChild
lastChild

🔍 DOM Navigation

let parent = element.parentNode;
let children = element.childNodes;
let first = element.firstChild;
let last = element.lastChild;

⚖️ innerHTML vs textContent vs innerText

Property	Description
innerHTML	Returns HTML content
textContent	Returns all text
innerText	Returns visible text

⚡ DOM vs BOM

DOM	BOM
Deals with HTML	Deals with browser
document object	window object
Page content	Browser features

🚀 Advantages of DOM

Makes web pages dynamic
Easy to manipulate HTML
Supports event handling
Platform independent
Works with all browsers

⚠️ Disadvantages of DOM

Performance issues for large pages
Complex for beginners
Memory usage can increase

❓ Interview Questions and Answers

1. What is DOM?

DOM is a tree-like representation of HTML that allows JavaScript to manipulate web pages.

2. What is the difference between innerHTML and textContent?

innerHTML → includes HTML tags
textContent → only text

3. What is querySelector?

It selects the first matching element using CSS selectors.

4. What is addEventListener?

It attaches an event handler to an element without overwriting existing handlers.

5. What is Event Bubbling?

Event propagates from child to parent.

6. What is Event Delegation?

Using a parent element to handle events for child elements.

7. Difference between getElementById and querySelector

getElementById → fast, only ID
querySelector → flexible, supports CSS

8. What is createElement?

Used to create new HTML elements dynamically.

9. What is remove()?

Removes an element from the DOM.

10. What is DOM Manipulation?

Changing structure, content, or style using JavaScript.

🧪 Real-World Example

<button id="btn">Click Me</button>
<p id="text">Hello</p>

<script>
document.getElementById("btn").addEventListener("click", function() {
  document.getElementById("text").innerHTML = "Changed!";
});
</script>

📚 Best Practices

Use querySelector for flexibility
Avoid excessive DOM manipulation
Use event delegation for performance
Keep code clean and readable

🏁 Conclusion

The DOM is one of the most important concepts in JavaScript. It allows developers to create dynamic, interactive, and user-friendly web applications. Understanding DOM deeply will help you become a strong front-end developer.

Mastering DOM means you can:

Build interactive websites
Handle user input efficiently
Create modern web applications

✨ Final Tip: Practice DOM manipulation daily with small projects like:

To-do list
Calculator
Form validation

This will strengthen your understanding and confidence.

Everything You Need to Know About JavaScript Objects

Vinayagam — Thu, 12 Mar 2026 14:39:41 +0000

JavaScript Objects

Objects are one of the most important parts of JavaScript. They help us store and organize related data together.

1️⃣Object

Definition
An Object in JavaScript is a collection of related data stored as key–value pairs, where each key represents a property and each value stores the information.

Example

let person = {
  name: "Vinayagam",
  age: 21,
  city: "Chennai"
};

Real Life Example:
A student record in a college database contains name, roll number, and department.
All these details belong to one student, so they can be stored in an object.

2️⃣Property

Definition
A property is a key inside an object that stores a value.

Example

let car = {
  brand: "Toyota"
};

Here:

brand → property (key)

"Toyota" → value

Real Life Example
In a mobile phone description, properties could be:

brand
price
storage

3️⃣ Key–Value Pair

Definition
A key–value pair is the combination of a property name (key) and its corresponding data (value) inside an object.

Example

let book = {
  title: "JavaScript Basics"
};

key → title
value → "JavaScript Basics"

4️⃣ Creating an Object

Definition
Creating an object means defining a new object using curly braces {} and adding properties inside it.

Example

let student = {
  name: "Arun",
  age: 21
};

Real Life Example
When a website stores user profile information, it creates an object with the user's details.

5️⃣ Accessing Object Properties

Definition
Accessing object properties means retrieving the value stored in an object using its key.

There are two methods:

Dot Notation

console.log(student.name);

Bracket Notation

console.log(student["age"]);

Real Life Example
When a website shows your username after login, it is accessing the username property from the user object.

6️⃣ Adding Properties to an Object

Definition
Adding a property means inserting a new key–value pair into an existing object.

Example

let person = {
  name: "Rahul"
};
person.age = 25;

Now the object contains a new property age.

Real Life Example
When a user adds their phone number later in a profile, the system adds a new property to the user object.

7️⃣ Updating Object Properties

Definition
Updating a property means changing the value of an existing property in an object.

Example

let product = {
  price: 500
};
product.price = 450;

Real Life Example
An e-commerce website updating product price after discount.

8️⃣ Deleting Object Properties

Definition
Deleting a property means removing a key–value pair from an object using the delete keyword.

Example

let user = {
  name: "Vinayagam",
  password: "1234"
};
delete user.password;

Real Life Example
A website removing temporary login tokens after logout.

9️⃣ Object Methods

Definition
A method is a function stored inside an object.

Example

let calculator = {
  add: function(a, b) {
    return a + b;
  }
};

calculator.add(5,3);

Real Life Example
A car object may have methods like:

start()
stop() These represent actions.

🔟 Nested Objects

Definition
A nested object is an object that is stored inside another object.

Example

let student = {
  name: "Vinay",
  marks: {
    math: 90,
    science: 85
  }
};

Real Life Example
An online order contains customer details and address, which are stored as objects inside the main order object.

1️⃣1️⃣ Looping Through Objects

Definition
Looping through objects means iterating over each property of an object using loops like for...in.

Example

let person = {
  name: "Vinay",
  age: 22
};

for(let key in person){
  console.log(key, person[key]);
}

Real Life Example
A program displaying all user profile details by looping through the object.

If you are a beginner learning JavaScript, try discussing simple problems with your friends. Talking about logic and solving real-life scenarios can improve your understanding much faster than studying alone.

Vinayagam — Fri, 06 Mar 2026 02:11:38 +0000

Vinayagam

Mar 5

How Group Discussions Helped Me Understand JavaScript Better

#beginners #codenewbie #javascript #learning

Comments

3 min read

How Group Discussions Helped Me Understand JavaScript Better

Vinayagam — Thu, 05 Mar 2026 14:23:43 +0000

My JavaScript Discussion Experience – A Beginner’s Learning Journey.

Yesterday, I had a very useful and interesting discussion with my friends about JavaScript. We decided to practice scenario-based questions instead of only reading theory.

We focused mainly on beginner topics like variables, operators, and conditional statements. Even though these topics are basic, we understood that they are the foundation of programming.
Without strong basics, it is very difficult to build real-world applications.⚠️

We started our discussion in a simple way. Each person took one scenario and explained the logic first. After understanding the logic clearly, we wrote the code. This method helped us avoid confusion and improved our thinking skills. We did not rush to write code.
Instead, we tried to understand what the problem was asking and how we could solve it step by step.💡

Example: Simple Login Validation
One of our first discussions was about a login system. We imagined a website where the user must enter a username and password. If both fields are filled, the login is successful.

let username = "vinay";
let password = "1234";

if (username !== "" && password !== "") {
    console.log("Login Successful");
} else {
    console.log("Please fill all fields");
}

From this example, we learned how the logical AND operator (&&) works. If both conditions are true, only then the result will be true. This small logic is used in almost every website.

🌍 Why We Chose Real-Life Problems
We chose real-life problems because they connect programming with our daily life. When we solve real-time examples, we can clearly understand how JavaScript is used in websites and applications.

Instead of learning only theory, we wanted to see how the code works in real situations.
For example,
features like login systems, discount calculations, and grade systems are used in many websites.When we practice these types of problems, learning becomes more interesting and practical.

Real-life problems also help improve our logical thinking. They teach us not only the syntax of JavaScript, but also the purpose behind the code. We start to understand why we are writing a particular condition or using a specific operator.

That is why we decided to focus on real-life JavaScript scenarios during our discussion. It made our learning more clear, useful, and enjoyable.🌟

🧱 Strong Basics = Strong Developer
During our discussion, I realized one important thing: basics are very powerful. Variables, operators, and conditional statements may look simple, but they are the foundation of programming.
For example,
a login system uses conditions. A shopping website uses operators to calculate discounts. A grading system uses multiple conditions. Without understanding these basics clearly, it is very hard to build bigger projects.

This discussion helped me strengthen my fundamentals. Now I understand that learning basics properly will make advanced topics easier in the future.

🤝 Learning with Friends is More Fun
Learning alone can sometimes feel boring or difficult. But learning with friends makes it more interesting and enjoyable. During our discussion, we asked questions freely and explained answers to each other.

When I explained a concept, my speaking skill improved. When my friends explained their ideas, I learned new approaches. Sometimes they solved the same problem in a different way, and that helped me think in new directions.

We corrected each other’s mistakes and supported one another. It felt like teamwork, not just studying. That positive environment made learning easier and more enjoyable.

🚀 My Next Learning Goal
After this discussion, I feel more confident in JavaScript basics. But I know this is just the beginning. I want to continue practicing scenario-based questions regularly.
My next goal is to learn and discuss:

Loops
Functions
Arrays
Small mini projects

I also want to improve my problem-solving speed and communication skills. Step by step, I want to become a confident and skilled JavaScript developer.

This JavaScript discussion improved my technical knowledge and communication skills 💻
I understood that strong basics are very important in real-world applications ✨
I am excited to keep learning and growing every day 📚