JavaScript Cheat Sheet — Complete ES6 Syntax, Functions, and DOM Methods with Examples

JavaScript Cheat Sheet — Complete Syntax Reference & Examples

JavaScript is the core scripting language of the web, enabling interactivity, dynamic content updates, and real-time functionality in modern web applications.
This JavaScript Cheat Sheet provides a quick reference to all the fundamental syntax, built-in functions, and ES6 features every developer should know.

Introduction to JavaScript

JavaScript (JS) is a client-side scripting language that runs in browsers. It can manipulate HTML, CSS, and handle user events, making web pages interactive.

Example:

<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello, JavaScript World!");
</script>
</body>
</html>

JavaScript Variables and Data Types

JavaScript supports three ways to declare variables:

var (function-scoped, old)
let (block-scoped, modern)
const (block-scoped, constant)

Example:

let name = "John";
const age = 25;
var city = "New York";

Data Type	Example	Description
String	`"Hello"`	Text data
Number	`25`, `3.14`	Integer or float
Boolean	`true`, `false`	Logical values
Array	`[1, 2, 3]`	Ordered list
Object	`{name:"John", age:30}`	Key-value pair
Undefined	`let x;`	No assigned value
Null	`let x = null;`	Empty or unknown
Symbol	`Symbol("id")`	Unique identifiers

JavaScript Operators

Type	Operators	Example	Description
Arithmetic	`+ - * / % **`	`x + y`	Math operations
Assignment	`= += -= *= /=`	`x += 5`	Assign values
Comparison	`== === != !== > <`	`x == y`	Compare values
Logical	`&&		!`
Ternary	`? :`	`x > y ? x : y`	Conditional operator
String	`+`	`"Hello " + "World"`	Concatenation

JavaScript Conditional Statements

let marks = 85;

if (marks >= 90) {
  console.log("Excellent!");
} else if (marks >= 75) {
  console.log("Good!");
} else {
  console.log("Try again.");
}

Switch Statement:

let day = "Monday";
switch(day) {
  case "Monday":
    console.log("Start of the week");
    break;
  case "Friday":
    console.log("Weekend ahead!");
    break;
  default:
    console.log("Midweek mode");
}

JavaScript Loops and Iterations

Loop Type	Syntax Example	Description
For Loop	`for(let i=0; i<5; i++)`	Repeats a block of code
While Loop	`while(i < 5)`	Runs while condition true
Do…While	`do { } while(i < 5)`	Executes once before checking condition
For…of	`for(let x of arr)`	Iterates through iterable objects
For…in	`for(let key in obj)`	Iterates through object properties

Example:

let fruits = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}

JavaScript Functions

Functions are blocks of reusable code.

Function Declaration:

function greet(name) {
  return `Hello, ${name}`;
}
console.log(greet("Alice"));

Arrow Function (ES6):

const add = (a, b) => a + b;
console.log(add(5, 3));

Default Parameters:

function welcome(name = "Guest") {
  return `Welcome, ${name}!`;
}

JavaScript Arrays

let colors = ["Red", "Green", "Blue"];
colors.push("Yellow");
colors.pop();
console.log(colors);

Method	Example	Description
`push()`	`arr.push("item")`	Add element to end
`pop()`	`arr.pop()`	Remove last element
`shift()`	`arr.shift()`	Remove first element
`unshift()`	`arr.unshift("item")`	Add to beginning
`sort()`	`arr.sort()`	Sort alphabetically
`reverse()`	`arr.reverse()`	Reverse order
`map()`	`arr.map(fn)`	Apply function to all items
`filter()`	`arr.filter(fn)`	Filter items
`reduce()`	`arr.reduce(fn)`	Accumulate values

JavaScript Objects

Objects store key-value pairs.

let user = {
  name: "John",
  age: 25,
  greet: function() {
    return "Hello " + this.name;
  }
};

console.log(user.greet());

Accessing Properties

console.log(user.name);
console.log(user["age"]);

JavaScript Strings

Method	Example	Description
`length`	`str.length`	String length
`toUpperCase()`	`str.toUpperCase()`	Convert to uppercase
`toLowerCase()`	`str.toLowerCase()`	Convert to lowercase
`trim()`	`str.trim()`	Remove whitespace
`substring()`	`str.substring(1,4)`	Extract part of string
`replace()`	`str.replace("old", "new")`	Replace text
`split()`	`str.split(",")`	Split into array

javascript cheat sheet, javascript syntax guide, js examples for beginners, javascript es6 reference, javascript loops and arrays, javascript dom methods, javascript functions list, javascript coding basics, javascript string methods, js event handling

JavaScript DOM Manipulation

The Document Object Model (DOM) connects JS with HTML/CSS, allowing real-time page updates.

<p id="demo">Hello!</p>

<script>
document.getElementById("demo").innerHTML = "Welcome to JS!";
document.querySelector("#demo").style.color = "blue";
</script>

DOM Method	Description
`getElementById()`	Selects element by ID
`getElementsByClassName()`	Selects elements by class
`querySelector()`	Selects first matching element
`createElement()`	Creates new HTML element
`appendChild()`	Adds element to DOM
`removeChild()`	Removes element

JavaScript Events

Event	Description
`onclick`	Triggered on click
`onmouseover`	On mouse hover
`onkeydown`	When key pressed
`onload`	When page loads

Example:

<button onclick="alert('Button Clicked!')">Click Me</button>

JavaScript ES6 Features

Feature	Syntax	Example
Template Literals	`Hello ${name}`	`${}` interpolation
Destructuring	`let {a,b} = obj`	Extract values
Spread Operator	`arr2 = [...arr1]`	Copy/merge arrays
Classes	`class Car {}`	OOP structure
Promises	`new Promise()`	Handle async code
Arrow Functions	`(a,b)=>a+b`	Short syntax

Example: DOM + Event Handling

<button id="btn">Click Me</button>
<p id="output"></p>

<script>
document.getElementById("btn").addEventListener("click", function() {
  document.getElementById("output").innerHTML = "Button was clicked!";
});
</script>

Related Internal Resources

FAQ – JavaScript Cheat Sheet

Q1: What is JavaScript mainly used for?
JavaScript is used for creating dynamic web pages, validating forms, handling events, and building web apps.

Q2: What’s the difference between let, var, and const?
let and const are block-scoped (modern), while var is function-scoped (legacy).

Q3: Can JavaScript run without a browser?
Yes, using environments like Node.js, JS can run outside the browser.

Q4: How do I debug JavaScript?
Use console.log() or browser Developer Tools.

Q5: What is ES6?
ES6 (ECMAScript 2015) introduced modern JS features like arrow functions, classes, promises, and destructuring.