[FE - ConnecTo] DAY47 TIL👩🏻‍💻

22.09.16 수업 시간 중 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

정규표현식 test.. 왜 모든 값을 찾지 못하는 거야..?????

정규식.test(str) 문제점

오늘 Pair Programming 때, 전체 목록에서 일치하는 문자열이 있으면 그 목록을 반환하는 기능을 구현하는 과제를 해결하고 있었습니다.

해결을 하다가, 문제점을 발견했습니다.

정규표현식에서 match를 사용했을 때는 해당하는 모든 목록이 반환되는데, test를 사용했을 때는 해당하는 모든 목록이 반환되지 않는다는 것입니다.

예를 들자면 아래와 같습니다.

const regex = /such/ig;

const testValue1 = 'You are such a great student!'
const testValue2 = 'It was such a nice restaurant'

console.log(regex.test(testValue1)); // true
console.log(regex.test(testValue2)); // false

분명 저는 such를 검색했기 때문에, testValue1과 testValue2 모두 true 값이 나와야 하는데, 아래 testValue2는 false 값이 나오는 문제입니다.

이게 왜 이럴까.. 고민을 많이 하다, 우선 과제 해결을 위해 저희 조는 match를 사용하여 문제를 해결하였습니다.

🤔 그런데 이 이유가 너무나도 궁금한 것입니다..!

이것은 바로, 이게 정규 표현식에서 해당하는 모든 값을 찾기 위해 사용하는 ‘g’ flag의 lastIndex 문제 때문이었습니다.

모든 값을 찾기 위해서는 정규 표현식에서 기본적으로 현재까지 찾은 index를 내부적으로 가지고 있는데, 그게 바로 lastIndex 속성입니다.

이 속성 때문에, 위 식에서 console.log로 lastIndex 속성을 입력하면 차례로 다음과 같이 나오게 됩니다.

const regex = /such/ig;

const testValue1 = 'You are such a great student!'
const testValue2 = 'It was such a nice restaurant'

console.log(regex.test(testValue1)); // true
console.log(regex.lastIndex); // 12

console.log(regex.test(testValue2)); // false
console.log(regex.lastIndex); // 0

처음 12는 testValue1에서 such의 마지막 Index 값을 반환하게 됩니다.

그 후 두 번째 검색시에는, lastIndex 값이 12가 된 상태에서 시작하기 때문에, 12번 째 자릿수 뒤부터 검색하게 되니, return 값이 false가 도출되게 되는 것입니다.

이게 검색되는 순서가 이후에 나온다면, true 값이 나와서 문제 없이 사용할 수 있었겠지만, 저희는 코드의 오류를 보지 못하고 계속 사용하게 되므로, 나중에 더 큰 문제를 발견할 수도 있는 상황이 다가올 수도 있습니다.

저희도 lastIndex를 고려하지 않고, 코드를 짰기에, 정규식을 변수에 담아두고 그걸 재활용해서 사용했지만,

이를 해결하기 위해서는, lastIndex 값을 그 때 그 때 0으로 갱신해줘서 모든 값을 찾을 수 있도록 하면 되겠습니다.