JavaScript Cheat Sheet online

 

Basics

Variables

// Declare variables
var name = 'John'; // ES5
let age = 30;     // ES6
const pi = 3.14;  // ES6, cannot be reassigned

Data Types

let num = 100;           // Number
let str = 'Hello';       // String
let isTrue = true;       // Boolean
let arr = [1, 2, 3];     // Array
let obj = { name: 'John', age: 30 }; // Object
let und;                 // Undefined
let n = null;            // Null

Operators

// Arithmetic
let sum = 10 + 5;
let diff = 10 - 5;
let prod = 10 * 5;
let quot = 10 / 5;
let mod = 10 % 5;

// Assignment
let x = 10;
x += 5;  // x = x + 5
x -= 5;  // x = x - 5
x *= 5;  // x = x * 5
x /= 5;  // x = x / 5

// Comparison
10 == '10';    // true (equality, type conversion)
10 === '10';   // false (strict equality, no type conversion)
10 != '10';    // false (inequality, type conversion)
10 !== '10';   // true (strict inequality, no type conversion)

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

Control Structures

Conditionals

if (condition) {
  // code
} else if (anotherCondition) {
  // code
} else {
  // code
}

// Ternary operator
let result = condition ? 'true' : 'false';

Loops

// for loop
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// while loop
let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

// do...while loop
let j = 0;
do {
  console.log(j);
  j++;
} while (j < 10);

Functions

Function Declaration

function greet(name) {
  return 'Hello ' + name;
}
console.log(greet('John'));

Function Expression

const greet = function(name) {
  return 'Hello ' + name;
};
console.log(greet('John'));

Arrow Functions

const greet = (name) => 'Hello ' + name;
console.log(greet('John'));

Objects

let person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName());

Arrays

let fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits[0]); // Apple

// Array methods
fruits.push('Grapes'); // Add to end
fruits.pop();          // Remove from end
fruits.unshift('Mango'); // Add to beginning
fruits.shift();          // Remove from beginning

fruits.forEach(function(fruit) {
  console.log(fruit);
});

ES6 Features

Template Literals

let name = 'John';
let greeting = `Hello, ${name}!`;
console.log(greeting);

Destructuring

let person = { name: 'John', age: 30 };
let { name, age } = person;
console.log(name, age);

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);

Spread Operator

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6];
console.log(arr2);

let obj1 = { name: 'John' };
let obj2 = { ...obj1, age: 30 };
console.log(obj2);

Promises

let promise = new Promise((resolve, reject) => {
  // Asynchronous operation
  let success = true;
  if (success) {
    resolve('Success!');
  } else {
    reject('Failure!');
  }
});

promise.then((message) => {
  console.log(message);
}).catch((error) => {
  console.log(error);
});

DOM Manipulation

Selecting Elements

let element = document.getElementById('myId');
let elements = document.getElementsByClassName('myClass');
let element = document.querySelector('.myClass');
let elements = document.querySelectorAll('.myClass');

Modifying Elements

let element = document.getElementById('myId');
element.textContent = 'New Text';
element.innerHTML = '<p>New HTML</p>';
element.style.color = 'blue';

Event Listeners

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button Clicked!');
});

Fetch API

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Async/Await

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

---

This cheat sheet should help anyone quickly reference JavaScript syntax and concepts, making coding in JavaScript more accessible and efficient.