Skip to content

태그: javascript

총 7개의 글이 있습니다.

js const curry = f = (a, ..._) =_.length ? f(a, ..._) : (..._) =f(a, ..._); const go1 = (a, f) =a instanceof Promise ? a.then(f) : f(a); const go = (...args) =reduce((a, f) =f(a), args); const pipe = (f, ...fs) =(...as) =go(f(...as), ...fs); 병렬 평가 js const L = {}; L.range = function* (l) { let i = -1; while (++i b ? a : Promise.reject(nop)); else if (b) yield a; } });

Lexical Scope와 Closure

Lexical scope 프로그래밍에서 scope란 변수의 유효범위를 나타내는 용어이다. JavaScript는 함수를 어디서 선언하였는지에 따라 상위스코프를 결정하는 Lexical Scope를 따르고 있다. 다른 말로, 정적 스코프(Static scope)라 부르기도 한다. js var num = 1; function a() { var num = 10; b(); } function b() { console.log(num); } a(); 위 예제를 살펴보자. a 함수 내에서 호출하는 b 함수에서 참조하는 num은, 전역의 num을 참조하는 것이기 때문에 1이 출력된다. Closure 클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인 함수의 조합이다. 즉

Kleisli composition은 함수형 프로그래밍에서 두 개의 Kleisli 함수를 조합하는 기술을 가리킨다. Kleisli 함수는 모나드를 사용하는 함수로, 입력을 받아 모나드 값을 반환한다. 이러한 함수를 조합하여 모나드 내의 값을 연속적으로 처리하거나 변환하는 작업을 가능하게 하는 것이 바로 Kleisli composition이다. js // 모나드 M의 Kleisli 함수 정의 kleisliFuncA :: A -M kleisliFuncB :: B -M // Kleisli 함수 조합 composedKleisliFunc :: A -M composedKleisliFunc = kleisliFuncA >=kleisliFuncB Promises는 kleisli composition

useEffect 안에서 setInterval 사용하기

setInterval은 일정 시간마다 작업을 수행하는 메서드다. 주기적으로 카운트를 증가시키기 위해 이런 코드를 작성할 수 있다. js function Counter() { let [count, setCount] = useState(0); useEffect(() ={ let id = setInterval(() ={ setCount(count + 1); }, 1000); return () =clearInterval(id); }, []); return {count}; } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); 1초마다 +1이 되

절대경로 설정

특정 컴포넌트나 파일을 import할 시 경로의 depth가 깊어지면 깊어질수록 import하려는 파일의 위치에 따라 상대경로가 상당히 길어질 수 있다. js 이런 식으로 상대경로가 길어지면 import할 파일을 찾기위한 수고가 커지고 가독성 면에서도 좋지 않다. 이런 경우 `tsconfig.json` 또는 `jsconfig.json`의 설정을 통해 절대경로를 설정할 수 있다. `tsconfig.json` 이란? typscript에 대한 설정을 할 수 있는 파일이며 javascript로 이루어진 레포지토리라면 `jsconfig.json`을 사용한다. 해당 레포지토리가 Typescript를 사용하고 있다면 루트 디렉토리에 `tsconfig.json`이 존재해야며 tsc명령어를

프로토타입

JavaScript에는 객체라는 구조가 존재하고, 각 객체에는 다른 객체에 대한 링크를 보유하는 프로토타입이라는 비공개 속성이 있다. 그 프로토 타입 객체도 자신만의 프로토타입을 가지고 있으며, 프로토타입으로 `null`을 가진 객체에 도달할 때까지 이 연결은 계속된다. 예시 코드 닭의 프로토타입을 참새로 지정하면, 닭의 `날개갯수`와 `날수있나` 값을 참조했을 때 참새가 가지고 있던 값과 동일한 값이 반환된다. 이떄 `날수있나` 값을 `false`로 재지정하면 값이 바뀌게 된다. js function 참새(){ this.날개갯수 = 2; this.날수있나 = true; } const 참새1 = new 참새(); console.log("참새의 날개 갯수 : ", 참새1.날개갯수

화살표 함수

ES6가 도입되면서, js에 화살표 함수라는 문법이 등장했다. 화살표 함수는 말 그대로 화살표(`=>`) 표시를 사용해서 함수를 선언하는 방법이다. js // 기존 함수 const foo = function () { console.log('기존 함수'); } // 화살표 함수 const foo = () =console.log('화살표 함수'); 두 코드는 기능적으로 완전히 동일하게 작동한다. 그러나, 두 코드는 this 바인딩에서 차이가 있다. this 바인딩 JS의 this는 상황에 따라 다르게 바인딩 된다. 대표적으로 this에 바인딩되는 값들은 이렇다. 전역 공간의 this : 전역 객체 메소드 호출 시 메소드 내부의 this : 해당 메소드를 호출한 객체 함수 호출