-
map, forEach, reduce, filter, indexOf, some, every
-
click! for문의 동작 원리
-
click! 배열내장함수 총정리
-
🔶[유사 배열 객체]🔶
- 유사 배열 객체: 배열처럼 보이지만 object이다. key가 숫자이고 lenght값을 가지고 있는 객체이다.
- 유사 배열의 조건: 반드시 length가 필요. index번호가 0번부터 시작해서 1씩증가
- forEach, map, filter, reduce 같은 배열 메서드를 사용할 수 없다
- Array.from()으로 배열로 전환 후 배열 APIs를 사용한다.
[유사배열객체 -> 배열로 전환] <body> <div class="text">1</div> <div class="text">2</div> <div class="text">3</div> <div class="text">4</div> </body> const texts = document.querySelectorAll('.text') Array.from(texts).map((text) => console.log(text))
-
🔶[thisArg]🔶
- callback을 실행할 때 this로 사용하는 값.
- thisArg 는 Optional 인자로, thisArg를 인자로 넘기면 runtime이 callback을 호출할 때 이를 this로 설정한다' 로 정리할 수 있다.
- thisArg [Optional] : callback을 실행할 때 this로 사용하는 값.
- 일반 함수로 호출 된 모든 함수(중첩, 콜백 함수 포함) 내부의 this에는 전역 객체가 바인딩 된다.
``` function bbb(value){ console.log(this) return value >= 10 } const fill = [10, 2, 50, 33, 46, 9].filter(bbb, 100) console.log('fill: ', fill); //[ 10, 50, 33, 46 ] [출력] [Number: 100] [Number: 100] [Number: 100] [Number: 100] [Number: 100] [Number: 100] fill: [ 10, 50, 33, 46 ] ``` -
forEach() / map() 에는 파라미터(인자)값이 3가지가 들어간다.
[forEach( el, idx, arr )] -
el : 반복 돌고있는 대상
-
idx : 순서값
-
arr : 배열자체
- argument로 순서대로 callback(value, index, array1)을 가질 수 있다. (값, 인덱스, 기존배열)
- map, filter, reduce와 같은 함수는 기본적으로 순차적으로 값을 접근한다라는 개념을 내포하고 있다.
1. filter()
Array.prototype.filter ( element[, index[, array]] [ , thisArg ] )- callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지, false를 반환하면 버린다. 다음 세 가지 매개변수를 받음.
- element [Optional] : 처리할 현재 요소
- index [Optional] : 처리할 현재 요소의 인덱스
- array [Optional] : filter를 호출한 배열
- thisArg [Optional] : callback을 실행할 때 this로 사용하는 값.
- callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지, false를 반환하면 버린다. 다음 세 가지 매개변수를 받음.
- 특정 조건을 만족(함수의 테스트를 통과)하는 새로운 배열을 반환한다.
- 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)을 통해 boolean 값을 반환해서 함수를 등록한다.
const numbers = [1, 2, 3, 4, 5];
// 1보다 크고 5보다 작은 수 구하기
const newNumbers = numbers.filter((num) => {
if(num > 1 && num < 5)
return true
})
console.log('newNumbers: ', newNumbers);
// 고차함수 - 3보다 큰 수 구하기
const graterThenThree = value => value > 3
const newNumbers2 = numbers.filter(graterThenThree)
console.log(newNumbers2) //[ 4, 5 ]
const guys = [
{ name: 'YD', money: 500000 },
{ name: 'Bill', money: 400000 },
{ name: 'Andy', money: 300000 },
{ name: 'Roky', money: 200000 }
];
// money를 300000 이상 가진 name이 YD인 사람을 찾는다.
guys.filter(P => P.money > 300000).map((e) => {
if(e.name === 'YD') return console.log('여기 있어요')
})
const rich = guys.filter(e =>{
if(e.money > 300000){
if(e.name === 'YD'){
return true
}
}
return
})
console.log('rich: ', rich);
// 배열의 최고값(Max), 최소값(Min) 기준으로 분류하기
// 여기서 target은 -> source: 순회하는 대상
const rich2 = guys.filter((man, index, target) => {
const maxOfnumber = Math.max(...target.map((person) => person.money))
return maxOfnumber === man.money
// const minOfnumber = Math.min(...target.map((p) => p.money))
// return minOfnumber === man.money
})
// 중복 제거하기
const numbers2 = [1, 1, 1, 2, 3, 4, 5, 6]
const newNumbers3 = numbers2.filter((num, ind, target) => {
return target.indexOf(num) === ind
})
console.log('newNumbers3: ', newNumbers3);2. map()
- 반복기능 외에 추가로 반복도는 배열을 새로운 배열로 복사
const colors = ["red", "green", "blue"];
colors.map((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 )
console.log(el); //red green blue
console.log(idx); // 0 1 2
console.log(arr);
// "red", "green", "blue" / "red", "green", "blue" / "red", "green", "blue"
}); 3. reduce()
Array.prototype.reduce ( callbackfn [ , initialValue ] )- 함수 결과를 체이닝형식으로 사용하기 때문에 합산과 연속적인 일의 결과를 만들 때 자주 사용한다.
-reduceRight는 reduce와 배열의 값들을 내림차순으로 접근한다는 부분만 다를 뿐 나머지는 동일한 원리로 동작한다. - callbackfn을 통해 주어진 4개인자 (초기값, 요소값, index, source)를 사용해 결과를 반환하는 함수를 등록한다.
- accumulator: 누적 값 [옵션을 통해 초기값이 주어지지 않은 경우 배열 인자의 첫번째 값을 사용한다.]
- current : 현재 값
- index: source에서 요소의 index
- source: 순회하는 원본 배열
// reduce 중복 제거하기
const fruits = ['딸기', '사과', '포도', '배', '참외', '딸기']
const result2 = fruits.reduce((arr, cur) => {
console.log('arr:', arr, 'cur: ', cur)
if(arr.includes(cur) === false){
arr.push(cur) //현재값을 포함하고 있지 않다면 (=false라면) 현재값 추가
}return arr; //현재 값을 포함하고 있으면 arr (추가하지 않음)
}, [])
console.log('result2: ', result2);
[출력]
arr: [] cur: 딸기
arr: [ '딸기' ] cur: 사과
arr: [ '딸기', '사과' ] cur: 포도
arr: [ '딸기', '사과', '포도' ] cur: 배
arr: [ '딸기', '사과', '포도', '배' ] cur: 참외
arr: [ '딸기', '사과', '포도', '배', '참외' ] cur: 딸기
result2: [ '딸기', '사과', '포도', '배', '참외' ]filter와 궁합이 좋은 map, reduce
- filter는 filter 자체만으로도 쓰임새가 좋지만 다른 함수와의 조합성도 좋아 map, reduce와 같은 다른 함수와 함께 자주 쓰인다.
300000이상 가진 사람들에 map을 활용하면300000이상을 가진 사람들으 이름도 만들 수 있다.
const guys = [
{ name: 'YD', money: 500000 },
{ name: 'Bill', money: 400000 },
{ name: 'Andy', money: 300000 },
{ name: 'Roky', money: 200000 }
];
const richNames = guys.filter(man => man.money > 300000)
.map(man => man.name)
console.log(richNames);
// ["YD", "Bill"]
출처: https://7942yongdae.tistory.com/49 [프로그래머 YD:티스토리]4. forEach()
- 배열 각 요소에 반복처리 기능만 있다.
- callback메서드는 각 요소에 지정된 작업을 수행한다.
- 유사배열(DOM)을 반복 가능
array1.forEach(callback[, thisArg])
const colors = ["red", "green", "blue"];
colors.forEach((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 )
console.log(el); //red green blue
console.log(idx); // 0 1 2
console.log(arr);
// "red", "green", "blue" / "red", "green", "blue" / "red", "green", "blue"
});- ES5 문법
- 반복처리 기능만 있다.
- 유사배열(DOM)을 반복 가능
5. map()
- 반복기능 외에 추가로 반복도는 배열을 새로운 배열로 복사
- 유사배열(DOM)을 반복 불가능
const colors = ["red", "green", "blue"];
colors.map((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 )
console.log(el); //red green blue
console.log(idx); // 0 1 2
console.log(arr);
// "red", "green", "blue" / "red", "green", "blue" / "red", "green", "blue"
});
```
비니로그 쳌킨