JavaScript개념정리(1)

김현진·2020년 3월 22일
0

2020년 3월 22일 일요일

내일이면 코드스테이츠 올인원3기 개강이다.
내일부터 매일 새롭게 배우는 개념들을 간단히 이 블로그에 정리를 할 생각이다.(과연 매일 할 수 있을까...)
나는 코드스테이츠 Pre코스를 약 한달동안 수강했다.(한달동안 듣고 어느순간부터 뭔가 침체되어 있는거 같아 올인원코스를 신청했다.)
20주동안 쉽지 않은 날의 연속이 될 거 같음을 지금 이순간 느꼈다.
(여기까지만 적을려고 했는데 내용이 빈약해보여 추가적으로 적는다.)

어제 알게 된 배열메소드 sort()에 대해 정리를 해보자.
1일차때부터 다룰내용은 아니지만 정리를 안해두면 까먹을거 같아 내용을 미리 정리해둔다.

우선 MDN에서 sort() 메소드의 정의를 가져왔다.
(MDN: MDN Web Docs는 웹 기술과 웹을 더 강력하게 만들어주는 소프트웨어를 배우기 위해 끊임없이 발전하는 학습 플랫폼)
sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.
라고 MDN에 적혀있다.
반환값으로는 정렬된 배열로 반환되므로 주의가 필요

우선예제를 보면서 배우는게 쉽게 이해가 될듯 하다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);//Array ["Dec", "Feb", "Jan", "March"]

알파벳이 순서대로 정렬이 된 것을 볼 수 있다.

2번째 예제로는 숫자로 이루어진 배열이다.

let array = [1,6,3,8,4];
array.sort();
console.log(array);//[1,3,4,6,8]

정확히 오름차순으로 정렬을 된 것을 볼 수 있다.
(번외적인 이야기이지만 오름차순,내림차순을 헷갈릴수도 있어 적는다. 오름차순은 1 - 2 - 3 - 4 ..... 와 같이 값이 뒤로 갈수록 올라간다. 점점 올라가는 계단을 생각하면 까먹지 않을듯하다.)
하지만 다음예제의 결과를 본다면 당황할 수 있다.

let array2 = [6,10,2,50,42,90];
array2.sort();
console.log(array2);//[10, 2, 42, 50, 6, 90]

콘솔에 찍힌 값들이 정렬이 되지 않았음을 알 수 있었고, 그 이유를 MDN에서 가져왔다.
숫자 정렬에서 10이 2보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "10"(문자열)은 유니 코드 순서에서 "2"(문자열) 보다 앞에옵니다.
결과적으로 10은 제일앞에 1이 있기때문에 제일 앞에 온거다.
쉽게 생각해 2, 42(4), 50(5), 6, 90(9)라고 생각하면 될 듯하다.(숫자의 경우 암시적으로 문자열로 형변환 하기때문에 10은 2보다 앞에온다)
이를 해결하기위해서는 compareFunction(함수)을 사용하면된다.

let array2 = [6,10,2,50];------ 1
array2.sort(function (previous,current) { ----- 2
// 함수의 매개변수로 들어오는값이 이전값,현재값이다.
  return previous - current;-------- 3
})
console.log(array2);
VM7435:5 (4) [2, 6, 10, 50]

2번째줄에 함수의 매개변수(previous,next)로 들어오는값은
배열의 이전값/현재값으로 보면된다.
3번째줄 함수식으로 return previous - current
여기서 return 값이 음수,양수,0인지에 따라서 순서를 정한다

array2 = [6,10,2,50];
1. 6 - 10 < 0 ------ 0보다 작으므로 순서는 바뀌지 않음.
  array2 = [6,10,2,50] ----- 변화없음
2. 10 - 2 > 0 ---- 0보다 크므로 둘의순서가 바뀜.
  array2 = [6,2,10,50]
3. 10 - 50 < 0 ------ 0보다 작으므로 순서는 바뀌지 않음
  array2 = [6,2,10,50]
4. 다시 처음부터 6 - 2 < 0 0보다 크므로 둘의순서가 바뀜.
  array2 = [2,6,10,50]
.
.
.

이런식으로 sort를 이용하여 오름차순을 정리하는법을 알고 있으면 될거 같다.

profile
기록의 중요성

0개의 댓글