기본정리 - Javascript(6)

given·2024년 10월 29일
0

FE-기본

목록 보기
11/14
post-thumbnail

Javascript 기본

시간복잡도 (빅오표기법)

O(n) : 선형시간

O(n2): 1000번

O(n3): 10000번

0. 가비지 컬렉터 → 자동 구축

1. 가비지 컬렉터

1. 메모리에서 더 이상 사용되지 않는 객체를 자동으로 감지하고, 해당 메모리를 회수하여 메모리에서 삭제해주는 시스템

2. 가비지 컬렉션

  1. 메모리가 회수 되는 과정 → 가비지 컬렉션
  2. 가비지 컬렉션을 자동으로 수행한다. ? 실행 컨텍스트가 콜스택에서 제거가 될 때
  3. 자동으로 수행이 되지 않을 경우 → 그 컨텍스트의 레코드 값이 참조 중일 때

3. 메모리가 쌓인다. 쓸데 없는 → 메모리 누수(줄줄 샌다, 낭비 된다.)

4. 클로저

  1. 내부 함수에서 외부 변수를 참조하면서 반환되는 경우
  2. 자유 변수를 참조하는 내부 함수를 반환하는 것
  3. 가비지 컬렉션의 대상이 되지 못하고 메모리 제거가 되지 못해서 메모리에 남아있는 현상 → 클로저
function outer() {
  let a = 10;
  return function inner() {
    a++;
    return a;
  };
}
const fn = outer();

console.log(fn()); // 11
console.log(fn()); // 12
console.log(fn()); // 13

function outer2() {
  let a2 = 10;
  function inner2() {
    a2++;
    return a2;
  }
  return inner2();
}
const fn2 = outer2();

console.log(fn2); // 11
console.log(fn2); // 11
// 클로저 메모리 회수법
function outer() {
  let a = 10;
  return function inner() {
    a++;
    return a;
  };
}
let fn = outer();

console.log(fn()); // 11
console.log(fn()); // 12
console.log(fn()); // 13

fn = null // 더 이상 outer() 안에 변수값을 참조하지 않음을 할당

내부 함수에서 자유 변수를 가리키고 있는 함수를 의미합니다.

→ 그러므로 주로 캡슐화가 필요한 로직에 사용합니다.

6. 클로저 사용패턴

1. 캡슐화 → 은닉화

function counter() {
  let count = 0; // 캡슐화
  return {
    inc: function () {
      count++;
      return count;
    },
    dec: function () {
      count--;
      return count;
    },
  };
}

const mycount = counter();

console.log(mycount.inc()); // 1
console.log(mycount.dec()); // 0

2. 함수 팩토리(특정 기능을 하는 함수를 고정할 때)

function makeMultiple(multipler) {
  return function (x) {
    return x * multipler;
  };
}
const double = makeMultiple(2);
const triple = makeMultiple(3);
console.log(double(5)); // 2 * 5
console.log(triple(5)); // 3 * 5

3. 비동기 프로그래밍 패턴

동기언어 → 특정 코드가 실행되는 것을 기다림

비동기적으로 코드를 실행할 수 있게 함

function fetchData(url) {
  let result;
  return function (callback) {
    setTimeout(() => {
      result = "Fetched... success";
      callback(result);
    }, 1000);
  };
}
const fetchFromNaver = fetchData("https://www.naver.com");
fetchFromNaver((data) => console.log(data)); // 1초 뒤 "Fetched... success"

4. 메모이제이션(Memoization)

// 알고리즘
// 시간복잡도가 O(n^5) > 엄청 느림
// 처음에는 느려도, 같은 요청이 다시 들어오면 빠르게!

function memoization(fn) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args); // JSON 변환 -> 문자열로 취급
    if (cache[key]) return cache[key];
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

function slowFunction(num) {
  for (let i = 0; i < 9999999999; i++);
  return num * 2;
}
const memoizedFn = memoization(slowFunction);
console.log(memoizedFn(5)); // 8초
console.log(memoizedFn(5));
console.log(memoizedFn(5));
console.log(memoizedFn(5));
profile
osanThor⚡️블로그 이전했습니다. https://blog.given-log.com

0개의 댓글