# JavaScript Basics

---

# **By the end of this article, you will understand:**

✔️ What “**if, else, and else if”** statements are.  
✔️ How to use them to control program flow.  
✔️ The difference between **if-else** and **switch** statements.  
✔️ Real-world examples to make learning easier.

Let’s break it down in the simplest way possible! 🚀. In this article, we'll break down these concepts with simple explanations, real-world examples, and code snippets. No more confusion—just **clear, easy-to-follow explanations**. **All you have to do is give 4 minutes for each topic, and you'll master JavaScript control flow in no time!** 🚀

---

# **Understanding Variables and Data Types in JavaScript**

JavaScript is a programming language that helps us create interactive websites. To work with JavaScript, we need to understand how we can store and work with different kinds of data. This is where **variables** and **data types** come in.

## **What are Variables?**

Think of a **variable** like a storage box where you can keep your toys. You can put a toy in the box, take it out, or even change the toy inside the box anytime you like. In programming, variables work the same way. They hold data that we can use and change later.

### **Declaring a Variable**

To create a variable in JavaScript, we use special keywords: `var`, `let`, or `const`.

```plaintext
javascriptCopyEditlet name = "Alice"; // Variable to store a name
const age = 25;     // Variable to store a constant age (won't change)
```

* `let` allows you to change the value of the variable.
    
* `const` is used when you don’t want the value to change.
    
* `var` is an older way of declaring variables, but we mostly use `let` and `const` now.
    

---

## **What are Data Types?**

**Data types** are categories of data that tell us what kind of data a variable is storing. Just like you can have different types of toys, such as dolls, cars, or robots, you can have different types of data in JavaScript.

Here are the most common data types:

### **1\. String**

A **string** is a type of data used to store text, like names or messages. Strings are always enclosed in quotation marks.

```plaintext
javascriptCopyEditlet name = "Alice";  // String data type
```

### **2\. Number**

A **number** is used to store numerical values, like age, height, or temperature. You can perform mathematical operations with numbers.

```plaintext
javascriptCopyEditlet age = 25;  // Number data type
```

### **3\. Boolean**

A **boolean** can only have two values: `true` or `false`. It’s like a light switch that can be on or off.

```plaintext
javascriptCopyEditlet isStudent = true;  // Boolean data type
```

### **4\. Array**

An **array** is a special type of data that can store multiple values in a single variable. It’s like a toy box that holds several toys (or values) inside.

```plaintext
javascriptCopyEditlet favoriteColors = ["Red", "Blue", "Green"];  // Array data type
```

### **5\. Object**

An **object** is a collection of key-value pairs, like a toy with multiple features. Each feature (like color, size, and shape) is represented by a key, and its value represents the feature’s description.

```plaintext
javascriptCopyEditlet car = {
  brand: "Toyota",
  color: "Red",
  year: 2020
};  // Object data type
```

### **6\. Null and Undefined**

* **Null** represents an empty or "no value" state.
    
* **Undefined** means the value is not defined yet.
    

```plaintext
javascriptCopyEditlet emptyBox = null;     // Null data type
let notAssigned;         // Undefined data type
```

---

## **JavaScript Operators: The Basics You Need to Know**

Operators are like tools in a toolbox. You use them to perform operations on your data. Let’s look at some of the most common operators in JavaScript.

### **1\. Assignment Operator (**`=`)

The **assignment operator** is used to assign values to variables.

```plaintext
javascriptCopyEditlet name = "Alice";  // Assigns "Alice" to the variable 'name'
```

### **2\. Arithmetic Operators**

These operators are used for mathematical calculations.

* `+` (addition)
    
* `-` (subtraction)
    
* `*` (multiplication)
    
* `/` (division)
    
* `%` (remainder)
    

```plaintext
javascriptCopyEditlet sum = 5 + 10;  // Adds 5 and 10, result is 15
let product = 4 * 3;  // Multiplies 4 and 3, result is 12
```

### **3\. Comparison Operators**

These operators help you compare values.

* `==` (equal to)
    
* `!=` (not equal to)
    
* `>` (greater than)
    
* `<` (less than)
    

```plaintext
javascriptCopyEditlet isEqual = 5 == 5;  // Checks if 5 is equal to 5, result is true
let isGreater = 10 > 5;  // Checks if 10 is greater than 5, result is true
```

### **4\. Logical Operators**

These operators help you combine multiple conditions.

* `&&` (AND)
    
* `||` (OR)
    
* `!` (NOT)
    

```plaintext
javascriptCopyEditlet canVote = age >= 18 && citizen;  // Checks if someone can vote
```

---

## **Control Flow in JavaScript: If, Else, and Else If Explained in Depth**

### **What is Control Flow?**

Control flow determines how a program makes decisions and executes different blocks of code based on conditions. Imagine you wake up in the morning and decide what to wear based on the weather:

* **If** it's cold, you wear a jacket.
    
* **Else if** it's raining, you take an umbrella.
    
* **Else** you wear regular clothes.
    

This decision-making process is exactly how **if, else, and else if** statements work in JavaScript.

---

## **1\. The If Statement**

The **if** statement allows the program to execute a block of code only if a condition is **true**.

### **Syntax:**

```plaintext
javascriptCopyEditif (condition) {
   // Code to execute if the condition is true
}
```

### **Example: Checking Age for Voting**

```plaintext
javascriptCopyEditlet age = 20;

if (age >= 18) {
   console.log("You are eligible to vote!");
}
```

* Here, if `age` is **18 or more**, the message `"You are eligible to vote!"` will be displayed.
    
