Array 메서드 | #2-2 Immutable (불변성) 메서드

 

 

[JavaScript] Array 메서드 | #2-1 Immutable (불변성) 메서드

---

#2-2 Immutable (불변성) 메서드

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

 

forEach()

- 배열의 각각의 요소에 대해 콜백을 호출합니다.

 

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

◾ callback: 각 요소에 대해 실행할 함수입니다.

◾ currentValue: 처리할 현재 요소를 넣습니다.

◾ index: 처리할 현재 요소의 인덱스를 넣습니다. [Optional]

◾ array: forEach()를 호출한 배열을 넣습니다. [Optional]

◾ thisArg: callback을 실행할 때 this로 사용할 값을 넣습니다. [Optional]

◾ 반환값: 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]

---

map()

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

 

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

◾ callback: 각 요소에 대해 실행할 함수입니다.

◾ currentValue: 처리할 현재 요소를 넣습니다.

◾ index: 처리할 현재 요소의 인덱스를 넣습니다. [Optional]

◾ array: map()를 호출한 배열을 넣습니다. [Optional]

◾ thisArg: callback을 실행할 때 this로 사용할 값을 넣습니다. [Optional]

◾ 반환값: 배열의 각 요소에 대해 실행한 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]

 

---

filter()

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

 

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

◾ callback: 각 요소에 대해 실행할 함수로 true 시 요소를 유지하고, false 시 요소를 버립니다.

◾ currentValue: 처리할 현재 요소를 넣습니다.

◾ index: 처리할 현재 요소의 인덱스를 넣습니다. [Optional]

◾ array: filter()를 호출한 배열을 넣습니다. [Optional]

◾ thisArg: callback을 실행할 때 this로 사용할 값을 넣습니다. [Optional]

◾ 반환값: 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 }]

 

 

---

 

reduce()

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

 

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

◾ callback: 각 요소에 대해 실행할 함수입니다.

◾ accumulator: 누적되는 값으로 콜백의 반환 값을 누적합니다.

◾ currentValue: 처리할 현재 요소를 넣습니다.

◾ index: 처리할 현재 요소의 인덱스를 넣습니다. [Optional]

◾ array: reduce()를 호출한 배열을 넣습니다. [Optional]

◾ initialValue: callback의 최초 호출에서 첫번째 인수로 제공하는 값을 넣습니다. 만약 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다. [Optional]

◾ 반환값: 배열의 각 요소에 대해 실행한 callback의 결과를 모든 배열을 리턴합니다.

 

*값 더하기

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

---

every()

- 배열의 모든 요소가 주어진 판별로 통과하는 여부를 반환합니다.

 

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

◾ callback: 각 요소에 대해 실행할 함수입니다.

◾ currentValue: 처리할 현재 요소를 넣습니다.

◾ index: 처리할 현재 요소의 인덱스를 넣습니다. [Optional]

◾ array: every()를 호출한 배열을 넣습니다. [Optional]

◾ thisArg: callback을 실행할 때 this로 사용할 값을 넣습니다. [Optional]

◾ 반환값: 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

 

---

some()

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

 

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

◾ callback: 각 요소에 대해 실행할 함수입니다.

◾ currentValue: 처리할 현재 요소를 넣습니다.

◾ index: 처리할 현재 요소의 인덱스를 넣습니다. [Optional]

◾ array: some()를 호출한 배열을 넣습니다. [Optional]

◾ thisArg: callback을 실행할 때 this로 사용할 값을 넣습니다. [Optional]

◾ 반환값: 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