[Javascript] 배열 변형

1. filter

기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환

let arr1 = [
  {name: "james", hobby: "soccer"},
  {name: "bin", hobby: "soccer"},
   {name: "gong", hobby: "baseball"}
];

console.log(arr1.filter(
  (item) => item.hobby === "soccer"
));

// 출력 결과
// [{name: "james", hobby: "soccer"}, {name: "bin", hobby: "soccer"}]

---

2. map

배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 반환

let arr2 = [
  {name: "james", hobby: "soccer"},
  {name: "bin", hobby: "soccer"},
   {name: "gong", hobby: "baseball"}
];

// 배열의 요소에서 name 객체의 값들만 가져와서 새로운 배열로 반환
let names = arr2.map((item) => item.name);

console.log(names);		// ["james", "bin", "gong"]

---

3. sort

배열을 사전순으로 정렬하는 메서드

이 때 sort 메서드는 사전순으로 정의하는 것이지 대소비교를 통해 정렬하는 것이 아니므로 숫자형 데이터가 들어있는 배열은 정렬하지 못한다.

let arr3 = ["b", "c", "a"]

arr3.sort()

console.log(arr3);	// ["a", "b", "c"]

let arr4 = [10, 3, 5]

arr4.sort((a, b) => {
	if (a > b){
      	// a가 b보다 클 때 b가 앞으로 와라
    	return 1;
    } else if (a < b) {
      	// b가 a보다 클 때 a가 앞으로 와라
    	return -1;
    } else {
      	// a와 b가 같을 때 위치를 바꾸지 마라
    	return 0;
    }
})

---

4. join

배열 요소를 모두 연결해 하나의 문자열로 반환하는 메서드

let arr5 = ["hello", "world", "good"]

console.log(arr.join());		 // hello,world,good
console.log(arr.join("-"));		// hello-world-good

---

5. reduce

배열 요소를 모두 순회하면서 인수로 제공한 함수를 실행하고, 단 하나의 결괏값만 반환하는 메서드

map 메서드와 유사하지만, 하나의 결과만을 반환한다는 차이가 있다.

reduce 메서드를 호출할 때 2개의 인수를 전달하는데 첫 번째 인수로는 콜백함수, 두 번째 인수로는 초깃값(initial)을 전달한다. 이 때 콜백함수를 "리듀서"라고 부른다. 리듀서는 4개의 매개변수를 제공받는다.

• acc : 이전 함수의 호출 결과를 저장 -> 초깃값(initial)이 acc의 초깃값
• item : 현재 배열 요소
• index : 핸재 배열 인덱스
• array : reduce 메서드를 호출한 배열

let arr6 = [1, 2, 3, 4, 5]
let reulst = arr6.reduce((acc, item) => {acc + item}, 0);

console.log(result);		// 15

총 5번 콜백함수를 실행한다.
1. initial + item = 0 + 1 = 1
2. acc + item = 1 + 2 = 3
3. acc + item = 3 + 3 = 6
4. acc + item = 6 + 4 = 10
5. acc + item = 10 + 5 = 15