vidux.sh - JavaScript

1 Output & Comments

JavaScript runs inside the browser. Use console.log() to print output to the developer console (open it with F12), or alert() to show a pop-up.

javascript · output.js

// Single-line comment

/* Multi-line comment
   spanning multiple lines */

console.log("Hello, World!")      // → printed in the console
alert("Hello from a popup!")      // → browser dialog box

// Output multiple values at once
console.log("Name:", "Alice", "Age:", 25)

You can run JavaScript directly in the browser console without any file — just open DevTools (F12), go to the Console tab, and type code.

2 Variables & Data Types

JavaScript has three ways to declare variables: let (reassignable), const (constant), and the older var (avoid in modern code). Types are determined at runtime.

Number Integers & floats 42, 3.14, -7

String Text "hello", 'hi'

Boolean True or False true, false

null Intentional empty null

undefined Not yet assigned undefined

Object Key-value pairs { key: val }

javascript · variables.js

let   name   = "Alice"    // String  — can be reassigned
const age    = 25         // Number  — constant
let   active = true       // Boolean
let   score  = null       // null (no value yet)

// Check type at runtime
console.log(typeof name)   // "string"
console.log(typeof age)    // "number"
console.log(typeof active) // "boolean"

// Reassign let (const would throw an error)
name = "Bob"
console.log(name)   // "Bob"

3 Operators

JavaScript operators work similarly to other languages. Pay attention to == vs === — always prefer strict equality (===) to avoid unexpected type coercion.

javascript · operators.js

// Arithmetic
console.log(10 + 3)    // 13  — addition
console.log(10 - 3)    // 7   — subtraction
console.log(10 * 3)    // 30  — multiplication
console.log(10 / 3)    // 3.333…
console.log(10 % 3)    // 1   — modulo
console.log(2  ** 8)   // 256 — exponent

// Loose vs strict equality
console.log(5 ==  "5")   // true  ← type coercion!
console.log(5 === "5")   // false ← always use this
console.log(5 !== 3)     // true

// Logical
console.log(true && false)  // false — AND
console.log(true || false)  // true  — OR
console.log(!true)           // false — NOT

Always use === and !== in JavaScript. The loose operators (==, !=) perform type coercion which leads to subtle bugs.

4 Strings & Template Literals

Strings can be written with single quotes, double quotes, or backticks. Backtick strings (template literals) let you embed expressions with ${ } and span multiple lines.

javascript · strings.js

const s = "  Hello, JavaScript!  "

console.log(s.trim())              // "Hello, JavaScript!"
console.log(s.toLowerCase())       // "  hello, javascript!  "
console.log(s.toUpperCase())       // "  HELLO, JAVASCRIPT!  "
console.log(s.includes("Java"))    // true
console.log(s.replace("JavaScript", "World"))

// Slicing
const word = "JavaScript"
console.log(word.slice(0, 4))       // "Java"
console.log(word.slice(-6))         // "Script"
console.log(word.length)           // 10

// Template literals (backticks)
const name = "Alice"
const age  = 25
console.log(`Name: ${name}, Age: ${age}`)

// Multi-line string
const msg = `Line one
Line two
Line three`
console.log(msg)

5 Conditionals

JavaScript supports if / else if / else, the ternary operator, and switch for multi-branch logic.

javascript · conditionals.js

const score = 72

if (score >= 90) {
    console.log("Grade: A")
} else if (score >= 75) {
    console.log("Grade: B")
} else if (score >= 60) {
    console.log("Grade: C")   // ← this runs
} else {
    console.log("Grade: F")
}

// Ternary operator
const status = score >= 60 ? "Pass" : "Fail"
console.log(status)   // "Pass"

// switch statement
const day = "Monday"
switch (day) {
    case "Saturday":
    case "Sunday":
        console.log("Weekend!"); break
    default:
        console.log("Weekday")   // ← this runs
}

6 Loops

JavaScript offers for, while, for...of (iterating values) and for...in (iterating object keys).

javascript · loops.js

// Classic for loop
for (let i = 0; i < 5; i++) {
    console.log(i)   // 0 1 2 3 4
}

// for...of — iterate array values
const fruits = ["apple", "banana", "cherry"]
for (const fruit of fruits) {
    console.log(`I like ${fruit}`)
}

// while loop
let count = 0
while (count < 3) {
    console.log(`count = ${count}`)
    count++
}

// break and continue
for (let n = 0; n < 10; n++) {
    if (n === 3) continue   // skip 3
    if (n === 6) break      // stop at 6
    console.log(n)           // 0 1 2 4 5
}

7 Arrays & Objects

Arrays store ordered lists of values. Objects store key-value pairs and are the backbone of JavaScript data structures.

javascript · collections.js

// ── Arrays ──────────────────────────────
const nums = [10, 20, 30, 40]
nums.push(50)               // add to end  → [10,20,30,40,50]
nums.pop()                  // remove last → [10,20,30,40]
nums.splice(1, 1)           // remove index 1 → [10,30,40]
console.log(nums.length)   // 3

// Array methods
const squares = [1, 2, 3, 4, 5].map(x => x ** 2)
console.log(squares)   // [1, 4, 9, 16, 25]

const evens = squares.filter(x => x % 2 === 0)
console.log(evens)    // [4, 16]

// ── Objects ─────────────────────────────
const person = {
    name:   "Alice",
    age:    25,
    active: true
}

console.log(person.name)        // "Alice"
console.log(person["age"])      // 25
person.city = "Udine"           // add new property

// Destructuring
const { name, age } = person
console.log(`${name} is ${age}`)   // "Alice is 25"

8 Functions

JavaScript has three common ways to define functions: function declarations, function expressions, and the modern arrow functions (=>).

javascript · functions.js

// ── Function declaration ─────────────────
function greet(name = "stranger") {
    return `Hello, ${name}!`
}
console.log(greet())           // "Hello, stranger!"
console.log(greet("Alice"))   // "Hello, Alice!"

// ── Arrow function ───────────────────────
const square = (x) => x ** 2
console.log(square(7))          // 49

// Arrow with a block body (multiple statements)
const minMax = (arr) => {
    const lo = Math.min(...arr)
    const hi = Math.max(...arr)
    return { lo, hi }
}
console.log(minMax([3, 1, 9, 4]))   // { lo: 1, hi: 9 }

// ── Callback example ────────────────────
[1, 2, 3].forEach(n => console.log(n * 10))  // 10 20 30

This covers the fundamentals of JavaScript. Next steps: explore DOM manipulation, Events, Promises & async/await, and Fetch API for working with web pages and APIs.

JavaScript Beginner

Table of Contents

1 Output & Comments

2 Variables & Data Types

3 Operators

4 Strings & Template Literals

5 Conditionals

6 Loops

7 Arrays & Objects

8 Functions