[JavaScript] sort() 메서드

내일배움캠프: Node.js_4기

8일차 TIL

~오늘의 수강 과목~

1. JavaScript 문법 종합반 2주차 (최원장 튜터님)

_ ES6 신문법 : let, const, 화살표 함수, 삼항연산자, 구조분해할당, 단축속성명, 전개구문, 나머지 매개변수, 템플릿 리터럴

_ 일급 객체로서의 함수

 

2. 세션:  JavaScript sort 함수 (최원장 튜터님)

_ sort의 원리, 문제점, 해결 방법

---

sort는 배열의 요소를 정리하는데 사용

정렬이 된 배열을 반환하거나, 배열 그 자체가 반환된다는 특징을 가짐

 

 

문제점

sort를 쓰면 배열의 원본이 정렬된 형태로 아예 변경

배열의 원본 메모리 주소 자체를 따라가는 것이기 때문에 원본 배열은 남지 않음

 

해결책

1. ... (Spread Operator)

스프레드 연산자를 이용하여 ...arr 배열을 펼침(사용하는 순간 대괄호를 벗어버림)

눈으로 보기에는 기존 배열과 똑같아 보이지만 저장된 배열의 주소가 다름

그때부터 sort는 이 바뀐 주소에 영향을 미치기 때문에 원본 배열 유지가 가능

 

2. slice

슬라이스 함수는 () 안에 인자를 넣어주지 않으면 전체를 반환함

arr.slice(); 를 입력하면 슬라이스는 새로운 주소값을 가진 새 배열을 반환

(= ...arr를 해서 덧대놓고 씌운 것과 같음)

 

 

sort의 원리

동작 방식을 이해해야 커스터마이징이 가능하기 때문에 원리를 아는 것은 중요하다고 튜터님께서 강조해주셨다.

 

🤨 비교함수란?

sort 의 기본 문법
array.sort([compareFunction])

해당 코드에서 compareFunction 부분의, 인자로 들어가는 콜백함수를 말함

 

const arr = [1, 2, 9, 80]
arr.sort();

// [1, 2, 80, 9] 반환

해당 배열은 sort 문법을 사용했음에도 순서대로 정렬되지 않았다

sort(); 인자에 함수를 넣지 않고 비워서 사용했기 때문 (= 비교함수를 누락)

이렇게 비교 함수가 누락된 경우에는 배열의 요소들을 문자열로 변환 후 유니코드에 맞춰 정렬하게 된다(숫자 x)

이러한 과정으로 저렇게 순서에 맞지 않는 배열이 반환된 것

 

때문에 sort 함수에 익숙하지 않은 초반에는 인자로 function 키워드를 꼭!!! 넣어야 함

굳이 화살표 함수로 표기하지 않아도 괜찮으니 오류 방지를 위해서라도 function 꼭 쓰기

arr.sort(function(a, b) {
	return a - b;}
);

// 화살표 함수 버전
arr.sort((a, b) =>  {
	return a - b;}
);

(리턴 값에 a-b가 들어가는 것은 정렬을 위해 더 큰 값을 비교하는 코드이다. 기본적인 부분이긴 하지만 난 아직 알고리즘에 익숙하지 않아서 이런 부분을 하나하나 정리해가며 체득하려고 노력 중)

(역순으로 정렬 시 b-a를 넣으면 된다)

 

튜터님께서 sort 동작 과정을 표로 정리하여 보여주셨는데 이해에 정말 큰! 도움이 됐기 때문에 나도 따라서 정리해보았다

sort의 동작 과정은 이렇게 비교의 반복이다

규칙 1. 배열에서 두 값 씩 비교를 시작할 때, 앞에 있는 값이 b, 뒤에 있는 값이 a에 들어가게 된다

규칙 2. a-b 식에서 양수가 나올 경우 그대로, 음수가 나올 경우 자리를 바꾸게 된다

 

---

 

오늘의 메모

• 알고리즘 특강을 시작했다. 해결에 필요한 코드가 떠올라도 어느 부분에 어떻게 넣어야 하는 지가 어려운 것 같다🥹 팀원 ㅎㅇ님께서 익숙해지면 해결될거라고 해주셨는데 역시 그냥 많이 풀어보는 방법밖에 없는 것 같다.
• 알고리즘 특강 덕에 알게 된건데 내일 특강도 따라가려면 기초 복습이 좀 더 필요할 것 같다 특히 반복문!!

• 매니저님께서 프로그래머스 알고리즘 문제를 깃헙에 연동할 수 있는 확장 프로그램을 알려주셨다
• TIL 업로드하고 반복문을 따로 다시 복습해봐야겠다 

 

내일의 목표

1. 점심시간 칼같이 지키기

 

앞으로의 목표

1. 알고리즘 문제 꾸준히 풀어보기
2. 앞으로도 세션 열리면 꼭 참여하기