replace에서 함수를?!

주말을 맞이해서 밀린 공부를 하다가 replace() 메서드의 새로운 기능을 알게되어 블로그에 기록을 한다.

---

우선 MDN에서 String.prototype.replace()를 살펴보자.

replace() 구문

var newStr = str.replace(regexp | substr, newSubstr | function)

내가 처음알게된 부분은 두 번째 인자로 함수가 들어갈 수 있다는 것이다.

두 번째 인자로 함수를 사용해보기

두 번째 인자로 함수를 사용하는 예제를 다음과 같이 진행해 볼려 한다.

1. 홀수와 짝수가 공존하는 특정 문자열을 생성한다.
2. 특정 문자열에서 replace()의 첫 번째 인자로 정규 표현식으로 숫자들을 찾는다. (정규 표현식의 플래그로 글로벌이 오는 경우에는 일치하는 문자열을 찾을때 마다 함수가 호출된다.)
3. 두 번째 인자로 함수를 넣어서 그 함수를 이용해 짝수를 찾아서 @이로 바꾸는 예제이다.

---

예제

특정 문자열에서 짝수를 @로 바꾸는 예제

// 문자열 생성
const str = '1, 4, 5, 6에서 짝수를 골뱅이로 바꾸고 싶다.';

// replace()에 넣을 모든 숫자를 찾는 정규 표현식 생성
const findAllNumber = /\d/g;

// 두 번째 인자로 넣을 정규 표현식으로 찾은 숫자 중
// 짝수는 @로 바꾸고, 홀수는 놔둠
const changeEvenNumber = number => {
  // number는 string형식이기 때문에 number형식으로 바꿔준다.
  number = parseInt(number, 10);
  
  // 짝수면 @로 홀수면 그대로 리턴
  return number % 2 === 0  ? '@' : number;
};

const newStr = str.replace(findAllNumber, changeEvenNumber);

console.log(newStr) // '1, @, 5, @에서 짝수를 골뱅이로 바꾸고 싶다.'