보통 서버에 데이터를 전송하기 위해 아래와 같이 HTML5의 을 이용해 구성하여 제출해 본 경험들이 있을 것이다. 아이디 비밀번호 성별 남자 여자 응시분야 영어 수학 이처럼 보통은 HTML5의 을 이용해 input 값을 서버에 전송하지만 자바스크립트에서는 FormData()를 이용해 동일하게 스크립트로도 전송할 수 있다. 즉 FormData란 HTML이 아닌 자바스크립트 영역에서 폼 데이터를 다루는 객체라고 할 수 있다. 그리고 HTML에서의 submit 제출 동작은 Ajax를 통해 서버에 제출하는 것으로 이해할 수 있다.let formData = new FormData(); // new FromData()로 새로운 객..

객체 리터럴 { ... }을 사용하면 객체를 쉽게 만들 수 있다. 하지만 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 하는데 이럴 때 new 연산자와 생성자 함수를 사용하면 편리하다. 생성자 함수생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 다만 생성자 함수의 경우 아래의 두 가지 관례를 따른다.함수 이름의 첫 글자는 대문자로 작성한다.반드시 'new' 연산자를 붙여 실행한다.function User(name) { this.name = name; this.isAdmin = false;}let user = new User("John");alert(user.name); // Johnalert(user.isAdmin); // false n..

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 });