JavaScript is an essential language for web development, enabling dynamic, interactive websites. Whether you’re new to JavaScript or need a quick refresher, this cheat sheet covers the most important concepts to get you up to speed.

Try Here: https://seeb4coding.in/js/jseditor/

1. Variables

Declaration

• var – function-scoped
• let – block-scoped
• const – block-scoped, cannot be reassigned

var name = "John";  // function-scoped
let age = 25;       // block-scoped
const city = "NYC"; // constant, cannot change

Difference between var, let, and const

• var can be redeclared and updated.
• let can be updated but not redeclared in the same scope.
• const cannot be redeclared or updated.

2. Data Types

• String: "Hello"
• Number: 25
• Boolean: true or false
• Null: null
• Undefined: undefined
• Object: { name: "John", age: 25 }
• Array: ["apple", "banana", "orange"]

let str = "Hello";    // String
let num = 30;         // Number
let isAdult = true;   // Boolean
let emptyValue = null; // Null
let x;                // Undefined
let person = { name: "John", age: 25 }; // Object
let fruits = ["Apple", "Banana"];       // Array

3. Operators

• Arithmetic: +, -, *, /, % (modulus)
• Assignment: =, +=, -=, *=, /=
• Comparison: ==, ===, !=, !==, <, >, <=, >=
• Logical: && (and), || (or), ! (not)

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a > b); // true
console.log(a === 10 && b === 5); // true

4. Conditional Statements

if-else Statement

let age = 18;

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Not an adult");
}

switch Statement

let day = 2;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  default:
    console.log("Unknown day");
}

5. Loops

for Loop

for (let i = 0; i < 5; i++) {
  console.log(i);  // Prints 0 to 4
}

while Loop

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

for...of Loop (for arrays)

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

6. Functions

Function Declaration

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

Arrow Functions

const add = (x, y) => x + y;
console.log(add(5, 10)); // 15

7. Objects

Object Syntax

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

console.log(person.name); // John
person.greet();           // Hello, John

Accessing Object Properties

• Dot notation: person.name
• Bracket notation: person["name"]

8. Arrays

Array Methods

let fruits = ["Apple", "Banana", "Orange"];
fruits.push("Mango");      // Add an item at the end
fruits.pop();              // Remove the last item
console.log(fruits.length); // Array length

Looping through Arrays

let fruits = ["Apple", "Banana", "Orange"];
fruits.forEach(fruit => console.log(fruit)); // Loop through each item

9. DOM Manipulation

Selecting Elements

• document.getElementById("id")
• document.querySelector(".class")
• document.querySelectorAll("div")

Changing HTML Content

<p id="demo">This is a paragraph.</p>

<script>
  document.getElementById("demo").innerHTML = "New content!";
</script>

10. Events

Adding Event Listeners

<button id="myButton">Click me</button>

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
  });
</script>

11. ES6 Features

Template Literals

let name = "John";
let message = `Hello, ${name}!`;
console.log(message); // "Hello, John!"

Destructuring

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

Spread Operator

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

12. Promises

Handling asynchronous code with Promises:

let promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) resolve("Success!");
  else reject("Error!");
});

promise
  .then(result => console.log(result))
  .catch(error => console.log(error));

Conclusion

This cheat sheet covers the essentials of JavaScript for beginners, from variables and loops to DOM manipulation and promises. Use this as a quick reference to help guide you through your coding journey!

Happy coding!