[프로그래머스] 자릿수 더하기

역시 프로그래머스 Level 1에서 3page라 그런지 문제가 쉽네요.

이번 문제 빠르게 풀고 넘겼습니다.

 

---

해결방안

function solution(n)
{
    return `${n}`.split('').map(n => n/1).reduce((acc, cur)=> acc + cur);
}

해결방안 순서

1. 숫자 n을 문자열로 바꿔주기 : `${n}`
2. 문자열로 바꾸 숫자 n을 각 자릿수를 나누어 배열로 만들기 : split('')
3. n을 각 자리수가 문자로 되어 있는걸 숫자로 바꾸기 : map(n => n/1)
4. 배열 안의 원소를 다 더해주기 : reduce((acc, cur)=> acc + cur)

 

 

MDN Web Docs
split()  메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.

구문 : str.split([separator[, limit]])

• separator Optional
  원본 문자열을 끊어야 할 부분을 나타내는 문자열을 나타냅니다. 실제 문자열이나 정규표현식을 받을 수 있습니다. 문자열 유형의 separator가 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어집니다. separator가 생략되거나 str에 등장하지 않을 경우, 반환되는 배열은 원본 문자열을 유일한 원소로 가집니다. separator가 빈 문자열일 경우 str의 각각의 문자가 배열의 원소 하나씩으로 변환됩니다.
• limit Optional
  끊어진 문자열의 최대 개수를 나타내는 정수입니다. 이 매개변수를 전달하면 split() 메서드는 주어진 separator가 등장할 때마다 문자열을 끊지만 배열의 원소가 limit개가 되면 멈춥니다. 지정된 한계에 도달하기 전에 문자열의 끝까지 탐색했을 경우 limit개 미만의 원소가 있을 수도 있습니다. 남은 문자열은 새로운 배열에 포함되지 않습니다.

// split 예제
var myString = 'Hello World. How are you doing?';
var splits = myString.split(' ', 3);
console.log(splits); //["Hello", "World.", "How"]

// limit를 안 쓸 경우
let mystring = 'Hello';
console.log(mystring.split('')); // [ 'H', 'e', 'l', 'l', 'o' ]

 

MDN Web Docs
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

구문 : arr.map(callback(currentValue[, index[, array]])[, thisArg])

• callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.
• currentValue : 처리할 현재 요소.
• index Optional : 처리할 현재 요소의 인덱스.
• array Optional : map()을 호출한 배열.
• thisArg Optional : callback을 실행할 때 this로 사용되는 값.

// map()메서드 예제
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);

console.log(map1); // map1 = [2, 8, 18, 32]

 

MDN Web Docs
reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

