[JavaScript] 주소에서 특정값을 제거하는 함수 만들기

sunaaa·2021년 2월 19일

QUIZ

[Replit 19-1번 : string 문자열 + slice 함수]
String의 slice()도 자주 사용되는 문자열 함수 중 하나입니다.
먼저 slice에 대한 설명을 가볍게 읽어봅시다.
(https://www.w3schools.com/jsref/jsref_slice_string.asp)
그 후 sliceCityFromAddress 함수를 구현해 주세요.

sliceCityFromAddress 함수는 address 인자를 받습니다.

address 인자에는 주소를 나타내는 string이 주어집니다.

주어진 주소가 어느 도시인지를 찾아내서, 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.

주소는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".

"도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.

예를 들어, 다음과 같은 주소가 주어졌다면;
"경기도 성남시 분당구 중앙공원로 53"
다음과 같은 값이 리턴되어야 합니다:
"경기도 분당구 중앙공원로 53"

오늘의 삽질 기록

문제 정의

: 받은 주소값에서 '시'가 들어가는 부분을 제외하고 주소를 리턴하라
(난관요소 : '도시'를 제거하라는 문제 해독이 어려웠음.)

문제 해결 방법 TIP

해결해야 할 문제를 명확히 정의할 것
우선 한국어 주석으로 만들고자 하는 순서도 내용을 적어볼 것
무엇이 예외이고 무엇이 공통적인 것인지 우선 고려한 뒤 if문 짤 것

1차 풀이 : slice 활용

slice를 활용한 아래와 같은 풀이로 일단 테스트 정답 처리는 되었음.

function sliceCityFromAddress(address) {
  let doIndex = address.indexOf("도");
  let siIndex = address.indexOf("시");
  if (doIndex !== -1) {
    return address.slice(0, doIndex+1) + address.slice(siIndex+1);
  } else {
    return address.slice(siIndex+2);
  }
}

1차 풀이의 코드로 "경기도 광명시 철산동"'이나 "서울특별시 강남구 청담동" 과 같은 address값은 처리할 수 있음.
하지만, 위의 풀이는 "전라남도 곡성군 곡성읍"과 같은 "시"를 포함하지 않는 address 값 등은 처리하지 못함.

해결해야 할 문제
1. 문제에 주소값에 "시"가 반드시 포함된다는 조건이 없음
2. "서울시 강남구 도곡동"처럼 "도"나 "시" 지역구 단위 이외에도 "도"가 한 번은 포함될 수 있음.
3. "전라남도 곡성군 곡성읍"와 같은 값을 처리할 수 없음.
=> 어떤 주소값이 들어와도 문제해결을 할 수 있도록 만들어보고자 하였음.

멘토님 풀이

function sliceCityFromAddress(address) { 
  return address
    .split(" ")
    .filter(e => e[e.length - 1] !== "시")
    .join(" ")
}

공백 기준으로 잘라 배열로 만든 뒤
배열을 순회하면서 각 요소의 끝자리 문자열이 “시”인지 확인하고
“시”를 포함하지 않는 요소들만 남긴 뒤
다시 한칸씩 띄워 문자열로 붙임

filter() 매서드

: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

4차 풀이

(3차 풀이 진행 후 코드를 개선하고자 4차 풀이를 진행하였음)

function sliceCityFromAddress(address) { 
  let doIndex = address.indexOf("도 "); // "도"로 끝남
  let siIndex = address.indexOf("시 "); // "시"로 끝남
  if (siIndex == -1) { // "시"가 없는 경우
    return address; // 주소를 그대로 내보내라
  } else if (doIndex !== -1 && siIndex !== -1) { // "도", "시" 모두 있는 경우
    return address.slice(0, doIndex+1) + address.slice(siIndex+1);
  } else { // 나머지 "도"는 없고 "시"만 있는 경우
    return address.slice(siIndex+2);
  }
}

3차 풀이

(하단의 2차 풀이 진행 후 오늘 배운 slice와 indexOf만을 활용해 풀어보고자 3차 풀이를 진행하였음)

도곡동이나 시작동과 같은 인덱스 값이 잡히는 것을 방지하기 위해, doIndex와 siIndex에 "도 ", "시 "로 뒷부분 공백을 포함해 찾도록 변경하였음.
"전라남도 곡성군 곡성읍"와 같은 값을 처리할 수 있도록 '도'는 있고 '시'는 없는 경우를 포함해 조건을 3가지로 나눠서 처리하였음.

function sliceCityFromAddress(address) {
  let doIndex = address.indexOf("도 "); // "도"로 끝남
  let siIndex = address.indexOf("시 "); // "시"로 끝남
  if (doIndex !== -1 && siIndex !== -1) { // "도", "시" 모두 있음
    return address.slice(0, doIndex+1) + address.slice(siIndex+1);
  } else if (doIndex == -1 && siIndex !== -1) { // "도"는 없고 "시"만 있음
    return address.slice(siIndex+2);
  } else {
    return address;
  }
}

2차 풀이

포함되어야 하는 기능
1. '시'로 끝나는 단어를 찾고
2. 있다면, 해당 도시명을 삭제하기 ex) 'ㅇㅇ시' 삭제

function sliceCityFromAddress(address) {
  let arr = address.split(" "); // 공백을 기준으로 쪼갠 배열을 반환한다.
  for (i = 0; i < arr.length; i++) { // 배열 인덱스 수만큼 조건문을 돌린다.
    if (arr[i][arr[i].length - 1] === "시") { // 해당 인덱스값의 마지막 글자가 "시"라면
        arr.splice(i,1); // 해당 인덱스를 가지는 배열의 값 1개를 제거한다. 
    }
  } address = arr.join(' '); // 배열로 쪼갰던 값들을 공백을 넣어 하나로 다시 연결해준다.
  return address;
}

2차 풀이 해설 : 새로 공부한 매서드 정리

split()

split() 매서드 : 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눔.
let arr = address.split(" ");
: 공백을 기준으로 쪼갠 배열을 반환한다.

splice()

splice() 매서드 : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경함.
arr.splice(i,1);
: i번째 해당 인덱스 값 1개를 제거한다.

join() VS toString()

: 처음에는 toString()을 사용했는데, 배열이 쉼표를 포함해 연결되는 문제가 발생하였음. join() 매서드를 활용하기로 함.
address = arr.join(' ');
: 배열로 쪼갰던 값들을 공백을 넣어 하나로 다시 연결해준다.(공백을 넣지 않으면 배열에 들어가있는 ", "을 포함하여 연결됨)

join() 매서드 : 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

// 예제 코드
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

toString() 매서드 : 배열을 합쳐(join) 쉼표로 구분된 각 배열 요소를 포함하는 문자열 하나를 반환함.
```
// 예제 코드
const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"
```