프로그래머스 서울에서 김서방 찾기 JS ( findIndex(), indexOf(), 템플릿문자열 )

🧷 링크

문제 설명

String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

 

 

 

🙋‍♀️ 내 생각

타입이 array인 seoul안에서 "Kim"이 몇번째에 위치하는지를 찾는 문제이다.

array에서 특정 문자열의 index를 찾을 때 사용하는 메서드만 알면 풀기 쉬운 문제이다.

 

 

 

✅ 내 코드

function solution(seoul) {
  let location = seoul.findIndex(v=>v==="Kim")
  return `김서방은 ${location}에 있다` 
}

몇번째에 있는지 그 index만을 리턴하는 것이 아니라,

"김서방은 ???에 있다"라는 문자열 + 위치 + 문자열을 리턴해야하기때문에 템플릿 문자열을 사용해야겠다고 생각했다.

 

위의 코드를 템플릿 문자열을 사용하지 않고 바로 적을 수 있다.

아래와 같은 코드로 적으면 된다.

function solution(seoul) {
  return "김서방은 " + seoul.findIndex(v=>v==="Kim") +"에 있다"
}

하지만 저렇게 바로 적으면, 가독성이 떨어지고 코드의 양이 많은 경우에는 어떤 것을 의미하는지 파악하기도 어려워서 유지보수도 어려워 질 것이라고 생각했다.

 

그래서 location만 따로 변수로 빼서 맨 위와 같은 코드로 작성했다.

(코드의 가독성을 높이기 위해서)

 

우선 location이라는 변수를 선언한다.

그리고 그 값으로  seoul.findIndex(v=>v==="Kim")을 통해서 Kim이라는 값을 가지고 있는 인덱스를 seoul배열에서 찾는다.

 

---

🖥 findIndex()

findIndex()는 배열에서 특정한 값의 인덱스를 찾을 때 사용한다. 

 

매개변수로는 함수가 들어가는 것에 주의한다.

(바로 "Kim"이런 식으로 넣으면 안된다)

 

여러개의 인덱스를 찾는 것은 아니고, 일치하는 가장 첫번째 값을 리턴하고 끝난다.

(일치하는 값이 없으면 -1을 반환한다)

 

 

 

🔫 findIndex()와 indexOf()

둘다 인덱스를 찾는 메서드이기 때문에 헷갈릴 수 있어서 정리한다.

 

findIndex()는 배열에서 일치하는 인덱스를 찾을때, indexOf()는 배열,문자열에서 일치하는 인덱스를 찾을때 사용한다.

 

indexOf()

findIndex()와는 다르게 매개변수로 함수가 들어가는 것이 아니라, 찾고 싶은 값을 바로 넣는다.

    arr.indexOf(searchElement[, fromIndex])

indexOf(searchString)
indexOf(searchString, position)

 

나머지는 findIndex()와 유사하다.

해당하는 가장 첫번째 인덱스를 반환하며, 일치하는 값이 없으면 -1을 반환한다.

 

indexOf()는 array와 string 모두에서 사용할 수 있다.

 

나는 findIndex()가 생각나서 이렇게 풀었는데 indexOf를 통해서 코드를 짜도 된다.

function solution(seoul) {
  return "김서방은 " + seoul.indexOf("Kim") +"에 있다"
}

---

 seoul.findIndex(v=>v==="Kim") 를 통해서 해당하는 인덱스를 찾는데 이렇게 하면 1,2처럼 인덱스만이 리턴된다.

 

해당 문제는 "김서방은 ???에 있다" 를 전체적으로 리턴해야하기때문에 템플릿 문자열을 사용했다.

(자바스크립트는 number타입 + string타입을 하면 string으로 연결되어서 반환되는 특성이 있기 때문에 굳이 템플릿문자열을 이용하지 않고 "김서방은 " + location + "에 있다"로 적어도 된다. 하지만 위에 이미 설명한 바와 같이 코드의 가독성을 위해서 템플릿 문자열을 사용하였다)

 

 

🖥 템플릿 문자열

내장된 표현식을 허용하는 문자열 리터럴

`string text ${expression} string text`

문자열과 자바스크립트식을 섞어서 사용할 때 사용한다.

 

``백틱으로 전체를 감싸고 자바스크립트식은 ${}안에 적으면 된다.

 

처음에는 어렵게 느껴졌지만, 쓰다보면 어렵지 않고 리액트로 프로젝트를 만들때도 유용하므로 알아두어야 한다.

이렇게 코드를 짰을때 가독성이 많이 올라가므로 알아두는게 좋다.

 

 

다시 코드를 보면, 템플릿 문자열을 통해서 자바스크립트변수인 location을 문자열과 섞어서 사용한 것을 확인할 수 있다.

function solution(seoul) {
  let location = seoul.findIndex(v=>v==="Kim")
  return `김서방은 ${location}에 있다` 
}

물론 그냥 짜도 되지만 location이라는 변수에 담으면, 변수명을 통해서 어떤 의도로 코드를 짰는지 파악하기가 명확해진다.

다른 개발자들도 코드를 보고 이해하기가 더 쉬워지고 나중에 본인이 짠 코드를 다시 봐도 이해하기가 쉬워져 유지보수에 도움이 될 것이다.

 

 

 

🙋‍♀️ 내 생각

쉬운 문제여서 정말 금방 풀었다. 하지만 이 안에서도 얻을 것이 있다고 생각해서 정리해보았다.

findIndex()와 indexOf()의 공통점과 차이점을 정확하게 알게 되었다.

또한 그냥 코드를 짜는 것이 아니라, 템플릿문자열고 변수명을 사용함으로써 가독성과 유지보수에 도움이 되는 코드를 짜는 것을 연습하였다.