JavaScript에서 반복 작업 최적화

초보 프로그래머들은 종종 생각 없이 동일한 함수를 여러 번 호출하여 리소스를 낭비하곤 합니다.

예제를 통해 살펴보겠습니다. 어떤 경로를 포함하는 문자열이 주어졌다고 가정해 봅시다:

javascriptlet path = 'img.png';

경로가 .png 또는 .jpg 확장자로 끝나는지 확인하는 작업을 해야 한다고 합시다. 어떤 초보 프로그래머가 다음과 같은 해결책을 작성했습니다:

javascriptlet path = 'img.png';

if (path.slice(-4) === '.png' || path.slice(-4) === '.jpg') {
  console.log('+++');
} else {
  console.log('---');
}

이 해결책에 어떤 문제가 있을까요? 문제는 slice 메서드가 동일한 작업을 수행하면서 두 번 호출된다는 점입니다. 이는 분명 최적화되지 않았습니다.

최적화를 위해서는 문자열 자르기를 한 번만 수행하고, 결과를 변수에 저장한 다음, 이 변수를 이후에 사용해야 합니다:

javascriptlet path = 'img.png';
let ext  = path.slice(-4);

if (ext === '.png' || ext === '.jpg') {
  console.log('+++');
} else {
  console.log('---');
}

javascriptlet num = 123;

if (String(num)[0] === '1' || String(num)[0] === '2') {
  console.log('+++');
} else {
  console.log('---');
}

javascriptlet date = new Date();

if (date.getDay() === 0 || date.getDay() === 6) {
  console.log('weekend');
} else {
  console.log('weekday');
}

javascriptlet date = new Date();
let res;

if (date.getFullYear() >= 2020 && date.getFullYear() <= 2030) {
  res = 'year ' + date.getFullYear() + ' fits';
} else {
  res = 'year ' + date.getFullYear() + ' doesn't fit';
}

console.log(res)