본문 바로가기

전체 글226

[15~16] map으로 합성하기, find 대신 L.filter 써보기 1. map으로 합성하기map으로 fg를 감싸주고, each로 구분해주기 2. find 대신 L.filter 써보기find를 사용해 users에 특정 사람 찾아보기 take와 filter 사용해보기현재 find와 똑같은 일을 하지만, 훨씬 깔끔하게 정리된 모습을 볼 수 있다. 이제 go를 사용해서 눈에 보이기 쉽게 정리해보기 2024. 11. 30.
[12~14] query, queryToObject 1. queryquery1 예제(1) obj1 key 출력해보기 (2) obj1 key와 value 출력해보기 (3) res 생성하여 값들을 누적해보기 이전 코드가 꽤 복잡하기 때문에 reduce로 처리해보기query2 예제(1) 우선, (Object.entries(obj) 이용하기 (2) reduce 적용 (3) 구조 분해 해보기 (kv -> [k, v]) + 조건문 추가위 코드는 상당히 복잡함 템플릿화해서 간결해 보이게 표현하기위와 결과 같음. 위 코드도 복잡하기 때문에 더 나은 방법은?query3 예제즉시 평가 필터(_.filter) 사용 + 구조 분해 undefined 추가, 좀 더 보기 좋게 변경, _.reject 함수명 변경 _.map 적용하기위 코드들이 같은 '형'으로 되어 있기 때문에 re.. 2024. 11. 30.
[10~11] reduce를 사용해 코드 간단하게 만드는 방법 1. reduce + 복잡한 함수 + acc 보다,  map + 간단한 함수 + reduce 만들기아래 코드는 복잡하다.위 코드가 복잡하고 하는 이유는이 reduce에서 이 users가 어떻게 생겼는지 분석하기 위해서 이 보조 함수를 만들고 있다. 그리고 시작 값을 통해서 합산하고 있다. 더 좋은 reduce는 시작 값(=0)이 없는 reduce가 더 간단한 연산을 한다.이게 무슨 말이냐면,  아래 사진처럼 a와 b 부분이 모두 숫자인 경우에는 더 심플하게 사용할 수 있다.하나의 함수에서 복잡하게 처리하는 것보다 a와 b를 같은 형태를 오게 한다면 복잡한 코드가 나오지 않게 된다. 아래 코드를 보면, _.reduce((a,b) => a+b, L.map(u => u.age, users)));형태를 사용해 .. 2024. 11. 30.
FxJS 라이브러리 윈도우에서 사용하기 https://github.com/marpple/FxJS/blob/master/README_kr.md FxJS/README_kr.md at master · marpple/FxJSFunctional Extensions Library for JavaScript. Contribute to marpple/FxJS development by creating an account on GitHub.github.comFxJS는 ECMAScript 6 언어의 Iterable / Iterator, Generator, Promise를 기반으로 작성된 함수형 자바스크립트 라이브러리이다. 브라우저 환경일 때 헤더에 추가 script에 추가const { L, C } = window._; 브라우저에서 fx.js 스크립트 파일이 로.. 2024. 11. 30.
[8~9] 추억의 별 그리기, 구구단 1. 추억의 별 그리기단계 1 : L.range(5)로 출력해보기_.go( L.range(5), console.log );이렇게 코드를 세우면, console창에 아래와 같이 나타나게 됨-> 소통이 어려움이 발생 단계 2 : 즉시 평가되면 range로 변경_.go( _.range(5), console.log );range는 먼가 여러번의 일을 반복하려고 할 때 그것을 시작하려면 사용함별을 0개부터가 아닌 1개부터 그리는게 좋기 때문에 코드 수정 단계 3 : _.map추가 및 range 1부터 시작_.go( _.range(1, 6), _.map(_.range), console.log );console에 얼추 별 형태와 비슷하게 나타남 단계 4 : reduce를 사용해서 a와 b사이에 아무것.. 2024. 11. 30.
[6~7] while을 range로, 효과를 each로 구분 (+ go함수) 1. while을 range로 (1) L.range란 무엇인가?L.range는 지연 평가를 활용해 특정 범위의 숫자를 생성하는 함수입니다. 이를 통해 숫자 시퀀스를 동적으로 생성하고, 메모리를 효율적으로 사용합니다. (2) L.range의 특징start와 end 값을 사용해 숫자 시퀀스를 생성합니다.step 값이 있을 경우, 지정된 간격으로 숫자를 생성합니다.지연 평가를 지원하여 실제로 순회하기 전까지 값이 생성되지 않습니다. L.range의 일반적인 형태L.range(start, end, step);start: 시퀀스 시작 값 (기본값: 0).end: 시퀀스 종료 값.step: 시퀀스 증가값 (기본값: 1). 예제 6 while 코드//6. While을 range로 function f3(e.. 2024. 11. 30.
L객체와 C객체, 지연평가(Lazy Evaluation)와 즉시평가(Eager Evaluation) L객체와 C객체 지연평가(Lazy Evaluation), 즉시평가(Eager Evaluation) 1.  L객체과 C객체L 객체:L은 Lazy (지연 평가)를 지원하는 함수 모음여기서 제공되는 함수(deepFlat, deepFlatten, entries, 등)는 데이터를 처리할 때 메모리를 효율적으로 사용하며, 필요할 때만 값을 계산하는 방식으로 작동한다.지연 평가는 큰 데이터셋이나 무한 이터러블을 처리할 때 유용하다.C 객체:C는 병렬적 실행(Concurrency)을 지원하는 함수 모음reduce, take, mapEntries 등의 함수가 포함되어 있으며, 데이터 처리를 병렬적으로 실행하여 속도를 향상시킬 수 있다.특히, 비동기 처리를 다룰 때 유용하다. 2. 지연평가(Lazy Evaluation),.. 2024. 11. 30.
[1~5] 홀수 n개 더하기, if를 filter로, 값 변화 후 변수 할당을 map으로, break를 take로, 축약 및 합산을 reduce로 (+ 이터러블 프로그래밍과 리스트 프로세싱) 1. 홀수 n개 더하기홀수 n개 더하기 코드 (1) 함수 정의limit : 처리할 홀수의 최대 개수 -> 3list  : 숫자 배열 -> [1,2,3,4,5,6,7,8,9,10](2) 배열 순회for...of 문을 사용해 list 배열의 각 요소를 순회(3) 홀수 판별a % 2 는 a가 홀수 인지를 판별홀수 : a % 2 == 1 (참)짝수 : a % 2 == 0 (거짓)(4) 제한된 개수의 홀수만 처리--limit : limit 값을 1 감소시킨limit === 0 : limit이 0이 되면 break문으로 for루프를 종료한다. 2. if를 filter로 적용하기우선, 이터러블 프로그래밍과 리스트 프로세싱에 대해 알아보겠다.이터러블 프로그래밍과 리스트 프로세싱은 데이터를 선언적으로 처리하는 프로.. 2024. 11. 30.
[241129] 자바스크립트 A-Z 시험 1편 - 풀이 풀이 : 배열은 객체이다. 풀이 : 지피티한테 물어보기. 정답 없음!  'Dom 탐색하기' 강의를 좀 더 듣고 공부하자!element가 들어가고 안 들어가고 차이todo앱에 체크박스 문제임! 해설 : clearTimeout()는 setTimeout()에서 실행되면 타임아웃을 취소할 수 있다.여기서 중점적으로 봐야하는 것은 setTimeout()을 지정하게 되면 timeoutID를 사용하지 않는다.그러나 다른 객체끼리는 다른 ID 풀을 사용한다. 해설 : null 타입이 왜 object이나면, 처음에 설정할 때 object로 설정을 했어서 수정이 안된다고 함       2편은 디자인 패턴은 한번씩 읽어만 보면 됨-> factory, module pattern이 프로젝트 할 때 많이 쓰일 듯하다 2024. 11. 29.
[48] Module Pattern 2024. 11. 29.
[47] Observer Pattern 2024. 11. 29.
[46] Mediator Pattern (중재자 패턴) 2024. 11. 29.

티스토리툴바