JavaScript | Array에서 쓰이는 유용한 Method (2)

11. slice

arr.slice([begin[, end]])
// begin: 0을 시작으로 하는 index값, 음수는 배열의 끝부터 시작한다. undefined일 경우 0번부터 slice
// end: 추출을 종료 할 index값, 실제로는 end값의 앞까지만 추출된다.

const arr1 = ['dog', 'cat', 'duck', 'mouse'];
let duckDuck = arr1.slice(2, 3);

console.log(duckDuck) // ['duck']
console.log(arr1) // ['dog', 'cat', 'duck', 'mouse']

slice()는 어떤 배열의 begin부터 end앞까지 (end는 포함하지 않음)에 대한 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.

12. find

arr.find(callback(element[, index[, array]])[, thisArg])
// callback: 배열의 각 값에 대해 실행할 함수 element, index, array라고 불리는 3가지 인자를 받는다
// elemnt: 처리할 현재 요소
// index: 처리할 현재 요소의 인덱스 (optional)
// array: find함수를 호출한 배열(optional)
// thisArg: callback이 호출될 때 this로 사용할 객체 (optional)

const studentScore = [80, 92, 100, 88, 95];
const findStudent = studentScore.find((score) => score >= 95);

console.log(findStudent) // 100

find()는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 없다면 undefined를 반환한다.

13. filter

arr.filter(callback(element[, index[, array]])[, thisArg])
// callback: 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다.
// element: 처리할 현재 요소
// index: 처리할 현재 요소의 인덱스 (optional)
// array: filter를 호출한 배열 (optional)
// thisArg: callback을 실행할 때 this로 사용할 객체 (optional)

const studentScore = [80, 92, 100, 88, 95];
const filterStudent = studentScore.filter((score) => score >= 95);

console.log(filterStudent) // [95, 100]

filter()는 주어진 함수의 기준을 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

14. map

arr.map(callback(currentValue[, index[, array]])[, thisArg])
// currentValue: 처리할 현재 요소
// index: 처리할 현재 요소의 인덱스 (optional)
// array: map을 호출한 배열 (optional)
// thisArg: callback을 실행할 때 this로 사용할 객체 (optional)

let arr1 [1, 2, 3, 4, 5];
let square = arr1.map(number => number * number);

console.log(square) // [1, 4, 9, 16, 25]
console.log(arr1) // [1, 2, 3, 4, 5]

map()은 배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
호출한 배열의 값을 변형하지는 않는다.

15. some/every

arr.some(callback(currentValue[, index[, array]])[, thisArg])
arr.every(callback(currentValue[, index[, array]])[, thisArg])
// currentValue: 처리할 현재 요소
// index: 처리할 현재 요소의 인덱스 (optional)
// array: soem/every를 호출한 배열 (optional)
// thisArg: callback을 실행할 때 this로 사용할 객체 (optional)

let arr1 = [2, 4, 6, 8, 10];
let isOdd = arr1.some((number) => number % 2 !== 0);
let isEven = arr1.every((number) => number % 2 === 0);

console.log(isOdd) // false
console.log(isEven) // true

some()은 callback이 참을 반환하는 요소를 찾을 때까지 배열에 있는 요소에 대해 한 번씩 callback 함수를 실행한다. 해당하는 요소를 발견한 경우 즉시 true를 반환한다. 모든 값에서 거짓을 반환하면 false를 반환한다.

every()는 callback이 거짓을 반환하는 요소를 찾을 때까지 배열에 있는 요소에 대해 한 번씩 callback 함수를 실행한다. 해당하는 요소를 발견한 경우 즉시 false를 반환한다. 모든 값에서 거짓을 반환하면 true를 반환한다.

16. reduce

arr.reduce(callback(accumulator, currentValue[, currentIndex[, array]])[, initialValue])
// accumulator: callback의 반환값을 누적한다. 첫번째 호출일 때 initialValue를 제공한 경우는 initialValue값
// currentValue: 처리할 현재 요소
// currentIndex: 처리할 현재 요소의 index, initialValue를 제공한 경우 0, 아니면 1부터 시작
// array: reduce를 호출한 배열 (optional)
// initialValue: callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 값을 넣지 않으면 배열의 첫 요소를 사용한다

let arr1 = [1, 2, 3, 4, 5];
let sumEvery = arr1.reduce((prev, curr) => prev + curr, 0);
let sumEvery2 = arr1.reduce((prev, curr) => prev + curr, 10);

console.log(sumEvery) // 15
console.log(sumEvery2) // 25

reduce()는 callback함수를 순회하면서 배열의 모든 값을 더해준다.

17. sort

arr.sort([compareFunction])
// compareFunction: 정렬 순서를 정의 하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니코드 포인트 값에 따라 정렬된다.

let arr1 = [1, 5, 2, 3, 4];
let ascending = arr1.sort((a, b) => a - b);

let arr2 = [1, 5, 2, 3, 4];
let descending = arr2.sort((a, b) => b - a);

console.log(ascending) // [1, 2, 3, 4, 5]
console.log(descending) // [5, 4, 3, 2, 1]

sort()는 배열 내의 값을 정렬할 수 있는 method이다. compareFunction을 사용해서 오름차순 및 내림차순 정렬이 가능하다. 복사된 값이 생성되는 것이 아니라, 원본 값이 정렬된 상태로 저장된다.