23.2.11 study
오늘의 수업 내용들
고차함수(Higher-Order Function)
-array.prototype.map, array.prototype.filter, array.prototype.reduce, array.prototype.indexof 기타등등...
map과 filter 차이
참고 : https://ko.javascript.info/array-methods#ref-312
https://inpa.tistory.com/entry/JS
1.고차함수(Higher-Orter Function)
- 함수를 인자로 받거나 또는 함수를 반환함으로써 작동 하는 함수를 말한다.
1) Map();
-
map();은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러(순회) 그 함수의 반환값으로 새로운 배열을 만든다.
가장 중요한 부분은 내가 현재 배열 값은 바뀌지않고 반환값만 바꿔서 배열로 return 해줌.arr.map((currentValue, index, array) => { }, thisArg) /// currentValue : 현재 배열 요소값 /// index : 배열 인덱스 /// array : 참조한 배열 /// thisArg : 콜백함수에서 this로 사용할 값 /// return : 반환 타입은 찾은 요소의 타입 / 없다면 undefinded
```js
예제)
const a = [1,2,3,4,5];
let b = [];
for(let i = 0; i < a.length; i++) {
b.push(a[i] * a[i]);
}
console.log(b) // 1, 4, 9 , 16, 25
▶고차 함수 map(); 작성
const a = [1,2,3,4,5];
let b = a.map((value, index) => {
return value * value
});
console.log(b); /// 1, 4, 9 ,16 ,25
/// 화살표 함수로 하면
let c = a.mpa((value, index) => value * value);
console.log(c);///1, 4, 9 ,16 ,25 
예제1)
const a = [1, 2, 3, 4, 5];
const numMapArr = a.map((value) => {
return (value % 2 === 0) ? 'even' : 'odd'; // 연산한 결과값을 넣어 배열 반환
});
console.log(numMapArr); // ['odd', 'even', 'odd', 'even', 'odd']
예제2) 생일 배열로 나이 계산하기
const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = [];
for(let i=0; i<birthYear.length; i++){
let age = 2018 - birthYear[i];
ages.push(age);
}
// prints [43, 21, 16, 23, 33]
console.log(ages);
///고차함수로 작성
const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = [];
for(let i=0; i<birthYear.length; i++){
let age = 2018 - birthYear[i];
ages.push(age);
}
// prints [43, 21, 16, 23, 33]
console.log(ages);
2) filter();
-주어진 배열을 순회하면서 콜백 함수의 반환값이 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환함.
:: filter 함수는 명칭과 같이 callbackFunction의 조건에 해당하는 모든 요소가 있는 배열을 필터링해서 생성하는 기능이다.
arr.filter((element, index, array) => {
}, thisArg)
/// element : 현재 배열 요소값
/// index : 배열 인덱스
/// array : 참조한 배열
/// thisArg : 콜백함수에서 this로 사용할 값
/// return : 테스트를 통과한 요소로 이루어진 새로운 배열/ 어떤 요소도 테스트를 통과하지 못했으면 빈 배열로 반환예제1)
const a = [1, 2, 3, 4, 5];
const b = a.filter((value) => {
return value % 2 === 0; // 해당조건에 부합으면 item을 넣어 배열 반환
});
console.log(b); // [2, 4]예제2)
const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = [];
for(let i = 0; i < persons.length; i++) {
if(persons[i].age >= 18) {
fullAge.push(persons[i]);
}
}
console.log(fullAge);
///고차함수로 변경
const persons = [
{ name: 'Peter', age: 16 },
{ name: 'Mark', age: 18 },
{ name: 'John', age: 27 },
{ name: 'Jane', age: 14 },
{ name: 'Tony', age: 24},
];
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge);
///study 문제풀어보기!!!!!
const a = [
{
"id": 1,
"first-name": "jung",
"last-name": ""
},
{
"id":2,
"first-name": "sim",
"last-name": ""
}
]1. a배열에서 id가 2인 값을 객체로 집어넣으시오.
let b = {};
for(let i = 0; i < a.length; i++) {
if(a[i]?.id === 2) {
b = {
...a[i]
}
}
}
console.log(b);
//////// 고차함수로 바꾸면..
const b = a.filter(v => v.id === 2 && v)[0]
2. a배열속 객체의 last-name을 마저 작성해서 a와 참조되지 않은 새로운 배열을 만드시오.
let c = [];
for(let i = 0; i < a.length; i++) {
const name = i === 0 ? "monchai" : "soensim";
a[i]["last-name"] = name;
c.push(a[i]);
}
console.log(c);
--//고차함수로 바꿔보기!!
let c = a.map((v,i) => ({...v,["last-name"]: i === 0 ? 'monchai' : 'seonsim'}) )
console.log(a);
console.log(c);
마무리하며
이번주 study하며서 느낀건 이젠 문제 풀때 내가 알고 있는걸로 어떡해든 활용해서 문제를 풀어야 하는데..하 어렵다..쉽지않다는걸 매번 느끼는거 같다. 왜 안되지? 같이 코딩하는데 왜 에러나는거지..아 오타! 어 ),} 빠져서 에러 나고 인인덱스값이 어디서 시작되고 어디서 뭘.. => 이다음? 뭐지..흠... 분명 배웠는데 왜 안써먹히는거야!!! 내자신을 탓하면서 한주를 보냈다.. 내일도 수업있는데....내 자신을 탓하면서 수업듣겠지?... 암울하지만 더 힘내자 I can do it
