JavaScript Array method 2-2 원본 배열을 수정하지 않는 메서드

원본 배열을 수정하지 않고, callback이 존재하는 순회 메서드

1.forEach() -배열의 각각의 요소에 대해 콜백을 호출한다

arr.forEach(callback(currentvalue, index, array), thisArg)

· callback: 각 요소에 대해 실행할 함수입니다.
· currentValue: 처리할 현재 요소를 넣습니다.
· index: 처리할 현재 요소의 인덱스를 넣습니다. <필수X>
· array: forEach()를 호출한 배열을 넣습니다. <필수X>
· thisArg: callback을 실행할 때 this로 사용할 값을 넣습니다. <필수X>
· 반환값: undefined

    let array = [1, 2, 3, 4, 5];
let newArr = [];
 
array.forEach(value => newArr.push(value + 1));
console.log(newArr); // [2, 3, 4, 5, 6]

2.map() -배열의 모든 요소 각각에 대해 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환한다.

arr.map(callback(currentValue, index, array), thisArg)

· callback: 각 요소에 대해 실행할 함수이다
· currentValue: 처리할 현재 요소를 넣는다.
· index: 처리할 현재 요소의 인덱스를 넣는다. <필수X>
· array: map()를 호출한 배열을 넣는다. <필수X>
· thisArg: callback을 실행할 때 this로 사용할 값을 넣는다. <필수X>
· 반환값: 배열의 각 요소에 대해 실행한 callback의 결과를 모든 배열을 리턴한다.

※forEach()와 map()의 차이: return의 유무

let array = [1, 2, 3, 4, 5];
let returnArray1 = array.map((value, index) => value + index);
let returnArray2 = array.map(value => value * 2);
 
console.log(returnArray1); // [1, 3, 5, 7, 9]
console.log(returnArray2); // [2, 4, 6, 8, 10]

3.filter() -- 지정한 콜백의 반환 결과가 true인 요소만 모은 새로운 배열을 반환한다.

arr.filter(callback(currentValue, index, array), thisArg)

· callback: 각 요소에 대해 실행할 함수로 true 시 요소를 유지하고, false 시 요소를 버린다.
· currentValue: 처리할 현재 요소를 넣는다.
· index: 처리할 현재 요소의 인덱스를 넣는다. <필수X>
· array: filter()를 호출한 배열을 넣는다. <필수X>
· thisArg: callback을 실행할 때 this로 사용할 값을 넣는다. <필수X>
· 반환값: true된 남겨진 요소로 이루어진 배열을 리턴한다. 모두 false 이면, 빈 배열을 리턴한다.

let array = [5, 0, 1, 2, 7];
let returnArray1 = array.filter((value, index) => value > index);
let returnArray2 = array.filter(value => value % 2 == 1);

console.log(returnArray1); // [5, 7]
console.log(returnArray2); // [5, 1, 7]

간단한 객체 검색

let users = [
  { id: 15, name: 'Bob', age: 23},
  { id: 18, name: 'Tom', age: 19},
  { id: 33, name: 'Jenny', age: 34},
  { id: 55, name: 'Yuna', age: 17}
];
 
/* 객체 검색 */
let result1 = users.filter(user => user.name.includes('Yuna'));
let result2 = users.filter(user => user.age >= 20);
 
console.log(result1); // [{ id: 55, name: 'Yuna', age: 17 }]
console.log('--------------------------------------');
console.log(result2); // [{ id: 15, name: 'Bob', age: 23 },
                      //  { id: 33, name: 'Jenny', age: 34 }]

4.reduce() - 주어진 콜백 함수를 누적값과 순회가능한 데이터를 대상으로 누적 집계를 냅니다.

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

· callback: 각 요소에 대해 실행할 함수이다.
· accumulator: 누적되는 값으로 콜백의 반환 값을 누적한다.
· currentValue: 처리할 현재 요소를 넣는다.
· index: 처리할 현재 요소의 인덱스를 넣는다. <필수X>
· array: reduce()를 호출한 배열을 넣는다. <필수X>
· initialValue: callback의 최초 호출에서 첫번째 인수로 제공하는 값을 넣넣는다. 만약 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다. <필수X>
· 반환값: 배열의 각 요소에 대해 실행한 callback의 결과를 모든 배열을 리턴한다.

const add = (a, b) => a + b;
 
let array = [1, 2, 3, 4, 5]
let result = array.reduce(add);
 
console.log(result);

5.every() - 배열의 모든 요소가 주어진 판별로 통과하는 여부를 반환한다.

arr.every(callback(currentValue, index, array), thisArg)

· callback: 각 요소에 대해 실행할 함수이다.
· currentValue: 처리할 현재 요소를 넣는다.
· index: 처리할 현재 요소의 인덱스를 넣는다. <필수X>
· array: every()를 호출한 배열을 넣는다. <필수X>
· thisArg: callback을 실행할 때 this로 사용할 값을 넣는다. <필수X>
· 반환값: callback이 모든 배열 요소가 참인 값을 반환하는 경우 true, 아니면 false

const array1 = [1, 2, 3, 4, 5];
const array2 = [1, 3, 5, 7, 9];
 
const odd = (element) => element % 2 === 1;
 
console.log(array1.every(odd)); //false
console.log(array2.every(odd)); //true

6.some() - 배열의 어떠한 요소라도 주어진 판별로 통과하는 여부를 반환한다.

arr.some(callback(currentValue, index, array), thisArg)

· callback: 각 요소에 대해 실행할 함수이다.
· currentValue: 처리할 현재 요소를 넣는다.
· index: 처리할 현재 요소의 인덱스를 넣는다. <필수X>
· array: some()를 호출한 배열을 넣는다. <필수X>
· thisArg: callback을 실행할 때 this로 사용할 값을 넣는다. <필수X>
· 반환값: callback이 어떤 배열 요소라도 참인 값을 반환하는 경우 true, 아니면 false

const array1 = [1, 2, 3, 4, 5];
const array2 = [1, 3, 5, 7, 9];
 
const even = (element) => element % 2 === 0;
 
console.log(array1.some(even)); //true
console.log(array2.some(even)); //false