JavaScript Beginner Cheat Sheet: Variables, Types, Loops & First Scripts

A beginner JavaScript cheat sheet covers the language you run in the browser before React: declarations, operators, conditionals, loops, functions, and arrays. Write small scripts with defer, log with console.log, and change the DOM only after those basics feel boring.

This JavaScript cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Run: <script src="app.js" defer></script> in HTML. Open DevTools → Console.
• Variables: const if it will not be rebound, else let. No var in new code.
• Types: string, number, boolean, null, undefined, object (and arrays).
• If: if (age >= 18) { ... } else { ... }. Use ===.
• Loops: for (const item of list), for (let i = 0; i < n; i++), while.
• Functions: function greet(name) { return "Hi " + name; }.
• Arrays: [], .push, .length, .map once you can write a for loop.
• Debug: console.log and breakpoints. Read the error’s file and line.

Copy-paste examples

First interactive script

Wait for the DOM (defer does this). Keep numbers as numbers — form values are strings until you convert.

const form = document.querySelector('#tip');
const out = document.querySelector('#result');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const bill = Number(form.bill.value);
  const percent = Number(form.percent.value);
  if (!Number.isFinite(bill) || bill < 0) {
    out.textContent = 'Enter a valid bill.';
    return;
  }
  const tip = bill * (percent / 100);
  out.textContent = 'Tip: ' + tip.toFixed(2);
});

Common mistakes

• Copy-pasting React tutorials before you can write a function and an if statement.
• Comparing with == and hitting "0" == false bugs.
• Putting the script in head without defer so querySelector returns null.
• Ignoring console errors and adding more code on top.

FAQ

1. Do I need Node.js to learn JavaScript? No. A browser and a .html file are enough. Node matters later for tooling and servers.

1. Is Java the same? No. Different language. JavaScript is what browsers run.

1. When do I start React? After you can handle events, update the DOM, and fetch JSON. React will then make sense as a way to structure that work.

Related JavaScript cheat sheets

• Javascript Cheat Sheet 2026
• Javascript Array Methods Cheat Sheet
• Javascript String Methods Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.