JavaScript 입문 : slice( ) 와 sort( ) 함수 메소드

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

로또추첨기 만드는 과정중에서 45개 숫자를 무작위로 섞고 당첨번호를 뽑을때 slice(  ) 메소드를 사용합니다. slice(  ) 메소드를 사용하여 뽑힌 숫자를 올림차순 또는 내림차순으로 정리할 때 sort(  ) 메소드를 사용하는데 이전에 잠깐 연습했던 적은 있었으나 좀 더 구체적인 사용법을 알고 가도록 하겠습니다. 

 

▒ slice(  ) 함수 메소드

 

slice( ) 메소드는 말 그대로 잘라낸다라는 의미가 있는데  이전시간 배웠던 splice(  ) 메소드하고 구분을 할 줄 알아야 합니다. splice(  ) 메소드를 사용하면 뽑아낸 숫자가 더 이상 모집단에 남아 있지 않지만 slice(  ) 메소드는 뽑아내도 모집단에 남아 있습니다. 예를 들어 확인을 하도록 하겠습니다. 

 

① slice(  )와 splice(  )의 차이

 

10개의 무작위로 섞인 모집단을 기준으로 보겠습니다. 

먼저 splice(  ) 메소드 입니다. 다음과 같은 순서로 확인해 보겠습니다.

 

인덱스 2번째에서 1개만 뺀다

인덱스 2번째에서 1개만 빼고 111을 집어 넣는다.

인덱스 2번째에서 2개를 뺀다

인덱스 2번째에서 2개를 빼고 222을 집어 넣는다. 

 

 

같은 방식으로 slice(  ) 메소드를 사용하면 기본적인 모집단의 변화는 없고 해당 인덱스만 취할수 있습니다. 

 

slice(  ) 메소드를 같이 쓰면 기존 배열을 나타내고

slice는 slice(start, end)라는 개념입니다. 

따라서 slice(0, 1)을 확인해 보면 첫번째 인덱스에서 하나만 추출하지만 모집단은 변화가 없습니다. 

로또처럼 6개를 뽑고 모집단의 변화가 없을려면 slice(0, 6)로 사용하면 됩니다. 

 

② slice(  ) 메소드 응용

 

slice(  ) 메소드에 대해 조금 더 알아 보도록 하겠습니다. 

 

맨 앞 인덱스에서 추출하는 것은 이해가 되는데 중간 부분부터는 어떻게 되는지 알아 보로록 하겠습니다 .여기서 slice의 기본을 보면 slice(start, end)라는 개념에서 start의 숫자는 포함되고 end의 숫자는 포함되지 않는다고 기억해야 합니다. 

만일 end에 -가 붙는 다면 어떤지 확인해 보겠습니다. array의 10개 숫자의 맨끝은 -1입니다. -1부터 거꾸로 내려가죠.

end에 -3을 붙혀보죠.

그러면 같은 논리로 start와 end를 전부 -를 붙힌다면 다음과 같습니다. 

 

▒ sort(  ) 함수 메소드 

 

① sort(  ) 함수 메소드 기본

 

sort 말 그대로 정렬을 시키는 메소드 입니다. 배열로 예를 다시 들겠습니다. sort(  ) 함수 메소드의 기본 format은 map(  ) 함수 메소드와 비슷합니다. 

 

sort((a, b) => {

  return a - b;

})

 

즉, a와 b를 넣고 a에서 b로 가면 오름차순, b에서 a로 가면 내림차순으로 보면 되겠네요. a, b는 임의의 문자입니다. 다른 것도 가능합니다. 

 

map(  )함수 메소드 처럼 축약해서 return값을 생략할 수 있습니다.

 

sort((a, b) => a - b);

 

 

② 원본을 유지못함

 

sort(  ) 함수 메소드를 한번 사용하고 나면 원본을 바꿉니다. 다음 내역을 보면 최초 배열에 sort( ) 메소드를 사용한 후 배열을 불러보면 원본과 다릅니다. 

 

 

이렇게 원본이 바뀌게 되면 원본에서 일부를 선택하거나 할때 해당값에 왜곡이 일어날 수 있습니다. 따라서 이런 경우 원본을 복사하는 개념으로 한번 복사하고나서 원본이 바뀔수 있는 sort(  ) 메소드를 사용합니다. 

 

예를 들어 다음은 slice() 메소드를 이용하여 원본을 복사한 개념입니다. 

이제 sort(  ) 메소드를 적용하고 다시 원본을 보겠습니다. 원본의 변화없이 정렬 기능을 화인할 수 있습니다. 

③ charCodeAt(  )

 

charCodeAt(  ) 메소드는 sort 메소드에서 문자열을 정리할 때 시용하는 메소드입니다. 색깔을 기준으로 볼게요.

즉, 오름차순시 문자열 첫번째 단어(인덱스 0)를 기준으로 정렬하는 겁니다. 내림차순으로 두 위치만 바꾸면 되겠죠.

 

④ a.localeCompare(b) : 문자열 사전식 오름 차순

 

문자열 사전순 정렬하는 방법입니다. 기존 arr에 있는 색을 기준으로 완전히 사전순으로 정렬을 하겠습니다 .

이는 한글에서도 적용이 됩니다. 

 

정렬 즉 sort(  ) 함수 메소드는 숫자든 문자열이든 해당값 만큼의 크기가 있습니다. 두 해당값을 뺏을 경우 0보다 큰 경우는 해당값 순서대로 정렬이 되는데 그냥 알고만 있는 걸로 하시죠. 

 

기억할 점은 정렬시 숫자는 a - b이고 문자열은 a.localeComp[are(b) 입니다. 

문자열의 크기를 확인하고 싶을때는 charCodeAt()을 사용합니다. 참고로 green, red, 고구려의 크기를 보면 다음과 같습니다. 

 

각 고유별 크기대로 정렬이 되겠지요.