careful when resusing Javascript RegExp objects

자바스크립트에서 정규표현식을 사용할때 global 속성이 있다.
이 속성은 아래와 같은 특징이 있다.

global 속성이 없는 경우 한번만 매치된다.

const rxTest = new RegExp('a');
console.log('aaa'.replace(rxTest, 'b'));
// baa

global 속성이 있는 경우 입력값에 전체가 매치된다.

const rxTest = new RegExp('a', 'g');
console.log('aaa'.replace(rxTest, 'b'));
// bbb

전체가 매치되다 보니 global 속성을 자주 사용하는데 이때 주의점이 필요하다.

AsIs

const rxMatchRule = /휴가|반차/g;
const someEvents = [{summary:'휴가'},{summary:'일함'},{summary:'휴가'},{summary:'휴가'},{summary:'일함'},{summary:'휴가'},{summary:'휴가'}]
someEvents.forEach(event => {
  if(rxMatchRule.test(event.summary)) {
    console.log('휴가다!!');
  }
});

rxMatchRule을 for문 내에 매번 재생성하는 것보다 재사용하고 싶었다.
그런데 global 속성 때문에 이 코드는 실제 의도와 다르게 동작한다.
매칭 되어야 할 값이 누락이 되어버린다.
원래 휴가를 5번 찾아야 하는데 여기는 3번만 찾는다.

ToBe

const rxMatchRule = /휴가|반차/;

const someEvents = [{summary:'휴가'},{summary:'일함'},{summary:'휴가'},{summary:'휴가'},{summary:'일함'},{summary:'휴가'},{summary:'휴가'}]

someEvents.forEach(event => {
  if(rxMatchRule.test(event.summary)) {
    console.log('휴가다!!');
  }
});

차이점은 딱 하나 재사용하고 싶으면 global 속성을 사용하지 말자!