HirenJS Docs — JavaScript Learning Guide

ON THIS PAGE

What is HirenJS?
Using the Editor
Variables & Types
Functions
Arrays
Objects & ES6+
Async & Promises
Classes & OOP
Cheatsheet

📦

Variables & Types

Learn var, let, const and data types.

BEGINNER →

🔁

Loops

for, while, forEach and more.

BEGINNER →

🔧

Functions

Declaration, arrow functions, closures.

MEDIUM →

🗂️

Arrays

map, filter, reduce and array methods.

MEDIUM →

⏳

Async & Promises

Callbacks, Promises, async/await.

ADVANCED →

🏗️

Classes & OOP

class, extends, super, polymorphism.

ADVANCED →

📱 Mobile Bottom Bar

On phones, HirenJS shows a bottom action bar for the most-used actions so you don't have to scroll to reach buttons.

Button	Action
▶ Run (yellow circle)	Execute your code — output appears in the Console panel below.
↩ Undo	Undo the last edit.
🗑 Clear	Wipe the editor clean (with confirmation).
✨ Format	Auto-indent your code.
🎨 Theme	Cycle through 6 editor colour themes.

⌨️ Keyboard Shortcuts

Shortcut	Action
`Ctrl + Enter`	Run code
`Ctrl + Shift + F`	Format code
`Ctrl + K`	Open snippet library
`Ctrl + L`	Clear output
`Ctrl + Z / Y`	Undo / Redo
`Ctrl + /`	Toggle comment

💡

Pro tip — Share your code!Hit the 🔗 Share button in the editor header to generate a URL that contains your code. Send it to your teacher or a friend — they'll see exactly what you wrote.

Declaring Variables

🔒 const

Use for values that never change. Best practice — always start with const.

🔄 let

Use when the value will change later in your program. Block-scoped.

⚠️ var

Old way — avoid in modern code. Function-scoped and can cause confusing bugs.

📐 Scope

let and const are block-scoped (inside { }). var leaks out of blocks.

variables.js
JS

// ── const: value that won't change ──────────────────
const name = "Hiren";
const PI   = 3.14159;

// ── let: value that can change ──────────────────────
let score  = 0;
score      = 100;   // ✅ allowed

// ── Data types ──────────────────────────────────────
const num    = 42;               // Number
const text   = "Hello!";         // String
const flag   = true;            // Boolean
const empty  = null;            // Null (intentional empty)
let   undef;                     // Undefined (not assigned)

// ── Template literals ───────────────────────────────
const greeting = `Hello, ${name}! Score: ${score}`;
console.log(greeting);
console.log(typeof num, typeof text, typeof flag);

💡

Golden Rule — Always use const first. Switch to let only if you later need to reassign the variable. Never use var in new code.

Try it yourself

▸ TRY IT — edit & run

Quick Quiz

QUIZQuestion 1 of 2

Which keyword should you use for a variable that will NEVER change its value?

A var

B let

C const

D static

Arithmetic & Comparison

operators.js
JS

// Arithmetic
console.log(10 + 3);   // 13
console.log(10 - 3);   // 7
console.log(10 * 3);   // 30
console.log(10 / 3);   // 3.333…
console.log(10 % 3);   // 1  (remainder)
console.log(2 ** 8);   // 256 (power)

// Comparison — always use === not ==
console.log(5 === 5);  // true
console.log(5 !== 4);  // true
console.log(10 > 5);   // true

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

⚠️

Always use === instead of == — The double-equals == does type coercion which causes tricky bugs. For example "5" == 5 is true with == but false with ===. Always use ===.

conditionals.js
JS

const score = 85;

// if / else if / else
if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 75) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

// Ternary — short one-liner if/else
const result = score >= 50 ? "Pass" : "Fail";
console.log(result);

// Switch
const day = "Monday";
switch (day) {
  case "Monday":   console.log("Start of week!"); break;
  case "Friday":   console.log("Weekend soon!"); break;
  default:          console.log("Midweek grind");
}

loops.js
JS

// for loop
for (let i = 1; i <= 5; i++) {
  console.log(`Count: ${i}`);
}

// while loop
let n = 0;
while (n < 3) {
  console.log("n =", n);
  n++;
}

// for...of — great for arrays
const fruits = ["Mango", "Apple", "Banana"];
for (const fruit of fruits) {
  console.log("🍎", fruit);
}

// forEach — array method style
fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

Three Ways to Write Functions

functions.js
JS

