배열 정렬 해보자! sort() filter() map() (작성중)

코딩애플 강의를 듣고 내용을 정리해봅니다.

잘못된 내용에 대한 설명은 감사히 받겠습니다.

 

 

 

배열에 대해 정렬을 하는 함수들이 있다.

 

 배열.sort(); 

🌱 문자 정렬하기

▼ 문자 정렬(오름차순)   → 가 ~ 라   가, 나, 다 에서 '가' 보다 '다', 'ㄱ' 보다 'ㅎ' 가 더 크다.

// 배열.sort() 정렬 → 문자 정렬을 해줌
let 어레이 = ['다', '나', '가', '라'];


// 문자 정렬(오름차순)
어레이.sort();
console.log('문자정렬(오름차순): ' + 어레이); // 문자정렬(오름차순): '가', '나', '다', '라'

 

▼ 문자 정렬(내림차순)   →  라 ~ 가 

// 문자 정렬(내림 차순)
어레이.sort(function(a, b){
  if(a < b){
    return 1;
  }
  
  else if(a === b){
    return 0;
  }
  
  else{
    return -1;
  }
});
console.log('문자정렬(내림차순): ' + 어레이); // 문자정렬(내림차순): '라', '다', '나', '가'

 

 

 

🌱 숫자 정렬하기

배열.sort()는 문자를 정렬해주는 함수이기 때문에
그냥 사용하면 원하는 순서로 정렬이 되지 않는다.

// 배열.sort() 정렬로 숫자 정렬을 하려면 콜백함수를 넣어야함
let 어레이2 = [3, 2, 10, 6, 9];

// 숫자를 정렬한다면 내가 원하는 순서대로 나오지 않는다.
어레이2.sort();
console.log(어레이2); // [10, 2, 3, 6, 9]

 

 

배열.sort( function( ){ } );  ← 이런 식으로 콜백함수를 넣어줘야 숫자 정렬이 정상적으로 나온다.

▼ 숫자 정렬(오름차순)

// 숫자 정렬(오름차순)
어레이2.sort(function(a, b){
  return a - b;
});
console.log(어레이2); // [2, 3, 6, 9, 10]

 

 

▼ 숫자 정렬(내림차순)

// 숫자 정렬(내림차순)
어레이2.sort(function(a, b){
  return b - a;
});
console.log(어레이2); // [10, 9, 6, 3, 2]

return a - b; 는

예를들어 a와 b는 3과 2를 비교해서
return a - b의 결과가 양수면, a를 오른쪽으로(a가 더 크니까)
return a - b의 결과가 음수면, b를 오른쪽으로(b가 더 크니까)
배열안의 모든 데이터를 비교해서 정렬해준다.

 

 

 

 

 배열.filter();

 

말 그대롭니다.

해당 배열의 데이터들 중에서 조건에 맞게 필터해서 보여주는 함수다.

 

filter() 는 신문법이라, sort() 처럼쓰듯이 하면 안된다.

filter()에 대한 코드를 변수에 담아준 뒤 사용해야 함.

// 배열.filter() -> array 자료 중 원하는 것만 필터링 해서 얻을 수 있는 함수
let 어레이3 = [7, 3, 5, 2, 40];
let filterFunction = 어레이3.filter(function(a){ // a는 해당 배열에 들어있는 데이터 하나하나임
    // return 조건식;
    return a < 4;
});

console.log('4보다 작은 데이터만 필터링 됨: ' + filterFunction);
// 4보다 작은 데이터만 필터링 됨: 3, 2

 

 

 배열.map();

 

같은 내용의 배열 자료의 단위 등을 전부 변형할 때 사용함.

// 배열.map() -> array 자료를 전부 변형할 때 사용함
// 예를들면 국가별로 화폐를 통째로 달러를 원화로 변경할때 사용함
let 어레이_머니 = [7, 3, 5, 2, 40];
let mapFunction = 어레이_머니.map(function(a){ // a는 해당 배열에 있는 데이터 하나하나를 의미함
    return a * 1000;
});
console.log(mapFunction); // [7000, 3000, 5000, 2000, 40000]

 

 

 

 

내용 더 추가하기

 

•sort()는 호출한 배열의 값을 변형하기 때문에 원본형태를 유지하지 않는다.

 

• filter() 함수는 쇼핑몰의 가격이나 원하는 상품의 카테고리 등을 필터링을 거쳐 보여줄 때 유용하다.

 

• map() 함수는 국가별 화폐 단위를 변경할 때 유용하다.

 

•filter()와 map()은 신문법이라서 호출한 배열의 값을 변형하지 않고 원본형태를 유지한다.

   원본을 건드리지 않기 때문에 변수에 담아서 사용하는 것이라고 한다.

   단, 콜백함수에 의해서 변형 될 수는 있음.