[JavaScript]배열에서 특정 값의 개수

JavaScript에서 배열 내부에 특정 값의 개수를 구하는 방법을 정리합니다.

데이터
1. 배열(Array)
2. 배열의 객체(Object of Array)
3. 다차원 배열(Multidimensional Array)

방법
1. for문
2. map()
2. filter()
4. reduce()

---

배열(Array)

1. for문

가장 기본적인 방법으로 배열의 모든 요소를 순회하면서 특정 값이 있을 경우 count를 증가합니다.

var arr = ['A', 'B', 'B', 'C', 'D' ];
var count = 0;

for(let loop = 0; loop < arr.length; loop++) {
  if(arr[loop] === 'A')  {
    count++;
  }
}
console.log(`count : ${count}`);

 

2. map()

특정 값의 개수를 반환하는 함수를 생성하고 map()을 사용하여 특정 값을 체크합니다.

파라미터로는 배열과 특정 값을 전달합니다.

map()을 이용하는 방법이라고 하기에는 애매합니다만... 이러한 방법도 있다는 정도만 알고 계시면 될 거 같습니다.

☞ map 함수 사용 방법 보러가기

var arr = ['A', 'B', 'B', 'C', 'D' ];

function arrCount(arrParam, str) {
  var count = 0;
  
  arrParam.map(item => {
    if (item === str) count++;
  });
  return count;
}
  
console.log(`count : ${arrCount(arr, 'A')}`);

 

3. filter()

filter()는 배열의 모든 요소를 순회하여 조건에 부합하는 데이터들을 모아서 새로운 배열을 반환합니다.

새로운 배열의 length로 특정 값의 개수를 구할 수 있습니다.

☞ filter 함수 사용 방법 보러가기

var arr = ['A', 'B', 'B', 'C', 'D' ];
var result = arr.filter(item => item === 'A');

console.log(result);
console.log(`count : ${result.length}`);

 

4. reduce()

reduce()를 사용하는 방법도 있습니다. reduce() 메소드의 마지막 0은 초기값입니다.

즉, reduce()함수의 반환 값은 1(배열 arr의 'A'의 개수) + 0(초기값)으로 1입니다.

마지막의 0을 10으로 변경하면 11이 반환됩니다.

☞ reduce 함수 사용 방법 보러가기

var arr = ['A', 'B', 'B', 'C', 'D' ];
var result = arr.reduce((count, data) => data === 'A' ? count + 1 : count, 0);
  
console.log(`count : ${result}`);

반응형

---

2. 배열의 객체(Object of Array)

1. for문

객체로 구성된 배열에서 객체의 age 속성이 20인 요소의 개수를 for문을 사용하여 구합니다.

var arr = [
  {name : 'A', age: 10},
  {name : 'B', age: 20},
  {name : 'C', age: 30},
  {name : 'D', age: 40},
  {name : 'E', age: 20}
];
  
var count = 0;

for(let loop = 0; loop < arr.length; loop++) {
  if(arr[loop]['age'] === 20)  {
    count++;
  }
}
  
console.log(`count : ${count}`);

 

2. map()

파라미터 하나를 더 추가하여 특정 속성을 체크할 수 있도록 합니다.

var arr = [
  {name : 'A', age: 10},
  {name : 'B', age: 20},
  {name : 'C', age: 30},
  {name : 'D', age: 40},
  {name : 'E', age: 20}
];

function arrCount(arrParam, str, property) {
  var count = 0;
  
  arrParam.map(item => {
    if (item[property] === str) count++;
  });
  return count;
}
  
console.log(`count : ${arrCount(arr, 20, 'age')}`);

 

3. filter()

var arr = [
  {name : 'A', age: 10},
  {name : 'B', age: 20},
  {name : 'C', age: 30},
  {name : 'D', age: 40},
  {name : 'E', age: 20}
];

var result = arr.filter(item => item['age'] === 20);

console.log(result);
console.log(`count : ${result.length}`);
});

 

4. reduce()

var arr = [
  {name : 'A', age: 10},
  {name : 'B', age: 20},
  {name : 'C', age: 30},
  {name : 'D', age: 40},
  {name : 'E', age: 20}
];

var result = arr.reduce((count, data) => data['age'] === 20 ? count + 1 : count, 0);

console.log(result);

---

3. 다차원 배열(Multidimensional Array)

1. for문

다중 for문으로 처리합니다.

var arr = [
  ['A', 'B', 'C'],
  ['D', 'E', 'F'],
  ['A', 'B', 'C']
];
var count = 0;
  
for(let firstLoop = 0; firstLoop < arr.length; firstLoop++) {
  for(let secondLoop = 0; secondLoop < arr[firstLoop].length; secondLoop++) {
    if(arr[firstLoop][secondLoop] === 'A') {
      count++;
    }
  }
}

console.log(`count : ${count}`);

 

2. map()

var arr = [
  ['A', 'B', 'C'],
  ['D', 'E', 'F'],
  ['A', 'B', 'C']
];

function arrCount(arrParam, str) {
  var count = 0;
  
  arrParam.map(item => {
    item.map(item2 => {
      if (item2 === str) count++;
    });
  });
  return count;
}

console.log(`count : ${arrCount(arr, 'A')}`);

---

마무리

배열에서 특정 값의 개수를 구하는 방법에 대해 알아보았습니다.

배열의 객체의 배열, 배열의 객체의 객체처럼 다양한 경우에 대해서도 작성하려고 했으나 아직 JavaScript에 대해 공부가 부족하다고 생각이 되었습니다.

좋은 방법을 찾으면 포스팅 하도록 하겠습니다!