My cheat-shiet Javascript

1. Destructuring Magic

• Cái j mà unpack values from arrays or objects, thực tế mình ít dùng cái này.

    const person = { name: 'Alice’, age: 30 };
    const { name, age } = person;
    console.log(name); // Output: Alice
    console.log(age); // Output: 30
  
    #Mình toàn gọi person.name luôn chứ chả dùng cái trên.
    // cái này thì tiện nè.
    const [year, month, day] = date
  
    console.log(year) // 2014
    console.log(month) // 17
    console.log(day) // 07
  

2. Spread

• Giúp create copies of arrays and merge objects. Hmm, cái này nhìn hịn mà mình ít sài vcl.

    const originalArray = [1, 2, 3];
    const clonedArray = [...originalArray];
    console.log(clonedArray); // Output: [1, 2, 3]
    // Merging
    const obj1 = { a: 1, b: 2 };
    const obj2 = { b: 3, c: 4 };
    const merged = { ...obj1, ...obj2 };
    console.log(merged); // Output: { a: 1, b: 3, c: 4 }
  
    // Thời ngày xưa...
    // Create an Array
    const tools = ['hammer', 'screwdriver']
    const otherTools = ['wrench', 'saw']
    // Concatenate tools and otherTools together
    const allTools = tools.concat(otherTools)
  
    console.log(allTools); //["hammer","screwdriver","wrench","saw"]
  

3. map()

• Nghe nói là vũ khí bí mật giúp tranforming data, thấy cũng tiện mà trước giờ mình cũng ít sài, chắc tại mình gà qá.

    const numbers = [1, 2, 3];
    const squared = numbers.map(num => num * num);
    console.log(squared); // Output: [1, 4, 9]
  

4. Short-circuit

• Sử dụng toán tử && and || rút gọn. Ez.

    const name = user.name || 'Guest';
    console.log(name); // Output: Guest
  

5. Arrow function

• Nhìn thì khá ngon, cũng muốn dùng cơ mà nhìn vào source biết đéo được dùng rồi.

    const greet = name => `Hello, ${name}!`;
    console.log(greet(’Alice’)); // Output: Hello, Alice!
  

6. Optional chaining (?.)

• Giúp tránh mấy trường hợp lỗi khi xử lý các thuộc tính lồng nhau. Ngon, mà mình thường quên nên không sử dụng mấy.

    const user = { info: { name: 'Alice' } };
    console.log(user.info?.age); // Output: undefined
  

7. Cool console tricks

• Nghe là biết cool rồi, cơ mà cũng ít sài. Chắc phải setting snippet chứ chả cool tí nào khi phải viết tay :))

    const users = [{ name: 'Alice' }, { name: 'Bob' }];
    console.table(users);
    console.groupCollapsed(’Details’);
    console.log(’Name: Alice’);
    console.log(’Age: 30’);
    console.groupEnd();
  

8. Fetch with async/await

• Cái này ai cũng biết mà thôi viết vào cho post nó dài chút.

    async function fetchData() {
      try {
        const response = await fetch('url');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }
    }
  
    fetchData();
  

9. Closures Unleashed

• Chưa hình dung sẽ dùng trong tình huống nào.

    function createCounter() {
      let count = 0;
      return function () {
        count++;
        console.log(count);
      };
    }
  
    const counter = createCounter();
    counter(); // Output: 1
    counter(); // Output: 2
  

10. Memoization for Speed

• Méo hiểu là nó đang làm cái gì. để hồi test thử.

    function fibonacci(n, memo = {}) {
      if (n in memo) return memo[n];
      if (n <= 2) return 1;
      memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
      return memo[n];
    }
  
    console.log(fibonacci(10)); // Output: 55
  

11. Hail the Intersection Observer: Effortless Scroll Effects

• Chắc là ngon, chưa test qua.

• Use the Intersection Observer API for lazy loading and scroll animations

    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('fade-in');
          observer.unobserve(entry.target);
        }
      });
    });
  
    const elements = document.querySelectorAll('.animate');
    elements.forEach(element => observer.observe(element));
  

12. Reduce + spread

• Cũng tiện

    const array1 = [1, 2, 3, 4];
  
    // 0 + 1 + 2 + 3 + 4
    const initialValue = 0;
  
    function sum(...ary) {
        return array1.reduce(
          (accumulator, currentValue) => accumulator + currentValue,
          initialValue,
        );
    }
  
    sum(...array1) // 10