코딩테스트 연습하며 javascript 배우기 level1 - 자연수 뒤집어 배열로 만들기

코딩테스트에 대해서는 아주 옅은 지식을 보유한 나이기에

걸음마를 떼는 느낌으로 낮은 수준의 문제들을 차근차근 풀어가 보고자 한다.

 

코딩테스트 연습 대상으로는 프로그래머스의 문제를 고르게 되었다.

주관적인 판단으로 난이도별 문제들이 시각적으로 정리가 가장 잘 되어 있는 느낌이다.

그리고 과거 수차례 입사 전형을 경험했을 때에 코딩테스트 문제가 프로그래머스 인터페이스 기반이어서 그런지

익숙함이 또 하나의 이유이다.

 

★연습문제 출처

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

코딩테스트 연습 > 연습문제 > 자연수 뒤집어 배열로 만들기

---

문제 설명

자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 

예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다.

 

제한 조건

n은 10,000,000,000이하인 자연수입니다.

 

입출력 예

nreturn

12345[5,4,3,2,1]

---

🎯 나의 풀이

function solution(n) {

    var answer = [];

    answer = n.toString().split("").reverse().map(Number);

    return answer;

}

🔑 해설

역시 고레벨 문제들과는 달리, 이 문제 자체는 이해가 쉽고 무엇을 해야할지 명확하다.

그러나 쉽다고 생각한 문제일지라도 항상 배울점은 있었다.

지금부터 solution 메소드 내부의 가운데 줄의 소스 answer의 대입 부분을 

한 줄, 한 메소드씩 풀어쓴다면 다음과 같을 것이다.

tempStr = n.toString(); 	// 1. n을 문자열로 변환
answer = tempStr.split(""); 	// 2. 문자열을 ""로 split하여 배열로 저장
answer = answer.reverse();	// 3. 배열 아이템들을 역순으로 재배열
answer = answer.map(Number);	// 4. 배열 아이템들을 숫자 형식으로 재구성

 

1. 인자 n을 문자열로 변환

Number.prototype.toString()	// 숫자 타입을 문자열로 변환하기

먼저 문제를 다시 읽어보면, solution 함수에서 받는 인자 n은 "자연수"라는 조건이 있다.

다시 말해, 이 다음 단계의 split(문자열에 사용할 수 있는 함수)을 이용하기 위해

toString() 실행이 선행해야 한다.

 

과거 ES5의 느슨한 문법에 이미 익숙한 나로서는 이 단계를 거치지 않고 바로 split을 실행했으나,

코딩테스트 채점기에서는 느닷없이 typeError가 발생하여 몹시 당황했다.

(로컬 환경에서 순수하게 js파일을 만들어 toString 과정 없이 split을 실행해보면 문제없이 수행된다.)

앞으로 Java에서처럼 JavaScript에서도 당연히 형에 관하여 신경을 써야 하겠다.

 

 

2. 문자열을 ""(빈 문자열)로 split하여 배열로 저장

String.prototype.split()	// 문자열을 인자에 넣을 문자로 구분지어 배열로 변환

split은 문자열을 배열로 바꾸어 주며, 이때 인자를 구분자로서 이용한다.

다시 말해,

n = "a,b,c,d,e"

이라는 하나의 문자열이라면

n.split(",")

을 실행했을 때

[a, b, c, d, e]

처럼 배열로 변환이 된다.

 

본 코딩테스트에서는 split의 인자로 ""(빈 문자열)이 쓸 것이기 때문에

n을 한 글자씩 나눈 배열로 변환된다.(12345 ☞ [1, 2, 3, 4, 5])

단, 이 메소드는 문자열에 쓸 수 있기 때문에 앞서 설명한 바와 같이

toString이 선행되어야 한다.

 

 

3. 배열 아이템들을 역순으로 재배열

Array.prototype.reverse()

메소드명만 보아도 간단히 이해가 된다. 현재 배열 아이템들의 순서를 역으로 변환해 준다.

 

 

4. 배열 각 아이템들을 숫자 형식으로 재구성

Array.prototype.map()

이 문제를 풀며 새롭게 알게된 기법이다.

배열 아이템을 하나씩 map을 활용해 재구성하는 메소드이다.

이 코드를 풀어쓰면 다음과 같다.

answer = [1, 2, 3, 4];

answer.map(function (num) {
	return parseInt(num, 10);	// 인자 값을 10진수 int형으로 변환한다.
});

 

이를 보다 간단히 한 줄로 축약한 것이

answer.map(Number)

이다. (다만 Number는 정확하게 float이나 지수표현도 반환한다.)

 

이 내용에 관하여는 공식 문서를 참조하는 것이 더 좋을 것이라 생각된다.

아래 페이지의 "까다로운 사례" 부분을 확인해 보자.

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

Array.prototype.map()

 

"돌아가기만 하면 된다"는 방식의 코딩은 이제 위험한 발상인 것 같다.

이제 코딩도 예쁘게 해야한다. 그래서 1~4의 과정을 하나로 묶어 한 줄로 코딩할 수 있다.

answer = n.toString().split("").reverse().map(Number);

 

 

🏆 마치며

저 마지막 코딩 한 줄을 해설하기 위해 이렇게 블로그 한 포스트가 꽉 채워지게 되었다.

코딩테스트 답만 외우면 아무 의미도 없을 것이라는 생각에

앞으로도 코드 한 줄, 메소드 하나의 의미를 이해하며 천천히 해답을 찾아가고자 한다.