Back to Learn
Web Dev • Intermediate

JavaScript Essentials

From variables to async/await — master the language that powers the modern web.

JavaScript Essentials Cover

Variables & Data Types

JavaScript uses let, const, and var to declare variables. Modern best practice is to use const by default and let when you need to reassign a value. JavaScript supports strings, numbers, booleans, arrays, objects, null, and undefined.

Here's how you declare variables in JavaScript:

// Constants — cannot be reassigned
const PI = 3.14159;
const APP_NAME = "CoreLabs";

// Variables — can be reassigned
let score = 0;
let isLoggedIn = false;

// Arrays and Objects
const colors = ["red", "green", "blue"];
const user = {
    name: "John",
    age: 25,
    isActive: true
};

Functions & Arrow Functions

Functions are reusable blocks of code. ES6 introduced arrow functions — a shorter syntax that also handles this differently. Arrow functions are perfect for callbacks and functional programming patterns.

Compare traditional and arrow function syntax:

// Traditional function
function greet(name) {
    return `Hello, ${name}!`;
}

// Arrow function
const greetArrow = (name) => `Hello, ${name}!`;

// Array methods with arrow functions
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);

Async/Await & Promises

JavaScript is asynchronous by nature. Promises and async/await let you handle operations like API calls, file reads, and timers without blocking the main thread. This is essential for building responsive web applications.

Fetch data from an API using async/await:

// Using async/await
async function fetchUsers() {
    try {
        const response = await fetch(
            "https://api.example.com/users"
        );
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Failed:", error);
    }
}

// Call the async function
fetchUsers();

Key Takeaway

JavaScript is the programming language of the web. With ES6+ features like arrow functions, destructuring, and async/await, you can write clean, modern, and efficient code for both frontend and backend development.