reduce() 함수는 네 개의 인자를 가집니다.
1. 누산기 (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

구문 : 배열.reduce((callback)=>처리할 현재 요소, 기본값)

• callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수(acc, cur, idx, src)를 받습니다.
• 기본값 : 넣어도 되고 안 넣어도 됨

// reduce() 메서드 예제
const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue; // 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)); // 10

reduce((0, 1) => 0 + 1); // 1
reduce((1, 2) => 1 + 2); // 3
reduce((3, 3) => 3 + 3); // 6
reduce((6, 4) => 6 + 4); // 10

 

저는 이문제를 보자마자 reduce를 쓰면 딱이겠다 생각이 들었습니다.

그러나 reduce는 배열에서만 쓸 수 있어서

테스트 1 (n = 123) 으로 설명하자면

reduec쓰기전에 123을 [1, 2, 3]으로 변경해 주어야 됩니다.

 

사람이 보기에 쉽게 1, 2, 3 나누면 되잖아라고 생각하시겠지만

아쉽게도 자바스크립트에서 숫자를 한번에 저렇게 못 나누어요😓

그래서 돌고돌아 숫자를 문자로 만들어주고 배열로 만들어주고 배열 안 문자열을 다시 숫자로 만들어주는 그런 작업을 해주었습니다. 

 

1단계. 숫자 n을 문자열로 바꿔주기 : `${n}`

먼저 숫자 n을 문자열로 바꾸어 주었습니다.

문자열로 바꾸어 준 이유는 split()가 문자열에서만 사용이 가능하기 때문에 문자열로 바꾸어 주었습니다.

문자열을 바꾸는 방법은 많은데 저는 간단하게 "템플릿 리터럴"를 사용해서 바꾸어 주었습니다.

 

템플릿 리터럴 ("template strings" (템플릿 문자열))

• ES6부터 새로 도입된 문자열 표기법입니다.
• 문자열 생성 시 따옴표 대신, 백틱(`)을 사용합니다.
• ${ } 사이에 변수나 연산 등을 삽입할 수 있습니다.

템플릿 리터럴을 쓰면 문자열과 변수를 한 번에 편하게 쓸 수 있습니다.

 

테스트 1 (n = 123)
`${n}` -> '123'

테스트 2 (n = 987)
`${n}` -> '987'

 

2단계. 문자열로 바꾸 숫자n을 각 자릿수를 나누어 배열로 만들기 : split('')

위에 split()메서드 예제를 보시면

let mystring = 'Hello';
console.log(mystring.split('')); // [ 'H', 'e', 'l', 'l', 'o' ]

단어를 문자별로 나누어서 배열로 담을 수 있는데요.

1단계에서 만든 숫자를 문자열로 만든 것을 각각의 자릿수를 나누어서 배열로 만들었습니다.

 

테스트 1 (n = 123)
`${n}` -> '123'
`${n}`.split('') -> [ '1', '2', '3']

테스트 2 (n = 987)
`${n}` -> '987'
`${n}`.split('') -> [ '9', '8', '7']

 

3단계. n을 각 자리수가 문자로 되어 있는걸 숫자로 바꾸기 : map(n => n/1)

2단계에서 만든 배열을 보시면 각각의 원소가 숫자가 아닌 문자열입니다.

이걸 reduce를 하면

map(n => n/1)을 안 하고 reduce를 하면

테스트 1 (n = 123)
`${n}` -> '123'
`${n}`.split('') -> [ '1', '2', '3']
`${n}`.split('').reduce((acc, cur)=> acc + cur) -> '123'

테스트 2 (n = 987)
`${n}` -> '987'
`${n}`.split('') -> [ '9', '8', '7']
`${n}`.split('').reduce((acc, cur)=> acc + cur) -> '987'

이렇게 합쳐진 문자열이 됩니다.

그래서 배열의 원소를 문자열이 아닌 다시 숫자로 바꾸어주어야 되는데요.

저는 다양한 메소드가 있겠지만 간단하게 "문자열과 숫자열의 사칙연산"으로 숫자를 구해주었습니다.

 

[프로그래머스] 문자열을 정수로 바꾸기에 다른 사람 풀이 보기에서 알게 된 건데요.

https://development-piece.tistory.com/26

[프로그래머스] 문자열을 정수로 바꾸기

 

문자열과 숫자열의 사칙연산은 숫자가 나오게 됩니다.

• 5/1 = 5

이점을 활용해서 map() 메서드를 사용해 새로운 배열을 반환하게(문자열을 숫자로) 만들어 주었습니다.

 

테스트 1 (n = 123)
`${n}` -> '123'
`${n}`.split('') -> [ '1', '2', '3']
`${n}`.split('').map(n => n/1) -> [ 1, 2, 3 ]

테스트 2 (n = 987)
`${n}` -> '987'
`${n}`.split('') -> [ '9', '8', '7']
`${n}`.split('').map(n => n/1) -> [ 9, 8, 7 ]

 

4단계. 배열 안의 원소를 다 더해주기 : reduce((acc, cur)=> acc + cur)

마지막으로 reduce를 사용해서 배열안의 숫자를 다 더해주었습니다.

테스트 1 (n = 123)
`${n}` -> '123'
`${n}`.split('') -> [ '1', '2', '3']
`${n}`.split('').map(n => n/1) -> [ 1, 2, 3 ]
`${n}`.split('').map(n => n/1).reduce((acc, cur)=> acc + cur) -> 1+2+3 = 6

테스트 2 (n = 987)
`${n}` -> '987'
`${n}`.split('') -> [ '9', '8', '7']
`${n}`.split('').map(n => n/1) -> [ 9, 8, 7 ]
`${n}`.split('').map(n => n/1).reduce((acc, cur)=> acc + cur) -> 9+8+7 = 24

---

여기까지 프로그래머스 자릿수 더하기 해결방안에 대해 설명해보았습니다.