In JavaScript, an object is a fundamental data structure that allows you to store and organize related data and functionality.

You can think of an object as a container that holds various pieces of information, much like a filing cabinet holds different folders and documents.

These pieces of information are called properties, and they consist of a name (or key) and a value.

const exampleObject = {
  propertyName: value,
}

Objects are incredibly versatile and form the backbone of JavaScript. In fact, almost everything in JavaScript is an object or can be treated as one.

This includes arrays, functions, and even primitive data types like strings and numbers when used in certain ways.

This object-centric nature of JavaScript is one of the reasons it's such a flexible and powerful language. Let's look at how you can create an object:

const person = {
  name: "Alice",
  age: 30,
  city: "New York"
};

In this example, we've created an object called person with three properties: name, age, and city. Each property has a name and a value, separated by a colon. This is object literal.

How to access properties of object

Now, let's explore how you can access these properties. There are two main ways to access object properties in JavaScript: dot notation and bracket notation.

Dot notation

Dot notation is the most common and straightforward way to access object properties. Here is the basic syntax for dot notation:

objectName.propertyName

Here's how you would use dot notation with our person object:

const person = {
  name: "Alice",
  age: 30,
  city: "New York"
};

console.log(person.name);  // Alice
console.log(person.age);   // 30

Dot notation is concise and easy to read, making it the preferred choice when you know the exact name of the property you want to access and that name is a valid JavaScript identifier (meaning it doesn't start with a number and doesn't contain special characters or spaces).

Bracket notation

Bracket notation, on the other hand, allows you to access object properties using a string inside square brackets. Here's how you would use bracket notation:

const person = {
  name: "Alice",
  age: 30,
  city: "New York"
};

console.log(person["name"]); // Alice
console.log(person["age"]); //  30

Bracket notation is more flexible than dot notation because it allows you to use property names that aren't valid JavaScript identifiers. For example, if you had a property name with spaces or that starts with a number, you'd need to use bracket notation:

const oddObject = {
  "1stProperty": "Hello",
  "property with spaces": "World"
};

console.log(oddObject["1stProperty"]);  // Hello
console.log(oddObject["property with spaces"]);  // World

Another advantage of bracket notation is that it allows you to use variables to access properties dynamically:

const person = {
  name: "Alice",
  age: 30,
  city: "Wonderland"
};

let propertyName = "city";
console.log(person[propertyName]); // Wonderland

This flexibility makes bracket notation particularly useful when you don't know the exact property name at the time you're writing the code, or when you're working with property names that come from user input or some other dynamic source.

It's worth noting that objects in JavaScript are incredibly powerful and versatile. They can contain not just simple values like strings and numbers, but also arrays, or other objects.

How Can You Remove Properties from an Object?

There are several ways to remove properties from an object, with the delete operator being the most straightforward and commonly used method.

When you use delete, it removes the selected property from the object. Here's an example of how to use the delete operator:

const person = {
  name: "Alice",
  age: 30,
  job: "Engineer"
};

delete person.job;

console.log(person.job); // undefined

In this example, we start with a person object that has three properties: name, age, and job. Then, we use the delete operator to remove the job property. After the deletion, the person object no longer has the job property.

Another way to remove properties is by using destructuring assignment with rest parameters. This approach doesn't actually delete the property, but it creates a new object without the specified properties:

const person = {
  name: "Bob",
  age: 25,
  job: "Designer",
  city: "New York"
};

const { job, city, ...remainingProperties } = person;

// { name: "Bob", age: 25 }
console.log(remainingProperties);

In this example, we use destructuring to extract job and city from the person object, and collect the remaining properties into a new object called remainingProperties. This creates a new object without the job and city properties.

How to Check If an Object Has a Property?

hasOwnProperty() method

In JavaScript, there are several ways to check if an object has a specific property. Understanding these methods is important for working effectively with objects, especially when you're dealing with data from external sources or when you need to ensure certain properties exist before using them.

We'll explore some common approaches: the hasOwnProperty() method, the Object.hasOwn() method, the in operator, and checking against undefined.

Let's start with the hasOwnProperty() method. This method returns a boolean indicating whether the object has the specified property as its own property. Here's an example:

const person = {
  name: "Alice",
  age: 30
};

console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("job")); // false

In this example, we have an object called person with two properties: name and age. To check if name is a property in the person object, we use the hasOwnProperty() method. Since name is a property, it will return true. But when we use the hasOwnProperty() to check if job is a property, it will return false because it does not exist in the object.

Object.hasOwn() method

Object.hasOwn() is the modern, recommended way to check if an object has a property as its own (not inherited). Think of it as an upgraded, safer version of hasOwnProperty(). The syntax is Object.hasOwn(object, propertyName) — you pass the object as the first argument and the property name as the second.

Here is a basic example:

const person = {
  name: "Alice",
  age: 30
};

console.log(Object.hasOwn(person, "name")); // true
console.log(Object.hasOwn(person, "job")); // false

In this example, Object.hasOwn(person, "name") returns true because name exists directly on the person object. Object.hasOwn(person, "job") returns false because job was never added to the object.

Alert:

A very important thing to understand is that Object.hasOwn() only checks if the property exists - it does not care about the property's value. This means it still returns true even when the value is 0, false, null, or undefined:

const user = {
  username: "coder123",
  score: 0,
  isActive: false,
  nickname: null
};

// Object.hasOwn() correctly reports these all exist
console.log(Object.hasOwn(user, "score"));    // true  (value is 0, but property exists)
console.log(Object.hasOwn(user, "isActive")); // true  (value is false, but property exists)
console.log(Object.hasOwn(user, "nickname")); // true  (value is null, but property exists)
console.log(Object.hasOwn(user, "email"));   // false (property was never added)

// Danger! Using if() directly gives wrong results for falsy values
if (user.score) {
  console.log("Has score"); // This will NOT print even though score exists!
}

// Safe! Object.hasOwn() gives correct result
if (Object.hasOwn(user, "score")) {
  console.log("Has score:", user.score); // Has score: 0
}

in operator

Another way to check for the existence of a property in an object is to use the in operator. Like hasOwnProperty(), the in operator will return true if the property exists on the object. Here's how you can use it:

const person = {
  name: "Bob",
  age: 25
};
console.log("name" in person);  // true

In this example, "name" in person returns true because name is a property of person.

The third method involves checking if a property is undefined. This approach can be useful, but it has some limitations. Here's an example:

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

console.log(car.brand !== undefined); // true
console.log(car.color !== undefined); // false

In this code, we check if car.brand and car.color are not undefined. This works because accessing a non-existent property on an object returns undefined. However, this method can give false negatives if a property explicitly has the value undefined.

A JavaScript string is a sequence of characters, typically used to represent text.

We can either use a single quote ('') or a double quote ("") or a back-ticks (``) to create a string. We can use either of the three, but it is recommended to be consistent with your choice throughout your code.

// Using Single Quote
let firstName = 'Ayan';
console.log(firstName);

// Using Double Quote
let middleName = "Shahid";
console.log(middleName);

//Using Backticks
let lastName = `Khan`;
console.log(lastName);

Strings are immutable.

Finding the length of a String

You can find the length of a string using the length property.

let s = 'JavaScript';
let len = s.length;

console.log("String Length: " + len);

What Is Bracket Notation, and How Do You Access Characters from a String?

In JavaScript, strings are treated as sequences of characters, and each character in a string can be accessed using bracket notation. This allows you to retrieve a specific character from a string based on its position, which is called its index.

An index is the position of a character within a string, and it is zero-based. This means that the first character of a string has an index of 0, the second character has an index of 1, and so on.

For example, in the string hello, the character h is at index 0, e is at index 1, l is at index 2, and so on.

Bracket notation uses square brackets ([]) and the index of the character you want to access. Let’s look at an example:

let greeting = "hello";
console.log(greeting[1]); // "e"

In this example, we can access the character at index 1, which is e.

To get the last character of a string, you can use the length of the string minus one. The length property of a string tells you how many characters it contains, so to access the last character, you would subtract one from the length:

let greeting = "hello";
console.log(greeting[greeting.length - 1]); // "o"

In this case, the length of hello is 5, and the last character (o) is at index 4 which is 5 - 1.

If you want to get multiple characters, you can use bracket notation like this:

let greeting = "hello";
let firstTwo = greeting[0] + greeting[1]; // "he"
console.log(firstTwo);

In this example, we are concatenating the first and second characters using bracket notation to form the string he.

Bracket notation is useful when you need to access specific characters in a string, such as extracting initials from a name or checking a specific letter for validation.

How Can You Find the Position of a Substring in a String indexOf method?

When working with strings in JavaScript, there may be times when you need to locate the position of a specific substring within a larger string.

A substring is a sequence of characters that appears within a larger string. For example, in the string hello world, hello and world are substrings.

To locate the position of a substring inside of a string, you can use the indexOf() method.

The indexOf() method in JavaScript allows you to search for a substring within a string.

If the substring is found, indexOf() returns the index (or position)of the first occurrence of that substring. If the substring is not found, indexOf() returns -1, which indicates that the search was unsuccessful.

The indexOf() method takes two arguments: the first is the substring you want to find within the larger string, and the second is an option starting position for the search. If you don’t provide a starting position, the search will begin at the start of the string.

In this context, an argument is a value you give to a function or method when you call it, enabling that function or method to perform its task using the specific information you provide. You will learn more about arguments in future lessons.

Here is an example of using the indexOf() method to find the position for the string awesome:

let sentence = "JavaScript is awesome!";
let position = sentence.indexOf("awesome!");
console.log(position); // 14

In this example, the word awesome starts at index 14 in the string JavaScript is awesome!, so the indexOf() method returns 14.

Now, let's see what happens when the substring isn't found:

let sentence = "JavaScript is awesome!";
let position = sentence.indexOf("fantastic");
console.log(position); // -1

Since the word fantastic does not appear in the string, the method returns -1.

You can also specify where to begin searching within the string by providing a second argument to indexOf(). Here's an example:

let sentence = "JavaScript is awesome, and JavaScript is powerful!";
let position = sentence.indexOf("JavaScript", 10);
console.log(position); // 27

In this case, the search for JavaScript begins after the 10th character, and so the second occurrence of JavaScript is found at index 27.

It is important to note that the indexOf() method is case sensitive.

console.log("freeCodeCamp".indexOf("F")) // -1

Using indexOf() can be very useful when you need to check if a substring is present in a string and to determine its position for further operations.

How ASCII Does It Work with charCodeAt() and fromCharCode()?

In this lesson, we will explore what ASCII is, how it works, and how JavaScript methods like charCodeAt() and fromCharCode() relate to character encoding. While JavaScript strings use Unicode (UTF-16) internally, ASCII values match the first 128 Unicode characters, which is why ASCII-based examples work in JavaScript.

ASCII is a system for encoding characters such as letters, digits, and symbols into numerical values. Each character is mapped to a specific number.

For example, the capital letter A is represented by the number 65 in ASCII, while the lowercase a is represented by 97. This encoding allows computers to store and manipulate text.

The ASCII standard covers 128 characters including:

• Uppercase and lowercase English letters (A-Z, a-z).

• Numbers (0-9).

