async 함수의 병렬 처리 getApple()과 getBanana()라는 비동기 함수가 있고 각 함수들은 1초의 딜레이 후 실행된다고 가정해 보자. 아래 예시에서는 await을 두 번 써서 총 2초를 기다리게 되는 것인데 만약 getApple()과 getBanana()라는 함수가 서로 연관성이 없다고 가정하면 이는 결국 시간 낭비인 셈이다. function delay(){ return new Promise( (resolve, reject) => { setTimeout(() => resolve(), 1000); })}async function getApple(){ await delay(); return "apple";}async function getBanana(){ await delay(..

자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 원시값, 객체, 함수 등 개발자가 코드로 작성하는 모든 것들은 메모리를 차지하는데 그렇다면 더이상 쓸모없어지게 된 것들은 어떻게 처리되는 걸까? 이 글에서는 자바스크립트 엔진이 어떻게 필요 없는 겂들을 찾아내 삭제하는지 알아보려 한다. 가비지 컬렉션 기준자바스크립트는 도달 가능성(reachability)이라는 개념을 이용해 메모리 관리를 수행한다. 도달 가능한 값은 간단히 말해서 어떻게든 접근하거나 사용할 수 있는 값을 의미한다. 도달 가능한 값은 메모리에서 삭제되지 않는다. 아래의 값들은 태생적으로 도달할 수 있는 값이기 때문에 명백한 이유 없이는 삭제되지 않는다. 그리고 이러한 값들을 루트(root)라고 부른다.현재 함수의 지역 변수..

C 언어나 JAVA, Python에서는 입력한 시간만큼 코드의 실행을 멈추는 기능으로 sleep()이나 wait() 같은 함수를 지원한다. 하지만 자바스크립트엣는 이와 같은 함수들이 따로 존재하지 않으니 직접 개발자가 구현해 줘야 한다.while문 활용현재 날짜와 시간을 얻는 함수 Date.now()와 while문 조건으로 3초가 경과한 걸 확인하는 방법.function wait(sec) { let start = Date.now(), now = start; while (now - start Promise 객체 활용​우선 Promise 객체를 만들고 setTimeout으로 일정 시간 후에 resolve하게 한다. 이 비동기 Promise 함수를 await으로 동기 처리해 주면 마치 sleep과 ..

만약 이벤트를 딱 한 번만 발생시키고 싶다면 등록하고 삭제하기보다는 아예 처음부터 한 번만 실행되도록 옵션을 주면 된다.addEventListener의 세 번째 파라미터로 { once : true } 객체를 전달하면 간단히 적용이 된다.eventTarget.addEventListener('click', function() { console.log('안녕하세요!');}, { once : true });

이벤트 제거하기자바스크립트에서 addEventListener()를 사용해 이벤트를 추가한 경우 반대로 이를 제거할 수도 있는데 이때 우리는 removeEventListener()를 사용한다.그리고 이 removeEventListener()는 EventTarget에 등록된 이벤트 리스너를 제거하는데 이때 이벤트 리스너는 이벤트의 종류와 이벤트 리스너 함수 자체의 조합으로 식별되어 제거되기 때문에 다양한 옵션이 일치하는 이벤트 리스너만 제거가 가능하다.element.removeEventListener('이벤트타입', 이벤트 콜백 함수)다만 여기서 유의할 점이 한 가지 있는데 보통 우리가 이벤트를 등록할 때에는 addEventListener()의 콜백 함수를 익명 함수로 작성한다는 점이다. 가독성에도 좋고 코..

자바스크립트에서 reduce() 함수의 루프 중간에 break하는 방법에 대한 글이다. 반복문을 중단시키는 일반적인 break 문법은 고차함수에서는 지원하지 않기 때문에 아래와 같이 reduce()의 반복 조건을 범위 밖의 값으로 설정하는 방식으로 끊어내는 수밖에 없다.고차 함수(Higher-Order Function)란, 함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드를 말한다. 최근 몇 년 간 자주 거론되는 함수형 프로그래밍의 핵심이기도 하며 자바스크립트를 함수형 프로그래밍에 알맞는 언어로 만들어주는 특성이기도 하다.const array = ['9', '91', '95', '96', '99'];const x = array .slice(0) ..