Rose

rolling developer

전역플래그 g 를 사용한 정규 표현식에서 test() 함수 사용 시 true가 반환되어야 하는 조건에서 true와 false를 번갈아가며 반환시키는 문제

  • 문제

    let exp = /[a-z]/g
let arr = Array.from('abcdef')
for( e of arr.values()) 
    console.log(exp.test(e))
  
// true
// false
// true
// false
// true
// false

    위와 같은 반복문에서 정규표현식 조건에 부합함에도 불구하고 true와 false가 번갈아가며 나오는 문제가 확인되었다.

  • 원인

    전역플래그 g와 test() 함수를 함께 사용할 때, 검색에 성공할 경우 다음 검색을 위해 성공한 다음 index를 lastIndex로 저장하고 해당 인덱스부터 다음 test() 함수를 실행한다. lastIndex는 검색에 실패했을 때 0으로 초기화된다.

    위 문제에서 ‘a’ 검색에 성공했을 때 lastIndex는 1이 되고, b를 검색할 때 string 내 1번 인덱스가 없자 false를 반환한 후 lastIndex를 0으로 초기화한다. 때문에 true와 false가 반복된다.

    let exp = /[a-z]/g
let arr = Array.from('abcdef')
for( e of arr.values()){
    console.log(exp.test(e), exp.lastIndex)	//	test() 결과와 lastIndex를 함께 출력한다.
}
  
// true 1
// false 0
// true 1
// false 0
// true 1
// false 0

  • 해결

    • 전역플래그 g를 제외한다.
    • 정규표현식을 변수에 담아 반복하는 대신 /[a-z]/g 상수형태로 사용한다.
    • lastIndex를 강제로 초기화 시켜준다. exp.lastIndex = 0;

출처

  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test#%EC%A0%84%EC%97%AD_%ED%94%8C%EB%9E%98%EA%B7%B8%EC%99%80_test
  • 박용태 React 기술매니저님🤩