// 1. Function Declaration (hoisted — works before defined)
function add(a, b) {
  return a + b;
}
console.log(add(3, 4));  // 7

// 2. Arrow Function (modern, concise)
const multiply = (a, b) => a * b;
console.log(multiply(5, 6));  // 30

// 3. Default parameters
const greet = (name = "Student") => `Hello, ${name}!`;
console.log(greet());           // Hello, Student!
console.log(greet("Hiren"));    // Hello, Hiren!

// Closure — function that remembers outer variable
function makeCounter() {
  let count = 0;
  return () => ++count;
}
const counter = makeCounter();
console.log(counter(), counter(), counter());  // 1 2 3

arrays.js
JS

const nums = [1,2,3,4,5,6,7,8];

// map — transform every element
const doubled = nums.map(n => n * 2);
console.log("Doubled:", doubled);

// filter — keep only matching elements
const evens = nums.filter(n => n % 2 === 0);
console.log("Evens:", evens);

// reduce — collapse to single value
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log("Sum:", sum);

// find, some, every
console.log(nums.find(n => n > 5));    // 6
console.log(nums.some(n => n > 7));    // true
console.log(nums.every(n => n > 0));    // true
console.log([...nums].reverse());      // [8,7,6,5,4,3,2,1]

objects.js
JS

const student = {
  name: "Hiren",
  age:  22,
  city: "Ahmedabad",
  greet: function() {
    return `Hi, I'm ${this.name}`;
  }
};

// Access properties
console.log(student.name);          // Hiren
console.log(student["city"]);        // Ahmedabad
console.log(student.greet());        // Hi, I'm Hiren

// Destructuring
const { name, age } = student;
console.log(name, age);              // Hiren 22

// Spread — copy / merge objects
const updated = { ...student, age: 23 };
console.log(updated);

es6.js
JS

// Optional chaining (?.) — safe property access
const user = null;
console.log(user?.name);            // undefined (no crash!)

// Nullish coalescing (??) — default values
const val = null ?? "default";
console.log(val);                    // "default"

// Spread & rest
const sum = (...nums) => nums.reduce((a,b) => a+b,0);
console.log(sum(1,2,3,4));          // 10

// Array / Object destructuring with rename
const [first, , third] = [10,20,30];
console.log(first, third);           // 10 30

// Short-circuit evaluation
const isLoggedIn = true;
isLoggedIn && console.log("Welcome back!");

The Evolution: Callback → Promise → Async/Await

ℹ️

Key concept — When you call fetch() or set a timer, JS doesn't wait. It moves on and comes back when the result is ready. Promises and async/await give you clean ways to handle this.

async.js
JS

// ── Promises ─────────────────────────────────────────
const fetchUser = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve({ name: "Hiren", role: "Dev" }), 500);
});

// ── async/await (cleaner syntax) ─────────────────────
async function loadUser() {
  try {
    console.log("Loading…");
    const user = await fetchUser();
    console.log("User:", user);
  } catch (err) {
    console.error("Error:", err);
  }
}
loadUser();

// ── Real fetch example ───────────────────────────────
async function getJoke() {
  const res  = await fetch("https://v2.jokeapi.dev/joke/Programming?type=single");
  const data = await res.json();
  console.log("Joke:", data.joke);
}
getJoke();

classes.js
JS

