JavaScript Basics for Beginners in 2026

The Language of the Web#

JavaScript (JS) is the only programming language that runs natively in your web browser. If you want to make websites interactive—like handling button clicks, validating forms, or building maps—you need JavaScript.

In 2026, JavaScript is faster and powerful than ever. But every expert starts with the basics.

1. Variables: Storing Data#

In the old days, we used var. Today, we avoid it. We use let and const.

let vs const

• let: Use this if the value will change later (e.g., a score counter).
• const: Use this if the value will stay the same (e.g., the value of PI).

// Variable that can change
let uniqueUsers = 100;
uniqueUsers = 101; // Valid

// Constant that cannot change
const appName = "WebFiddle";
appName = "OtherApp"; // ERROR!

Tip: Always default to const. Only change it to let if you actually need to reassign it. This prevents accidental bugs.

2. Functions: Doing Work#

A function is a block of code designed to perform a particular task. The modern way to write them is using Arrow Functions.

// Old Way (Function Declaration)
function sayHello(name) {
    return "Hello " + name;
}

// Modern Way (Arrow Function)
const sayHello = (name) => {
    return `Hello ${name}`;
};

console.log(sayHello("Atish")); // "Hello Atish"

Notice the ${name} syntax? That's called a Template Literal. It's much cleaner than adding strings together with +.

3. The DOM: Talking to HTML#

The Document Object Model (DOM) is how JavaScript sees your HTML. It can read, change, and delete HTML elements on the fly.

Imagine you have a button in HTML:

<button id="myBtn">Click Me</button>
<p id="message"></p>

Here is how JS interacts with it:

// 1. Select the elements
const btn = document.getElementById('myBtn');
const msg = document.getElementById('message');

// 2. Add an "Event Listener"
btn.addEventListener('click', () => {
    // 3. Change the page
    msg.innerText = "You clicked the button!";
    msg.style.color = "blue";
});

4. Arrays and Loops#

You often need to store lists of things.

const fruits = ["Apple", "Banana", "Orange"];

// Loop through them
fruits.forEach((fruit) => {
    console.log(`I like ${fruit}`);
});

// Add a new one
fruits.push("Mango");

5. Objects: Real World Data#

Objects allow you to group data together using Key-Value pairs.

const user = {
    name: "Atish",
    role: "Developer",
    isLoggedIn: true,
    skills: ["HTML", "CSS", "JS"]
};

console.log(user.name); // "Atish"

You will use objects everywhere. They are the fundamental building block of JSON APIs and efficient data structures.

Summary#

1. Use const and let.
2. Use Arrow Functions () => {}.
3. Use document.getElementById to find HTML.
4. Use addEventListener to react to users.

Practice your JS skills in the WebFiddle Sandbox