WEB개발/JS
[WEB개발] JS 유용한 Array 함수
wooyeon06
2021. 6. 23. 13:35
1) map
(keyword:map)
array.map(callback(currentValue, index, array))
- 파라미터:
- callback: 배열의 각 요소에 대해 호출되는 함수입니다. 이 함수는 다음과 같은 인자를 받습니다:
- currentValue (필수): 현재 처리 중인 배열 요소.
- index (선택): 현재 처리 중인 배열 요소의 인덱스.
- array (선택): map 메서드를 호출한 배열.
- callback: 배열의 각 요소에 대해 호출되는 함수입니다. 이 함수는 다음과 같은 인자를 받습니다:
- 반환값: 변형된 요소들로 구성된 새로운 배열.
var arr = ["value1", "value2", "value3"];
var newArr = Array.prototype.map.call(arr, function (ele, idx, arrobj) {
ele = ele + "_modify";
console.log(ele);
return ele
});
2) filter
(keyword:filter)
array.filter(callback(currentValue, index, array))
- 파라미터:
- callback: 배열의 각 요소에 대해 호출되는 함수입니다. 이 함수는 다음과 같은 인자를 받습니다:
- currentValue (필수): 현재 처리 중인 배열 요소.
- index (선택): 현재 처리 중인 배열 요소의 인덱스.
- array (선택): filter 메서드를 호출한 배열.
- callback: 배열의 각 요소에 대해 호출되는 함수입니다. 이 함수는 다음과 같은 인자를 받습니다:
- 반환값: 조건을 만족하는 요소들로 구성된 새로운 배열. 조건을 만족하지 않는 요소는 포함되지 않습니다.
const people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 17 },
{ name: "Charlie", age: 30 },
];
const adults = people.filter((person) => person.age >= 18);
console.log(adults);
// [ { name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 } ]
3) foreach
(keyword:foreach)
array.forEach(callback(currentValue, index, array))
- 파라미터:
- callback: 배열의 각 요소에 대해 호출되는 함수입니다. 이 함수는 다음과 같은 인자를 받습니다:
- currentValue (필수): 현재 처리 중인 배열 요소.
- index (선택): 현재 처리 중인 배열 요소의 인덱스.
- array (선택): forEach 메서드를 호출한 배열.
- callback: 배열의 각 요소에 대해 호출되는 함수입니다. 이 함수는 다음과 같은 인자를 받습니다:
- 반환값: undefined. forEach는 값을 반환하지 않습니다.
const people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 },
];
people.forEach((person) => (person.age += 1));
console.log(people);
// [ { name: 'Alice', age: 26 }, { name: 'Bob', age: 31 }, { name: 'Charlie', age: 36 } ]
4) reduce
(keyword:reduce)
array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);
- callback: 배열의 각 요소에 대해 호출되는 함수. 이 함수는 4가지 인자를 받습니다:
- accumulator: 이전 함수 호출에서 반환된 값. initialValue를 설정하지 않으면 배열의 첫 번째 요소가 기본값이 됩니다.
- currentValue: 현재 처리 중인 배열 요소.
- currentIndex: 현재 처리 중인 배열 요소의 인덱스 (optional).
- array: reduce를 호출한 배열 (optional).
- initialValue (선택 사항): 누산기의 초기값을 지정합니다. 설정하지 않으면 배열의 첫 번째 요소가 사용됩니다.
배열 내 중복 요소 개수 세기
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((accumulator, fruit) => {
accumulator[fruit] = (accumulator[fruit] || 0) + 1;
return accumulator;
}, {});
console.log(count);
// { apple: 3, banana: 2, orange: 1 }
5) every() ( <> some )
(keyword:every, keyword:some)
메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. Boolean 값을 반환합니다.
array.every(callback(currentValue, index, array))
array.every(callback(currentValue, index, array))
- callback: 각 요소에 대해 호출되는 함수.
- currentValue: 현재 처리 중인 요소.
- index: 현재 요소의 인덱스 (optional).
- array: 호출된 배열 (optional).
const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true
5) find()
(keyword:find)
find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
array.find(callback(currentValue, index, array))
callback: 각 요소에 대해 호출되는 함수.
- currentValue: 현재 처리 중인 배열의 요소.
- index: 현재 요소의 인덱스 (optional).
- array: find를 호출한 배열 (optional).
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const user = users.find(user => user.age > 30);
console.log(user); // { name: 'Charlie', age: 35 }
6) sort()
(keyword:sort)
sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.
array.sort([compareFunction])
compareFunction (optional): 정렬 순서를 정의하는 함수.
- 두 개의 요소를 비교하고 다음의 값을 반환합니다:
- 0보다 작은 값: a가 b보다 앞에 오도록 정렬.
- 0: 순서를 변경하지 않음.
- 0보다 큰 값: b가 a보다 앞에 오도록 정렬.
const fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry']