프로그래머스라는 사이트를 아는가? 재미있는 문제드르로 가득한 사이트이다. 기본적인 알고리즘 부터 심화 알고리즘까지. 난이도 별로 0 ~ 5단계로 나누고 있다. 최근 구직 중인데, 어디를 지원하던 대부분 코딩테스트를 봐야 하기 때문에, 문제를 난이도 순서대로 최대한 풀어보고자 하였다. 224문제나 되다니. 3일이나 걸렸다.
그리고 난이도 0짜리가 이렇게 오래 걸릴지는 몰랐다. 기본적으로 나는 회사업무를 할 때, 자바스크립트의 기본적인 함수는 사용하고 있지 않다. 특히 배열의 경우 희소배열등에 대한 예외 처리가 불편 하며, includes와 indexOf의 차이.
그리고 object와 array간의 같은 함수를 사용 하지 못한다는 점이 불편하다.
object.map
간단한 문제를 내보자.
[1, 2, 3, 2, 4, 4, 4, 4, 4, 2, 3, 4] 이와 같이 숫자들로 이루어진 배열이 주어지고, 많이 나온순으로 숫자를 배열해보자.
lodash를 이용하여 풀게 되면 아래와 같다.
_( [1, 2, 3, 2, 4, 4, 4, 4, 4, 2, 3, 4] )
.groupBy().map((v, key) => ({key, count: v.length}))
.sortBy(({count}) => -count).map(({key}) => +key).value()
분명 groupBy를 하게 되면,
{
'1': [1],
'2': [2, 2, 2],
'3': [3, 3],
'4': [4, 4, 4, 4, 4, 4]
}
이러한 형태로 object가 된다. 하지만, map을 바로사용 할 수 있다. 하지만, javascript object에는 map을 사용 할 수 없다.
순수하게 자바스크립트로 풀어보면 아래와 같다.
Object.entries([1, 2, 3, 2, 4, 4, 4, 4, 4, 2, 3, 4].reduce((acc, v) => {
acc[v] = acc[v] || []
acc[v].push(v)
return acc
}, {})).map(([key, v]) => ({key, count: v.length}))
.sort(({count: a}, {count: b}) => b - a).map(({key}) => +key)
당연하게도, groupBy는 사용할 수 없으며, Object.entries를 이용하여, 배열로 변경을 해주어야 해서 코드가 꽤나 지저분해진다.
뭐 물론 위의 코드는 성능은 생각 하지 않고, 한 번에 하나의 행위만 진행 하도록 작성한 코드이기 때문에, 굳이 필요 없는 코드를 작성 했다고 느낄 수 있다. 일단 그냥 예제니까 참고 하자.
chunk
0단계라서 그런지는 몰라도, 계속 x의 배수개로 배열을 잘라 보라고 한다.
_.chunk([1, 2, 3, 2, 4, 4, 4, 4, 4, 2, 3, 4], 4)
lodash에는 그냥 있기 때문에 그냥 사용하면 된다.
일반적인 자바스크립트에서는
const a = [1, 2, 3, 2, 4, 4, 4, 4, 4, 2, 3, 4]
const chunkList = []
while (a.length) chunkList.push(a.splice(0, 4))
위처럼 splice를 사용하는게 제일 나아보이긴 하는데... splice가 a레퍼런스의 데이터를 제거 하니 주의 해야 한다.
N진수 변환
솔직히 말이다. 프런트엔드 개발자가 진수 변환을 자주 하지는 않는다. 사용한다고 하면, 주문번호같이 일련숫자를 데이터의 길이를 넘어가지 않도록 16진수 등으로 표현하는 정도 아닐까?
사용 해 본지 너무 오래 되어서 문제를 풀 때 적잖이 당황했다.
parseInt('10', 2) // 2
(10).toString(2) // '1010'
splice
이건 내가 사용해보지 않았던 방식이 있어서, 작성한다. 나의 경우에는 splice를 배열에서 특정 데이터를 지우는 정도로 사용해왔다. 하지만, 잘 못 사용하고 있었다.
splice라는 것 자체가 겹쳐 잇기라는 뜻을 가지고 있다.
splice( s, e, ...elms ) => s인덱스 부터 e개를 지운 후 elm들을 추가해준다.
const arr = [0, 1, 7, 4, 5, 6]
const removed = arr.splice(2, 1, 2, 3)
console.log(removed) // [7]
console.log(arr) // [0, 1, 2, 3, 4, 5, 6]
arr에서 s인덱스(2번째)에서 e만큼(1개)를 지우고 s인덱스 부터 2, 3을 추가 하게 된다.
sum
lodash에는 sum을 지원한다.
_.sum([1, 2, 3, 4]) // 10
하지만, 순수 자바스크립트에서는 reduce가 최선인 듯 하다.
[1, 2, 3, 4].reduce((a, b) => a + b, 0) // 10
lodash를 이용하는 경우 내가 생각한 로직에 필요한 함수들이 대부분이 있기 때문에, reduce를 이용할 필요가 없었다. 하지만, 순수한 자바스크립트로 작성하는 경우, reduce가 꽤나 도움이 된다.
every vs some
every와 some의 경우 자바스크립트와 lodash 둘 다 지원한다. 이 함수는 문제를 푸는데, 꽤 도움이 되었다.
[1, 2, 3, 4, 5, 0]에 0이 하나라도 있는가?
[1, 2, 3, 4, 5, 0].some(v => v === 0)
[1, 2, 3, 4, 5, 0]이 전부 숫자인가?
[1, 2, 3, 4, 5, 0].every(Number.isInteger)
아주 간단하게 작성 할 수 있다.
또한 반복문을 작성 하는데, 종료 조건이 배열내의 값에 의존 하게 되는 경우에도 사용 할 수있다.
이런 문제가 있다고 해보자. 배열을 오름차순으로 정렬 후 해당 값을 10보다 작은 값을 두배로 만들어라.
const arr = [-1, 0, 3, 5, 67, 1, 2, 23415, 1]
arr.sort((a, b) => a - b).some((v, i) => {
if(v > 10) return true
arr[i] *= 2
} )
console.log(arr) // [-2, 0, 2, 2, 4, 6, 10, 67, 23415]
뭐 이런 식이다.
some의 경우 return truthy를 하게 되면, 진행이 종료 된다. => 하나라도 참값이 있는지 확인하는 함수이기 때문이다.
every의 경우 return falsy를 하게 되면, 진행이 종료 된다. => 전부 참값인지 확인하는 함수이기 때문이다.
댓글
댓글 쓰기