Ztm Javascript Cheatsheet

Ztm Javascript Cheatsheet

6 min read Jun 20, 2024
Ztm Javascript Cheatsheet

ZTM Javascript Cheatsheet

This cheat sheet will help you quickly reference common JavaScript concepts and syntax.

Data Types

  • Number: Represents numerical values, including integers and decimals.
    • Example: let age = 25;
  • String: Represents text.
    • Example: let name = "John Doe";
  • Boolean: Represents truth values, either true or false.
    • Example: let isLoggedIn = true;
  • Array: An ordered collection of values.
    • Example: let colors = ["red", "green", "blue"];
  • Object: A collection of key-value pairs.
    • Example: let user = { name: "Jane", age: 30 };

Operators

  • Arithmetic Operators:
    • + (addition)
    • - (subtraction)
    • * (multiplication)
    • / (division)
    • % (modulo - remainder after division)
    • ** (exponentiation)
  • Comparison Operators:
    • === (strict equality)
    • !== (strict inequality)
    • > (greater than)
    • < (less than)
    • >= (greater than or equal to)
    • <= (less than or equal to)
  • Logical Operators:
    • && (logical AND)
    • || (logical OR)
    • ! (logical NOT)

Control Flow

  • if/else statements: Execute different blocks of code based on a condition.
    • Example:
    if (age >= 18) {
      console.log("You are an adult.");
    } else {
      console.log("You are not an adult yet.");
    }
    
  • switch statements: Evaluate an expression against multiple cases.
    • Example:
    let day = "Monday";
    switch (day) {
      case "Monday":
        console.log("Start of the week!");
        break;
      case "Friday":
        console.log("Weekend is near!");
        break;
      default:
        console.log("Another day.");
    }
    
  • Loops: Repeat a block of code multiple times.
    • for loop: Executes a block of code a specified number of times.
    • while loop: Executes a block of code as long as a condition is true.
    • do...while loop: Executes a block of code at least once, then repeatedly as long as a condition is true.

Functions

  • Function Declaration: Defines a function with a name.
    • Example:
    function greet(name) {
      console.log("Hello, " + name + "!");
    }
    
  • Function Expression: Defines a function without a name.
    • Example:
    let greet = function(name) {
      console.log("Hello, " + name + "!");
    }
    
  • Arrow Function: A concise syntax for defining functions.
    • Example:
    const greet = (name) => {
      console.log("Hello, " + name + "!");
    }
    

Arrays

  • Accessing elements: Use square brackets [] with the index of the element (starting from 0).
    • Example: console.log(colors[0]); // Output: "red"
  • Adding elements: Use push() to add elements to the end of the array, or unshift() to add elements to the beginning.
  • Removing elements: Use pop() to remove the last element, or shift() to remove the first element.
  • Iterating through arrays: Use a for loop or the forEach() method.

Objects

  • Accessing properties: Use dot notation . or bracket notation [].
    • Example: console.log(user.name); or console.log(user["name"]);
  • Adding properties: Assign a value to a new property.
  • Deleting properties: Use the delete keyword.
    • Example: delete user.age;
  • Iterating through objects: Use a for...in loop.

DOM Manipulation

  • Selecting elements: Use methods like getElementById(), querySelector(), and querySelectorAll().
  • Modifying elements: Modify properties like innerHTML, textContent, and style.
  • Adding and removing elements: Use methods like createElement(), appendChild(), and removeChild().

Events

  • Event listeners: Attach functions to events like click, mouseover, and submit.
    • Example:
    document.getElementById("button").addEventListener("click", function() {
      console.log("Button clicked!");
    });
    

Promises

  • Represent the eventual result of an asynchronous operation.
  • Create a promise with new Promise() and use resolve() or reject() to fulfill or reject it.
  • Use .then() to handle successful results, and .catch() to handle errors.

Async/Await

  • Simplify asynchronous code using async functions and await keywords.
  • async functions always return a promise.
  • await pauses execution until a promise resolves or rejects.

Useful Resources

  • Mozilla Developer Network (MDN): Comprehensive documentation for JavaScript.
  • W3Schools: Tutorials and examples for various web technologies, including JavaScript.
  • freeCodeCamp: Interactive JavaScript courses and challenges.
  • Codecademy: Online platform for learning JavaScript and other programming languages.

This is just a basic overview of JavaScript concepts. As you continue learning, there are many more advanced features and libraries to explore.