✦ Comprehensive Article | ✦ Beginner to Advanced Reference
From variables to classes and DOM — everything you need to know
🚀 Introduction
JavaScript is a high-level, multi-paradigm, object-oriented programming language that
is today known as the beating heart of the web. It was originally created to add interactivity to web pages,
but today it is also used on the server side with environments like Node.js, on mobile, and even on desktop.
In this article, we cover all key JavaScript topics from beginner to intermediate and advanced levels
with practical examples. Stay with us.
💡Tip: To run the code, you can use the browser
console (F12) or environments like Node.js.
🔀 Variables
In JavaScript, three keywords are used to define variables: var,
let, and const.
let and const were introduced in ES6
and are the best choices for modern coding.
// Defining a variable with let (mutable)
let name = "Alice";
name = "Bob"; // ✅ Allowed
// Defining a constant with const (immutable)
const PI = 3.1415;
// PI = 3.14; // ❌ Error
// var (legacy, do not use)
var old = "legacy";
const is for values that won't change, and let is for mutable variables.
🗄️ Data Types
JavaScript has eight main data types: number, string, boolean, undefined, null, symbol, bigint, and object. Except for object, the rest are primitive types.
// Number, string, boolean
let age = 28;
let text = "JavaScript";
let isActive = true;
// undefined and null
let empty; // undefined
let emptyValue = null; // null
// Object
let person = {
firstName: "Sarah",
lastName: "Karimi"
};
⚙️ Functions
Functions are the main building blocks in JavaScript. They can be defined in various ways:
// Function Declaration
function sum(a, b) {
return a + b;
}
// Function Expression
const multiply = function(a, b) {
return a * b;
};
// Arrow Function — modern and concise
const divide = (a, b) => a / b;
console.log(sum(5, 3)); // 8
console.log(multiply(4, 2)); // 8
console.log(divide(10, 2)); // 5
⭐ Arrow functions (=>) are very popular
for clean coding and use in array methods.
📋 Objects and Arrays
Objects and arrays are the main structures for storing complex data.
// Object
let user = {
username: "ahmadi",
age: 32,
isAdmin: false,
greet() {
console.log("Hello " + this.username);
}
};
// Array
let colors = ["red", "green", "blue"];
colors.push("yellow"); // Add element
console.log(colors[0]); // "red"
// Loop over array
colors.forEach((color, index) => {
console.log(`${index+1}: ${color}`);
});
📄 Working with the DOM
Using the DOM, you can modify page elements, and dynamically manage content and styles.
// Select element by id
const title = document.getElementById("main-title");
if (title) title.textContent = "New Title";
// Select with querySelector
const btn = document.querySelector(".btn");
if (btn) {
btn.addEventListener("click", () => {
alert("Button clicked!");
});
}
// Create a new element
const newDiv = document.createElement("div");
newDiv.innerHTML = "<p>This is a new paragraph</p>";
document.body.appendChild(newDiv);
⚡ Events
JavaScript works with events: click, mouse movement, key press, and more.
