인프런 커뮤니티 질문&답변

simoniful님의 프로필 이미지
simoniful

작성한 질문수

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

[순수JS 2] 최근 검색어 3(풀이)

데이터 sort 적용 문의

작성

·

559

7

안녕하세요 ! 정환님 덕분에 재밋게 수강하고 있는 수강생입니다. MVC 모델을 JS로 따라하면서 최대한 꼭꼭 씹으면서 이해를 하려 여러번 돌려보고 있습니다.

다른 건 아니고 정환님이 구현하는 대로 따라했지만, HistoryListView 부분 구현 강의에서 controller를 통해  historyData를 솔팅할 때 제대로 되지 않아 정환님과는 다르게 나오더라구요.

그래서 최근 검색어가 새로 생성될 때도 순번이 다르게 나타나 계속 아래쪽에 위치하였습니다. sort 메소드 부분의 콜백을 이리저리 만져보다가 일반적인 오름차순으로 생각할 때 부등호(>)가 아닌 뺄셈 연산자(-)를 사용한 거 같아 적용하니 잘 적용되더라구요. 혹시나 일반적인 부등호로 했을 때 원래 안되는 것인가 싶어서 질문드려요.

답변 2

12

제가 한 질문은 아니지만, 저도 같은 상황이어서 관심을 갖게되었습니다.

그리고 원인을 알게 되어 도움이 될까 답변드립니다.

javascript sort 정렬 방식을 재정의할 때(숫자 오름차순이나, 내림차순 바꿀 때,) 저도 지금까지 첫번째 매개변수로 넣어준 함수가 return 으로 반환하는 값을 숫자 (음수, 양수, 0)가 나오도록 쓰고 있었는데요.  저도 부등호(비교 연산) 대신, 산술 연산식(뺄셈식)으로 변경하니 올바르게 정렬이 되었습니다.

강사님께서는 부등호를 사용하셔도 결과가 잘 나오고 있는 것으로 보여 최근에는 부등호도 되는 건가 싶었는데, 제 환경에서는 안되더라구요.

혹시 브라우저에서 javascript를 해석하는 엔진의 차이는 아닐까 싶어서 확인해보니, 맞았습니다.

크롬에서는 부등호 연산자로 sort가 되지 않았지만,

강사님께서 사용하신 파이어폭스로 해보니, sort 함수에 비교 연산, 산술 연산 둘 다 올바르게 정렬이 되었습니다.

크롬이나 크로미움 기반의 브라우저에서는 산술 연산 방식으로 하면 올바르게 나옵니다.

simoniful님의 프로필 이미지
simoniful
질문자

역시 브라우저 떄문인가 생각하고 있었는데 감사합니다! 

김정환님의 프로필 이미지
김정환
지식공유자

arcturus님 말씀이 맞네요.

검색시 부등호 연산의 결과인 불리언 값을 반환하는게 아니라 음수, 0, 양수 값이 반환되도록 해야하네요. 저도 그동안 잘못 사용해온것 같은데 지적해 주셔서 고맙습니다.

관련된 mdn 문서도 남겨놓을게요.

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

1

김정환님의 프로필 이미지
김정환
지식공유자

혹시 _sortHistory 함수를 확인해 보실 수 있을까요?

부등호와 뺄셈 그리고 캡쳐를 보고 생각해보니 아마 이런 코드일것 같다는 생각이 듭니다.

_sortHistory(history1, history2) {
  return history1.date > history2.date;
}

부등호를 사용해서 계산하려면 history2를 앞에 피연산자로 두어야 합니다.

_sortHistory(history1, history2) {
  return history2.date > history1.date;
}
simoniful님의 프로필 이미지
simoniful

작성한 질문수

질문하기