자바스크립트 비동기 컨텍스트 메모리 관리: 컨텍스트 생명주기 최적화

            function fetchData(url) {
  const largeData = new Array(1000000).fill('some data'); // Simulate a large dataset

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulate fetching data from an API
      const result = `Data from ${url}`;  // Uses url from the outer scope
      resolve(result);
    }, 1000);
  });
}

async function processData() {
  const data = await fetchData('https://example.com/api/data');
  console.log(data);
  // largeData is still in scope here, even if it's not used directly
}

processData();
            

              
                Copy
              
            
          

            function processUserData(user) {
  const userData = { ...user, extraData: 'some extra info' }; // Create a new object
  setTimeout(() => {
    console.log(`Processing user: ${userData.name}`); // Access userData
  }, 1000);
}
            

              
                Copy
              
            
          

            function processUserData(user) {
  const userData = { ...user, extraData: 'some extra info' };
  const userName = userData.name; // Extract the name
  setTimeout(() => {
    console.log(`Processing user: ${userName}`); // Access only userName
  }, 1000);
}
            

              
                Copy
              
            
          

            class MyObject {
  constructor() {
    this.eventListeners = [];
  }

  addListener(listener) {
    this.eventListeners.push(listener);
  }

  removeListener(listener) {
    this.eventListeners = this.eventListeners.filter(l => l !== listener);
  }

  doSomethingAsync() {
    const listener = () => {
      console.log('Something happened!');
      this.doSomethingElse(); // Circular reference: listener references this
    };

    this.addListener(listener);

    setTimeout(() => {
      this.removeListener(listener);
    }, 1000);
  }

  doSomethingElse() {
    console.log('Doing something else.');
  }
}

const myObject = new MyObject();
myObject.doSomethingAsync();
            

              
                Copy
              
            
          

            class MyObject {
  constructor() {
    this.eventListeners = [];
  }

  addListener(listener) {
    this.eventListeners.push(listener);
  }

  removeListener(listener) {
    this.eventListeners = this.eventListeners.filter(l => l !== listener);
  }

  doSomethingAsync() {
    let listener = () => {
      console.log('Something happened!');
      this.doSomethingElse();
      listener = null; // Break the circular reference
    };

    this.addListener(listener);

    setTimeout(() => {
      this.removeListener(listener);
    }, 1000);
  }

  doSomethingElse() {
    console.log('Doing something else.');
  }
}

const myObject = new MyObject();
myObject.doSomethingAsync();
            

              
                Copy
              
            
          

            class MyObject {
  constructor() {
    this.eventListeners = [];
  }

  addListener(listener) {
    this.eventListeners.push(listener);
  }

  removeListener(listener) {
    this.eventListeners = this.eventListeners.filter(l => l !== listener);
  }

  doSomethingAsync() {
    const self = this; // Capture 'this' in a separate variable
    const listener = () => {
      console.log('Something happened!');
      self.doSomethingElse(); // Use the captured 'self'
    };

    this.addListener(listener);

    setTimeout(() => {
      this.removeListener(listener);
    }, 1000);
  }

  doSomethingElse() {
    console.log('Doing something else.');
  }
}

const myObject = new MyObject();
myObject.doSomethingAsync();
            

              
                Copy
              
            
          

            const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked!');
}

button.addEventListener('click', handleClick);

// PROBLEM: The event listener is never removed!
            

              
                Copy
              
            
          

            const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked!');
  button.removeEventListener('click', handleClick); // Remove the listener
}

button.addEventListener('click', handleClick);

// Alternatively, remove the listener after a certain condition:

setTimeout(() => {
    button.removeEventListener('click', handleClick);
}, 5000);
            

              
                Copy
              
            
          

            const registry = new FinalizationRegistry(heldValue => {
  console.log(`Object with value ${heldValue} was garbage collected.`);
});

let obj = { data: 'some data' };
const weakRef = new WeakRef(obj);

registry.register(obj, obj.data); // Register the object with the registry

obj = null; // Remove the strong reference to the object

// At some point in the future, the garbage collector will reclaim the memory used by the object,
// and the callback in the FinalizationRegistry will be executed.
            

              
                Copy
              
            
          

            // Global variable
let myLargeArray = new Array(1000000).fill('some data');

function processData() {
  // ... use myLargeArray
}

processData();
            

              
                Copy
              
            
          

            function processData() {
  // Local variable
  const myLargeArray = new Array(1000000).fill('some data');
  // ... use myLargeArray
}

processData();
            

              
                Copy
              
            
          

            const fs = require('fs');

async function readFileAsync(filePath) {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, (err, data) => {
      if (err) {
        reject(err);
        return;
      }
      resolve(data);
    });
  });
}

async function processFile(filePath) {
  let fileHandle = null;
  try {
    fileHandle = await fs.promises.open(filePath, 'r');
    const data = await readFileAsync(filePath);  // Or fileHandle.readFile()
    console.log(data.toString());
  } catch (error) {
    console.error('Error reading file:', error);
  } finally {
    if (fileHandle) {
      await fileHandle.close(); // Explicitly close the file handle
      console.log('File handle closed.');
    }
  }
}

processFile('myFile.txt');
            

              
                Copy
              
            
          

            async function* generateData() {
  for (let i = 0; i < 100; i++) {
    await new Promise(resolve => setTimeout(resolve, 10)); // Simulate asynchronous operation
    yield i;
  }
}

async function processData() {
  for await (const item of generateData()) {
    console.log(item);
  }
}

processData();
            

              
                Copy
              
            
          

            function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

function handleInputChange(event) {
  console.log('Input changed:', event.target.value);
  // Perform asynchronous operation here (e.g., search API call)
}

const debouncedHandleInputChange = debounce(handleInputChange, 300); // Debounce for 300ms

const inputElement = document.getElementById('myInput');
inputElement.addEventListener('input', debouncedHandleInputChange);
            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true; // Track component mount state

    async function fetchData() {
      const response = await fetch('https://example.com/api/data');
      const result = await response.json();
      if (isMounted) {
        setData(result);
      }
    }

    fetchData();

    return () => {
      // Cleanup function
      isMounted = false; // Prevent state updates on unmounted component
      // Cancel any pending asynchronous operations here
    };
  }, []); // Empty dependency array means this effect runs only once on mount

  return (
    

      {data ? 
Data: {data.value}
 : 
Loading...
}
    
  );
}

export default MyComponent;
            

              
                Copy