오늘은 array에서 자주 쓰이는 3대장(사실 reduce가 빠지기는 했다)에 관해 알아보자!!
sort()
sort()는 기본적으로 문자를 a,b,c 등으로 정렬해준다.
array 정렬하는 법
가나다 순으로 정렬하기
array 자료는 순서개념이 있다보니 정렬도 가능합니다.
그냥 문자 가나다순으로 정렬하려면 .sort() 붙이면 되는데
숫자정렬은 이렇게 코드짜면 됩니다.
let arr2 = ['a', 'c', 'b'];
arr2.sort();
console.log(arr2); => ['a', 'b', 'c']
다나가 순으로 정렬하기
- JS에서는 문자끼리 부등호로 비교 가능하다.
ex)
'a' < 'b' => true ( b가 a보다 크다 )
sort()의 동작원리 (중요)
숫자 오름차순 정렬
var 어레이 = [7,3,5,2,40];
어레이.sort(function(a, b){
return a - b
});
console.log(어레이);
이러면 숫자순으로 잘 출력됩니다.
근데 왜 저렇게 코드짜면 숫자순 정렬이 되는지 알고싶지 않습니까?
코드 동작원리 이런걸 알면 나중에 응용도 쉽게 가능하기 때문에 sort() 동작원리를 알아봅시다.
어레이.sort(function(a, b){
return a - b
});
- a, b는 array 안의 자료들입니다.
예를 들어,a = arr[0]b = arr[1]
return 값이 양수면a를 오른쪽으로 정렬해줍니다.
return 값이 음수면b를 오른쪽으로 정렬해줍니다.
- 그리고 array 안의 자료들을 계속 뽑아서 a, b에 넣어줍니다.
이렇게 동작해서 a - b 저렇게 쓰면 숫자순 정렬이 되는 것입니다.
예를 들면 a, b가 7과 3일 경우 7 - 3 하면 4가 남습니다.
4는 양수죠? 그러면 7을 3보다 오른쪽으로 보내줍니다.
그래서 숫자 오름차순 (123순) 정렬이 완성되는 것입니다.
Q. 그럼 array 안의 숫자 내림차순 (321순) 정렬은 어떻게 할까요?
var 어레이 = [7,3,5,2,40];
어레이.sort(function(a, b){
return b - a
});
이러면 될듯요
-
return 우측이 음수면 b를 오른쪽으로 보낸다고 했습니다.
-
그럼 a, b가 7과 3일 경우 return -4 라서 3을 더 오른쪽으로 보내줍니다.
이걸 array 자료들마다 계속 해주기 때문에 결국 321순 정렬이 됩니다.
(중요) products를 가격순 정렬해봅시다
const products = [
{ id: 0, price: 70000, title: "벚꽃" },
{ id: 1, price: 1100000, title: "벚꽃2" },
{ id: 2, price: 90000, title: "벚꽃3" },
];
우리가 계속 다루고 있는 var products 라는 array가 하나 있는데
[ { }, { }, { } ] 이렇게 생겼습니다.
안에 있는 { } 이것들을 가격 낮은순으로 정렬하려면 어떻게 코드를 짜야할까요?
sort 동작원리 잘 떠올리면 됩니다.
- 정답
// a = products[0] b = products[1]
products.sort(function(a, b){
return a.price - b.price
});
console.log(products);
그래서 object 안에 있는 가격끼리 빼보라고 했더니 정렬이 진짜로 됩니다.
=> 비교군은 price로 해도, 실제로 정렬되는 대상은 배열 안의 요소들이기 때문에 이런 응용이 가능하다.
=> 나는 이거 처음에 못 풀었다. 꼭꼭 잘 알아둬서, 많은 곳에 응용하자!!
sort()는 원본을 변경한다.
원본을 변경하지 않는 함수들
array에 자주 쓰는 filter 함수
- array 자료에서 원하는 자료만 필터링하고 싶으면 filter 함수를 씁니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return a<4; // (조건식) // 참이면, 끼워주고 거짓이면 거른다.
});
-
a라고 작명한건 array 에 있던 데이터를 뜻하고
-
return 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨줍니다.
-
그리고 filter는 원본을 변형시키지 않는 고마운 함수기 때문에 새로운 "변수"에 담아써야합니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return a < 4
});
예를 들어 여러 숫자가 있는데 그 중에 4 미만인 것만 남기고 싶으면 이렇게 쓰면 됩니다.
새어레이 출력해보면 [2, 3] 이것만 들어있겠군요.
이런거 응용하면 쇼핑몰에서 "6만원 이하 상품만 보기" 이런 필터기능도 만들 수 있는 것입니다.
products라는 자료에서 6만원 이하만 필터하고 새로 html 생성하면 될 것 같군요
array에 자주 쓰는 map 함수
filter()와 달리, array 안의 자료들을 전부 변형하려면 map 함수를 씁니다.
=> 예외없이 모든 데이터들을 다 똑같이 변형한다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.map(function(a){
return 수식같은거
});
- a라고 작명한건 array 에 있던 데이터를 뜻하고
- return 우측에 변경될 수식같은걸 넣으면 됩니다.
- 그리고 filter는 원본을 변형시키지 않는 고마운 함수기 때문에 새로운 변수에 담아써야합니다.
var 어레이 = [7,3,5,2,40];
var 새어레이 = 어레이.filter(function(a){
return a * 4
});
예를 들어 array 안의 숫자들을 전부 4를 곱해주고 싶으면 이렇게 코드짜면 됩니다.
새어레이 출력해보면 [28, 12, 20, 8, 160] 이게 들어있겠군요.
map()의 유용성
글로벌 쇼핑몰 싸이트에 가보면, 화폐 단위를 변경해주는 기능이 있다.
map()을 응용하면 쇼핑몰에서 "달러 -> 원화로 변환하기" 이런 기능도 만들 수 있겠군요.
array 안에 있는 숫자들을 "달러가격"이라고 생각해봅시다. 이걸 전부 원화가격으로 변경하고 싶으면 어떻게하죠?
아마 map 써서 1000얼마 곱해주면 끝일듯요.
(참고)
고전 문법들은 원본을 변형시킨다.
sort 함수는 원본을 변형시켜버립니다.
요즘 코드짤 때 원본을 변형시키는건 나중에 힘들어질 수 있어서
array/object 자료 조작시엔 원본을 따로 복사해두고 조작하는 경우가 많습니다.
