[JS Method 기초] filter 와 sort

1. filter

filter 메소드는 배열에서  조건에 맞는 요소들만 모아서 새로운 배열로 반환합니다

 

newArr = arr.filter((value,index,array) => function )

새로운 배열 = 원래 배열 . filter ( (value(현재 요소), index(현재 인덱스), array(타겟 배열 객체) ) => 함수 )

문자열 불가능

새로운 배열에 함수에 성립하는 값만 넣어준다 ! 

ex) 객체 배열에서 10 이상의 id를 가진 배열을 만들고 싶다 ? newArr = arr.filter( value => value.id >= 10)

위의 (value.id >= 10) 조건식이 true를 반환하는 요소들만 배열에 넣어주는 함수이다 !!!

 

사용 시 유의 사항 !

1. 원래 배열은 변하지 않는다 !
2. 문자열에는 사용이 불가하다 !
3. 값이 존재하지 않는 배열은 filter 함수가 실행되지 않는다 !
4. 값이 비어있는 INDEX도 호출되지 않는다 !
5. 함수가 실행된 이후 (filter 사용 이후의 줄) 에서 기존 배열에 값을 추가해도 filter는 반영되지 않는다 !

 

 

2. sort

sort 메소드는 배열 내부를 정렬해주는 함수이다 !

arr.sort([compareFunction])

내부 compareFunction이 생략되면, 전부 유니코드 값 순서대로 정렬된다 !!

문자열 정렬은 아주 간단하게 사전처럼 되는 모습.

숫자는 크기로 비교하는게 아니라 유니코드 값 순서기 때문에 4보다 1이 먼저 들어간 10과 11이 앞으로 정렬됐어용 ㅠ_ㅠ

이럴때는 sort 함수 내부에 비교 함수를 써줍니다 ~!

배열. sort ( (a, b) => b - a ) 의 예시 ! sort는 두 개의 배열 요소를 받아줍니다 !

정렬하는 함수 sort는 a 요소와 b 요소를 !

• b - a 가 양수일 경우 ! b가 앞으로 오도록 정렬하고 !
• b - a 가 음수일 경우 ! a가 앞으로 오도록 정렬하고 !
• b - a 가 0일 경우 내버려 둡니다 !

그렇게 되기 때문에 !! 위 사진에서 1,2,3,4 를 가진 배열이 1-2 를 하면 ?

-1 이죠? 그럼 2가 앞으로 오죠 ? 그렇게 싹 다 정렬하면 내림차순이죠? 반박할 수 없죠 ? 가 됩니다

간단히는 a-b 는 오름차순, b-a 는 내림차순이라고 알아두면 나쁘지 않을 수도 ?

 

더 어려운걸로 해보겠습니다 ~

보면 2차원 배열에서 각 항목은  a, b 로 가져왔죠 ?

즉 ['1' , 4] ['2' , 2] 등을 가져온겁니다. 하지만 ? 비교는 각 배열 안의 index 1을 비교했죠 ?

따라서 index 1 크기의 내림차순으로 정렬이 된 모습입니다 ~!

 

마지막으로 객체 배열을 비교 해보겠슴니당

엄청나죠? 각 a, b 항목은 name 과 age 를 가진 각 객체를 가르킵니다. 하지만 비교는 ? age로 비교해버려서

age로 내림차순 정렬된 모씁~~~~~ 너무 훌륭하죠 ? 대단하죠 ? 신기하죠 ? 내림차순이죠 ? 공부하길 잘했죠 ?