Start your JavaScript journey with fundamental concepts, syntax, variables, and basic operations.
Start your JavaScript journey with fundamental concepts, syntax, variables, and basic operations.
Learn about JavaScript's history, evolution, and why it's the most popular programming language in 2025
Content by: Kriyansh Khunt
MERN Stack Developer
JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web. Originally created by Brendan Eich at Netscape in 1995, JavaScript has evolved from a simple scripting language to a powerful, versatile programming language that runs everywhere.
// Frontend Development
// React, Vue, Angular applications
const App = () => {
return <div>Hello World</div>;
};
// Backend Development
// Node.js server applications
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello from Node.js!');
});
// Mobile Development
// React Native applications
import React from 'react';
import { Text, View } from 'react-native';
// Desktop Applications
// Electron applications
const { app, BrowserWindow } = require('electron');
// IoT and Embedded Systems
// Johnny-Five for Arduino
const five = require('johnny-five');
const board = new five.Board();Test your understanding of this topic:
Set up your JavaScript development environment with modern tools and best practices for 2025
Content by: Vijay Parmar
MERN Stack Developer
JavaScript can be written in multiple places depending on your use case: directly in HTML files, in separate .js files, in Node.js applications, or in modern development environments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Practice</title>
</head>
<body>
<h1>JavaScript Learning</h1>
<div id="output"></div>
<!-- Internal JavaScript -->
<script>
console.log("Hello from internal JavaScript!");
document.getElementById('output').innerHTML = 'JavaScript is working!';
</script>
<!-- External JavaScript -->
<script src="app.js"></script>
</body>
</html>// app.js - Node.js application
console.log("Hello from Node.js!");
// Basic HTTP server
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello from Node.js Server!');
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});// Exercise: Create your first JavaScript file
// 1. Create a file called 'hello.js'
// 2. Add the following code:
console.log("Hello, World!");
console.log("My name is [Your Name]");
console.log("I'm learning JavaScript in 2025!");
// 3. Run it with Node.js: node hello.js
// 4. Try different console methods:
console.info("This is an info message");
console.warn("This is a warning message");
console.error("This is an error message");
// 5. Create a simple HTML file and link your JavaScript
// 6. Open in browser and check the consoleTest your understanding of this topic:
Learn different ways to output data and use the browser console for debugging and development
Content by: Kasim Vohra
JavaScript Developer
// Basic console methods
console.log("Hello, World!");
console.info("This is an informational message");
console.warn("This is a warning message");
console.error("This is an error message");
// Console with formatting
console.log("User:", "John Doe");
console.log("Age:", 25);
console.log("Is Student:", true);
// Console table for objects and arrays
const users = [
{ name: "John", age: 25, city: "NYC" },
{ name: "Jane", age: 30, city: "LA" },
{ name: "Bob", age: 35, city: "Chicago" }
];
console.table(users);
// Console group for organized output
console.group("User Information");
console.log("Name: John Doe");
console.log("Age: 25");
console.log("Email: john@example.com");
console.groupEnd();
// Performance measurement
console.time("Array Operation");
const numbers = Array.from({length: 1000000}, (_, i) => i);
const doubled = numbers.map(n => n * 2);
console.timeEnd("Array Operation");
// Stack trace
function traceFunction() {
console.trace("Function called from:");
}
traceFunction();// Alert - Browser popup
alert("This is an alert message");
// Prompt - Get user input
const name = prompt("What is your name?");
console.log("Hello, " + name + "!");
// Confirm - Yes/No dialog
const isConfirmed = confirm("Do you want to continue?");
if (isConfirmed) {
console.log("User confirmed!");
} else {
console.log("User cancelled!");
}
// Document write (not recommended for production)
document.write("<h1>Hello from JavaScript!</h1>");
// DOM manipulation (recommended)
document.getElementById('output').innerHTML = 'Hello from DOM!';
document.getElementById('output').textContent = 'Hello from DOM!';// Exercise: Practice all console methods
// 1. Create different types of data
const person = {
name: "Alice",
age: 28,
skills: ["JavaScript", "React", "Node.js"]
};
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 2. Use different console methods
console.log("Basic log:", person);
console.info("Person info:", person.name, "is", person.age, "years old");
console.warn("Warning: This is a practice exercise");
console.error("Error: This is a simulated error");
// 3. Use console.table
console.table(person);
console.table(numbers);
// 4. Use console.group
console.group("Person Details");
console.log("Name:", person.name);
console.log("Age:", person.age);
console.group("Skills");
person.skills.forEach(skill => console.log("- " + skill));
console.groupEnd();
console.groupEnd();
// 5. Use console.time
console.time("Number Processing");
const doubled = numbers.map(n => n * 2);
const filtered = doubled.filter(n => n > 10);
console.timeEnd("Number Processing");
// 6. Create a custom output function
function customLog(message, type = 'info') {
const timestamp = new Date().toLocaleTimeString();
console.log(`[${timestamp}] [${type.toUpperCase()}] ${message}`);
}
customLog("This is a custom log message", "custom");
customLog("Another message", "debug");Test your understanding of this topic:
Master JavaScript variables, data types, and type checking for robust application development
Content by: Harshit Sangani
MERN Stack Developer
JavaScript provides three ways to declare variables: var (legacy), let (block-scoped), and const (immutable). Each has different scoping rules and mutability characteristics.
// Variable declaration methods
// 1. var (function-scoped, legacy)
var oldWay = "This is the old way";
console.log(oldWay);
// 2. let (block-scoped, mutable)
let modernWay = "This is the modern way";
modernWay = "This can be changed";
console.log(modernWay);
// 3. const (block-scoped, immutable)
const constantValue = "This cannot be changed";
// constantValue = "This will cause an error"; // Error!
console.log(constantValue);
// Block scope demonstration
{
let blockScoped = "I'm only available in this block";
console.log(blockScoped);
}
// console.log(blockScoped); // Error: blockScoped is not defined
// Hoisting demonstration
console.log(hoistedVar); // undefined (not an error)
var hoistedVar = "I'm hoisted";
// console.log(hoistedLet); // Error: Cannot access before initialization
let hoistedLet = "I'm not hoisted";
// Const with objects (mutable properties)
const user = {
name: "John",
age: 25
};
user.age = 26; // This is allowed
user.city = "NYC"; // This is allowed
// user = {}; // This is NOT allowed
// Const with arrays
const numbers = [1, 2, 3];
numbers.push(4); // This is allowed
numbers[0] = 10; // This is allowed
// numbers = [5, 6, 7]; // This is NOT allowed// Primitive Types
// 1. String
let name = "John Doe";
let message = 'Hello World';
let template = `Hello ${name}`;
console.log(typeof name); // "string"
// 2. Number
let integer = 42;
let float = 3.14;
let negative = -17;
let infinity = Infinity;
let notANumber = NaN;
console.log(typeof integer); // "number"
// 3. Boolean
let isTrue = true;
let isFalse = false;
console.log(typeof isTrue); // "boolean"
// 4. Undefined
let notDefined;
console.log(typeof notDefined); // "undefined"
// 5. Null
let empty = null;
console.log(typeof empty); // "object" (this is a known JavaScript quirk)
// 6. Symbol
let symbol = Symbol("description");
console.log(typeof symbol); // "symbol"
// 7. BigInt
let bigNumber = 9007199254740991n;
console.log(typeof bigNumber); // "bigint"
// Reference Types
// 1. Object
let person = {
name: "John",
age: 25
};
console.log(typeof person); // "object"
// 2. Array
let numbers = [1, 2, 3, 4, 5];
console.log(typeof numbers); // "object"
console.log(Array.isArray(numbers)); // true
// 3. Function
function greet() {
return "Hello!";
}
console.log(typeof greet); // "function"
// 4. Date
let today = new Date();
console.log(typeof today); // "object"
// 5. RegExp
let regex = /pattern/;
console.log(typeof regex); // "object"
// Type checking
console.log(typeof "string"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"// Type conversion examples
// String to Number
let stringNumber = "42";
let convertedNumber = Number(stringNumber);
console.log(convertedNumber, typeof convertedNumber); // 42 "number"
// Number to String
let number = 42;
let convertedString = String(number);
console.log(convertedString, typeof convertedString); // "42" "string"
// Boolean conversion
console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean("")); // false
console.log(Boolean("hello")); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
// Type coercion (automatic conversion)
console.log("5" + 3); // "53" (string concatenation)
console.log("5" - 3); // 2 (number subtraction)
console.log("5" * 3); // 15 (number multiplication)
console.log("5" / 3); // 1.6666666666666667 (number division)
// Truthy and Falsy values
// Falsy values: false, 0, "", null, undefined, NaN
// Everything else is truthy
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(true)); // true
console.log(Boolean(1)); // true
console.log(Boolean("hello")); // true
console.log(Boolean({})); // true
console.log(Boolean([])); // true// Exercise: Variable declaration and data types
// 1. Declare variables using different methods
const PI = 3.14159;
let radius = 5;
var area = PI * radius * radius;
// 2. Work with different data types
let name = "JavaScript Learner";
let age = 25;
let isStudent = true;
let skills = ["HTML", "CSS", "JavaScript"];
let profile = {
name: name,
age: age,
isStudent: isStudent,
skills: skills
};
// 3. Type checking
console.log("Name type:", typeof name);
console.log("Age type:", typeof age);
console.log("Is student type:", typeof isStudent);
console.log("Skills type:", typeof skills);
console.log("Profile type:", typeof profile);
// 4. Type conversion
let stringAge = "25";
let numericAge = Number(stringAge);
console.log("Original:", stringAge, typeof stringAge);
console.log("Converted:", numericAge, typeof numericAge);
// 5. Template literals
let introduction = `Hello! My name is ${name} and I'm ${age} years old. I'm learning ${skills.join(', ')}.`;
console.log(introduction);
// 6. Object property shorthand
let shortProfile = { name, age, isStudent, skills };
console.log(shortProfile);
// 7. Challenge: Create a calculator
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
let difference = num1 - num2;
let product = num1 * num2;
let quotient = num1 / num2;
console.log(`${num1} + ${num2} = ${sum}`);
console.log(`${num1} - ${num2} = ${difference}`);
console.log(`${num1} * ${num2} = ${product}`);
console.log(`${num1} / ${num2} = ${quotient}`);Test your understanding of this topic:
Master JavaScript operators for mathematical calculations, comparisons, and logical operations
Content by: Himanshu Dabhi
MERN Stack Developer
// Basic arithmetic operators
let a = 10;
let b = 3;
console.log("Addition:", a + b); // 13
console.log("Subtraction:", a - b); // 7
console.log("Multiplication:", a * b); // 30
console.log("Division:", a / b); // 3.3333333333333335
console.log("Modulus:", a % b); // 1
console.log("Exponentiation:", a ** b); // 1000
// Increment and decrement
let count = 5;
console.log("Original:", count); // 5
console.log("Post-increment:", count++); // 5 (returns original value)
console.log("After post-increment:", count); // 6
console.log("Pre-increment:", ++count); // 7 (returns new value)
console.log("After pre-increment:", count); // 7
let number = 10;
console.log("Original:", number); // 10
console.log("Post-decrement:", number--); // 10
console.log("After post-decrement:", number); // 9
console.log("Pre-decrement:", --number); // 8
console.log("After pre-decrement:", number); // 8
// String concatenation
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"
// Template literals (modern way)
let age = 25;
let message = `I am ${age} years old`;
console.log(message); // "I am 25 years old"
// Mixed operations
let result = 2 + 3 * 4; // Order of operations: 2 + (3 * 4) = 14
console.log(result); // 14
let result2 = (2 + 3) * 4; // Parentheses first: 5 * 4 = 20
console.log(result2); // 20// Assignment operators
let x = 10;
console.log("Original x:", x); // 10
// Addition assignment
x += 5; // Same as x = x + 5
console.log("After += 5:", x); // 15
// Subtraction assignment
x -= 3; // Same as x = x - 3
console.log("After -= 3:", x); // 12
// Multiplication assignment
x *= 2; // Same as x = x * 2
console.log("After *= 2:", x); // 24
// Division assignment
x /= 4; // Same as x = x / 4
console.log("After /= 4:", x); // 6
// Modulus assignment
x %= 4; // Same as x = x % 4
console.log("After %= 4:", x); // 2
// Exponentiation assignment
x **= 3; // Same as x = x ** 3
console.log("After **= 3:", x); // 8
// All assignment operators
let y = 10;
y += 5; // y = 15
y -= 3; // y = 12
y *= 2; // y = 24
y /= 4; // y = 6
y %= 4; // y = 2
y **= 3; // y = 8
console.log("Final y:", y); // 8// Comparison operators
let a = 5;
let b = "5";
let c = 10;
// Equality operators
console.log("a == b:", a == b); // true (loose equality)
console.log("a === b:", a === b); // false (strict equality)
console.log("a != b:", a != b); // false (loose inequality)
console.log("a !== b:", a !== b); // true (strict inequality)
// Relational operators
console.log("a < c:", a < c); // true
console.log("a > c:", a > c); // false
console.log("a <= c:", a <= c); // true
console.log("a >= c:", a >= c); // false
// More examples
console.log("5 == '5':", 5 == '5'); // true
console.log("5 === '5':", 5 === '5'); // false
console.log("null == undefined:", null == undefined); // true
console.log("null === undefined:", null === undefined); // false
console.log("0 == false:", 0 == false); // true
console.log("0 === false:", 0 === false); // false
// Best practices: Always use strict equality (===)
let value = "5";
if (value === 5) {
console.log("Value is exactly 5");
} else {
console.log("Value is not exactly 5");
}// Logical operators
let isLoggedIn = true;
let hasPermission = false;
let age = 25;
// AND operator (&&)
console.log("isLoggedIn && hasPermission:", isLoggedIn && hasPermission); // false
console.log("isLoggedIn && age >= 18:", isLoggedIn && age >= 18); // true
// OR operator (||)
console.log("isLoggedIn || hasPermission:", isLoggedIn || hasPermission); // true
console.log("!isLoggedIn || age < 18:", !isLoggedIn || age < 18); // false
// NOT operator (!)
console.log("!isLoggedIn:", !isLoggedIn); // false
console.log("!hasPermission:", !hasPermission); // true
// Short-circuit evaluation
let user = null;
let username = user && user.name; // Short-circuits, username is null
console.log("Username:", username);
let defaultName = "Guest";
let displayName = user && user.name || defaultName; // Uses default if user is null
console.log("Display name:", displayName);
// Nullish coalescing (??) - ES2020
let config = {
timeout: 0,
retries: null
};
let timeout = config.timeout || 5000; // 5000 (0 is falsy)
let timeout2 = config.timeout ?? 5000; // 0 (only null/undefined)
let retries = config.retries ?? 3; // 3 (null is nullish)
console.log("Timeout (||):", timeout);
console.log("Timeout (??):", timeout2);
console.log("Retries:", retries);
// Logical assignment operators (ES2021)
let user2 = {
name: "John",
age: 25
};
// Logical AND assignment
user2.verified = user2.verified && true; // false (undefined && true)
user2.verified &&= true; // false (same as above)
// Logical OR assignment
user2.role = user2.role || "user"; // "user"
user2.role ||= "admin"; // "user" (already set)
// Logical nullish assignment
user2.email ??= "default@example.com"; // "default@example.com"// Exercise: Practice all operators
// 1. Create variables for calculations
let num1 = 15;
let num2 = 4;
let num3 = 7;
// 2. Arithmetic operations
let sum = num1 + num2;
let difference = num1 - num2;
let product = num1 * num2;
let quotient = num1 / num2;
let remainder = num1 % num2;
let power = num1 ** 2;
console.log("Arithmetic Results:");
console.log(`${num1} + ${num2} = ${sum}`);
console.log(`${num1} - ${num2} = ${difference}`);
console.log(`${num1} * ${num2} = ${product}`);
console.log(`${num1} / ${num2} = ${quotient}`);
console.log(`${num1} % ${num2} = ${remainder}`);
console.log(`${num1} ** 2 = ${power}`);
// 3. Assignment operators
let x = 10;
x += 5; console.log("After += 5:", x);
x -= 3; console.log("After -= 3:", x);
x *= 2; console.log("After *= 2:", x);
x /= 4; console.log("After /= 4:", x);
// 4. Comparison operators
let age = 25;
let isAdult = age >= 18;
let isSenior = age >= 65;
let isTeenager = age >= 13 && age <= 19;
console.log("Age comparisons:");
console.log("Is adult:", isAdult);
console.log("Is senior:", isSenior);
console.log("Is teenager:", isTeenager);
// 5. Logical operators
let hasLicense = true;
let hasInsurance = false;
let canDrive = hasLicense && hasInsurance;
let canApply = hasLicense || hasInsurance;
console.log("Driving permissions:");
console.log("Can drive:", canDrive);
console.log("Can apply:", canApply);
// 6. Challenge: Simple calculator
function calculate(operation, a, b) {
switch(operation) {
case '+': return a + b;
case '-': return a - b;
case '*': return a * b;
case '/': return b !== 0 ? a / b : 'Error: Division by zero';
case '%': return a % b;
case '**': return a ** b;
default: return 'Error: Invalid operation';
}
}
console.log("Calculator Results:");
console.log("10 + 5 =", calculate('+', 10, 5));
console.log("10 - 5 =", calculate('-', 10, 5));
console.log("10 * 5 =", calculate('*', 10, 5));
console.log("10 / 5 =", calculate('/', 10, 5));
console.log("10 % 3 =", calculate('%', 10, 3));
console.log("2 ** 8 =", calculate('**', 2, 8));Test your understanding of this topic:
Continue your learning journey and master the next set of concepts.
Continue to Module 2