* If `age` is **less than 18**, nothing happens.
    

---

## **2\. The If-Else Statement**

The **if-else** statement provides an alternative action when the condition is **false**.

### **Syntax:**

```plaintext
javascriptCopyEditif (condition) {
   // Code executes if the condition is true
} else {
   // Code executes if the condition is false
}
```

### **Example: Checking for Odd or Even Numbers**

```plaintext
javascriptCopyEditlet number = 7;

if (number % 2 === 0) {
   console.log("The number is even.");
} else {
   console.log("The number is odd.");
}
```

* If the number is divisible by 2 (remainder is 0), it’s **even**.
    
* Otherwise, it’s **odd**.
    

---

## **3\. The If-Else If-Else Statement**

The **if-else if-else** statement is used when there are multiple conditions to check.

### **Syntax:**

```plaintext
javascriptCopyEditif (condition1) {
   // Executes if condition1 is true
} else if (condition2) {
   // Executes if condition2 is true
} else {
   // Executes if none of the conditions are true
}
```

### **Example: Grading System**

```plaintext
javascriptCopyEditlet score = 85;

if (score >= 90) {
   console.log("Grade: A");
} else if (score >= 80) {
   console.log("Grade: B");
} else if (score >= 70) {
   console.log("Grade: C");
} else {
   console.log("Grade: F");
}
```

* If `score` is **90 or more**, the student gets an **A**.
    
* If it’s **between 80 and 89**, they get a **B**.
    
* If it’s **between 70 and 79**, they get a **C**.
    
* Otherwise, they get an **F**.
    

---

## **4\. Nested If Statements**

A **nested if** statement is an `if` statement inside another `if` statement. This is used when multiple conditions need to be checked inside one main condition.

### **Example: Checking Login Credentials**

```plaintext
javascriptCopyEditlet username = "admin";
let password = "1234";

if (username === "admin") {
   if (password === "1234") {
      console.log("Login successful!");
   } else {
      console.log("Incorrect password!");
   }
} else {
   console.log("User not found!");
}
```

* First, the program checks if the username is `"admin"`.
    
* If true, it checks if the password is `"1234"`.
    
* If both match, **login is successful**.
    
* If the username is wrong, the program displays **"User not found!"**.
    

---

## **5\. Real-World Example: Shopping Discount System**

```plaintext
javascriptCopyEditlet totalBill = 500;

if (totalBill >= 1000) {
   console.log("You get a 20% discount!");
} else if (totalBill >= 500) {
   console.log("You get a 10% discount!");
} else {
   console.log("No discount available.");
}
```

* If the bill is **₹1000 or more**, the user gets a **20% discount**.
    
* If it’s between **₹500 and ₹999**, they get a **10% discount**.
    
* If it's less than ₹500, **no discount** is applied.
    

---

## **6\. Using Logical Operators with If Statements**

Logical operators like `&&` (AND) and `||` (OR) can be used in if statements for **multiple conditions**.

### **Example: Checking if a Person Can Drive**

```plaintext
javascriptCopyEditlet age = 20;
let hasLicense = true;

if (age >= 18 && hasLicense) {
   console.log("You can drive!");
} else {
   console.log("You cannot drive.");
}
```

* The user **can drive** only if they are **18 or older** AND have a **license**.
    

---

## **7\. If-Else vs. Switch Statement**

Sometimes, `switch` statements are a better choice than multiple `else if` conditions, especially when checking multiple possible values.

### **Example: Using Else-If**

```plaintext
javascriptCopyEditlet day = "Monday";

if (day === "Monday") {
   console.log("Start of the week!");
} else if (day === "Friday") {
   console.log("Almost weekend!");
} else if (day === "Sunday") {
   console.log("Relax, it's Sunday!");
} else {
   console.log("Just another day.");
}
```

### **Example: Using Switch**

```plaintext
javascriptCopyEditswitch (day) {
  case "Monday":
    console.log("Start of the week!");
    break;
  case "Friday":
    console.log("Almost weekend!");
    break;
  case "Sunday":
    console.log("Relax, it's Sunday!");
    break;
  default:
    console.log("Just another day.");
}
```

* **Use** `switch` when checking multiple exact values (e.g., days of the week).
    
* **Use** `if-else` when checking conditions that involve **ranges** or **logical operators**.
    
* **If statements** execute code only if a condition is true.
    
* **If-Else statements** provide an alternative action when the condition is false.
    
* **Else If allows multiple conditions** to be checked in order.
    
* **Nested If statements** allow conditions inside conditions.
    
* **Logical operators** (`&&`, `||`, `!`) help combine multiple conditions.
    
* **Switch statements** can be an alternative to long else-if chains.
    

---

## **Visuals to Enhance Understanding**

* **Comparison Table of var, let, and const:**
    

| Keyword | Scope | Can be Reassigned? | Hoisting? |
| --- | --- | --- | --- |
| var | Function | Yes | Yes |
| let | Block | Yes | No |
| const | Block | No | No |

* **Flowchart for Control Flow:**
    

```plaintext
plaintextCopyEdit   Start
     |
   Check Condition
     |
  If True ---> Execute Code
     |
   Else ---> Execute Alternative Code
     |
    End
```

---

## **Conclusion**

In JavaScript:

* **Variables** store data.
    
* **Data types** define the kind of data you are working with, such as numbers, text, or collections.
    
* **Operators** are used to perform operations on your data.
    
* **Control flow** allows you to make decisions in your program.
    

By understanding these basic concepts, you’ve unlocked the foundation of JavaScript programming. Now you can start experimenting with code and bring your ideas to life!

---