2022-09-12 09:30

자바스크립트로 코딩테스트 준비하기

서론

많은 개발자분들이 C++나 파이썬, 자바로 알고리즘 테스트를 준비합니다.
하지만 이 경우는 백엔드 개발자가 많고, 요즘엔 많은 회사들이 프론트엔드 직군을 뽑을 때 알고리즘 테스트 언어를 자바스크립트로 제한하죠.

그래서 프론트엔드 개발자라면 실무 능력치도 키울 겸 자바스크립트로 코딩테스트를 준비하는게 좋아보입니다.
다른 언어들보다 유저가 적은 만큼 문제와 best practices를 찾기 힘든 건 사실이지만요.
오늘은 제가 자바스크립트로 알고리즘 문제를 풀어보면서 느낀 것과 배운 것을 적어보겠습니다.

자바스크립트 숫자 배열 정렬하기

const arr = [1, 20, 3, 100, undefined]
console.log(arr.sort())     // 이 때의 값은?

위 코드에서 주석에 찍히는 배열은 어떤 모습일까요?
배열의 원소를 올림차순으로 배열해 [undefined,1,3,20,100]일까요?

정답은 [1, 100, 20, 3, undefined]입니다.
자바스크립트 배열 기본 sort() 메서드는 파라미터로 콜백함수를 넣어주지 않을 경우, 배열 내 숫자를 문자열로 변환하고, UTF-16의 문자 순서대로 배열을 정렬하기 때문입니다.
그리고 모든 undefined는 배열의 뒷부분으로 정렬됩니다.

그러면 자바스크립트에서 배열을 유니코드 말고 다른 기준으로 정렬하려면 어떻게 해야할까요?
Array.sort() 의 옵셔널 파라미터인 compareFn 즉 콜백함수를 넘겨주면 됩니다.

Array.sort()는 compareFn(a,b)의 리턴값에 따라 배열의 원소를 정렬합니다.
compareFn(a,b)의 리턴값이 0보다 크면 b,a
compareFn(a,b)의 리턴값이 0보다 작으면 a,b
compareFn(a,b)의 리턴값이 0이면 a와 b의 순서를 유지합니다.
코드로 짜보면 이렇습니다.

function compareFn(a, b) {
  if (a가 b보다 앞으로 와야하는 경우) {
    return -1;
  }
  if (b가 a보다 앞으로 와야하는 경우) {
    return 1;
  }
  
  return 0;
}

이렇게 두 원소를 비교해 경우에 따라 -1과 0, 1을 반환하도록 함수를 짜면
커스터마이징된 정렬을 수행할 수 있게 됩니다.
이 때 1,0만 반환하거나 -1,0만 반환한다면 정렬이 제대로 되지 않는다는 점 유의하세요!

문자열 배열 말고 숫자 배열의 원소를 비교할 땐 위 공식을 이용해 a에서 b를 빼거나 b에서 a를 빼도록 하면 됩니다.
a-b가 음수면 a가 b보다 앞으로 오고, 양수면 뒤로 정렬되는 거죠.
(원소 중 Infinity, NaN이 없어야합니다.)

const arr = [1, 20, 3, 100, undefined];

// 1: 함수 표현식
arr.sort(function (a,b) {
  return a-b;
})

// 2: 화살표 함수
arr.sort((a, b) => a-b)

이렇게요!

← 이전