프로그래머스 글자지우기 JS ( for...of 반복가능한 객체를 간편하게 순회 )

문제 설명

문자열 my_string과 정수 배열 indices가 주어질 때, my_string에서 indices의 원소에 해당하는 인덱스의 글자를 지우고 이어 붙인 문자열을 return 하는 solution 함수를 작성해 주세요.

 

 

 

🙋‍♀️ 내 생각

indices라는 매개변수에 적힌 값과 일치하는 위치의 String 요소를 제거하는 문제이다.

 

이 문제에서는 indices의 요소들을 my_string의 요소의 인덱스에 연결하는 것이 핵심이라고 생각했다.

indices는 값자체를 이용하는 반면, my_string은 인덱스로 접근하여서 최종적인 값의 변경을 가져온다.

 

indices: 배열안의 요소 그 자체를 이용

my_string: 문자열의 인덱스를 이용하여, 문자열을 변경

 

my_string의 인덱스를 각각 하나씩 모두 접근하기 위해서 filter의 두번째 인자로 들어가는 index를 이용했다.

 

 

 

✅ 내 코드

function solution(my_string, indices) {
    return [...my_string].filter((_,i)=> !indices.includes(i) ).join('')
}

우선, filter는 배열에만 쓸 수 있기 때문에 my_string을 각각 요소들이 나뉘어진 배열로 만들어주었다.

my_string을 ...스프레드연산자를 사용하여 문자열을 각각나뉜 별개의 값으로 만든뒤에 다시 배열로 감싸서 개별적인 값들을 가지고 있는 배열을 완성한다.

 

이렇게 한 뒤에 filter()를 통해서 원하는 값만을 남긴다.

my_string의 요소를 하나하나 돌면서 검사하는데 이때 필요한 것은 my_string의 인덱스를 통한 검사이기때문에 (_,i)로 처리한다.

(요소 자체를 통해서 검사할 것이 아니기때문에 사용하지 않는 매개변수는 _언더스코어처리를 한다)

 

filter의 두번째 매개변수 i는 my_string의 인덱스를 나타낸다. 이 값을 indices의 요소와 비교한다.

indices에서 일치하는 요소는 제거해야하기때문에 !indices.includes(i)를 통해서 indices에 i가 포함되어있지 않은 값만을 남길 수 있다.

 

이렇게 my_string의 인덱스 = indices의 요소와 일치하는 부분만 filter()를 통해서 거르면 배열안에 각각 나뉘어진 값들로 나타난다.

테스트로 값을 확인해보면 아래와 같다.

 

마지막으로 join('')을 통해 값들을 하나의 문자열로 만들어준다.

 

 

 

 

 

💻  다른사람 코드중에 배울 것 1

function solution(my_string, indices) {
    var answer = '';

    for(let i = 0; i<my_string.length; i++){
        if(!indices.includes(i)){
            answer += my_string[i]
        }
    }

    return answer;
}

배열로 바뀐뒤, filter를 쓴 내 코드와 다르게 문자열은 그래도 쓰고 빈 문자열을 담은 변수를 하나 선언하고, 거기에 for문을 통해 돌면서 +로 해당하는 문자만 뽑아서 추가하는 식으로 코드를 만들었다.

 

우선, answer을 빈문자열''을 통해 초기화한다.

 

그런 다음 for문을 통해 my_string의 요소들을 일일이 돌면서 검사한다.

if를 통해 조건을 통과한 요소만 answer에 + my_string[i]를 한다.

 

!indices.includes(i)를 통해 indices에 i라는 값이 있는지를 검사한다. !가 있기때문에 i가 포함되지 않을때만 if안의 식이 실행된다.

만약 indices에 i가 포함되지 않으면 answer에 my_string[i]가 추가된다. 

이렇게 반복하면서 answer의 문자열이 완성된다.

 

 

 

 

💻  다른사람 코드중에 배울 것 2

function solution(my_string, indices) {
  let chars = [...my_string];

  for (let index of indices) {
    chars[index] = '';
  }

  return chars.join('');
}

for...of를 통해서 indices의 각 요소에 접근하고 그 요소의 값을 다시 my_string의 인덱스로 접근하여 푼 방법이다.

for...of문은 자주 써보지 않았지만 유용할 것 같아서 알아두려고 공부하였다.

 

먼저, chars라는 변수에 my_string을 풀어서 배열에 담는다.

그런 다음, for...of문을 이용한다.

 

 

🔫 for...of

반복문은 iterable 객체의 요소를 처음부터 끝까지 순차적으로 순회하면서 반복 작업을 수행

for...of 반복문은 ES6(ECMAScript 2015)에서 도입된 기능

반복 가능한 객체를 간편하게 순회

for (let element of iterable) {
  // 반복 작업 수행
}

 

iterable: 반복 가능한 객체(예: 배열, 문자열, Set, Map 등)

element: 각 요소의 값이 할당되는 변수

 

👍장점

for...of 반복문을 사용하면 반복 과정에서 인덱스를 직접 다룰 필요가 없다

간결하고 가독성이 좋은 코드 작성가능

 

예시> 

const arr = [1, 2, 3, 4, 5];

for (let num of arr) {
  console.log(num);
}

1
2
3
4
5

➡️ 배열 arr의 각 요소를 순서대로 출력한다.

 

 

 

이제 다시 문제 풀이로 돌아가면,

for (let index of indices) {
    chars[index] = '';
  }

 

indices 배열의 각 요소를 순회하면서 반복문을 실행한다. 

indices의 배열의 각 요소를 차례대로 가져오는데, let을 통해 그 요소를 index라고 부르자고 한다.

('indices의 요소를 돌면서 그 값을 index라고 부르자'라는 의미로 해석할 수 있다.)

 

반복문 내부에서는 chars[index]=''를 통해서 index에 해당하는 요소(indices의 요소 하나)를 chars의 인덱스로 사용하고 그 인덱스를 지닌 값은 빈문자열''로 값을 변경한다. 이렇게 해서 해당 인덱스의 값은 삭제된다.

 

모든 indices의 요소에 대해 반복문을 실행한다.

배열에 값이 담겨있기때문에 join('')을 통해서 다시 하나의 문자열로 만든다.

 

 

 

🙋‍♀️ 내 생각

for of를 통해서 반복가능한 객체를 간편하게 순회하는 방법을 공부하였다. 일일이 인덱스의 범위를 지정하지 않아도 돼서 편했다. 앞으로 문제를 풀때 for of로 코드를 만들어보는 연습도 많이 해봐야겠다. 편하기도 하고 코드의 가독성도 높아지는 것도 좋은것 같다.