js

사용된 개념

IIFE

이번 코드의 경우, 이벤트 핸들러내에 모든 로직이 구현되어 있으므로,

딱, 한번의 실행만 필요로 할때 사용되는 즉시실행함수를 사용 하였습니다.

또한, 불필요하게 전역으로 변수를 선언하는 것을 막기 위해 각각의 함수들도 IIFE를 사용 하였습니다.

클로저

함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 방식은 동적스코프라하고

함수를 어디서 선언하였는지에 따라 상위 스코프가 결정하는 방식은 렉시컬스코프라하

는데 자바스크립트는 렉시컬스코프 방식입니다.

내부 함수(렉시컬스코프)가 외부 함수의 변수와 함수(상위스코프)에 접근할 수 있을

때, 이 때의 렉시컬스코프를 클로저라 정의합니다.

react

즉시실행함수

formatElapsedTime 함수를 전역으로 선언하지 않기 위해서 즉시실행함수로 선언하고 함수를 리턴한 코드..

const formatElapsedTime = (() => {
  const format = n => (n < 10 ? '0' + n : n + '');
  return ({ mm, ss, ms }) => `${format(mm)}:${format(ss)}:${format(ms)}`;
})();

아래와 같이 함수를 전역으로 선언하면 setInterval()이 걸릴 때마다 (stop watch가 실행될때마다) 해당 함수를 계속 호출하기 때문에 막대한 비용 손실이 있다.

const formatElapsedTime = ({ mm, ss, ms }) => {
  const format = n => (n < 10 ? '0' + n : n + '');
  return `${format(mm)}:${format(ss)}:${format(ms)}`;
};

따라서, 최초 1회만 실행이 필요한 함수에는 즉시실행함수를 사용해야 된다.