javascript기초(sort,map,filter 함수)

array 자료를 정렬할때 또는 원하는 값만 필터할수 있는 기능을 살펴보자.

 

 

sort()

var 어레이 = [7,3,5,2,40];
어레이.sort(function(a, b){
  return a - b
});

console.log(어레이);

return 옆에 있는 a - b는 array안의 자료들이다.

return 오른쪽 값이 양수면 a를 오른쪽으로 정렬

return 오른쪽 값이 음수면 b를 왼쪽으로 정렬

그리고 array 안의 자료들을 계속 돌려 a,b에 넣어준다.

 

ex) a와 b가 7과 3일 경우 7 - 3 = 4 이다 4는 양수이기 때문에 7(a)를 3(b)보다 오른쪽으로 보내준다.

그래서 숫자 오름차순 정렬이 완성되는 것이다.

 

sort() (내림차순)

var 어레이 = [7,3,5,2,40];

어레이.sort(function(a, b){
  return b - a 
});

 

return 오른쪽이 음수면 b를 오른쪽으로 보내기 때문에 (7,3일 경우 -4)3을 더 오른쪽으로 보내준다.

따라서 내림차순 정렬이 된다.

 

글자정렬

 

//역순 정렬

var 어레이 = ['가', '다', '나'];
어레이.sort(function(a, b){
  if (a < b) {
    return 1 
  } else {
    return -1
  }
});

console.log(어레이) // '다, 나, 가' 정렬

다음과 같이 글자를 비교해서 정렬을 할수도 있다.(자바스크립트는 문자끼리 부등호비교가 가능 ㄱ < ㄴ)

중요한건 return 우측에 뭘 집어넣냐는 것인데

 

다나가(역순정렬)을 할경우)

(1) a, b가 '가', '다' 일 경우 return 우측에 양수가 들어가야한다.

(2) a, b가 '다', '나' 일 경우 return 우측에 음수가 들어가야한다.

(3) a, b가 '가', '나' 일 경우 return 우측에 양수가 들어가야한다. 

 

 

---

filter

 

var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.filter(function(a){
  return 조건식
});



//4 미만인 숫자들만 남음
var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.filter(function(a){
  return a < 4
});

 

a로 작명한 파라미터는 array에 있는 데이터를 뜻한다.

retrun 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨준다.

filter는 원본을 변형시키지 않는다. 때문에 새로운 변수에 담아 사용한다.

 

---

map

 

//array 안에 숫자들에 4를 곱해줌
var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.map(function(a){
  return a * 4
});

array 안의 자료들을 전부 변형하려면 map 함수를 쓴다.

 

---

응용)

  var products = [
          { id : 0, price : 70000, title : 'A' },
          { id : 1, price : 50000, title : 'B' },
          { id : 2, price : 60000, title : 'C' }
   		];
        
   
   
   products.sort(function(a, b){
  		return a.price - b.price 
	});

 

다음과 같이 array안에 object가 들어있는 자료형 같은경우 그냥 a - b로 적을경우

a,b 에 { }, { } 빈 중괄호 두개를 비교할 뿐이다.

그래서 자료를 정확히 비교하고 싶다면 a와 b에 key값을 붙혀 비교해 주어야 한다.

a.price - b.price

 

---

**sort 함수는 원본을 변형시킨다.

   코드짤 때 원본을 변형시키는건 나중에 힘들어질 수 있어서 

   array/object 자료 조작시엔 원본을 따로 복사해두고 조작하는 경우가 많다.