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와 같은 함수는 기본적으로 순차적으로 값을 접근한다라는 개념을 내포하고 있다.
Array.prototype.filter ( element[, index[, array]] [ , thisArg ] )
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);
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"
});
Array.prototype.reduce ( callbackfn [ , initialValue ] )
- 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는 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:티스토리]
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"
});
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"
});
```