• Common punctuation marks and symbols (!, @, #, and so on).

• Control characters (such as newline and tab).

In JavaScript, you can access the numeric code of a character using the charCodeAt() method. This method returns the UTF-16 code unit of the character at a specified index. For the first 128 characters, this value matches the ASCII code.

Let’s take a look at an example:

let letter = "A";
console.log(letter.charCodeAt(0));  // 65

In this example, A is the first character of the string, and calling charCodeAt(0) returns its numeric code (which matches its ASCII value for basic Latin characters), 65.

You can also use this method with other characters to find their numeric code values:

let symbol = "!";
console.log(symbol.charCodeAt(0));  // 33

Here, the numeric code for the exclamation mark ! is returned as 33 (which matches its ASCII value).

While charCodeAt() helps you retrieve the numeric code of a character, the fromCharCode() method allows you to do the opposite: convert a UTF-16 code unit (which matches ASCII for basic characters) into its corresponding character.

Let's see this in action:

let char = String.fromCharCode(65);
console.log(char);  //  A

In this example, fromCharCode(65) converts the numeric code 65 (which matches the ASCII value for A) back to the character A.

Another example would be converting the number 97 to its corresponding lowercase letter:

let char = String.fromCharCode(97);
console.log(char);  // a

These methods are particularly useful when you need to manipulate or compare characters based on their numeric code values.

For instance, you might use charCodeAt() to check if a character is uppercase, lowercase, or a digit by comparing its ASCII value.

On the other hand, fromCharCode() can be used to dynamically generate characters from their ASCII codes.

How Can You Test if a String Contains a Substring includes() method?

When working with strings in JavaScript, there are many cases where you might need to check whether a string contains a specific substring, which is a smaller part of that string.

For example, you might want to check if a user's input includes a specific word or character before performing some action. One way to achieve this is by using the includes() method.

The includes() method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true otherwise, it returns false.

Here's the basic syntax:

string.includes(searchValue);

For the syntax, the searchValue is the substring you want to look for within the string. And here's an example:

let phrase = "JavaScript is awesome!";
let result = phrase.includes("awesome");

console.log(result);  // true

In this example, the word awesome is found within the string JavaScript is awesome!, so the includes() method returns true.

It's important to note that the includes() method is case-sensitive. This means that the exact match of the characters is required, including their case.

let phrase = "JavaScript is awesome!";
let result = phrase.includes("Awesome");

console.log(result);  // false

Since Awesome (with an uppercase A) does not match awesome (with a lowercase a), the result is false.

You can also use the includes() method to check for a substring starting at a specific index in the string by providing a second parameter:

let text = "Hello, JavaScript world!";
let result = text.includes("JavaScript", 7);

console.log(result);  // true

Here, the search for the substring JavaScript starts from the 7th position in the string, ensuring it skips any characters before this position.

The includes() method only returns a true or false result. It does not provide information on where the substring is located in the string or how many times it occurs. If you need that level of detail, other methods, such as the indexOf() method might be more suitable.

How Can You Extract a Substring from a String slice() method?

When working with strings in JavaScript, you often need to extract a portion or substring from a larger string.

For example, you may want to extract part of a word, a specific character sequence, or just a fragment of a sentence.

JavaScript provides several methods for this task, one of the most commonly used being the slice() method.

The slice() method allows you to extract a portion of a string and returns a new string, without modifying the original string. It takes two parameters: the starting index and the optional ending index.

Here's the basic syntax:

string.slice(startIndex, endIndex);

startIndex (inclusive)is the position where the extraction starts. endIndex (exclusive) is where the extraction ends. If not provided, slice() extracts until the end of the string.

Let's look at a simple example of extracting part of a string:

let message = "Hello, world!";
let greeting = message.slice(0, 5);

console.log(greeting);  // Hello

In this example, slice(0, 5) extracts characters starting from index 0 up to but not including index 5. As a result, the word Hello is extracted.

If you omit the second parameter, slice() will extract everything from the start index to the end of the string:

let message = "Hello, world!";
let world = message.slice(7);

console.log(world);  // world!

Here, slice(7) extracts the string from index 7 to the end of the string, resulting in world!.

You can also use negative numbers as indexes. When you use a negative number, it counts backward from the end of the string:

let message = "JavaScript is fun!";
let lastWord = message.slice(-4);

console.log(lastWord);  // fun!

In this case, slice(-4) extracts the last four characters from the string, giving us fun!.

Let's say you want to extract a section from the middle of a string. You can provide both the starting and ending indexes to precisely control which part of the string you want:

let message = "I love JavaScript!";
let language = message.slice(7, 17);

console.log(language);  // JavaScript

Here, slice(7, 17) extracts the substring starting at index 7 and ending right before index 17, which is the word JavaScript.

The slice() method is a powerful tool for extracting parts of a string in JavaScript.

You specify the start and end indexes, and the method returns a new string that contains the extracted portion.

With options for positive, negative, and omitted indexes, you can adapt it to various situations without altering the original string.

Working with String Formatting Methods

toUpperCase() and toLowerCase() Methods:

toUpperCase() Method

The toUpperCase() method converts all the characters to uppercase letters and returns a new string with all uppercase characters. This is useful when you want to emphasize text or create consistency in the format of strings.

Let's see an example:

let greeting = "Hello, World!";
let uppercaseGreeting = greeting.toUpperCase();
console.log(uppercaseGreeting);  // "HELLO, WORLD!"

In this code, the toUpperCase() method transforms the entire string into uppercase letters.

toLowerCase() Method

On the flip side, the toLowerCase() method converts all characters in a string to lowercase. This is helpful when you need to standardize input, such as when comparing user-provided text or making case-insensitive checks.

Let's look at an example:

let shout = "I AM LEARNING JAVASCRIPT!";
let lowercaseShout = shout.toLowerCase();
console.log(lowercaseShout);  // "i am learning javascript!

The toLowerCase() method converts all characters to lowercase, making the string less aggressive, while leaving the original string unchanged.

These methods are particularly useful for standardizing text input, making case-insensitive comparisons, and ensuring design consistency.

How Can You Trim Whitespace (empty spaces) from a String?

When working with strings in JavaScript, it's common to encounter unwanted whitespace at the beginning or end of a string. Whitespace can interfere with operations like comparison, storage, or display, which is why it's important to know how to remove it efficiently.

In this lesson, we'll explore how you can trim whitespace using JavaScript's trim(), trimStart(), and trimEnd() methods.

Whitespace refers to spaces, tabs, or line breaks that occur in a string but are not visible characters. For example:

let greeting = "   Hello, world!   ";

In this case, there are spaces before and after the visible text, Hello, world!.

The trim() method is the most commonly used way to remove whitespace from both the beginning and the end of a string. Here's an example:

let message = "   Hello!   ";
console.log(message); // "   Hello!   "
let trimmedMessage = message.trim();
console.log(trimmedMessage);  // "Hello!"

In this case, the trim() method removes all the leading and trailing spaces, leaving just Hello!. Note that any whitespace within the string (between words, for example) is left untouched by trim().

Sometimes, you may only want to remove whitespace from either the beginning or the end of a string, but not both. This is where trimStart() and trimEnd() come in.

trimStart() removes whitespace from the beginning (or start) of the string.

let greeting = "   Hello!   ";
console.log(greeting);  // "   Hello!   "
let trimmedStart = greeting.trimStart();
console.log(trimmedStart);  // "Hello!   "

trimEnd() removes whitespace from the end of the string.

let greeting = "   Hello!   ";
console.log(greeting);  // "   Hello!   "
let trimmedEnd = greeting.trimEnd();
console.log(trimmedEnd);  // "   Hello!"

These methods give you more precise control over which part of the string you want to clean up.

How Can You Replace Parts of a String with Another replace() method?

In JavaScript, there are many scenarios where you may need to replace a portion of a string with another string.

For instance, you might need to update user information in a URL, change the formatting of dates, or correct errors in user-generated content.

The replace() method in JavaScript allows you to find a specified value (like a word or character) in a string and replace it with another value. The method returns a new string with the replacement and leaves the original unchanged because JavaScript strings are immutable.

Here is the basic syntax:

string.replace(searchValue, newValue);

searchValue is the value you want to search for in the string. It can be either a string or a regular expression (regex), which describes patterns in text. This allows you to search for and manipulate strings in a flexible and powerful way. You'll learn more about regular expressions in future lessons.

The newValue is the value that will replace the searchValue. Here's a simple example:

let text = "I love JavaScript!";
console.log(text); // "I love JavaScript!"
let newText = text.replace("JavaScript", "coding");
console.log(newText);  // "I love coding!"

In this example, the word JavaScript is found within the string and is replaced with coding.

The replace() method is case-sensitive, meaning that it will only find exact matches of the searchValue. For example:

let sentence = "I enjoy working with JavaScript.";
console.log(sentence);  // "I enjoy working with JavaScript."
let updatedSentence = sentence.replace("javascript", "coding");
console.log(updatedSentence);  // "I enjoy working with JavaScript."

Here, since javascript (with lowercase j) does not match JavaScript (with uppercase J), the replacement is not made.

By default, the replace() method will only replace the first occurrence of the searchValue. If the value appears multiple times in the string, only the first one will be replaced:

let phrase = "Hello, world! Welcome to the world of coding.";
console.log(phrase);  // "Hello, world! Welcome to the world of coding."
let updatedPhrase = phrase.replace("world", "universe");
console.log(updatedPhrase);  // "Hello, universe! Welcome to the world of coding."

Notice that only the first occurrence of world is replaced with universe.

The replace() method in JavaScript is a powerful and flexible tool for string manipulation.

While it's ideal for straightforward replacements, understanding its case sensitivity and default behavior (like replacing only the first occurrence) can help you use it more effectively.

How Can You Repeat a String x Number of Times repeat() method?

When working with JavaScript, you may encounter situations where you need to repeat a string a specific number of times.

Whether you're generating repeated patterns or simply duplicating text, the repeat() method provides a simple and effective way to achieve this.

The repeat() method is a built-in function in JavaScript that allows you to repeat a string a specified number of times. Here is the basic syntax:

string.repeat(count);

string is the string that you want to repeat, and count is the number of times you want the string to be repeated. Here's an example:

let word = "Hello!";
let repeatedWord = word.repeat(3);
console.log(repeatedWord);  // "Hello!Hello!Hello!"

In this case, the string Hello! is repeated three times, resulting in Hello!Hello!Hello!.

While the repeat() method is useful, there are a few exceptions and limitations to keep in mind.

The count parameter must be a non-negative number. If you pass a negative number, JavaScript will throw a RangeError.

let word = "Test";
console.log(word.repeat(-1));  // Throws RangeError: Invalid count value

The count must be a finite number. If you try to repeat a string an infinite number of times or use Infinity as the count, you will also get a RangeError.

In JavaScript, Infinity is a special value that represents an infinite quantity. It's used to denote numbers that are larger than any finite number.

let word = "Test";
console.log(word.repeat(Infinity));  // Throws RangeError: Invalid count value

If the count is not an integer (such as a decimal like 2.5), the repeat() method will round it down to the nearest integer.

let word = "Test";
console.log(word.repeat(2.5));  // "TestTest"

If you pass 0 as the count, the repeat() method will return an empty string.

let word = "Test";
console.log(word.repeat(0));  // ""

The repeat() method can simplify tasks that involve string duplication, making your code more concise and readable.

Whether you're generating repeated text patterns or filling a space with characters, repeat() can save you from writing loops or more complex code.

You are not limited to passing a number directly into the repeat() method. You can also pass a variable that stores a number value.

let count = 4;
let word = "Test";
let repeatedWord = word.repeat(count);
console.log(repeatedWord); // TestTestTestTest

In this example, the count variable stores the number of repetitions. This can be useful when the number of repetitions depends on user input or other dynamic values in your program.

console.log(null === undefined) //false

Why it's false.👀

• Expression*:* null === undefined

• Result*:* false

Explanation

In JavaScript, both null and undefined represent "empty" values but are distinct (different) types.

null is a special object representing the intentional absence of a value, while undefined signifies that a variable has been declared but not assigned a value.

Despite their similar purpose, they are not strictly equal (===) to each other.

• null === undefined evaluates to false because JavaScript does not perform type coercion with ===.

Question - 2

console.log(5 > 3 > 2) //false

Why it's false.👀

• Expression*:* 5 > 3 > 2

• Result*:* false

Explanation

At first glance, this expression may appear to be checking if 5 is greater than 3 and 3 is greater than 2, but JavaScript evaluates it left-to-right due to its operator precedence.

• First, 5 > 3 evaluates to true.

• Then, true > 2 is evaluated, which in JavaScript results in 1 > 2 (since true is coerced to 1), which evaluates to false.

So, 5 > 3 > 2 evaluates to false.

Question - 3

console.log([] === []) //false

Why it's false.👀

• Expression*:* [] === []

• Result*:* false

Explanation

In JavaScript, arrays are objects. Even if two arrays have the same content, they are still different objects in memory.

• When you compare two arrays with ===, you are comparing their references, not their contents.

• Since [] and [] are different instances in memory, so the result is false.

Question - 4

console.log("10" < "9"); //true

Why it's true.👀

• Expression*:* "10" < "9"

• Result*:* true

Explanation

When JavaScript compares strings, it compares their Unicode values lexicographically (character by character).

• "10" is compared to "9". Since "1" has a lower Unicode value than "9", JavaScript determines that "10" is less than "9".

• This comparison might seem counterintuitive, but it's due to JavaScript's string comparison mechanism.

Question - 5

console.log(NaN === NaN);

Why it's false.👀

• Expression*:* NaN === NaN

• Result*:* false

Explanation

In JavaScript, NaN (Not-a-Number)is a special value that represents an invalid number or the result of an operation that cannot produce a valid number.

• One of the most unusual aspects of NaN is that it is not equal to itself. This behavior exists due to the design of the IEEE 754 standard, which JavaScript follows for floating-point arithmetic.

• As a result, NaN === NaN returns false.

To check if a value is NaN, use Number.isNaN().

Question-6

console.log(true == 1);

Why it's true.👀

• Expression: true == 1

• Result: true

Explanation

JavaScript uses type coercion with the loose equality operator (==). When comparing true and 1, JavaScript converts true to 1 and then compares the values.

• Since 1 == 1 is true, the overall expression evaluates to true.

This behavior might lead to unexpected results in some cases, so it’s often recommended to use the strict equality operator (===) to avoid implicit type coercion.

Question-7

console.log(undefined > 0);

Why it's false.👀

• Expression: undefined > 0

• Result: false

Explanation

When JavaScript attempts to compare undefined with 0, it converts undefined to NaN (Not-a-Number). Any comparison involving NaN returns false.

• undefined > 0 becomes NaN > 0, which evaluates to false.

Question-8

console.log("5" === 5);

Why it's false.👀

• Expression: "5" === 5

• Result: false

Explanation

The strict equality operator (===) checks both value and type. Since "5" is a string and 5 is a number, the types are different, and the comparison returns false.

• If you used the loose equality operator (==), JavaScript would perform type coercion, converting the string "5" to the number 5, and the comparison would return true.

Question-9

console.log([1, 2] == [1, 2]);

Why it's false.👀

• Expression: [1, 2] == [1, 2]

• Result: false

Explanation

Even though both arrays contain the same elements, JavaScript compares arrays by reference, not by value.

• Since each array is a separate object in memory, their references are different, and thus the comparison returns false.

To check if two arrays are equal, you must compare their contents element by element.

Question-10

console.log(Infinity > 1000);

Why it's true.👀

• Expression: Infinity > 1000

• Result: true

Explanation

In JavaScript, Infinity represents an unbounded, positive number. It's greater than any finite number, including 1000.

• Therefore, Infinity > 1000 evaluates to true.

IEEE Standard 754 floating-points numbers

It's a technical and official standard used by computers to store and do math with real (decimal) numbers.

Every IEEE 754 floating-point number splits memory into three parts:

• Sign Bit: Tells you if the number is positive (0) or negative (1). Zero (0) represents a positive number while one (1) represents a negative number.

• Biased Exponent: Stores the power of two. A fixed bias number is added to the actual exponent so negative and positive powers can both be saved as unsigned bit values.

• Normalized Mantissa (Significand): Stores the actual significant digits. Most formats assume an invisible leading 1 before the binary point to save space.

IEEE 754 numbers standard defines several sizes based on the above three components.

Half-Precision, Single precision, Double precision, and Quadruple-Precision.

Single Precision

Double Precision

• Half-Precision (16-bit / binary16): 1 sign bit, 5 exponent bits (bias 15), 10 mantissa bits.

• Single-Precision (32-bit / binary32): 1 sign bit, 8 exponent bits (bias 127), 23 mantissa bits. Gives about 7 decimal digits of precision.

• Double-Precision (64-bit / binary64): 1 sign bit, 11 exponent bits (bias 1023), 52 mantissa bits. Gives about 16 decimal digits of precision.

• Quadruple-Precision (128-bit / binary128): 1 sign bit, 15 exponent bits (bias 16383), 112 mantissa bits.

Precision

To demonstrate how this representation works, let us take the value 9.1, a single-precision value. To convert this number to IEEE 754 standard, we have to follow the below steps.

1. Convert the floating-point number into binary.

2. Write the converted binary in scientific format*.*

3. Write the binary (which is written in scientific format) according to IEEE 754 standard.

A the end, 9.1 will be converted to a binary with a sign bit, exponent, and a mantissa.

1. Convert the floating-point number into binary.

Let us first convert 9.1 into binary. When converting it into binary, we need to identify 9 as an integral part, and 0.1 as the fractional part which should be converted separately.

So when converted 9.1 to binary we get 1001.000110011001100…

Even though 9.1 is an infinite binary number*, we have only* 23 bits to store it.

2. Write the converted binary in scientific format.

When written 9.1 in scientific notation, the following is the result.

1.001000110011001100... x 2^3

3. Write the binary (which is written in scientific format) according to IEEE 754 standard.

Next, this number should be written in IEEE 754 format.

The first bit in IEEE 754 Floating-point standard is the signed bit.

Special Values

The standard also reserves bit patterns for special conditions:

• Infinity (±∞): Results from overflow or dividing a positive number by zero.

• NaN (Not a Number): Results from invalid operations like 0/0.

• Signed Zeros: Both positive (+0) and negative (-0) zero exist.

• Subnormal (De-normalized) Numbers: Tiny numbers close to zero (0) that lose precision to prevent abrupt underflow.

firsttName = "Ayan";
console.log(firsttName);

JavaScript will execute this script, even without declaring the variable with any keyword (var, let, or const).

JavaScript doesn’t create a variable in the current scope. Instead JavaScript will create a property on the global object.

This behavior depends entirely on whether your code is running in the default or Strict Mode.

Default mode

If the variable is declared without a keyword inside a function or a block, JavaScrit searches up the scope chain. If JavaScaript cann't find a declaration for that variable name anywhere, it creates a new property on the global object.

function myFunction() {
  secretValue = "I am global!"; // No keyword used
}
myFunction();

console.log(window.secretValue); // Output: "I am global!"
console.log(secretValue);        // Output: "I am global!" 
// (Accessible anywhere)

Strict Mode

When strict mode is enabled in script, assigning a value to an undeclared variable throws a ReferenceError instead of silently making it global.

"use strict";

function myFunction() {
  secretValue = "I am global!"; // ❌ ReferenceError: secretValue is not defined
}
myFunction();

Strict Mode in JavaScript

Strict Mode in JavaScript is a feature that helps catch common coding mistakes and implement a stricter set of rules to improve code quality.

It eliminates silent errors, prevents the use of unsafe actions, and improves performance optimization by JavaScript engines.

"use strict" directive

The "use strict" directive in JavaScript is used to enable strict mode. It introduces a short-list of variable names that are reserved for features that might be added to the language a bit later.

"use strict"


const interface = "video";
//Uncaught SyntaxError: Unexpected strict mode reserved word

const private = true;
//Uncaught SyntaxError: Unexpected strict mode reserved word

"use strict";

function showValue() {
    x = 10;
}
showValue()
// ReferenceError: x is not defined

• Without "strict mode", JavaScript would implicitly create a property in global object at execution time.

• With "strict mode", this results an error, enforcing proper variable declaration.

How to build a string

There is a need to add string in existing string, then you can use the += operator. This is helpful when you want to build upon a string by adding more text to it over time.

let greeting = 'Hello';
greeting += ', John!';

console.log(greeting); // "Hello, John!"

In this case, the original string of Hello is not modified, Instead greeting now references the new string of Hello, John!.

What Is the typeof null Bug in JavaScript?

There's a well-known quirk in JavaScript when it comes to null.

Let's take a look at an example:

let exampleVariable = null;
console.log(typeof exampleVariable); // "object"

In this example, we have a variable called exampleVariable and have assigned it the value of null. But when we use the typeof operator, it returns the data type of it is object.

This is widely considered a bug in JavaScript, dating back to its early days. The reason for this behavior is rooted in the way JavaScript was originally designed.

When the language was first implemented, values like null were represented as a special type of object, leading to this unexpected result. Unfortunately, this has become a part of the language, and while it's confusing, it's something you'll need to be aware of.

typeof Operator

The typeof operator is used to check the data type of a variable. It returns a string indicating the type of the variable.

let age = 25;
console.log(typeof age); // "number"

let isLoggedIn = true;
console.log(typeof isLoggedIn); // "boolean"

What Is the prompt() Method, and How Does It Work?

prompt(message, default);

The prompt() method is an important part of JavaScript's interaction with the user. It’s one of the simplest ways to get input from a user through a small pop-up dialog box.

The prompt() method takes two arguments: The first one is the message which will appear inside the dialog box, typically prompting the user to enter information.

And the second one is a default value which is optional and will fill the input field initially.

So, what exactly does the prompt() method do? It opens a dialog box that asks the user for some input, and then it returns the text entered by the user as a string.

Here's an example of how it works.

<button id="prompt-btn">Show Prompt</button>
<p id="output"></p>
<script src="index.js"></script>

const btn = document.getElementById("prompt-btn");
const output = document.getElementById("output");
btn.addEventListener("click", () => {
  const userName = prompt("What is your name?", "Guest");
  output.textContent = "Hello, " + userName + "!";
});

In this example, when the user clicks on the button, the prompt() method displays a dialog box with the message What is your name? and an input field that initially contains the value Guest.

If the user types their name and presses "OK", the userName variable will store the entered value.

If the user presses "Cancel", the userName variable will be set to null.

null signifies that the user did not provide any input. The output paragraph will then display a greeting message using the provided name or null if the user canceled.

You will learn techniques to avoid displaying null when a user cancels the prompt in future blogs.

This means the rest(reamining) of your JavaScript code won’t run until the user either provides input and clicks "OK", or cancels the prompt.

One other point to consider is that while prompt() is useful for quick testing or small applications, it's generally avoided in modern, complex web applications due to its disruptive nature and inconsistent behavior across different browsers.

What Is ASCII

In programming, understanding how characters are represented as numbers is fundamental. This is where ASCII comes in.

ASCII, short for American Standard Code for Information Interchange, is a character encoding (convert into a coded form) standard used in computers to represent text. It assigns a numeric value to each character, which is universally recognized by machines.

Conditional statements in JavaScript allow your code to make decisions and execute different blocks of code based on whether a condition is true or false.

There are 4 primary ways to write conditional logic in JavaScript:

1. The if, else if, and else Statements

This is the most common way to handle sequential conditions. JavaScript evaluates the conditions from top to bottom and runs the block of the first condition that is truthy.

The if...else statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement in the optional else clause will be executed.

let score = 85;

if (score >= 90) {
  console.log("Grade: A"); // Runs if score is 90 or above
} else if (score >= 80) {
  console.log("Grade: B"); // Runs if score is between 80 and 89
} else {
  console.log("Grade: C"); // Runs if all previous conditions fail
}

1. The Ternary Operator (? :)

The Ternary Operator is a compact, one-line shorthand for a simple if...else statement. It is ideal for quickly assigning variables or choosing between two values.

Syntax: condition ? value_if_true : value_if_false;

let age = 20;
let message = age >= 18 ? "Allowed" : "Denied";

console.log(message); // Output: Allowed

1. The switch Statement

A Switch Case statement checks a single variable against multiple exact values. It is cleaner and more readable than multiple else if chains when comparing a variable to fixed options.

Note: Always remember the break keyword to stop execution from falling through to the next case.

let pet = "dog";

switch (pet) {
  case "cat":
    console.log("Meow!");
    break;
  case "dog":
    console.log("Woof!"); // This case matches and executes
    break;
  default:
    console.log("Unknown animal"); // Runs if no cases match
}

1. Logical Operators Shorthand (&& and ||)

You can use short-circuit evaluation as a quick conditional statement:

• && (AND): Runs the right-hand code only if the left-hand condition evaluates to true.

• || (OR): Provides a fallback value if the left-hand condition is false.

let isLoggedIn = true;
// Renders the message only if logged in
isLoggedIn && console.log("Welcome back!"); 

let username = "";
// Falls back to "Guest" because username is an empty string (falsy)
let displayName = username || "Guest"; 

In JavaScript && and || operators basically doesn't only return true or false but also return returned operand based on short-circuiting evaluation.

(!) NOT operator

console.log(!false); //true
console.log(!true); //false

Short - circuit evaluation

JavaScript evaluates logical expressions left to right and it stopped it when the result is determined (completed).

When it stopped the evaluation that moment is called short - circuit.

Types of short - circuit

&& case

• In given condition, if the left operand is truthy, && will return right value

• In given condition, if the left operand is falsy, && will return left value (Don't check rigth)

// 1. if left operand is truthy, return right
console.log(true && 10); // 10
console.log("Hi" && "Bye"); // Bye


// 2. if left operand is falsy, return that
console.log(false && 10); // false
console.log(0 && "Hello"); // 0

|| case

• In given condition, if the left operand is truthy, || will return left value (Don't check right)

• In given condition, if the left operand is falsy, || will return right value (Whether it's truthy or falsy)

// 1. if left operand is truthy, return left
console.log(true || 10); // true
console.log("Hi" || "Bye"); // Bye


// 2. if left operand is falsy, return right
console.log(false || 10); // 10
console.log(0 || "Hello"); // Hello

Best Practices to Keep in Mind

• Use Strict Equality (===): Always use === instead of == to prevent hidden type-coercion bugs (e.g., 5 == "5" is true, but 5 === "5" is false).

• Keep Braces: Always wrap your if statements in curly braces {} even if they are only one line long to improve overall codebase safety.

• Beware of "Falsy" Values: JavaScript treats 0, "" (empty string), null, undefined, NaN, and false automatically as false inside conditions. Everything else is truthy.

Template literals are literals delimited (determine the limit or boundary) with back-ticks `` (define string here) characters for declaring strings, allowing for multi-line strings, string interpolation with embedded expressions.

let name = 'Ayan'; 
console.log(`Hello ${name}`); // Hello Ayan

Cleaner concatenation: They avoid using +, making string creation more readable and easier to write.

Template literals take all the number values and converts them into string.

Truthy and Falsy values

falsy values

A falsy value is a value that is considered false when encountered in a Boolean context.

JavaScript uses type coversion (explicit conversion) to coerce (implicit convert) any value to a Boolean in contexts that require it, such as conditional and loops.

false, undefined, NaN, null, "", 0, 0n, -0

truthy values

In JavaScript a truthy value is a value that is considered true when encountered in a Boolean context.

true, 1, "Ayan"

Except falsy all values are truthy.

Type coercion

Type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers).

const value1 = "5";
const value2 = 9;
let sum = value1 + value2;

console.log(sum); // 59

Explanation

JavaScript has coerced the 9 from a number into a string and then concatenated the two values together, resulting in a string of 59.

JavaScript had a choice between a string or a number and decided to use a string.

Why? Because it’s defined in it’s engine.

The compiler could have coerced the 5 into a number and returned a sum of 14, but it did not.

To return this result, you'd have to explicitly convert the 5 to a number using the Number() method:

console.log(Number("9" + 5); // 14

How Type Coercion Works?

In JavaScript, type coercion mainly occurs in the three ways:

String Coercion

It occurs when the string is combined with the non-string using (+). JavaScript converts numbers and booleans into strings before concatenation.

console.log("5" + 2); //52
console.log("5" + true); //5true

• The number 2 is coerced to a string and then concatenated with the string "5", resulting in "52".

• The boolean true is coerced into the string "true", and the two strings are concatenated.

Number Coercion

In the number coercion*, JavaScript converts the* string into a number before operating.

console.log("5" - 2); //3
console.log("5" * 2); //10
console.log("10" / "2"); //5

Boolean Coercion

JavaScript treats the truthy / true value as 1 and the falsy / false value as 0.

console.log(Boolean("hello")); //true
console.log(Boolean(0)); //false
console.log(Boolean([])); //true

Non-empty strings are coerced to true, while 0 is coerced to false.

Common Issues of Type Coercion

Comparing Different Data Types

Comparison Operator (==), allows coercion due to which the unexpected conversions occur. To avoid this, we should use the strict equality (===) operator.

console.log(0 == "0"); //true
console.log(0 == false); //true
console.log(" " + 0 == 0); //true

Operations on null and undefined

Null and undefined behave unexpectedly.

console.log(null == undefined); //true
console.log(null === undefined); //false
console.log(null + 1); //1

NaN Comparisons

NaN is not equal to itself*, so checking with* isNaN() is the best way to detect it.

console.log(NaN == NaN); //false
console.log(isNaN(NaN)); //true

Best Practices to Avoid Type Coercion Issues

Use === Instead of ==

When we use strict equality (===), instead of the comparison operator / loose equality (==), it prevents unnecessary types of coercion*.*

console.log(5 === "5"); //false

=== ensures no implicit type conversion occurs and both values must be of the same type.

Use Explicit Conversion

Explicit conversion converts the value manually due to which there are fewer chances of errors in the code.

console.log(Number("123")); //123

This ensures that you're working with the correct type*, reducing the chance of errors during operations.

Avoid False Value Confusion

Always check for null, undefined, or “” empty strings explicitly.

if (value !== null && value !== undefined) {
    console.log("Value exists");
}

This ensures that only non-null and defined values are considered valid.

Use parseInt() and parseFloat() for Number Conversion

console.log(parseInt("42px")); //42
console.log(parseFloat("3.14abc")); //3.14

This will parse the number part of a string, ensuring a valid numeric conversion.

Handle NaN Properly

if (isNaN(value)) {
    console.log("Invalid number");
}

This ensures you're correctly detecting NaN and handling it appropriately.

Type conversion

Manually or explicitly convert the type of a value from one data-type to another.

Original value doesn’t converted.

JavaScript can only convert to three types. we can convert to a number, to a string, or to a boolean.

const inputYear = "1996";
console.log(Number(inputYear), inputYear);

Function

The fundamental building block of real-world JavaScript applications are functions. It’s a reusable piece of code.

function declaration

function logger() {//function-body
  console.log("My name is Ayan");
}
//calling or running or invoking function
logger();

We can pass data into a function. It can return data as well. We can pass parameters to the function, the parameters are like variables that are specific only to this function and they will get defined once we call the function.

These are like placeholders that actually replaced by arguments that passed to the function.

function calcAge1(birthYear) {
  return 2026 - birthYear;
}

const age = calcAge1(2015);
console.log("Ayan is", age, "years old.");

This function is called function declaration.

return statement

• The return statement is used to send a result back from a function.

• When return executes, the function stops running at that point.

• The returned value can be stored in a variable or used directly.

function fruitProcessor(apples, oranges) {//(apples,oranges) are Parameters

  const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
  return juice;
}

const appleJuice = fruitProcessor(2, 0); //(2, 0)--> Arguments
console.log(appleJuice);

const applesOrangesJuice = fruitProcessor(3, 5);
console.log(applesOrangesJuice);

Function expression & declaration

In JavaScript there are different way of writing functions and each type of function, works in a slightly different way.

function declaration / named function

A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.

function calcAge1(birthYear) {
  return 2026 - birthYear;
}

const age = calcAge1(2015);
console.log("Ayan is", age, "years old.");

function expression* / *Anonymous function

An anonymous function is a function defined without an explicit name. It is commonly used as a callback or assigned to a variable. It can be named or anonymous.

const calcAge2 = function (birtYear) {
  //Anonymous function or function expression
  return 2026 - birtYear;
};
const ageAltamash = calcAge2(2005);
console.log("Altamash is", ageAltamash, "years old.");

/*
function (birtYear) {
  return 2026 - birtYear;
}; It's the expression and produces a vlue
*/

Hoisting

Functions in JavaScript just are actually values. function declarations can called before they defined in the code. Internally this happens because of the process hoisting.

(=>) arrow function

An arrow function is simply a special form of function expression that is shorter and therefore faster to write. It was introduced in ES6. They don’t their this binding.

const yearsUntilRetirement = (birtYear, firstName) => {
  const age = 2026 - birtYear;
  const retirement = 60 - age;
  return `${firstName} retires in ${retirement} years.`;
};

const retirementYears = yearsUntilRetirement(1980, "Jacob");
console.log(retirementYears);

this keyword

this refers the current context. It means the object is calling this function.

calling one function from inside another function

function fruitProcessor(apples, oranges) {
  const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
  return juice;
}

This function is like a fruit processor which received a certain number of apples and a certain number of oranges. And then based on that it basically produced and returned juice to us. Simulate to calling one function from inside another function.

fruit processor can only make juice with smaller fruit pieces. And so before making the juice the fruit processor now needs another machine that first cuts the fruits that we give it into multiple smaller pieces.

function cutFruitPieces(fruit) {
  return fruit * 4;
}

function fruitProcessor(apples, oranges) {
  const applePieces = cutFruitPieces(apples);
  const orangePieces = cutFruitPieces(oranges);
  const juice = `Juice with ${applePieces} piece of apple and ${orangePieces} piece of orange.`;
  return juice;
}
console.log(fruitProcessor(2, 3));

What is the programming language?

Programming language is just a tool that allows us to write code that will instruct a computer to do something.

What is the JavaScript?

JavaScript is a high level language, which means that we don’t have to think about a lot of complex stuff such managing computer’s memory while it runs the program.

There are a lot of so-called abstractions over all these small details that we don’t want worry about. And this makes the language a lot easier to write and to learn.

It’s Object Oriented(Based on objects for storing most kind of data) and multi-paradigm(Can use different programming styles) language.

Popularity of JavaScript

Dynamic Typing

JavaScript has a feature called dynamic typing. It means when you create a new variable, you don’t have to manually define the data type of the value that it contains.

JavaScript automatically determines the data type of the value when it’s stored into a variable. In JavaScript that value has a type not variable.

Programming Paradigms in JavaScript

JavaScript supports both imperative and declarative programming styles:

• Imperative Programming : Focuses on how to perform tasks by controlling the flow of computation. This includes approaches like procedural and object-oriented programming, often using constructs like async/await to handle asynchronous actions.

• Declarative Programming : Focuses on what should be done rather than how it’s done. It emphasizes describing the desired result, such as with arrow functions, without detailing the steps to achieve it.

Variables

Variable can be said as container / label to contain some value. To store some value in memory, the variable is used for it.

• Variables can be declared using var, let, or const

• JavaScript is dynamically typed, so types of values are decided at runtime.

• You don’t need to specify a data type when creating a variable.

• var (function and global scoped), let and const (local scoped).

• var can be re-declared in the same scope, but let and const cannot be re-declared.

var x = 10;
var x = 20; // Allowed

let y = 30;
let y = 40; // SyntaxError

const z = 50;
const z = 60; // SyntaxError

let name = "JS";

Rules for Naming Variables

When naming variables in JavaScript, follow these rules

• Variable names must begin with a letter (A to Z or a to z), underscore (_), or dollar sign ($).

• Subsequent (after that) characters can be letters, numbers, underscores, or dollar signs.

• Variable names are case-sensitive (e.g., age and Age are different variables).

• Reserved keywords (like function, class, return, etc.) cannot be used as variable names.

Data Types

It’s an attribute (quality) that identifies (recognizes) a piece of data and instructs (tells) a computer system on how to interpret (explain) its value is called a data type.

The data has type (e.g. number, string, boolean etc.) is data type.

Data-types in JavaScript

1. Number

let n1 = 2;
console.log(n1)

let n2 = 1.3;
console.log(n2)

let n3 = Infinity;
console.log(n3)

let n4 = 'something here too' / 2;
console.log(n4)

2. String

let s1 = "Hello There";
console.log(s1); 

let s2 = 'Single quotes work fine';
console.log(s2); 

let s3 = `can embed ${s1}`;
console.log(s3);

3. Boolean

let b1 = true;
console.log(b1);  

let b2 = false;
console.log(b2);

4. null

const middleName = null;
//Explicitly define empty. null can be said as empty

5. undefined

const firstName; 
//Value (undefine) taken by a variable that is not yet define.

6. BigInt (Introduced in ES2020)

let b = BigInt("0b1010101001010101001111111111111111");
let largeNumber = 1234576454525657535n;
console.log(b);
console.log(largeNumber);

7. Symbol (Introduced in ES6)

let s1 = Symbol("JS");
let s2 = Symbol("JS");
console.log(s1 == s2); //false

8. object (most important)

let obj = {
    type: "Company",
    location: "Noida"
}
console.log(obj.type)

Comments

In programming, we use comments to literally comment code or deactivate code without deleting it. We can do comments in two types.

JS engine doesn't parse these comments, they are for developers and explain the code.

1. Single line comment (//….)

2. Multi line comment (/* … */)

//let javascript = "FUN!";

/*
if (true) {
    var x = 10;
    let y = 20;
}

console.log(x);  
console.log(y);  
*/

Operators in JavaScript

JavaScript operators are symbols or keywords used to perform operations on values and variables.

They are the building blocks of JavaScript expressions and can manipulate data in various ways.

1.Arithmetic Operators (+, -, , /, %, *)

const sum = 5 + 3; // Addition
const diff = 10 - 2; // Subtraction
const prodcut = 4 * 2; // Multiplication
const quotient = 8 / 2; // Division
const exponent = 4 ** 2; //Exponentiation
const remainder = 4 % 2; //modulous
console.log(sum, diff, prodcut, quotient, exponent, remainder);

2.* *Comparison / Relational Operators (==, !=, ===, !==, >, <, >=, <=, in, insteadof)

console.log(10 > 5);
console.log(10 === "10");

• > checks if the left value is greater than the right.

• === checks for strict equality (both type and value).

• Other operators include <, <=, >=, and !==.

const obj = { length: 10 };
console.log("length" in obj);
console.log([] instanceof Array);

• in checks if a property exists in an object.

• instanceof checks if an object is an instance of a constructor.

3.Assignment Operators (=, +=, -=, *=, /=, %=)

let n = 10;
n += 5;
n *= 2;
console.log(n);

• = assigns a value to a variable.

• += adds and assigns the result to the variable.

• = multiplies and assigns the result to the variable.

4. Ternary Operator (condition? “true”: “false”)

const age = 18;
const status = age >= 18 ? "Adult" : "Minor";
console.log(status);

condition ? expression1 : expression2 evaluates expression1 if the condition is true, otherwise evaluates expression2.

5. Logical Operators (&&, ||, !)

console.log(true && 10);     //output: 10
console.log("Hi" || "Bye"); //output: Hi
console.log(!true);        //output: false

JavaScript doen't always evaluate the entire expression.

As a logical expression is evaluated left to right , JavaScript stops execution as soon as the final outcome is determined***.*** If the result is clear***,*** javascript short-circuits (stop) the process and ignores the remaining expressions or function calls on the right.

Logical operators in JavaScript don't just return true or false - they actually return the value of the operand where the evaluation stopped.

• falsy && anything is short-circuit evaluated to the falsy value.

• truthy || anything is short-circuit evaluated to the truthy value.

• nonNullish ?? anything is short-circuit evaluated to the non-nullish value.

6. Unary Operators (++, —, +, -, typeof, void, delete)

These operators, operate on a single operand.

let x = 5;

console.log(+x);
console.log(-x);

console.log(++x);
console.log(--x);

• + converts a value to a number.

• - negates a value (changes its sign).

++ increments a value by 1.

-- decrements a value by 1.

typeof returns the data type of a variable.

delete removes a property from an object.

Whenever you want to learn React, You have probably heard about the Virtual DOM

Without virtual DOM

Suppose, you have a list that contains 10 items, but for some reason you have to update only one item of the list, most JavaScript's framework and plain JavaScript as well will re-render / rebuild / repaint the entire list. That is 10 times more work than necessary. Virtual DOM only updates what is necessary.

Real DOM vs Virtual DOM

Real DOM(Document Object Model)

It's a programming interface (interface - A set of rules) in browser. DOM connects web pages (HTML, CSS, or XML etc.) to scripts or programming languages by representing the structre of a web page / document in memory. DOM often misunderstood that it's the core JavaScript. HTML, SVG, or XML documents are modled (created) as objects.

DOM represents a document as tree of nodes and all nodes contains / are objects. It has methods and properties to manipulate (change the structure, style, and content) it.

Virtual DOM

It'a lightweight copy of Actual / Real DOM in memory. It's nothing but a JavaScript object that perfectly mirros / copies the real DOM maintained by react.

Working of Virtual DOM

Whan an update occurs, React manages it through a systemtic process called Reconsiliation.

Step are mentioned How virtual DOM works.

Initial Render:- When the app starts, React also creates a virtual DOM that mirros / copies the actual / real DOM.

State Change:- When the states or props change in the app, React creates new virtual DOM and re-renders the updated components in the virtual DOM. These changes do not immediately impact the real DOM.

Diffing Algorithm:- When differences / updates are identified, React compares the new Virtual DOM with the previous version of virtual DOM to exactly which elements have changed.

Reconsiliation / Minimal updates applied:- Based on the differences identified, React determines the most efficient way to update the real DOM. Only the parts of the real DOM that need to be updated are changed, rather than re-rendering the entire UI. This selective updating is quick and performant.

Update to Real DOM:- Finally, React applies the necessary changes to the real DOM. This might involve adding, removing, or updating elements based on the differences detected.

Let's take the example-

import { useState } from 'react';

function App() {
 const [count, setCount] = useState(0);

 return (
   <div>
     <h1>Counter: {count}</h1>
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
}

export default App;

The virtual DOM representation

{
 "type": "div",
 "props": {},
 "children": [
   {
     "type": "h1",
     "props": {},
     "children": [
       {
         "type": "TEXT_ELEMENT",
         "props": {
           "nodeValue": "Counter: 0"
         }
       }
     ]
   },
   {
     "type": "button",
     "props": {
       "onClick": "setCount(count + 1)"
     },
     "children": [
       {
         "type": "TEXT_ELEMENT",
         "props": {
           "nodeValue": "Increment"
         }
       }
     ]
   }
 ]
}

When the Increase button is clicked once, only the h1 element is changed:

{
 "type": "h1",
 "props": {},
 "children": [
   {
     "type": "TEXT_ELEMENT",
     "props": {
       "nodeValue": "Counter: 1"
     }
   }
 ]
}

In this blog, we will learn what happens under the hood of the browser. What the browser actually is, and the components of a browser. Differences among the browser engines, and a step-by-step process of how the browser renders(displays) a website.

What is a browser actually?

Most people think a browser is just the user-agent(app) that opens a website on the internet.

Technically, a browser is a software application designed to locate, retrieve, and display content from the World Wide Web. It acts as a translator. It takes languages that computers understand (HTML, CSS, JavaScript) and translates them into a visual format that humans can understand.

Main components of a browser

A browser is not just one big program; it is made of several working components. Here are the most important ones:

1. The User Interface (UI): This is the part you interact with, the address bar, back/forward buttons, bookmarks menu, and the home button.

2. The Browser Engine: This is the manager. It handles communication between the UI and the rendering engine. (Gecko, Chromium, etc.)

3. The Rendering Engine: This is the artist. It is responsible for rendering/displaying the requested content. If you request an HTML page, the rendering engine parses the HTML and CSS and shows the content on the screen.

4. Networking: This part handles internet communication, like sending HTTP requests to servers to get a response/code.

Browser Engine vs Rendering Engine

It is easy to get these two mixed up, so let's simplify:

• Browser Engine: Handles the logic. It listens to what you click in the UI and tells the rendering engine what to do.

• Rendering Engine: Handles the visuals. It reads the code and draws the page.

  • Examples: Chrome uses Blink, Safari uses WebKit, and Firefox uses Gecko.

What is Parsing

Before we dive into how HTML works, we need to understand Parsing.

Parsing simply means reading text and converting it into something meaningful that the computer can use.

Think of a simple math problem: 2 + 2

When you read this, your brain doesn't just see three random symbols.

1. You identify the number 2.

2. You identify the operator +.

3. You understand the rule: "add them together."

4. You get the result 4.

Browsers do the same thing. They read a tag like <h1>Hello</h1>, understand that h1 means Big Heading, and then process it to look like a heading.

Now, let's see how the browser renders a website step-by-step.

1. Networking: Fetching the data

Everything starts when you type a URL. The browser's Networking layer sends a request to the server (using DNS and TCP, which we discussed in previous blogs).

Browser request: DNS → IP → TCP → (TLS) → HTTP → Network → Server

I have explained DNS and TCP in detail: Read Blogs

The server replies/responds with the raw files: HTML, CSS, and images.

2. HTML Parsing and DOM creation

The Rendering Engine receives the raw HTML text. It starts parsing (reading) it line by line.

It converts these tags into a tree structure called the DOM (Document Object Model).

• HTML: The text file.

• DOM: The object structure in the browser's memory.

Your HTML looks like this:

<div>
  <h1>Hello, I'm HTML</h1>
  <h2>The Markup Language</h2>
</div>

The DOM will look like a tree where div is the parent and h1 is the child. Without the DOM, JavaScript would not be able to interact with the page.

3. CSS Parsing and CSSOM creation

While the browser builds the DOM, it also finds CSS links. It reads the CSS and builds a similar tree structure called the CSSOM (CSS Object Model).

This tree tells the browser: The h1 should be red, or the div should be 100px wide.

4. How DOM and CSSOM come together (The Render Tree)

Now the browser has two separate trees:

1. DOM (Content)

2. CSSOM (Style)

It combines them into a Render Tree.

The Render Tree only contains things that will actually appear on the screen.

Note: If you have an element with display: none, it exists in the DOM, but it will not be in the Render Tree.

5. Layout (Reflow)

Now the browser knows what to show (Render Tree), but it doesn't know where to put it.

This step is called Layout.

The browser calculates the exact geometry, position, height, and width of every element based on your screen size.

• Ideally, the browser decides: This image goes 50px from the top, and this text wraps around it.

6. Painting and Display/Rendering

Finally, we have the Paint stage.

The browser takes all those calculations and fills in the pixels on your screen. It draws the text, colors the backgrounds, and displays the images.

This happens incredibly fast, usually in milliseconds, so it feels instant to you.

Conclusion

A browser is a complex machine that acts as a bridge between code and visuals. It doesn't just show a website, it fetches raw text, builds internal trees (DOM and CSSOM), calculates math (Layout), and finally paints pixels.

Understanding this flow helps you realize that performance isn't just about internet speed, it's about how efficiently your code can go through these steps without blocking the browser.

In web development, HTML is the house structure, and CSS is the paint. But to apply that paint correctly, you need a way to point to specific parts of the HTML and say, Style this part, but not that part. This is exactly what CSS Selectors do.

In this blog, we’ll break down exactly why CSS selectors are so important. We’ll walk through the basics of Element, Class, and ID selectors, look at how to group them to keep your code clean, and explain how descendant selectors work. Finally, we’ll clear up the confusion around 'Specificity' - basically, deciding which rule wins when two styles clash/conflicts.

Why CSS Selectors are Needed

Imagine if we didn't have selectors, CSS would be uselessly broad. If you changed the font size, it applied to every single word on your website, headers, footers, buttons, and paragraphs alike. It would be a mess.

Selectors allow us to be precise. They act as a bridge between the HTML content and the CSS styling rules. They tell the browser exactly which HTML elements should receive which styles.

The Element Selector

This is the most basic way to style things. An Element Selector targets all instances(targeted elements) of a specific HTML tag.

If you want every paragraph <p> on your site to have blue text, you use this.

Example:

p {
  color: blue;
}

• What it does: Every single paragraph on the page is styled blue.

• When to use: When you want a consistent default style for a standard tag (like setting the font for all text).

The Class Selector

Sometimes, you don't want every paragraph to look the same. Maybe you want some paragraphs to be warnings with red text. This is where the Class Selector comes in.

You can give any HTML element a class attribute (e.g., <p class="warning">). In CSS, you select it using a dot (.).

Example:

.warning {
  color: red;
  font-weight: bold;
}

• What it does: Only elements with class="warning" will become red and bold. Normal paragraphs stay the same.

• When to use: This is your workhorse. Use classes when you want to apply the same style to many different elements across the page.

The ID Selector

While classes are for groups, IDs are for individuals(unique). An ID Selector targets a single, unique element on the page.

You give an HTML element an id attribute (e.g., <div id="main-header">). In CSS, you select it using a hash (#).

Example:

#main-header {
  background-color: black;
  color: white;
}

• What it does: It will find the one element with that specific ID and style it.

• When to use: Use this sparingly(sharply). It is best for unique sections that appear only once per page, like a Header, Footer, or a specific Logo container.

Group Selectors

As you write more CSS, you might notice you are repeating yourself.

Maybe you want your h1, h2, and p tags to all use the same font. Instead of writing three separate rules, you can use a Group Selector. You simply separate the selectors with a comma (,).

Example:

h1, h2, p {
  font-family: Arial, sans-serif;
}

• What it does: It applies the style to h1, h2, and p at the same time.

• When to use: Whenever you find yourself copying and pasting the same styles for different elements. It keeps your code clean and dry (Don't Repeat Yourself).

Descendant Selectors

Sometimes you want to be very specific based on where an element is sitting.

Imagine you want to style links <a>, but only if they are inside a footer. You don't want to change the other links in your document.

A Descendant Selector uses a space between two selectors to say Find B that is inside A.

Example:

footer a {
  color: gray;
  text-decoration: none;
}

• What it does: It looks(searches) for <footer>, then looks inside it for any <a> tags. It only styles those specific links.

• When to use: When you need context-specific styling without adding new classes to everything.

Basic Selector Priority (Specificity Algorithm)

What happens if you have a Paragraph <p> that also has a class .highlight, and you give them different colors? Who wins?

The browser decides using a "Priority" system (technically called Specificity). Here is the high-level rule:

1. ID Selector (#id) is the strongest Specificity.

2. Class Selector (.class) has less Specificity than ID.

3. Element Selector (p)has the weakest Specificity.

If you say all the paragraphs are Blue (Element selector), but this specific class is Red (Class selector), the Class wins because it is more specific.

Conclusion

CSS Selectors are the control panel of web design. They allow you to target your content with surgical precision.

• Use Element selectors for defaults.

• Use Class selectors for reusable styles (most common).

• Use ID selectors for unique items.

• Use Group and Descendant selectors to keep your code clean and logical.

In this blog, we will understand what HTML is, why we use it, what tags and elements are, the difference between block and inline elements, and look at the most common tags you will use daily.

First, let’s understand what HTML is and why it is the foundation of the web.

What is HTML, and why do we use it

HTML stands for HyperText Markup Language. It is not a programming language like C or C++; it is a markup language. This means it is used to "mark up" or label different parts of a document so the computer knows what they are.

We use HTML to tell the web browser how to structure the content. It tells the browser: This part is a heading, This part is a paragraph, and This part is an image.

Without HTML, a browser would just see messy text. HTML gives that text meaning and structure.

What is an HTML tag

The building blocks of HTML are called tags. A tag is a keyword surrounded by angular brackets (< and >).

Tags are like instructions for the browser. When the browser sees a tag, it knows it needs to do something specific with the content inside it. For example, the <b> tag tells the browser to make the text bold.

Opening tag, closing tag, and content

Most HTML structures consist of three parts:

1. The Opening Tag: This marks the start of an element (e.g., <p>).

2. The Content: The information you want to display (text, images, etc.).

3. The Closing Tag: This marks the end of an element. It looks just like the opening tag but includes a forward slash (e.g., </p>).

Example:

<p>Hi, I am Asif.</p>

• <p> is the opening tag.

• Hi, I am Asif. is the content.

• </p> is the closing tag.

What an HTML element means

Beginners often confuse tags and elements. Here is the difference:

• A tag is just the <...> part.

• An element is the entire package: the opening tag <...> + the content + the closing tag</…>.

So, when we say paragraph element, we mean the whole thing from start to finish.

Self-closing (Void) elements

Most elements follow the rule of Open, Content, Close. However, some elements are empty. They do not hold any text or other elements inside them. Because they have no content to wrap, they do not need a closing tag.

These are called Self-closing or Void elements.

Common Examples:

• <br>: Inserts a line break.

• <img>: Embeds an image.

• <hr>: Creates a horizontal line.

You just write the tag, and it does its job immediately.

Block-level vs Inline Elements

All the elements do not behave the same way on a page. The two major categories of behavior are Block-level and Inline.

1. Block-level Elements

These elements act like distinct(own) blocks.

• They always start on a new line.

• They take up the full width available (stretching from left to right).

• Examples: <div>, <h1> to <h6>, <p>.

2. Inline Elements

These elements flow with the text.

• They do not start on a new line.

• They only take up as much width as necessary.

• Examples: <span>, <a> (anchor/links), <b> (bold).

Commonly used HTML tags

To get started, you don't need to memorize every tag. Let’s build a real HTML file together. We will start with the root and keep adding tags one by one to see how the structure grows into a full page.

1. <html>

The root of the document. Every HTML document starts with this. It tells the browser, Everything inside here is HTML code.

<html>
</html>

2. <head>

This contains metadata/information of the document(like the title) that isn't shown on the main page. We place this inside the <html> tag.

<html>
  <head>
    <title>Tech Blogs | Mohd Asif</title>
  </head>
</html>

3. <body>

It contains everything visible to the user. If you want people to see it, every visible part should be inside the body tag. We place this tag after the <head>, but still inside the <html>.

<html>
  <head>
     <title>Tech Blogs | Mohd Asif</title>
  </head>
  <body>
    </body>
</html>

4. <div>

A generic container tag used to group elements together. Since we want our content to be organized, let's put a main-container <div> inside the body.

<html>
  <head>
     <title>Tech Blogs | Mohd Asif</title>
  </head>
  <body>
    <div class="main-container">
    </div>
  </body>
</html>

5. <h1> to <h6>

Headings are used to title your content. Let's add a main heading inside our <div>.

<h1>…</h1> is the primary heading.

<html>
  <head>
        <title>Tech Blogs | Mohd Asif</title>
  </head>
  <body>
    <div class="main-container">
      <h1>Welcome to My Tech Blogs</h1>
    </div>
  </body>
</html>

6. <p>

Paragraphs are for normal text. Let's add a description under our heading.

/<html>
  <head>
    <title>Tech Blogs | Mohd Asif</title>
  </head>
  <body>
    <div class="main-container">
       <h1>Welcome to My Tech Blogs</h1>
      <p>Learning software development.</p>
    </div>
  </body>
</html>

7. <span>

This is used to add or style small parts of text without breaking the line (inline). Let's use it to highlight the word (usually) in our paragraph.

<html>
  <head>
    <title>Tech Blogs | Mohd Asif</title>
  </head>
  <body>
    <div class="main-container">
       <h1>Welcome to My Tech Blogs</h1>
      <p>Learning <span style="color: #fb923c;">software development</span>.</p>
    </div>
  </body>
</html>

8. <a>

The Anchor tag creates links. Let's add a link to the portfolio at the end of the content.

<html>
  <head>
    <title>Tech Blogs | Mohd Asif</title>
  </head>
  <body style="text-align: center;">
    <div class="main-container">
       <h1>Welcome folks to My Tech Blogs</h1>
      <p>Learning <span style="color: #fb923c;">software development</span>.</p>
      <a href="https://devasif-7.hashnode.dev/">Check out Mohd Asif's blogs.</a>
    </div>
  </body>
</html>

Now we have completed an HTML file! You can copy the final code, save it as index.html, and open it in your browser to see the result.

Conclusion

HTML creates the skeleton of the web page. It uses tags to define elements. Understanding these basic tags, elements, and their behaviors is the very first step to becoming a web developer. Once you understand HTML clearly, learning CSS and JavaScript becomes much easier.

What if there was a way to type a short code like ul>li*3 and have it magically turn into a full list? That is exactly what Emmet does.

In this blog, we will understand what Emmet is, why it is a lifesaver for beginners, how it works in your editor, and master the basic syntax to create elements, add classes, nest items, and generate full HTML structures instantly.

What is Emmet

Emmet is a plugin for text editors that acts like autocorrect or shorthand for HTML code. Just like you might type omg and your phone changes it to Oh my god, Emmet lets you type simple abbreviations(the short code) and expands them into full blocks of HTML code.

It is built in and can be plugged into popular editors like VS Code, so you don't even need to install it separately.

Why Emmet is useful for HTML beginners

As a beginner, you might think you should type everything manually to learn better. While that is true for the first few days, typing every single bracket quickly becomes a waste of time.

• Speed: You can write 100 lines of code in seconds.

• Fewer Errors: Emmet always creates the opening and closing tags together, so you never forget to close a </div>.

• Clean Code: It automatically formats your indentation properly.

How Emmet works inside code editors

The workflow is so simple:

1. Type the abbreviation (the short code).

2. Press a trigger key (usually Tab or Enter).

3. Watch it expand into full HTML.

For example, if you are in VS Code, you simply type h1 and press Tab.

Result: <h1></h1>

Now, let's look at the specific syntax you will use every day.

Creating HTML elements using Emmet

The most basic usage is just typing the tag name. You don't need to type the angle brackets < or >.

• Input: p + Tab

• Output: <p></p>

• Input: button + Tab

• Output: <button></button>

Adding classes, IDs, and attributes

In CSS and JS, we use . for classes and # for IDs. Emmet uses the same logic.

Adding a Class:

• Input: div.container

• Output:

•   <div class="container"></div>
  

Adding an ID:

• Input: div#main

• Output:

•   <div id="main"></div>
  

Combining both:

• Input: div#header.nav-bar

• Output:

•   <div id="header" class="nav-bar"></div>
  

Adding Attributes:

If you need specific attributes, use square brackets [].

• Input: a[href="google.com"]

• Output:

•     <a href="google.com"></a>
  

Creating nested elements (Children and Siblings)

HTML is a tree structure where elements are inside other elements. Emmet lets you build this hierarchy using > (child) and + (sibling).

The Child Operator (>)

Use this when you want to put one element inside another.

• Input: div>p

• Output:

 <div>
      <p></p>
  </div>

The Sibling Operator (+)

Use this when you want elements to be on the same level, next to each other.

• Input: h1+p

• Output:

 <h1></h1>
  <p></p>

Repeating elements using multiplication

This is one of the most powerful features. Instead of copy-pasting a line 5 times, just multiply it using *.

• Input: li*3

• Output:

  <li></li>
  <li></li>
  <li></li>

Combining Nesting and Multiplication:

You can mix these to create complex lists in one go.

• Input: ul>li*3

• Output:

 <ul>
      <li></li>
      <li></li>
      <li></li>
  </ul>

Generating full HTML boilerplate with Emmet

When you start a new file, you usually need the standard HTML structure (<html>, <head>, <body>). Typing this from memory is hard.

Emmet makes this instant.

• Input: ! + Tab

• Output:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>

  </body>
  </html>

Emmet Cheat Sheet

Here is your quick-reference cheat sheet for Emmet. You can save this or pin it while you are coding to speed up your workflow!

Conclusion

Emmet transforms the way you write HTML. It changes coding from a typing test into a logic structure exercise. By using simple abbreviations(the short code), you can generate complex layouts instantly without worrying about missing a closing tag or a quote.

Mastering these few shortcuts will make you significantly faster and more confident in your web development journey.

In this blog, we will understand what TCP is, why it is needed, what problems it solves, how the TCP 3-Way Handshake works, how data is transferred, how reliability is maintained, and how a TCP connection is closed.

What is TCP, and why is it needed

TCP (Transmission Control Protocol) is one of the most important protocols used on the Internet. It is designed to send data safely from one computer system to another. Without TCP, data can be lost, duplicated, or mixed in the wrong order.

TCP is needed because the Internet is not perfect. Networks can be slow, unstable, or overloaded. TCP makes sure that data reaches the correct destination, in the correct order, and without errors. That is why TCP is mainly used where accuracy and reliability are very important.

Problems TCP is designed to solve

When data is sent without rules, many problems can happen.

• Sometimes packets are lost on the way.

• Sometimes packets may arrive in the wrong order.

• Sometimes the same packet may be received twice.

• Sometimes data may be corrupted during transfer.

TCP is designed to solve all these problems. It checks every packet, keeps track of the order, resends lost data, and confirms successful delivery.

What is the TCP 3-Way Handshake?

Before sending any real data, TCP first creates a proper connection between the client and the server. This process is called the 3-Way Handshake.

It is used to make sure that both sides are ready to communicate and agree on starting the data transfer.

You can think of it like a simple conversation before starting to talk.

Client: Can I talk to you?
Server: Yes, I am ready.
Client: Okay, let’s start.

After this, the real communication begins.

Step-by-step working of SYN, SYN-ACK, and ACK

These are just buzzwords; let’s understand them.

First Step – SYN (short term for Synchronize)
The client sends a message called SYN to the server.
This means: I want to start a connection.

Second Step – SYN-ACK
The server replies with SYN-ACK.
This means: I received your request and I am ready to connect.

Third Step – ACK (short term for Acknowledgement)
The client sends back ACK.
This means: Connection confirmed, let’s start sending data.

How TCP ensures reliability, order, and correctness

• TCP ensures reliability by confirming every packet using acknowledgements.

• TCP ensures order by using sequence numbers and arranging packets properly.

• TCP ensures correctness by checking errors and retransmitting lost packets.

If the network is slow or unstable, TCP automatically adjusts the speed and resends missing data. This makes communication stable and safe.

How a TCP connection is closed

When data transfer is completed, the connection must be closed properly. TCP closes the connection using FIN(Finish) and ACK(Acknowledgement) messages.

• First, one side sends FIN, meaning: I am done sending data.

• The other side replies with ACK, meaning: I received your message.

• Then the second side sends its own FIN.

• Finally, the first side replies with ACK, and the connection is closed.

Conclusion

TCP is a powerful and reliable protocol that makes the Internet work smoothly. It creates safe connections, sends data in the correct order, handles errors, and closes connections properly. Without TCP, web browsing, file downloading, and email would be unreliable and messy.

Understanding TCP helps you see how data travels safely behind the scenes every time you open a website or send a file.

TCP and UDP are the most widely used data-sharing protocols on the Internet. These are widely used to share data from one computer system to another.

In this article, we will understand the difference between TCP and UDP, how HTTP is related to TCP, and how HTTP works.

Firstly, we find out what TCP and UDP are.

TCP (Transmission Control Protocol)

TCP is the most common and reliable protocol for data sharing on internet. It ensures the safety of the data, makes the proper connection to the receiver before sending any data, and guarantees that every packet of data will reach the receiver device successfully.

TCP uses three way handshake to ensure the safety of the data. First, the client sends a request, then the server makes a secure and reliable connection to the client, and then the server sends data to the client.

When to use

Most of the time, users use TCP when they need reliability, security, etc, of the data. TCP ensures 100% accuracy and proper error handling, mainly used in browser file sharing.

UDP (User Datagram Protocol)

This is the faster version of TCP. It doesn’t care about anything, data packet loss, or security. It is just want to know the address of the client and start sending the data. In this, if the internet is slow, we have a loss of data and a connection break, which is an unreliable way of transferring data.

When to use

When we need to send the data fast, the quality of the data is not that important; we can compromise with that. If some data packets are lost, it doesn’t affect too much. Mainly used in voice and video calls, live transmission/broadcasting, and online gaming.

Key differences between TCP and UDP

Reliability:
TCP is reliable. Every packet of data moves/transmits safely at the client. UDP is less reliable. Some data packets can be lost during transmission.

Speed:
TCP is slower because it checks every packet, confirms delivery, and handles errors. UDP is faster because it simply sends data without checking anything.

Connection:
TCP needs a 3-way handshake before starting communication, so a proper connection is created first. UDP does not need any handshake and starts sending data immediately.

Order:
In TCP, data always moves/transmits in the correct order. In UDP, data can arrive in any order and may not be arranged properly.

Best Used For:
TCP is mainly used for web browsing, email, and file sharing, where accuracy is important. UDP is mainly used for video calls, live streaming, and gaming, where speed is more important than perfect accuracy.

How HTTP is related to TCP

HTTP (HyperText Transfer Protocol) is used by browsers and servers to talk to each other and exchange website data. But HTTP itself cannot send data directly on the network. For sending data safely from one computer to another, HTTP mostly depends on TCP. HTTP is a subset of TCP.

When you open any website, first, a TCP connection is created between your browser and the server using the 3-way handshake. After this secure connection is ready, HTTP sends its requests and receives responses through this TCP connection. Because TCP is reliable, HTTP can be sure that the web pages, images, and data reach correctly and in proper order.

So, HTTP works on top of TCP. TCP handles connection, safety, order, and error checking, and HTTP only focus on what data to send and how to format it. That is why web browsing is stable and reliable in most cases.

Conclusion

Choosing between TCP and UDP depends on what you need. If you want safety and 100% accuracy, go with TCP. If you want raw speed and can handle some data loss, UDP is your friend. Understanding these helps you see how the "invisible" parts of the internet work every time you click a link!

A server is nothing but anything that serves something. In computer science, a server is a computer/software that provides information to other computers (clients). It receives requests, processes them, and sends back responses.

Servers usually perform tasks such as:

• Storing and retrieving data

• Running application logic

• Connecting to databases

• Sending responses over the internet

For example, when a user opens a website in the browser, the browser sends a request to a web server. The server processes the request and sends back the webpage content, which the browser then renders.

Why Do Clients Need to Talk to Servers?

These days, most applications do not work in isolation. These applications depend on performing these key tasks, such as authentication, authorization, data storage, and business logic.

Client needs to talk to the servers because:

• Fetch users’ data, like user profiles or product lists

• Send data like login details or form submissions

• Update or delete existing information

This communication system follows a request–response model. The client always initiates the request, and the server always sends back a response.

What is cURL

cURL is a command-line tool (a utility) that allows users to send a request to a server and receive responses directly in the terminal.

In a simple way to send messages (queries) to a server without using any application. Typing the cURL command, it sends the request to the server, and the server’s response is printed on the terminal window.

cURL is widely used because it is:

• Simple and lightweight

• Available on most operating systems

• Extremely useful for testing and debugging

Why Programmers Need cURL

For programmers, cURL is more than just a tool. It is a teacher. It helps you understand exactly how the internet works by showing you the raw conversation between computers.

Using cURL helps programmers:

• Understand how HTTP communication works

• Test APIs without building a frontend

• Debug server-side issues quickly

• Gain confidence working with backend systems

Many beginners struggle with APIs because they never see what is actually being sent or received. cURL removes that confusion by showing everything clearly in the terminal.

Making Your First Request Using cURL

The simplest thing you can do with cURL is fetch a webpage.

For example, when you run the following command:

curl https://devasif-7.hashnode.dev

cURL sends a request to the server at devasif-7.hashnode.dev. The server processes the request and sends back a response containing the webpage’s HTML. cURL then prints that response directly in the terminal.

This single command demonstrates the core idea behind cURL: sending a request and receiving a response.

Understanding Request and Response

Every interaction using cURL follows the same pattern: a request is sent, and a response is received.

A request usually includes:

• The server address (URL)

• The type of action to perform

A response usually includes:

• A status code indicating success or failure

• Data returned by the server

For example, a status code of 200 means the request was successful, while 404 means the requested resource was not found. Understanding these responses is key to debugging and learning how servers behave.

GET and POST Requests

HTTP defines different types of requests, but beginners only need to focus on mainly two: GET and POST.

A GET request is used to request data from a server. When you fetch a webpage or retrieve user data, you are usually making a GET request.

A POST request is used to send data to a server. This is commonly used for actions like logging in, signing up, or submitting forms.

cURL supports both of these request types and allows you to experiment with them directly from the terminal.

Using cURL to Talk to APIs

APIs are codes/servers that are designed to return data instead of web pages. They often return data in formats like JSON.

When you use cURL to call an API, the process is the same:

• cURL sends a request

• The API processes it

• The response is returned in the terminal

This is how mobile apps, web apps, and backend services communicate with each other. cURL allows you to experience this communication firsthand.

Common Mistakes Beginners Make with cURL

Beginners often try to learn cURL by memorizing many command options at once. This can be confusing and discouraging.

Other common mistakes include:

• Ignoring the response and focusing only on the command

• Not understanding status codes

• Assuming cURL is only for advanced users

The best approach is to start simple, understand the basics, and gradually explore more features.

Conclusion

cURL is a powerful yet beginner-friendly tool that helps developers understand how clients and servers communicate. By using cURL, you gain a clearer picture of how requests are sent, how servers respond, and how APIs work internally.

In this article, we will discuss what the different DNS records are and why we use them.

The A Record

This is the most commonly used record. This maps your IP address to a domain name so the other users can search it through Internet. It works on the IPv4 address.

How does it work

When you type google.com, the DNS resolver finds the A record and immediately returns the IP.

(Ex-199.9.9.0). Now your browser knows the exact IP address of the server.

The CNAME Record

This is the most common record used by beginners when you host your website on 3rd party providers (domain providers) like Vercel or Netlify. This adds an extra layer of domain before mapping to the IP. The 3rd party providers give you a domain, and if you want to add your domain to that website, you need to map your domain to their domain, and then the browser gets the real IP to connect to the server.

This is also used by big companies like Google and Apple to map their other domain to their real domain.]

How does it work

If you have a CNAME for blog.example.com pointing to vercel.app the resolver first finds the CNAME, sees it’s an alias, and then has to perform a second lookup to find the A record of the target.

The MX Record

This record is useful for receiving or sending emails from your domain. Most of the users use their email at yourname@gmail.com for their emails, but companies use an email with their domain address, like google.com or Xyz. in.

How does it work

When someone sends an email to you@example.com, their mail server asks DNS, "Where should I deliver this?" The DNS responds with a list of Mail Exchangers (such as aspmx.l.google.com). The sender then establishes an SMTP connection with that server to drop off the message.

The NS Record

This record is used to identify who is responsible for answering your query. Let's suppose you buy a domain from Hostinger. So by default, they add an NS record to your domain, so they are responsible for answering all the queries.

How does it work

When a browser looks for example.com, it first asks the "Root" and "TLD" servers (like the .com registry ). Those servers look at your NS records and say, We don't know the IP, but GoDaddy or Hostinger does, go ask them!

This is acting like a boss record. Without valid NS records, the rest of your records (A, CNAME, MX) are invisible because no one knows who to ask for them.

The AAAA Record

As technologies grow rapidly, we need a new record for storing new IP that follows the (128-bit system). It is the upgraded version of an A record that works the same, but is used for storing new big IPs. While the A record uses IPv4 (the older, 32-bit address system), the AAAA Record (pronounced "Quad-A") maps a domain name to an IPv6 address.

How does it work

It works exactly like an A record. When a device that supports IPv6 (like most modern smartphones and computers) looks up your site, it will look for the AAAA record first. If it finds a 128-bit address (e.g., 2001:0db8:85a3:0000:0000:8a2e:0370:7334), it connects via the newer, faster protocol.

Putting it Together

Think of your DNS settings like a company directory:

• NS: The Receptionist (tells you which department to talk to).

• A/AAAA/CNAME: The Department Address (leads you to the website).

• MX: The Mailroom (handles all incoming mail).

In this blog, we will understand what DNS is and why name resolution exists, what the dig command is, how DNS resolution happens step by step using root, TLD, and authoritative name servers, and how this connects to real browser requests.

What is DNS, and why does name resolution exist?

DNS (Domain Name System) is like the phonebook of the Internet(typical definition). Humans like to remember names such as google.com, but computers understand numbers such as 199.9.9.0.

DNS converts domain names into IP addresses. When you type a website name in the browser, DNS finds the correct IP address of that website so your computer can connect to the correct server.

Without DNS, we would need to remember IP addresses for every website, which is not practical.

What is the dig command, and when is it used?

dig (Domain Information Groper) is a command-line tool used to query DNS servers and inspect how name resolution works.

dig helps you check how DNS is working behind the scenes.

It is mainly used by developers, system administrators, and network engineers to debug DNS problems, check name servers, and understand how DNS resolution is happening.

Using dig we can see:

• Which name servers are involved

• Which records are returned

• How the DNS query travels step by step

Now, let’s understand how DNS resolution happens in layers.

Understanding dig . NS and root name servers

dig . NS

dig tells about who the name servers are for the root of the DNS system.

The dot (.) represents the root server.
Root name servers are the top-level servers in the DNS hierarchy.

They store only TLDs and do not know the IP addresses of websites.
They only know where to find TLD (Top-Level Domain) servers such as .com, .co, .in, etc.

Root servers are the starting point of every DNS lookup.

Understanding dig com NS and TLD name servers

dig com NS

This command asks the name servers: Who manages the .com domain?

The name server’s response gives the list of TLD name servers responsible for all .com websites.

These servers do not know the IP address of google.com yet.

They only know where the authoritative servers for google.com are located.

So now we move one layer deeper.

Understanding dig google.com NS and authoritative name servers

dig google.com NS

This command asks: Which name servers are responsible for google.com?

The result gives the authoritative name servers for google.com.

These servers are the final authority for google.com.

They store the actual DNS records, such as:

• IP addresses

• Mail servers

• Other DNS information

Now we are very close to the final answer.

Understanding dig google.com and the full DNS resolution flow

dig google.com

This command asks (enquires) directly for the IP address of google.com

Behind the scenes, the DNS resolver follows this path:

1. First, it enquires the root server.
   Root server replies with TLD servers for .com.

2. Then it enquires a .com TLD server.
   TLD server replies with authoritative servers for google.com.

3. Then it enquires an authoritative server for google.com.
   Authoritative server replies with the final IP address.

Finally, the DNS resolver returns the IP address to your computer.

Now your browser can connect to the correct web server and load the website.

What NS records represent and why they matter

NS (Name Server) records tell which servers are responsible for a domain.

• They define who controls the domain

• They guide the resolver to the correct authoritative servers

• Without correct NS records, websites will not resolve

How recursive resolvers use this information

Your computer does not directly talk to root servers.

It sends the query to a recursive resolver (usually provided by your ISP or Google DNS).

The recursive resolver:

• Starts from the root servers

• Goes to TLD servers

• Goes to authoritative servers

• Caches the result for future use(reference)

This makes DNS faster and more efficient for repeated requests.

Connecting dig google.com to real browser requests

When you type google.com in browser’s tab, the following DNS process happens.

Browser → Recursive DNS Resolver
DNS Resolver → Root Server → TLD Server → Authoritative Server
Authoritative → IP Address returned
Browser → Connects to server using TCP
Website loads

So every web request depends on DNS before any (communication) data transfer starts.

Conclusion

DNS is the hidden system that makes the Internet usable by converting names into IP addresses and vice versa. The dig command helps us to see how DNS resolution works step by step, from root servers to authoritative servers.

Understanding this flow gives a clear picture of how browsers find the correct servers and how the Internet routes requests correctly whenever you open a website.

Have you ever thought about how we communicate to the world? It’s the internet, a mega network of networks in the computer world. When you open a website or use an application, the internet doesn’t reach your device magically. It passes through a series of networking devices, each device has a specific responsibility to move data from the Global internet to your device.

Understanding of these for software engineers is important. Because many systems like Backend Systems, APIs, and Cloud Engineering etc are deeply connected to it.

In this article, we will understand the most important networking devices like modem, router, switch, firewall, load-balancer, etc. How do they work together in real world setup?

How does the internet reach your home or office?

If we see the high level view of internet. It starts from ISP(Internet Service Provider - Airtel, VI, BSNL, Jio etc). The Internet doesn’t directly reach your device; it passes through networking devices, each device has a specific responsibility. These devices work together to move data from the global internet to your PC or Mobile phone.

In this flow each device has a clear job. Some device connects to the internet and some translates the coming signals from ISP, some routes the traffic. To understand this flow make easier why so many devices exist?

What Is a Modem and How It Connects You to the Internet?

Modem (modulator-demodulator) a device that connects your home or office network to the internet.

The signals are coming from ISP (Analog Signals) are not understandable to your device. It changes these signals into (Digital signals) suitable to your device, so that your device can read the data coming from the internet. The modem converts analog signals into Digital signals and vice-versa.

You can think modem as a translator. It ensures smooth communication between ISP and your device. Suppose ISP speaks one language and your device speaks another. The modem ensures both sides understand and communicate each other.

For software engineer, it draws a line between your system and public internet.

What is a Router and how it directs traffic?

When the internet reaches to your network through modem, it forwards to the router.

Now the router controls the flow / traffic of data. It decides where data should go? It receives the incoming traffic / data and forwards it to the correct device by examining IP address. When your devices sends data out, the router ensures that it should reach the correct destination.

Backend developers should aware of it because routers play a very important in data routing. They handle:

• Examine IP address and forward the data

• It Separates public and private network

• Directing Data Traffic

Switch vs Hub: how local networks actually work?

There is a need of communication of devices with each other inside a local network. Hubs and switches fulfill this need.

A Hub is a networking device with many ports. It helps to connect several devices to a single network. It’s use to receive data, it broadcasts that data to all connected devices, whether they need it or not. This function of hub makes it inefficient and noisy.

Unlike a hub, a switch is an intelligent networking device that connects multiple devices on a single Local Area Network (LAN). It identifies exactly which device is connected to which port, ensuring that data is sent only to the intended recipient rather than broadcasting it to everyone.

You can think of:

• Hub: A hub functions by broadcasting raw data to every connected port, creating unnecessary network traffic.

• Switch: A switch establishes a dedicated connection for each data, ensuring it reaches only the specific destination device.

Modern networks use switches almost everywhere because performance and efficiency matter

What is a Firewall and why security lives here?

Firewall acts as a security guard for your network, it is available as hardware and software as well.

It does filter the incoming and outgoing traffic and decides what should be allowed or blocked based on predefined rules. Firewall protects networks from unauthorized access, malicious traffic, and accidental exposure.

Imagine firewall as a security guard at the entrance of the building, checking who is allowed or not.

For backend systems, firewalls are critical because they:

• Protect databases and internal services

• Restrict access to sensitive APIs

• Reduce attack surfaces in production environments

Most security policies are enforced at this layer.

What is a Load Balancer and why scalable systems need it?

As the applications grow (user increases), a single can not handle the traffic (requests/data). Load balancers handle this traffic easily and app runs smoothly.

A load balancer deploys in front of multiple servers that distributes incoming traffic among them. This ensures no single server is overloaded and the system remains available even if one server fails.

For software engineers, load balancers are essential for:

• High availability

• Horizontal scaling

• Zero-downtime deployments

Almost all large production systems rely on them.

How all these devices work together in a real-world setup?

In a real-world setup, these devices are not isolated. They form a pipeline through which data flow(move).

The typical flow looks like this:

• Internet traffic enters through the modem

• The router directs traffic into the local network

• A firewall filters and secures the traffic

• A switch connects multiple internal devices

• A load balancer distributes requests across servers

This layered design makes systems modular, secure, and scalable.

Why These devices Matters for Software Engineers

Even if you never configure networking hardware yourself, these concepts directly affect your work.

Backend developers deal with:

• Latency and timeouts

• Network failures

• Security rules

• Traffic spikes

Understanding where each device sits helps you find (reason) about production issues and design better systems. Many mysterious bugs are actually network behavior that makes perfect sense once you understand the architecture.