javascript 유효성 검사 함수 test(), exec(), match() 비교 정리
자바스크립트 유효성 검사 함수 test(), exec(), match() 비교 정리
사용자로부터 들어오는 데이터에 대한 유효성 검사는 백엔드뿐만 아니라 프론트엔드에서도 필요한 과정인데요.
비록 개발자 도구를 통해 값을 변조할 수는 있지만 사용자에게 빠른 응답을 줄 수 있고, 서버에 요청 부담을 줄일 수 있으며, UI/UX 측면에서의 활용성도 있기 때문입니다.
해당 포스팅에서는 javascript 단에서 데이터의 유효성 검사를 할 때 사용하는 test(), exec(), match() 함수에 대해 비교 정리해 보았습니다.
/* 위 함수 외에도 필요에 따라 matchAll(), replace(), replaceAll(), split() 등의 함수가 사용될 수 있습니다. */
javascript 정규 표현식 생성 방법
const re = /cat/;자바스크립트에서는 위 예시와 같이 '/패턴/'의 형태로 정규 표현식 객체를 생성할 수 있으며, 이를 '정규 표현식 리터럴'이라고 하는데요.
정규 표현식 리터럴의 경우 스크립트를 불러올 때 컴파일되기 때문에 변경될 일이 없는 정규 표현식 패턴의 경우 리터럴을 사용하면 성능적으로 유리하다는 장점이 있습니다.
const re = new RegExp("cat");또 다른 방법으로는 'RegExp 객체의 생성자'를 통해 정규 표현식을 생성하는 방법이 있습니다.
생성자를 통한 방법의 경우 런타임 시점에 정규 표현식이 컴파일되기 때문에 표현식 패턴이 바뀔 수 있는 경우에 문자열 변수를 통해 동적으로 정규 표현식을 사용할 수 있다는 장점이 있습니다.
정규 표현식 플래그
패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용되는데요.
플래그의 종류로는 (g, i, m, s, u, y) 6개의 플래그가 있으며, 여기서는 아래 내용과 관련되는 'g(global)' 플래그와 'i(ignore case)' 플래그에 대해서만 간략하게 살펴보겠습니다.
const re = /cat/g;먼저 'g' 플래그의 경우 전체 문자열에서 매칭되는 패턴을 찾는 기능을 하는데요.
아래 exec(), test() 함수에서 사용될 때 주의할 부분이 있습니다.
const re = /cat/i;다음으로 'i' 플래그의 경우 매칭되는 패턴을 찾을 때 대소문자를 구분하지 않는 기능을 합니다.
때문에 i 플래그를 사용하는 경우 cat, CAT, Cat 모두 매칭이 될 수 있습니다.
RegExp.exce()
const target = 'cat bat cat rat';
const re = /cat/;
re.exec(target);
// ['cat', index: 0, input: 'cat bat cat rat', groups: undefined]exec() 메서드는 인수로 전달받은 문자열에 대해 정규 표현식 패턴과 일치하는지 검색하여 그 결과를 배열로 반환하며, 일치하는 패턴이 없는 경우 null을 반환합니다.
결과로 반환되는 배열에는 정규 표현식 패턴에 일치하는 문자열이 첫 번째 요소로 담겨 있으며, 그 외 문자열에서 일치하는 항목을 찾은 'index'(0부터 시작) 값과 원래 대상 문자열인 'input' 등의 요소가 있습니다.
const target = 'cat bat cat rat';
const re = /cat/g;
re.exec(target);
// ['cat', index: 0, input: 'cat bat cat rat', groups: undefined]
re.exec(target);
// ['cat', index: 8, input: 'cat bat cat rat', groups: undefined]추가적으로 exec() 메서드는 'g' 플래그를 함께 사용하는 경우에도 일치하는 문자열을 단 하나만 반환하는데요.
하지만 일치하는 문자열이 있을 때는 자체적으로 정규 표현식 개체의 lastIndex 속성을 업데이트하기 때문에 예시와 같이 반복되어 호출되는 경우 lastIndex부터 문자열을 검색하기 때문에 다음으로 일치하는 문자를 반환하게 된다는 특징이 있습니다.
(일치하는 문자열이 없는 경우 null을 반환하면서 lastIndex는 0으로 초기화됩니다.)
RegExp.test()
const target = 'cat bat rat';
const re = /cat/;
re.test(target);
// truetest() 메서드는 인수로 전달받은 문자열에 대해 정규 표현식 패턴과 일치하는지 검색하여 그 결과를 boolean 값으로 반환합니다.
때문에 단순히 패턴에 일치하는지 여부를 확인하는 것에 목적이 있다면 exec() 함수보다 test() 함수를 사용하는 것이 더 적절할 수 있습니다.
const target = 'cat bat rat';
const re = /cat/g;
re.test(target);
// true
re.lastIndex;
// 3
re.test(target);
// false
re.lastIndex;
// 0
re.test(target);
// true
re.lastIndex;
// 3test() 메서드 역시 'g' 플래그를 함께 사용하는 경우, 일치하는 문자열이 있을 때 정규 표현식 개체의 lastIndex 속성을 업데이트하게 됩니다.
때문에 위 예시와 같이 동일한 대상에 대해 test() 메서드를 반복 사용하는 경우 'true', 'false'의 결과가 반복되어 나올 수 있다는 문제점이 있습니다.
String.match()
const target = 'cat bat cat rat';
const re = /cat/g;
target.match(re);
// (2) ['cat', 'cat']match() 메서드는 대상 문자열에 대해 메서드의 인수로 전달받은 정규 표현식 패턴과 일치하는지 검색하여 그 결과를 배열로 반환하며, 일치하는 패턴이 없는 경우 null을 반환합니다.
exec() 메서드의 경우 'g' 플래그를 지정해도 하나의 결과만을 반환하는 반면, match() 메서드의 경우 정규 표현식에 'g' 플래그를 사용하면 일치하는 모든 결과를 배열로 반환한다는 특징이 있습니다.
/* 정규 표현식에 'g' 플래그를 포함하지 않는 경우 exec() 메서드와 같은 결과를 반환합니다. */
< 참고 자료 >
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
https://velog.io/@dev-redo/Javascript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D