JavaScript Basics | CodeVerse

01 What is JavaScript?

JavaScript is the programming language of the web. It runs in browsers and on servers (Node.js), making websites interactive.

// My first JavaScript code
console.log("Hello, World!");

// Variables
let name = "CodeVerse";
const age = 25;
var old = "legacy";

💡 Use let for changeable variables, const for constants. Avoid var in modern code.

02 Data Types

JavaScript has dynamic types: string, number, boolean, null, undefined, symbol, and bigint.

let text = "Hello";        // string
let num = 42;              // number
let isTrue = true;         // boolean
let nothing = null;        // null
let notDefined;            // undefined

console.log(typeof text);  // "string"

03 Strings & Template Literals

Work with text using string methods and modern template literals (backticks).

\n`;')">Copy

let name = "CodeVerse";

// String methods
console.log(name.toUpperCase());  // CODEVERSE
console.log(name.length);         // 9

// Template Literals
console.log(`${name} is awesome!`);

04 Arrays & Array Methods

Arrays store lists of data. Master map, filter, reduce, and other essential methods.

let fruits = ["apple", "banana", "cherry"];
fruits.push("orange");

// Array methods
let nums = [1, 2, 3, 4, 5];
let doubled = nums.map(n => n * 2);
let evens = nums.filter(n => n % 2 === 0);

05 Objects

Key-value pairs for structured data. Objects are fundamental to JavaScript.

let user = {
    name: "Alex",
    age: 25,
    greet() {
        return `Hi, I am ${this.name}`;
    }
};

console.log(user.name);      // Alex

// Destructuring
let { name, age } = user;

06 Functions & Arrow Functions

Create reusable code blocks with functions. Arrow functions provide shorter syntax.

// Regular function
function add(a, b) {
    return a + b;
}

// Arrow function (ES6)
const multiply = (a, b) => a * b;

console.log(add(5, 3));      // 8

💡 Arrow functions are great for short callbacks. They don't have their own this context.

07 Conditionals

Control program flow with if/else, switch, and ternary operators.

let score = 85;

if (score >= 90) {
    console.log("Excellent");
} else if (score >= 70) {
    console.log("Good");
} else {
    console.log("Fail");
}

// Ternary
let result = score >= 50 ? "Pass" : "Fail";

08 Loops & Iteration

Iterate over data with for, while, forEach, and for...of loops.

// For loop
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// For...of
let fruits = ["apple", "banana"];
for (let fruit of fruits) {
    console.log(fruit);
}

09 DOM Manipulation

Interact with HTML elements using the Document Object Model (DOM) API.

// Select elements
const title = document.querySelector("h1");

// Modify content
title.textContent = "New Title";
title.style.color = "#f59e0b";
title.classList.add("highlight");

// Create elements
const div = document.createElement("div");
document.body.appendChild(div);

10 Events

Handle user interactions like clicks, inputs, and keyboard events.

const btn = document.querySelector("button");

btn.addEventListener("click", (e) => {
    console.log("Clicked!");
    e.target.style.background = "green";
});

11 Async: Promises & Async/Await

Handle asynchronous operations — API calls, timers, and file reading.

// Promise
fetch("https://api.example.com/data")
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

// Async/Await
async function getData() {
    const res = await fetch("url");
    const data = await res.json();
}

12 Spread & Destructuring

Modern ES6 syntax for copying, merging, and extracting data efficiently.

// Spread operator
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];

let obj2 = { ...{a:1}, c:3 };

// Destructuring
let [first] = ["a", "b"];
let { name } = { name: "Alex" };

13 Local Storage

Store data in the browser that persists across page reloads.

// Save
localStorage.setItem("theme", "dark");

// Retrieve
let theme = localStorage.getItem("theme");

// Remove
localStorage.removeItem("theme");

14 Best Practices

Write clean, modern, maintainable JavaScript following industry standards.

✅ const & let

Avoid var, use const by default

✅ Arrow Functions

Use for callbacks

✅ Template Literals

Use backticks for strings

✅ Destructuring

Extract values cleanly

✅ Async/Await

Over promise chains

✅ Strict Equality

Use === not ==

✅ Optional Chaining

obj?.prop?.nested

✅ Modules

import/export ES6