코딩테스트 연습하며 javascript 배우기 level1 - 서울에서 김서방 찾기

오늘 배울점

템플릿 리터럴(Template literal)

Array.prototype.indexOf()

 

★연습문제 출처

프로그래머스(https://programmers.co.kr/)

코딩테스트 연습 > 연습문제 > 서울에서 김서방 찾기

---

문제 설명

String형 배열 seoul의 element중 Kim의 위치 x를 찾아,

김서방은 x에 있다는 String을 반환하는 함수, solution을 완성하세요.

seoul에 Kim은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

 

제한 사항

seoul은 길이 1 이상, 1000 이하인 배열입니다.

seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다.

Kim은 반드시 seoul 안에 포함되어 있습니다.

---

🎯 나의 풀이

function solution(seoul) {

    var answer = `김서방은 ${seoul.indexOf("Kim")}에 있다`;

    return answer;

}

🔑 해설

오늘 문제도 간단하나, 그 안에 배울 것도 역시 존재한다.

 

1. 템플릿 리터럴(Template literal)

지금까지 문자열을 나타낼 때 익숙하게 사용한 `와 " 대신

키보드 자판 '1' 왼쪽에 위치한 백틱(backtick)이라 불리는 기호를 사용한다. 

(이 기호가 백틱이란 이름이었다는 것도 이번에 알게 되었다.)

var hello = `World!`;

 

가장 큰 특징은 수식을 내포하여 표현할 수 있다는 것이다.

 

먼저, 과거의 예를 들어보겠다.

var a = 10;
var b = 5;
console.log("a와 b의 합은 " + a + b + "입니다.");

하지만 템플릿 리터럴 방식을 이용하면 다음과 같이 간단하게 표현된다.

var a = 10;
var b = 5;
console.log(`a와 b의 합은 ${a + b}입니다.`);

확실히 가독성도 좋아지고 표현도 간단해진 느낌이다.

 

이번 코딩테스트 연습의 위 풀이처럼 리턴값을 가지는 메소드를 이용하는 것도 물론 가능하다.

var answer = `김서방은 ${seoul.indexOf("Kim")}에 있다`;
return answer;

 

2. Array.prototype.indexOf()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

Array.prototype.indexOf()

메소드의 인자로 넣은 값이 배열의 몇 번째에 위치했는가를 반환하는 메소드이다. (인덱스 번호는 0부터 시작)

중복값이 존재한다면 최초값의 인덱스를 반환한다.

찾고자 하는 값이 없다면 -1을 반환한다.

const array = [a, b, c, d, e];
console.log(array.indexOf("d"));	// 3

 

두 번째 인자를 가질 수도 있다. 이 때,

두 번째 인자는 검색을 시작할 "색인"이 되며 인덱스 번호 값을 입력한다.

말로 설명하면 이해가 어려울 수 있으니 예시부터 참고하자.

const array = [a, b, c, d, e];
console.log(array.indexOf("d", 2));	// 2번째 인덱스부터 "d"를 검색한다. 출력값: 3
console.log(array.indexOf("d", 3));	// 3번째 인덱스부터 "d"를 검색한다. 출력값: 3
console.log(array.indexOf("d", 4));	// 4번째 인덱스부터 "d"를 검색한다. 출력값: -1
console.log(array.indexOf("d", -3));	// 끝에서 3번째값부터 "d"를 검색한다. 출력값: 3

앞서 표현처럼 색인 기능이며,

규모가 큰 프로젝트이거나 성능이 중시되는 기능에서 사용되지 않을까 생각된다.

 

🏆 마치며

오늘도 문제는 가볍게 풀었으나 풀이는 확실하게 했다.

내용 잊지 말고, 고레벨 문제까지 착실하게 실력을 쌓아가도록 하자.