👩💻 Achievement Goals : 고차함수
- 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.
yes! 🙌
- 변수에 할당할 수 있다.
- 다른 함수의 인자로 전달할 수 있다.
- 다른 함수의 결과로 리턴될 수 있다.
- 고차 함수(higher-order function)에 대해 설명할 수 있다.
고차함수란 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다. 쉽게 이해하자면 함수 안에서 또 함수를 불러올 수 있다는 것이다.
- 고차 함수를 자바스크립트로 작성할 수 있다.
yes! 👏
function addNumber (num1) { return function (num2) { return num1 + num2 } } let add = addNumber(3)(5) console.log(add) // 8 function subNumber (num1) { return function (num2) { return num1 - num2 } } let subtract = subNumber(3)(5) console.log(add) // -2함수에 3을 넣을 채로 불러와서, 거기에 5를 넣어준다고 생각하면 쉽다. 빼기를 해 보면 알 수 있듯이 나중에 넣어준 게 안쪽 함수로 들어간다.
👩💻 Achievement Goals : 내장 고차함수
- 배열 내장 고차함수 filter에 대해서 이해할 수 있다.
filter:.filter()()안에 조건함수를 넣어 배열의 요소가 조건에 만족하면(Boolean) 분류하여 새 배열을 만들어주는 내장 고차함수이다. 기존 배열을 수정하지 않는다. - filter에 대한 이해를 기반으로, 나머지 고차함수를 스스로 학습할 수 있다.
yes! 아래를 봐 보자🙋♀️
- map : 배열의 각 요소가
.map()의()안의 특정 논리어 따라 요소가 바뀌어 새로운 배열을 반환한다. 기존배열을 수정하지 않는다.let arr = [1, 2, 3]; arr1 = arr.map(el=> el * 2) console.log(arr1) // [2, 4, 6] - forEach :
.forEach()map과 비슷하지만 반환값이 없다! 반환값이 없기 때문에 이렇게 써야 한다.let arr = [1, 2, 3]; arr2 = []; arr2 = arr.forEach(el=> el * 2) console.log(arr2) // undefined arr3 = []; arr.forEach((el, i)=> arr3[i] = el * 2) // 반환값이 없기 때문에 각 요소의 인덱스에 접근해서 할당해주어야 한다! console.log(arr3) // [2, 4, 6] find:.find()배열에()안의 만족하는 값이 있는 지 찾고, 그 값을 반환한다. 없다면undefined를 반환한다. (그 외에 인덱스를 알고싶으면indexOf를 쓰자)let arr = [1, 2, 3, 4, 5]; console.log(arr.find(4)) // 4 console.log(arr.find(8)) // undefined- reduce :
.reduce()은 배열의 각 요소가( )안의 논리에 따라 원하는 하나의 형태로 응축한다! 주로 누적값, 더하거나 빼는 등에 쓰인다.let arr = [1, 2, 3]; arr4 = arr.reduce((sum, cur) => sum + cur, 0); // sum이 반환되는 결과값, cur가 돌아다니며 배열의 요소가 된다. 0은 초기값으로 써주지 않으면 배열의 첫 요소가 된다. console.log(arr4) // 6 - sort :
.sort()그냥 쓰면 사전식 정렬이 된다. 오름차순은((a, b) => a - b), 내림차순은((a, b) => b - a)이렇게 써 준다. 신기한 점은 숫자들 사이 문자도 같이 정렬이 된다는 점이다!let arr = [1, 2, 11, 12, 4, '3', '5'] arr.sort(); // [1, 11, 12, 2, '3', 4, '5'] arr.sort((a, b) => a - b) // [1, 2, '3', 4, '5', 11, 12] arr.sort((a, b) => b - a) // [12, 11, '5', 4, '3', 2, 1] - some :
.some()배열의 요소 중 하나라도( )안의 논리를 만족한다면 true를 반환한다. - every :
.every()배열의 요소가 모두( )안의 논리를 만족한다면 true를 반환한다. some과 every 모두 Boolean을 반환한다. 짝수를 판별하는 식을 만들어보자.let arr = [1, 2, 3, 4]; arr.some(el => el % 2 === 0) // true arr.every(el => el % 2 === 0) // false - 추상화(abstraction)에 대해 설명할 수 있다.
추상화는 복잡한 어떠한 것을 압축해서 핵심만 추출한 상태로 만드는 것이다. 프로그래밍언어를 추상화의 형태로 사용되어 복잡한 과정을 빠르고 편리하게 만들어 생산성을 향상시킬 수 있다.
- 추상화의 관점에서 고차 함수가 갖는 이점에 대해 설명할 수 있다.
위에서 설명했듯 고차함수로 자주 쓰는 메소드들을 만들어 복잡한 과정을 빠르고 신속하게 처리할 수 있다. 예를 들어 누적값을 구할 수 있는 'reduce'가 있으니 얼마나 편리한가!? 😆
- 고차 함수를 활용하여 프로그램을 작성할 수 있다.
yes!👌
전에 풀었던 알파벳 수 구하기를.reduce로 쉽게 풀 수 있다는 걸 알게되었다!let str = 'banana'; let arr = str.split('') // ['b', 'a', 'n', 'a', 'n', 'a'] let result = arr.reduce((obj, el) => { if (el in obj) obj[el]++; // 알파벳이 키값으로 있다면 해당 벨류값을 증가시킴 else obj[el] = 1; // 만약에 알파벳이 없으면 { b : 1} 이렇게 추가 return obj; }, {}) // 꼭! 객체로 초기값을 설정해줘야 함! console.log(result) // {b: 1, a: 3, n: 2}
📚 그 외
- 스터디를 통해 오늘 알고리즘 문제에서 처음 접한 녀석들을 이해하게 되었다. 아 --- 주 🤓 유익한 시간이었다. 내장 고차함수에 대한 이론을 알고 나니 왜 이 메소드들을 이렇게 쓰는지 이해할 수 있었다. 덕분에 오늘 알고리즘 풀이는 이녀석을을 아주 적극 활용해 보았다!
😆😆😆 더 똑똑해진 기분이다!🤩🥴✌️🧠(새로운new Array().fill()과map의 활용!
https://velog.io/@pearpearb/알고리즘-29-Reversed-sequence/ ) - 오늘 스터디를 하면서 새롭고 신기한 걸 발견했다!
[1] + [2] + [3] // '123' [12, 3] + [45, 6] + [78] // '12,345,678'배열을 더했더니 문자열이 나온다!
- 오늘 고차함수에서 약간 멘붕🤯이었지만 문제를 풀면서 나아졌다. 역시 문제를 풀어야 하나 보다. 그래서 약간 위축도 되었지만... 그래도! 아직! 12일차인데! 이정도면! 잘 하고 있다!! 나 자신! 오늘도 칭찬해🐣 1일차땐 콘솔 키는 방법도 몰랐는데 이젠 제법 능숙하다!
- 오늘 어렵다고 해서 바짝 긴장했는데 다행히 스케쥴이 맞춰 잘 끝냈다! 내가 늦어지면 같이 공부하는 지휴의 스케쥴도 늦어지니 아주아주 집중했다.😁
- 처음 CSS/ HTML 배울 때보다 수월했던 것 같기도. 알면 알수록 이런 유능한 메소드들이 있다는 게 싱기방기하다!
- 내일은 엄청 재밌다고 한다. 기대기대 * 10000000000! 내일도 일찍 일어나야지. 오늘 잠깐 산책을 나갔는데 이제 진짜 가을...?🍂 아마도 겨울🥶 인 것 같다. 눈이 조금 침침해진 것 같은데 눈관리도 신경써야지👀
it's me!:)