Cheat sheet

Sure! Here’s a concise JavaScript cheatsheet that covers the basics and some commonly used features.


JavaScript Cheatsheet

1. Variables

  • Declaration:

      var name = "Alice"; // Old way, function/global scoped
      let age = 25;       // Block scoped, can be reassigned
      const pi = 3.14;   // Block scoped, cannot be reassigned
    

2. Data Types

  • Primitive Types:

    • String: "Hello"

    • Number: 42, 3.14

    • Boolean: true, false

    • Null: null

    • Undefined: undefined

    • Symbol: Symbol('description')

    • BigInt: 123n

  • Reference Types:

    • Object:

        let person = { name: "Alice", age: 25 };
      
    • Array:

        let fruits = ["apple", "banana", "cherry"];
      

3. Operators

  • Arithmetic: +, -, *, /, % (modulus)

  • Assignment: =, +=, -=, *=, /=

  • Comparison: ==, === (strict), !=, !== (strict), <, >, <=, >=

  • Logical: && (and), || (or), ! (not)

4. Control Flow

  • Conditional Statements:

      if (condition) {
          // code
      } else if (anotherCondition) {
          // code
      } else {
          // code
      }
    
  • Switch Statement:

      switch (expression) {
          case value1:
              // code
              break;
          case value2:
              // code
              break;
          default:
              // code
      }
    
  • Loops:

    • For Loop:

        for (let i = 0; i < 5; i++) {
            console.log(i);
        }
      
    • While Loop:

        let i = 0;
        while (i < 5) {
            console.log(i);
            i++;
        }
      
    • Do-While Loop:

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

5. Functions

  • Function Declaration:

      function greet(name) {
          return "Hello, " + name;
      }
    
  • Function Expression:

      const add = function(a, b) {
          return a + b;
      };
    
  • Arrow Function:

      const multiply = (a, b) => a * b;
    

6. Objects and Arrays

  • Creating an Object:

      let car = {
          make: "Toyota",
          model: "Camry",
          year: 2020
      };
    
  • Accessing Object Properties:

      console.log(car.make); // Dot notation
      console.log(car["model"]); // Bracket notation
    
  • Creating an Array:

      let colors = ["red", "green", "blue"];
    
  • Accessing Array Elements:

      console.log(colors[0]); // Output: red
    
  • Array Methods:

      colors.push("yellow"); // Add to end
      colors.pop();          // Remove from end
      colors.shift();        // Remove from start
      colors.unshift("purple"); // Add to start
    

7. ES6 Features

  • Template Literals:

      let name = "Alice";
      let greeting = `Hello, ${name}!`; // Template string
    
  • Destructuring Assignment:

      let person = { name: "Alice", age: 25 };
      let { name, age } = person; // Destructure properties
    
  • Spread Operator:

      let arr1 = [1, 2, 3];
      let arr2 = [...arr1, 4, 5]; // Copy and add elements
    
  • Rest Parameters:

      function sum(...numbers) {
          return numbers.reduce((a, b) => a + b, 0);
      }
    

8. Error Handling

  • Try...Catch:

      try {
          // code that may throw an error
      } catch (error) {
          console.error(error); // Handle error
      }
    

9. DOM Manipulation

  • Select Elements:

      let element = document.getElementById("myId");
      let elements = document.querySelectorAll(".myClass");
    
  • Modify Elements:

      element.textContent = "New text"; // Change text
      element.style.color = "blue"; // Change style
    
  • Event Handling:

      element.addEventListener("click", function() {
          alert("Element clicked!");
      });
    

10. Common Array Methods

  • forEach:

      arr.forEach(item => {
          console.log(item);
      });
    
  • map:

      let doubled = arr.map(x => x * 2);
    
  • filter:

      let evens = arr.filter(x => x % 2 === 0);
    
  • reduce:

      let sum = arr.reduce((total, num) => total + num, 0);
    

Conclusion

This cheatsheet provides a quick overview of JavaScript essentials. For more complex topics or deeper learning, consider exploring specific areas in more detail. If you need any further explanation or examples, feel free to ask!

Did you find this article valuable?

Support Sarthak by becoming a sponsor. Any amount is appreciated!