[javascript] Array function 정리 (ES5)

Jinbro·2023년 3월 1일

javascript

목록 보기

6/13

ES5에서 사용 가능한 Array 메소드를 정리해보자.

arrow 함수 (ES6) 활용은 불가능

function 키워드를 통한 Array 메소드 기능은 활용 가능하다!

Array arr 변수 sample

var nameArr = ['park', 'ko', 'yang', 'kim'];
var numArr = [2, 3, 5, 7];

Array.find

조건을 만족하는 단 하나의 요소만 반환

var findedName = nameArr.find(function(item) {
  item === 'park';  
});
console.log(findedName); // park

Array.reduce

이전 callback의 previous value를 넘겨받아 작업 수행

var sum = numArr.reduce(function(pre, val) {
  return pre + val;
}, 0); // 초기값 미설정 시, 배열의 첫번째 요소가 초기값 자동 설정
console.log(sum); // 17

Array.filter

조건을 만족하는 요소만 담은 배열 반환

var filteredArr = numArr.filter(function(item, idx, arr) {
  return item % 2 === 0;
});
console.log(filteredArr); // [2]

Array.map

다른 구성의 새로운 배열 반환

var newArr = nameArr.map(function(item, idx, arr) {
  return '내 이름은 ' + item + ' 이다!';
});
console.log(newArr); // ['내 이름은 park 이다!', '내 이름은 ko 이다!', '내 이름은 yang 이다!', '내 이름은 kim 이다!']

Array.forEach

배열 전체 순회하며 배열 값 접근하여 변경 가능

numArr.forEach(function(item, idx, arr) {
  numArr[idx] = item + 1;
});
console.log(numArr); // [3, 4, 6, 8]

Array.some

조건을 만족하는 요소가 하나라도 있을 경우, true 반환

var isParkInclude = nameArr.some(function(item, idx, arr) {
  return item === 'park';
});
console.log(isParkInclude); // true

Array.every

모든 요소가 조건을 만족하는 경우, true 반환

var isNumLowerThan10 = numArr.every(function(item, idx, arr) {
  return item < 10;
});
console.log(isNumLowerThan10); // true

Array.sort

조건에 맞는 배열 정렬

var originArr = [4, 1, 9, 3];
// 오름차순 정렬
const sortedArr = originArr.sort(function(nxt, item) {
    return nxt - item;
});
console.log(sortedArr); // [1, 3, 4, 9]