13. JavaScript Basics – The Language of the Web

JavaScript is one of the core technologies of the web, alongside HTML and CSS. It allows developers to create dynamic and interactive web pages. In this article, we will explore JavaScript basics, covering variables, data types, operators, and control flow with examples and diagrams.

Understanding Variables and Data Types in JavaScript

Variables store data that can be used and manipulated in a JavaScript program. There are three ways to declare variables:

var name = "John"; // Function-scoped variable
let age = 25; // Block-scoped variable
const country = "USA"; // Constant variable

Comparison of var, let, and const

Keyword	Scope	Reassignment	Hoisting
`var`	Function-scoped	Allowed	Hoisted with `undefined`
`let`	Block-scoped	Allowed	Hoisted without initialization
`const`	Block-scoped	Not allowed	Hoisted without initialization

Data Types in JavaScript

JavaScript has different data types that define the nature of values stored in variables.

Data Type	Example	Description
String	`"Hello"`	Represents text values
Number	`42`	Represents both integer and floating-point numbers
Boolean	`true` or `false`	Represents logical values
Undefined	`let x;`	Variable declared but not assigned a value
Null	`let y = null;`	Represents an intentional empty value
Object	`{name: "Alice", age: 30}`	A collection of key-value pairs
Array	`[1, 2, 3]`	An ordered list of values

Real-World Example

Think of variables as labeled boxes:

A string is like a name label on a notebook.
A number is like a price tag on a product.
A boolean is like a light switch (on/off).

JavaScript Operators: The Basics You Need to Know

Operators in JavaScript allow you to perform operations on values and variables.

Types of Operators:

Arithmetic Operators (Perform mathematical calculations):

let sum = 5 + 3; // Addition: 8
let product = 4 * 2; // Multiplication: 8

Comparison Operators (Compare two values):

console.log(5 > 3); // true
console.log(10 == "10"); // true (loose comparison)
console.log(10 === "10"); // false (strict comparison)

Logical Operators (Combine multiple conditions):

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

Control Flow in JavaScript: If, Else, and Switch Explained

Control flow determines how a program executes instructions based on conditions.

If-Else Statement

let age = 18;
if (age >= 18) {
    console.log("You can vote.");
} else {
    console.log("You cannot vote yet.");
}

Switch Statement

let day = "Monday";
switch (day) {
    case "Monday":
        console.log("Start of the week!");
        break;
    case "Friday":
        console.log("Weekend is coming!");
        break;
    default:
        console.log("Regular day.");
}

JavaScript Control Flow Diagram

A flowchart helps visualize control flow in JavaScript:

Conclusion

Understanding JavaScript basics like variables, data types, operators, and control flow is crucial for writing efficient programs. Mastering these concepts will help you build interactive web applications.