[코드 최적화하기] 불필요한 계산 피하기

1. 반복문 내에서 불필요한 연산 제거

 

한번만 계산되도 되는 값이 반복문 안에 들어가 계속해서 불필요하게 계산되면 성능저하를 일으킨다.

 

예)

아래의 코드에서는 arr.length 는 한번만 계산해도 되지만 반복문안에 들어가 계속해서 계산이 된다. 

for (let i = 0; i < arr.length; i++) {
  const value = arr[i] * 2 + 1; 
  console.log(value);
}

아래와 같이 고치면 arr.length는 한번만 계산되고 꼭 필요한 계산만 반복문에서 계산이 된다.

const arrLength = arr.length; // 불필요한 계산을 미리 수행
for (let i = 0; i < arrLength; i++) {
  const value = arr[i] * 2 + 1; // 필요한 계산만 수행
  console.log(value);
}

  

✅ 불필요한 계산이 반복문안에 들어가 계속해서 수행되는 경우 제거!

 

 

2. 여러번 사용되는 계산값을 변수로 저장

 

1번과 유사하지만 반복문이 아니라도 여러번 사용되는 계산값은 변수로 할당해두고 사용

 

예)

const width = element.offsetWidth;
element.style.width = width * 2 + 'px';
element.style.marginLeft = width * 0.5 + 'px';

const width = element.offsetWidth;
const doubledWidth = width * 2; // 중복 계산을 변수에 저장
element.style.width = doubledWidth + 'px';
element.style.marginLeft = width * 0.5 + 'px'