class Animal {
  #name;                        // private field
  constructor(name, sound) {
    this.#name  = name;
    this.sound = sound;
  }
  speak() { return `${this.#name} says ${this.sound}!`; }
  get name() { return this.#name; }
}

class Dog extends Animal {
  constructor(name) {
    super(name, "Woof");
  }
  fetch() { return `${this.name} fetches the ball! 🎾`; }
}

const dog = new Dog("Buddy");
console.log(dog.speak());   // Buddy says Woof!
console.log(dog.fetch());   // Buddy fetches the ball! 🎾
console.log(dog instanceof Animal); // true

errors.js
JS

// try / catch / finally
function divide(a, b) {
  if (b === 0) throw new Error("Division by zero!");
  return a / b;
}

try {
  console.log(divide(10, 2));  // 5
  console.log(divide(5,  0));  // throws!
} catch (err) {
  console.error("Caught:", err.message);
} finally {
  console.log("Always runs ✔");
}

// Custom error types
class ValidationError extends Error {
  constructor(msg) { super(msg); this.name = "ValidationError"; }
}
try {
  throw new ValidationError("Name cannot be empty");
} catch (e) {
  console.log(e.name, "-", e.message);
}

💡

Tip — Switch to HTML mode in HirenJS and use the Preview tab to see DOM changes live on screen.

dom.html
HTML

<button id="btn">Click me!</button>
<p id="output"></p>

<script>
  const btn    = document.getElementById("btn");
  const output = document.getElementById("output");
  let count = 0;
  btn.addEventListener("click", () => {
    count++;
    output.textContent = `Clicked ${count} time(s)!`;
    btn.style.background = `hsl(${count*40},80%,60%)`;
  });
</script>

patterns.js
JS

// ── Singleton ─────────────────────────────────────────
const Config = (() => {
  let instance;
  return {
    getInstance: () => {
      if (!instance) instance = { theme: "dark" };
      return instance;
    }
  };
})();
console.log(Config.getInstance().theme);  // dark

// ── Observer (pub/sub) ────────────────────────────────
class EventBus {
  constructor() { this.events = {}; }
  on(e, fn)   { (this.events[e] ||= []).push(fn); }
  emit(e, data) { (this.events[e] || []).forEach(fn => fn(data)); }
}
const bus = new EventBus();
bus.on("login", u => console.log("Logged in:", u));
bus.emit("login", "Hiren");

String Methods

.length

Number of characters

.toUpperCase()

Convert to UPPERCASE

.trim()

Remove whitespace

.includes(x)

Check if string contains x

.split(',')

Split into array

.replace(a,b)

Replace a with b

.slice(0,3)

Extract substring

`${var}`

Template literal

Array Methods

.push(x)

Add to end

.pop()

Remove from end

.map(fn)

Transform each item

.filter(fn)

Keep matching items

.reduce(fn,0)

Collapse to one value

.find(fn)

First match

.includes(x)

Check if item exists

.sort()

Sort array in-place

[...arr]

Copy / spread array

.join(', ')

Array to string

Number Methods

Math.round()

Round to nearest int

Math.floor()

Round down

Math.ceil()

Round up

Math.random()

Random 0–1

Math.max(a,b)

Largest value

parseInt(str)

String → Integer

🎉

You've reached the end of the guide!

Ready to apply what you've learned? Open the editor and start building something amazing.

▶ Open Editor

Snippet	Tag	What to try
Hello World	Basic	Change the message. Try console.warn() and console.error() instead of log.
Arrow Function	Function	Add a third parameter. Try calling the function without arguments to see undefined.
Array Methods	Array	Chain filter and map together. Change the filter condition.
Promises & Async	Async	Reduce the setTimeout delay. Try rejecting the promise and catching the error.
Classes & OOP	OOP	Add a Cat class that extends Animal with a different sound.
Destructuring	ES6	Add a default value in the destructuring. Rename a key.
Spread & Rest	ES6	Try spreading 3 arrays together. Add type checking to the sum function.
Fetch API	Network	Try fetching from a different API. Add loading state before the fetch.
Fibonacci	Algorithm	Rewrite it with a loop instead of recursion. Compare performance.
Debounce	Utility	Change the delay. Try using it with a simulated search input.
Try/Catch	Error	Add a custom error class. Try throwing a string instead of an Error object.

💡

How to open snippets — In HirenJS editor, press Ctrl+K or tap the 📦 icon in the top right. Use the search box to find snippets by name or tag. Click any snippet to insert it instantly.

Action	Shortcut	Mobile
Run code	`Ctrl + Enter`	▶ Run button
Format / indent code	`Ctrl + Shift + F`	✨ Format button
Open snippet library	`Ctrl + K`	📦 icon
Clear output console	`Ctrl + L`	—
Undo	`Ctrl + Z`	↩ Undo button
Redo	`Ctrl + Y`	—
Comment / uncomment line	`Ctrl + /`	—
Select all	`Ctrl + A`	—
Copy selected	`Ctrl + C`	—
Find in file	`Ctrl + F`	—
Toggle keyboard shortcuts	`Ctrl + ?` (menu)	⌨️ icon

Documentation & Learning Guide

Using the HirenJS Editor

Variables & Data Types

🔒 const

🔄 let

⚠️ var

📐 Scope

Operators

Conditionals

Loops

Functions

Arrays

Objects

ES6+ Modern Features

Async & Promises

Classes & Object-Oriented Programming

Error Handling

DOM Manipulation

Design Patterns

JavaScript Cheatsheet

You've reached the end of the guide!

Snippet Library Guide

Keyboard Shortcuts