[JavaScript] slice()와 indexOf() 활용하기

코드잇에서 자바스크립트의 코드문제를 푸는 도중, 문자열을 이용한 문제를 마주했다.

문제의 의도인 형돈의 가사만 떼어내는 것이 아닌, 원하는 멤버의 이름을 입력했을 때 그 멤버의 가사를 알 수 있도록 하는 함수를 만들어 범용성 있게 제작해보고자 한다.

함수를 만들어 해당 가사를 return하여 출력할 수 있도록 제작하였고, 전체 가사 중 일부분만 들고오기 위해 slice 함수를 사용하였다.

slice() 함수

배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용한다.

첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환한다.

let nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
nums.slice(5, 10) // 결과값 [5, 6, 7, 8, 9]

이를 이용해 처음부터 [전까지의 범위를 잘라내도록 하였다. (처음이후 [부터 ]전까지 slice 반복)

이때 [의 index를 알아내야 하였는데, 이를 indexOf() 함수를 사용하였다.

indexOf() 함수

배열과 문자열에서 특정 요소의 인덱스를 검색하는 데 사용한다.

이 메서드는 배열의 시작부터 끝까지 요소를 찾아 지정한 요소를 처음 발견한 인덱스를 반환하며, 요소가 배열에 없을 때에는 -1을 반환한다.

let fruits = ['apple', 'banana', 'cherry', 'date'];

let index = fruits.indexOf('cherry');
console.log(index); // 2 (인덱스는 0부터 시작하므로 'cherry'는 배열에서 2번째 요소에 있음)

indexOf()는 slice()처럼 시작 인덱스를 지정할 수 있는데, 이를 이용해 [를 찾은 다음 index부터 다시 [를 찾도록 하였다

lyrics.indexOf('[',start_index+1); //start_index는 `[`의 index를 말한다.
//따라서 이 코드는 배열에서 `[`으로 시작되는 index를 반복해서 찾는다.

start\_index( [ index 가리킴) 와 end_index( [ 직전 index 가리킴) 를 이용하여 slice 하고, slice 한 문자열을 담은 member_lyric에 indexOf()으로 찾고싶은 멤버의 이름이 존재한다면 반환하는 함수를 만들어 보았다.

 

전체코드

let lyrics = "[재석]너에게 나 하고 싶었던 말 고마워 미안해 함께 있어서 할 수 있어서 웃을 수 있어
[준하] 정말 고마웠어 내 손을 놓지 않아줘서 힘을 내볼게 함께 있다면 두렵지 않아
[홍철] 내가 늘 웃으니까 내가 우습나 봐 하지만 웃을 거야 날 보고 웃는 너 좋아
[명수] 자꾸만 도망치고 싶은데 저 화려한 큰 무대 위에 설 수 있을까? 자신 없어..
[하하] 지금까지 걸어온 이 길을 의심하지는 마 잘못 든 길이 때론 지도를 만들었잖아
[형돈] 혼자 걷는 이 길이 막막하겠지만 느리게 걷는 거야 천천히 도착해도 돼
[길] 술 한 잔 하자는 친구의 말도 의미 없는 인사처럼 슬프게 들릴 때 날 찾아와";

let hyungdon = null;

// 여기에 코드를 작성하세요
function find_part(member){
  let start_index = 0;
  let end_index = 0;
  let member_lyric = "";
  for(let i = 0; i<lyrics.length; i++){
    end_index = lyrics.indexOf('[',start_index+1);
    member_lyric = lyrics.slice(start_index,end_index); //멤버별 가사 추출
    if(member_lyric.indexOf(member) == 1){ //찾는 멤버의 가사라면
      return member_lyric; //가사 return
    }

    start_index = end_index;
    if(start_index == -1){
      break;
    }
    i = start_index - 1;
  }
  return `찾는 멤버의 파트가 없습니다`;
}

// 테스트 코드
console.log(find_part("형돈"));