replace) 특정 문자 제거 / 문자열에서 특정 문자(✨단일문자) 제거 - for, for...of(유사배열객체, 문자열), filter, reduce //✅매개변수 정규표현식(regExp)에 쓸땐 생성자로(new RegExp() ) + replace // [단일문자에서 includes, indexOf 사용할 필요❌]

문제 설명

문자열 str과 문자 letter이 매개변수로 주어집니다. str에서 letter를 제거한 문자열을 return 하도록 solution 함수를 완성해 주세요.

---

제한사항

• 1 ≤ str의 길이 ≤ 100
• letter은 길이가 1인 영문자입니다.
• str과 letter은 알파벳 대소문자로 이루어져 있습니다.
• 대문자와 소문자를 구분합니다.

---

입출력 예

str letter result

"abcdef"	"f"	"abcde"
"BCBdbe"	"B"	"Cdbe"

---

입출력 예 설명

입출력 예 #1

• "abcdef"에서 "f"를 제거한 "abcde"를 return 합니다.

입출력 예 #2

• "BCBdbe"에서 "B"를 모두 제거한 "Cdbe"를 return 합니다.

const solution = (str, letter) => {
  // do something
};

console.log(solution('abcdef', 'f')); // 'abcde'
console.log(solution('BCBdbe', 'B')); // 'Cdbe'

 

---

풀이

1번 풀이 for문

✨✨for문으로 특정 문자 제거할 땐 인덱스가 같은지 확인할 것✨✨

// 1번 풀이 for - 특정 문자 제거할땐 인덱스가 같은지 확인할것,
const solution1 = (str, letter) => {
  let src = '';
  for (let i = 0; i < str.length; i++) {
    if (str[i] !== letter) src += str[i];
  };
  return src;
};
console.log(solution1('abcdef', 'f')); // 'abcde'
console.log(solution1('BCBdbe', 'B')); // 'Cdbe'

 

 

2번 풀이 for...of

for... of로 str문자열을 돌면서 요소 c와 letter가 같은지 비교하고

같으면 res빈문자열에 하나씩 더한다.

// 2번 풀이 for...of
const solution2 = (str, letter) => {
  let res = '';
  for (const c of str) {
    if (c !== letter) res += c;
  };
  return res;
};
console.log(solution2('abcdef', 'f')); // 'abcde'
console.log(solution2('BCBdbe', 'B')); // 'Cdbe'

 

 

3번 풀이  forEach

forEach를 통해 문자열을 순회하면서

• !== : 요소c(현재문자)와 인수letter가 다를 경우, 빈문자열res에 요소c를 하나씩 더해서 반환한다.
• includes : 문자열에서 서브 문자열을 찾는 메서드. c는 이미 단일 문자이기 때문에 indexOf()를 사용할 필요가 없음. 
• indexOf : 문자의 위치(인덱스)를 반환하며, 찾지 못하면 -1을 반환. c가 문자이므로, letter가 c에 있을 수 없고, indexOf()는 단일 문자에서 사용할 필요가 없음.

즉, 문자열에서 문자를 찾을 때 찾는 문자가 단일 문자면 includes, indexOf 사용할 필요 없음.

// 3번 풀이 - forEach
const solution3 = (str, letter) => {
  let res = '';
  [...str].forEach(c => {
    if (c !== letter) res += c;
  });
  return res;
};
console.log(solution3('abcdef', 'f')); // 'abcde'
console.log(solution3('BCBdbe', 'B')); // 'Cdbe'

 

 

4번 풀이  filter

계속 filter인자를 요소, 인덱스 두 개를 써서 했는데

제거문자가 단일 문자일 땐 요소로 접근해야 한다고 한다.

인덱스로 접근할 필요가 없다.

// 4번 풀이 filter - 제거문자가 단일 문자일땐 요소로 접근!!. 인덱스로 접근할 필요없음.
const solution4 = (str, letter) => {
  return [...str].filter((c) => c !== letter).join('');
};
console.log(solution4('abcdef', 'f')); // 'abcde'
console.log(solution4('BCBdbe', 'B')); // 'Cdbe'

 

 

5번 풀이 정규표현식 regExp + replace

정규표현식을 사용할 때 매개변수를 어떻게 사용해야 하는지 조금 헤맸다.

const reg = /[letter]/g;

이렇게 작성하니 vscode에서 letter매개변수 색상이 죽어있고(잘못 씀, 오류)

고민하다 쳇지피티에게 물어보니

정규 표현식을 생성자를 사용해 동적으로 생성하는 방법을 알려주었다.

아❗❗❗❗ 크~ 하나 또 배웠다.

❗✨정규표현식에서 매개변수를 사용할 때는 new RegExp(매개변수, 'g');❗

('g'는 전역플래그)

 

❗✨문자열에서 특정문자를 모두 제외하려면 replace는 한 번만 실행되기 때문에 g플래그를 써야 함.

// 5번 풀이 정규표현식-replace(변수명, '');
const solution5 = (str, letter) => {
  // 정규표현식 리터럴 방식을 추구했으나 잘못사용함.실패
  // const reg = [letter] / g;
  // const reg = /[fB]/g;  // 정규표현식 리터럴로 f,B모두 찾는 방법


  // 매개변수를 정규표현식에 쓸때는 정규표현식생성자(동적)
  // replace는 한 번만 실행되기 때문에 전역을 뜻하는 g플래그를 써야함.
  const regExp = new RegExp(letter, 'g');
  return str.replace(regExp, '');
};
console.log(solution5('abcdef', 'f')); // 'abcde'
console.log(solution5('BCBdbe', 'B')); // 'Cdbe'

 

 

6번 풀이 reduce 

reduce는 삼항연산자로 푸는 방식과 if문으로 푸는 방식 두 가지를 적었다.

if문으로 풀 때 return과, 두 번째 인자로  초기값 설정을 항상 잊는다.

reduce! 두번째 인자 초기값 설정!!

// 6번 풀이 reduce1
const solution6 = (str, letter) => {
  return [...str].reduce((acc, cur) => cur !== letter ? acc += cur : acc, '');
};

// reduce2
const solution7 = (str, letter) => {
  return [...str].reduce((acc, cur) => {
    if (cur !== letter) acc += cur;
    return acc;
  }, '');
}
console.log(solution6('abcdef', 'f')); // 'abcde'
console.log(solution6('BCBdbe', 'B')); // 'Cdbe'

 

 

 

 

 

참고

나, 쳇지피티