sort, map, filter 함수

코쓱타드·2023년 3월 27일
0
post-thumbnail

배열에 자주 쓰이는 함수에는 세가지가 있다.
1. sort() : 배열의 자료를 문자 순으로 정렬해준다. 그리고 원본 배열을 수정해버린다.

let arr = ["a","j","f","c",];
arr.sort(); // ["a", "c", "f", "j"] 
console.log(arr); // ["a", "c", "f", "j"] 이처럼 원본을 수정한다.
// 문자를 역순으로 정렬
arr.sort(function(a,b){ // 문자에선 순서상 뒤에 오는 문자가 더 큽니다. 
	if(a < b){ 
    	return 1; 
    } else if (a > b){
    	return -1;
    } else {
    	return 0;
    }
})

✍️return 우측 값이 양수이면 a가 우측으로감
✍️return 우측 값이 음수이면 b가 우측으로감
1. a를 "a", b를 "j"라고 가정해보자. 역순이 되려면 "a"가 우측으로 가야한다. 그러면 return은 양수 값을 출력하면 된다.
2. a를 "j", b를 "f"라고 가정해보자. 역순이 되려면 "f"가 우측으로 가야한다. 그러면 return은 음수 값을 출력하면 된다.
위의 동작 방식으로 배열의 모든 자료를 판별한다.

let numArr = [7, 6, 3, 19, 46, 15];
numArr.sort(); // [15, 19, 3, 46, 6, 7] 
// 위에서 설명했듯이 sort함수는 문자 순으로 정렬해주기 때문에 이런 결과가 나온 것이다.
// 숫자 자료를 갖고 있는 배열 정렬
numArr.sort(function(a,b){
	return a - b;
});

<동작 원리>
✍️a-b가 양수면 a를 오른쪽으로 보낸다.(a>b이면 양수가 나옴)
✍️a-b가 음수면 b를 오른쪽으로 보낸다.(a<b이면 음수가 나옴)
=결국 가장 큰 숫자가 제일 오른쪽에 위치하고 제일 작은 숫자가 가장 왼쪽에 위치하게 되므로 오름차순으로 정렬되는 것이다.

<연습>
Q.버튼을 누르면 배열 안에 있는 오브젝트의 가격 순으로 정렬해보자.

let products= [
	{price: 1562000, title:}
	{price: 1215000, title:}
	{price: 2865000, title:}
]
// id가 price인 버튼이 있다고 가정한다.
$('#price').click(function(){  
	products.sort(function(a, b){
		return a.price - b.price // a와 b는 각각의 obj를 의미하기 때문에 price를 뽑아내려면 .price를 해주면 된다. 
	})
})

2. filter() : 배열의 자료에서 원하는 것만 골라준다. 그리고 원본 배열을 수정하지 않는다.

let randomNum = [30, 50, 23, 2, 89, 96];

let newRandomArr = randomNum.filter(function(a){
	return a < 36  //조건식(어떤 자료를 남길건지)
});
// filter() 결과는 변수에 저장해서 써야한다. 
console.log(newRandomArr); // [30, 23, 2]

3. map() : 배열의 자료를 전부 변형시킨다.

let randomNum = [30, 50, 23, 2, 89, 96];

let newRandomArr = randomNum.map(function(a){
	return a + 4  // 각각의 요소에 +4를 해서 배열을 변경해준다. 
});
console.log(newRandomArr);//[34, 54, 27, 6, 93, 100]

<map 함수의 사용처>

  • 각국의 통화로 가격을 표시하고 싶을 때
    (위의 예시말고도 다양한 사용처가 있다고 합니다!)
let gamePrice = [12, 23, 65]; // 배열안의 자료들이 달러라고 가정하겠습니다.
let koreaGamePrice = gamePrice.map(function(a){
	return a * 1100(환율) + '원' 	
});
console.log(koreaGamePrice); // ['12000원', '230000원', '650000원']

출처. 코딩애플

profile
개발자의 길 from 2022.12

0개의 댓글