====== JavaScript Array filter() ======
<WRAP left notice 70%>
  * description : JavaScript Array filter()
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2023-01-17 Tue
</WRAP>
<WRAP clear></WRAP>
\\

===== Definition and Usage =====
''**filter()**'' 메소드는 함수로 제공된 테스트를 통과한 요소들의 새로운 배열을 생성합니다.\\
''**filter()**'' 메소드는 비어있는 요소들에 대해 함수를 실행하지 않습니다.\\
''**filter()**'' 메소드는 원본 배열을 변경하지 않습니다.\\

===== Syntax =====
<code javascrpt>
arr.filter(callback(element[, index[, array]])[, thisArg]);    // from mdn web docs Array.prototype.filter()

array.filter(function(currentValue, index, arr), thisValue);    // from w3schools JS Array filter()     
</code>

===== Parameter =====
^ Parameter     ^ Description                                                                ^
| function()    | 필수, 배열의 각 요소에 대해 실행할 함수                                    |
| currentValue  | 필수, 현재 요소의 값                                                       |
| index         | 선택, 현재 요소의 인덱스                                                   |
| arr           | 선택, 현재 요소의 배얼                                                     |
| thisValue     | 선택, Default는 ''**undefined**''\\ ''**this**'' value로 함수에 전달될 값  |
\\
===== Example =====
하기 코드에서 화살표 함수로 변환 과정을 확인\\
<code javascript>
const ages = [32, 33, 16, 40];

const filtered = ages.filter(function(age){return age >= 18;});
console.log(filtered);                  // [ 32, 33, 40 ]
console.log(typeof filtered);           // object
console.log(Array.isArray(filtered));   // true

const filtered2 = ages.filter((age) => {return age >=18;});
console.log(filtered2);     // [ 32, 33, 40 ]

const filtered3 = ages.filter((age) => age >= 18);
console.log(filtered3);     // [ 32, 33, 40 ]

const filtered4 = ages.filter(age => age >= 18);
console.log(filtered4);     // [ 32, 33, 40 ]
</code>
\\
Apps chart.js사용 시 업무 분류별 등록된 업무 프로세스의 개수 구하기\\
==== Ex1 ====
<code javascript>
let devCount = '0';
let cmmnCount = '0';
let mntnCount = '0';
let projCount = '0';
let cmpyCount = '0';

for (let k = 0; k < data.checklistVO.length; k++) {
					
    if(data.checklistVO[k].checklistCat === '2') {
        devCount++;
    }
					
    if(data.checklistVO[k].checklistCat === '3') {
        cmmnCount++;
    }
					
    if(data.checklistVO[k].checklistCat === '4') {
        mntnCount++;
    }
					
    if(data.checklistVO[k].checklistCat === '5') {
        projCount++;
    }
					
    if(data.checklistVO[k].checklistCat === '6') {
        cmpyCount++;
    }
}	
</code>
\\
==== Ex2 ====
<code javascript>
let checklistObj = data.checklistVO;

let devCount = '0';
let cmmnCount = '0';
let mntnCount = '0';
let projCount = '0';
let cmpyCount = '0';

for (let k = 0; k < checklistObj.length; k++) {

    if(checklistObj[k]['checklistCat'] === '2') {
        devCount++;
    }
    if(checklistObj[k]['checklistCat'] === '3') {
        cmmnCount++;
    }
    if(checklistObj[k]['checklistCat'] === '4') {
        mntnCount++;
    }
    if(checklistObj[k]['checklistCat'] === '5') {
        projCount++;
    }
    if(checklistObj[k]['checklistCat'] === '6') {
        cmpyCount++;
    }
}
</code>
\\
==== Ex3 ====
<code javascript>
let checklistObj = data.checklistVO;

let devCount = '0';
let cmmnCount = '0';
let mntnCount = '0';
let projCount = '0';
let cmpyCount = '0';

// checklistObj 배열에서 checklistCat === 2 인 요소들의 배열을 신규 생성해서 해당 배열의 길이 값을 변수 devCount에 대입
devCount = (checklistObj.filter(item => item['checklistCat'] === '2')).length;
cmmnCount = (checklistObj.filter(item => item['checklistCat'] === '3')).length;
mntnCount = (checklistObj.filter(item => item['checklistCat'] === '4')).length;
projCount = (checklistObj.filter(item => item['checklistCat'] === '5')).length;
cmpyCount = (checklistObj.filter(item => item['checklistCat'] === '6')).length;

</code>












==== Ref Link ====
[[https://developer-talk.tistory.com/114|[JavaScript]배열에서 특정 값의 개수]]\\
[[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter|Array.prototype.filter()]]\\
[[https://www.w3schools.com/jsref/jsref_filter.asp|JavaScript Array filter()]]




{{tag>오션 filter()}}