Day 2: JavaScript Basics — A Beginner’s Guide 🚀

JavaScript is the engine that powers interactivity on the web. Whether it’s dynamic content updates, form validation, or fetching data from servers, JavaScript plays a key role in modern web development.

In this blog, we’ll cover all the basic concepts of JavaScript, with clear explanations, code examples, and real-world use cases.

Let’s dive in! 🏊‍♂️

1. What is JavaScript?

JavaScript (JS) is a scripting language used to create dynamic and interactive web pages.

Get Abhinav Singh’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

🔹 It runs in the browser (so no installation is needed).
🔹 Works alongside HTML & CSS to control webpage behavior.
🔹 Can fetch & update data without refreshing the page (e.g., chat apps, social media feeds).

A Simple JavaScript Example:

alert("Welcome to JavaScript!");  // This displays a popup alert
console.log("Hello, World!");  // Logs output to the console

This snippet shows a popup message and logs “Hello, World!” to the browser console.

2. Variables and Data Types

Declaring Variables

In JavaScript, variables store data. You can declare variables using:

var oldVar = "I am outdated"; // Not recommended
let modernVar = "I can be changed"; // Preferred for dynamic values
const constantVar = "I never change"; // Immutable variable

Data Types in JavaScript

JavaScript has different data types:

• String → "Hello"
• Number → 42, 3.14
• Boolean → true, false
• Undefined → let x;
• Null → let y = null;
• Object → {name: "Alice", age: 25}
• Array → ["Apple", "Banana", "Mango"]

Example Usage:

let name = "Alice";  // String
let age = 25;  // Number
let isStudent = true;  // Boolean
console.log(name, age, isStudent); // Alice 25 true

console.log(name, age, isStudent); // Alice 25 true will be logged

3. Operators in JavaScript

JavaScript provides operators to perform operations like math, comparison, and logic.

Arithmetic Operators

let a = 10, b = 5;
console.log(a + b); // Addition → 15
console.log(a - b); // Subtraction → 5
console.log(a * b); // Multiplication → 50
console.log(a / b); // Division → 2
console.log(a % b); // Modulus → 0
console.log(a ** 2); // Exponentiation → 100

Comparison Operators

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

Logical Operators

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

4. Conditional Statements (If-Else & Switch)

JavaScript can make decisions using if, else, and switch.

If-Else Example

let age = 18;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

Switch Statement Example

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("A regular day.");
}

5. Loops in JavaScript

Loops let us repeat actions without writing the same code multiple times.

For Loop

for (let i = 1; i <= 5; i++) {
    console.log("Number:", i);
}

While Loop

let i = 1;
while (i <= 5) {
    console.log("Number:", i);
    i++;
}

6. Functions: Writing Reusable Code

Functions let us reuse code blocks instead of writing them multiple times.

Function Declaration

function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Alice")); // Output: Hello, Alice

Arrow Functions (Modern JS)

const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // Output: 12

7. Arrays and Objects

Arrays (Lists of Data)

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Apple

Objects (Key-Value Pairs)

let person = { name: "John", age: 30, city: "New York" };
console.log(person.name); // John

8. DOM Manipulation (Changing Webpages Dynamically)

JavaScript can modify the webpage using the DOM (Document Object Model).

Selecting and Changing Content

document.getElementById("title").innerText = "New Title!";

Handling Events

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

9. Fetching Data with JavaScript (APIs & Async/Await)

JavaScript can fetch data from a server (API) asynchronously.

Using Fetch API

fetch("https://dummyjson.com/users")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));

Using Async/Await

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

10. ES6+ Modern JavaScript Features

Modern JavaScript introduced many useful features like:

Template Literals

let name = "Alice";
console.log(`Hello, ${name}!`);

Destructuring

let user = { name: "Bob", age: 25 };
let { name, age } = user;
console.log(name, age);

Spread Operator

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2);

Final Thoughts: Keep Learning!

By now, we’ve covered all the JavaScript basics! 🎉