Knowledge of JavaScript before learning React

1. Basics of JavaScript variables: var, let, and const

• var:

  • Function-scoped.

  • Can be redeclared and updated.

  • Example:

      var x = 10;
      var x = 20;  // This is allowed
      console.log(x);  // 20
    

• let:

  • Block-scoped.

  • Can be updated, but not re-declared within the same scope.

  • Example:

      let y = 10;
      y = 20;  // Allowed
      // let y = 30;  // Error: 'y' has already been declared
      console.log(y);  // 20
    

• const:

  • Block-scoped.

  • Cannot be reassigned after declaration.

  • Example:

      const z = 10;
      // z = 20;  // Error: Assignment to constant variable.
      console.log(z);  // 10
    

---

2. Hoisting of variables

• Hoisting is the behavior where JavaScript lifts variable and function declarations to the top of their scope.

  • var is hoisted and initialized with undefined.

  • let and const are hoisted but not initialized.

Example:

    console.log(a);  // undefined (var)
    var a = 10;
    console.log(b);  // Error: Cannot access 'b' before initialization
    let b = 20;

---

3. Knowledge of Functions

• Functions are reusable blocks of code that perform a task.

  • Example:

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

---

4. Arrow Functions and Higher-order Functions

• Arrow Functions: Concise syntax for writing functions.

  • Example:

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

• Higher-order Functions: Functions that take other functions as arguments or return them.

  • Example:

      function doubleNumbers(arr, callback) {
        return arr.map(callback);
      }
      const result = doubleNumbers([1, 2, 3], num => num * 2);
      console.log(result);  // [2, 4, 6]
    

---

5. Arrays and Objects

• Arrays: Used to store a collection of elements.

  • Example:

      let fruits = ["apple", "banana", "cherry"];
      console.log(fruits[0]);  // "apple"
    

• Objects: Used to store key-value pairs.

  • Example:

      const person = { name: "Alice", age: 25 };
      console.log(person.name);  // "Alice"
    

---

6. Array Destructuring

• Destructuring allows unpacking values from arrays.

  • Example:

      const [a, b] = [1, 2];
      console.log(a, b);  // 1 2
    

---

7. Object Destructuring

• Destructuring allows unpacking values from objects.

  • Example:

      const { name, age } = { name: "Alice", age: 25 };
      console.log(name, age);  // Alice 25
    

---

8. Rest Operator (...)

• Collects all remaining elements into an array.

  • Example:

      function sum(...numbers) {
        return numbers.reduce((acc, num) => acc + num, 0);
      }
      console.log(sum(1, 2, 3));  // 6
    

---

9. Spread Operator (...)

• Expands or spreads elements from an array or object.

  • Example (array):

      const arr = [1, 2, 3];
      const newArr = [...arr, 4, 5];
      console.log(newArr);  // [1, 2, 3, 4, 5]
    

  • Example (object):

      const obj = { name: "Alice" };
      const newObj = { ...obj, age: 25 };
      console.log(newObj);  // { name: "Alice", age: 25 }
    

---

10. Array Methods

• map(): Transforms each element of an array.

  • Example:

      const numbers = [1, 2, 3];
      const doubled = numbers.map(num => num * 2);
      console.log(doubled);  // [2, 4, 6]
    

• filter(): Filters elements based on a condition.

  • Example:

      const numbers = [1, 2, 3, 4];
      const even = numbers.filter(num => num % 2 === 0);
      console.log(even);  // [2, 4]
    

• reduce(): Reduces an array to a single value.

  • Example:

      const numbers = [1, 2, 3];
      const sum = numbers.reduce((acc, num) => acc + num, 0);
      console.log(sum);  // 6
    

• sort(): Sorts an array.

  • Example:

      const numbers = [3, 1, 2];
      numbers.sort();
      console.log(numbers);  // [1, 2, 3]
    

---

11. Some Event Listeners

• Event listeners handle events such as clicks, focus, etc.

• onClick: Triggered when an element is clicked.

• onBlur: Triggered when an element loses focus.

• onChange: Triggered when the value of an element changes.

• onFous: Triggered when an element gains focus.

---

12. setTimeOut() and setInterval()

• setTimeout(): Executes a function once after a specified delay.

  • Example:

      setTimeout(() => console.log("Hello after 2 seconds"), 2000);
    

• setInterval(): Executes a function repeatedly after a specified interval.

  • Example:

      setInterval(() => console.log("Hello every 2 seconds"), 2000);
    

---

13. For Asynchronous Events

• Callbacks: Functions passed as arguments to be executed later.

  • Example:

      function fetchData(callback) {
        setTimeout(() => {
          console.log("Data fetched");
          callback();
        }, 2000);
      }
      fetchData(() => console.log("Callback executed"));
    

• Callback Hell: A situation where callbacks are nested within other callbacks, making code harder to manage.

  • Example:

      fetchData(() => {
        fetchData(() => {
          fetchData(() => {
            // Callback hell
          });
        });
      });
    

• Promises: Represent the eventual completion (or failure) of an asynchronous operation.

  • Example:

      const fetchData = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
          resolve("Data fetched");
        } else {
          reject("Error fetching data");
        }
      });
      fetchData.then(response => console.log(response)).catch(error => console.log(error));
    

• Promise APIs: Methods that help with handling promises:

  • then(): Handles promise resolution.

  • promise(): Handles promise rejection.

  • finally(): Executes code after the promise has been settled.

• async & await: Simplifies working with promises.

• await pauses the function execution until the promise resolves.

  • Example:

      async function fetchData() {
        let data = await someAsyncFunction();
        console.log(data);
      }
    

---