JavaScript Beginner Guide

JavaScript is a programming language that runs inside web browsers. It makes web pages interactive — buttons, animations, form checks, and dynamic content. JavaScript can also run on servers using Node.js, but for beginners the browser console is the easiest place to start. You write JS code, the browser's JavaScript engine reads it, and it produces output instantly.

console.log("Hello from JavaScript!");

You can run JavaScript in two main ways: directly in the browser's Developer Console, or inside an HTML file using the <script> tag. The console is great for quick testing, while the <script> tag connects JavaScript to a real web page. When the browser loads the HTML, it runs the JavaScript inside the script tag.

// Inside an HTML file:
<script>
  console.log("Ready to code!");
</script>

Variables are containers that store data. JavaScript has three ways to declare them: let (can be changed later), const (cannot be changed once set), and var (the older way, now mostly replaced by let). Use let when the value needs to change, and const when it should stay fixed.

let name = "Ali";
const PI = 3.14;
var age = 25;
console.log(name, PI, age);

JavaScript values have different types. The main ones are: string (text), number (integers and decimals), boolean (true/false), null (intentionally empty), and undefined (variable declared but not assigned a value). Knowing the type helps you predict how values behave.

let str = "Hello";
let num = 42;
let bool = true;
let nul = null;
let und;
console.log(typeof str, typeof num, typeof bool, typeof nul, typeof und);

Operators perform actions on values. Arithmetic operators (+, -, *, /, %) do math. Comparison operators (===, >, <) compare values and return true or false. The % operator is modulo — it returns the remainder after division.

let a = 10;
let b = 3;
console.log(a + b, a - b, a * b, a / b, a % b, a === 10, a > b);

Strings can be created with single quotes, double quotes, or backticks. Backticks create template literals, which allow you to embed variables directly using ${}. This makes building dynamic text much easier than joining with the + operator.

let name = "Ali";
let age = 25;
console.log(`My name is ${name} and I am ${age} years old.`);

JavaScript has a built-in Math object with useful functions for working with numbers. Math.round() rounds to the nearest integer, Math.ceil() always rounds up, Math.floor() always rounds down, Math.max() returns the largest value, and Math.random() returns a random decimal between 0 and 1.

console.log(Math.round(4.7), Math.ceil(4.2), Math.floor(4.9), Math.max(1, 5, 9), Math.random());

Conditionals allow your code to make decisions. if runs a block when a condition is true, else if checks another condition, and else runs when nothing else matched. switch is another way to compare one value against many possible cases.

let score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else {
  console.log("C");
}

Loops repeat a block of code multiple times. A for loop is great when you know how many times to repeat. A while loop keeps running as long as a condition stays true. Loops save you from writing the same line many times.

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

Functions are reusable blocks of code. There are three common ways to create them: function declarations (function name() {}), function expressions (const name = function() {}), and arrow functions (const name = () => {}). Arrow functions are a shorter modern syntax.

function greet(name) {
  return "Hello " + name;
}
const greet2 = (name) => "Hi " + name;
console.log(greet("Ali"), greet2("Sara"));

Parameters are variables listed in a function definition that receive input values. The return statement sends a value back to where the function was called. A function can take multiple parameters and return a single computed result.

function add(a, b) {
  return a + b;
}
console.log(add(5, 3));

An array is a list of values stored in one variable. Arrays use square brackets and each item has an index starting from 0. You can access items with array[index], and the .length property tells you how many items are inside.

let fruits = ["apple", "banana", "mango"];
console.log(fruits.length, fruits[0], fruits[2]);

Arrays have built-in methods. push() adds to the end, pop() removes from the end. map() creates a new array by transforming every item, and filter() creates a new array with only items that pass a test. These methods make list work fast and readable.

let nums = [1, 2, 3];
nums.push(4);
nums.pop();
let doubled = nums.map(n => n * 2);
let even = nums.filter(n => n % 2 === 0);
console.log(nums, doubled, even);

Objects store related data as key-value pairs. Each key is a property name, and each value is the data for that property. Objects are written with curly braces and are perfect for representing things like a person, a product, or a book.

let person = { name: "Ali", age: 25, isStudent: true };
console.log(person.name, person.age);

You can access object properties in two ways: dot notation (object.key) and bracket notation (object["key"]). Dot notation is shorter, but bracket notation works when the key has special characters or spaces, or when the key is stored in a variable.

let car = { brand: "Toyota", "model year": 2020 };
console.log(car.brand, car["model year"]);

Scope determines where a variable can be accessed. Global scope means the variable is available everywhere. Function scope means it is only available inside the function where it was declared. Block scope (let and const) means it is only available inside the nearest curly braces {}.

let global = "global";
function test() {
  let local = "local";
  console.log(local);
}
test();
console.log(global);

Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their scope before execution. Function declarations can be used before they are written. Variables declared with var are hoisted but start as undefined, while let and const are not initialized.

console.log(x);
var x = 10;
console.log(x);

These three values are easy to confuse. undefined means a variable exists but has no assigned value. null means intentionally empty — you set it yourself. NaN stands for 'Not a Number' and is the result of invalid math like dividing text.

let a;
let b = null;
let c = "abc" / 2;
console.log(a, b, c, typeof a, typeof b, Number.isNaN(c));

== (loose equality) converts the two values to the same type before comparing, which can cause surprising results. === (strict equality) compares both value and type without converting. As a best practice, always use === to avoid bugs.

console.log(5 == "5", 5 === "5", 0 == false, 0 === false);

You now know variables, data types, operators, strings, numbers, conditionals, loops, functions, arrays, objects, scope, and type handling. Try three mini projects to practice: (1) Number Guessing Game — generate a random number and let the user guess it; (2) Temperature Converter — convert Celsius to Fahrenheit; (3) Simple To-Do List — add and remove items using arrays.

function celsiusToFahrenheit(c) {
  return (c * 9/5) + 32;
}
console.log(celsiusToFahrenheit(0), celsiusToFahrenheit(100));