[javascript] 자바스크립트에서 성능 최적화를 위한 코드 작성 팁

26 Dec 2023

javascript

자바스크립트로 웹 애플리케이션을 개발할 때는 성능에 대한 고려가 중요합니다. 이를 위해 효율적이고 최적화된 코드를 작성하는 것이 필요합니다. 이 글에서는 자바스크립트에서 성능을 향상시키기 위한 몇 가지 팁에 대해 알아보겠습니다.

1. 변수 선언과 스코프

변수를 선언할 때는 let 과 const 를 사용하여 블록 스코프를 유지하고, var는 피해야 합니다. 이렇게 함으로써 변수의 스코프를 최소화하고 메모리 관리를 개선할 수 있습니다.

나쁜 예:

function doSomething() {
  for (var i = 0; i < 5; i++) {
    // some code
  }
  console.log(i);
}

좋은 예:

function doSomething() {
  for (let i = 0; i < 5; i++) {
    // some code
  }
  console.log(i); // ReferenceError: i is not defined
}

2. 루프 최적화

루프를 사용할 때는 반복 횟수를 최소화하고, 불필요한 연산을 피해야 합니다. 반복문 안에서의 불필요한 계산이나 중복된 로직은 성능을 저하시킬 수 있습니다.

나쁜 예:

let sum = 0;
for (let i = 0; i < arr.length; i++) {
  sum += arr[i];
}

좋은 예:

let sum = 0;
const len = arr.length;
for (let i = 0; i < len; i++) {
  sum += arr[i];
}

3. 함수 성능 고려

자주 호출되는 함수나 반복 실행되는 함수는 성능에 영향을 미칠 수 있습니다. 이러한 함수는 캐싱을 통해 중복 실행을 방지하거나, 불필요한 재귀 호출을 줄이는 등의 방법으로 최적화해야 합니다.

나쁜 예:

function fibonacci(n) {
  if (n <= 1) {
    return n;
  } else {
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}

좋은 예:

const fibCache = {};
function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  if (fibCache[n]) {
    return fibCache[n];
  }
  fibCache[n] = fibonacci(n - 1) + fibonacci(n - 2);
  return fibCache[n];
}

위의 팁들을 준수하면 코드의 성능을 향상시키고 메모리 사용을 최적화할 수 있습니다. 자바스크립트를 사용할 때는 항상 이러한 최적화에 대해 고려하고 적용하는 것이 중요합니다.

참고: