클로저란? 클로저란 함수와 렉시컬 환경의 조합으로 함수가 생성될 당시의 외부 변수를 기억하고 생성된 이후에도 계속 접근이 가능한 것을 의미한다. 클로저를 이해하기 위한 사전 지식 1. 실행 컨텍스트 (Execution Context) 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하는 객체이다. 자바스크립트 코드가 실행되면 자바스크립트 엔진은 콜스택에 전역 실행 컨텍스트를 담고, 코드를 한줄씩 읽어나가며 코드가 선언되었을때의 환경을 실행컨텍스트에 저장하게 된다. 이 과정은 생성 단계(Creation Phase) 와 실행 단계(Execution Phase) 를 거치면서 이루어지는데, 생성단계에서는 실행 컨텍스트를 생성하고 선언문 코드만 실행하여 환경 레코드(Environment Record)에 기록한..
예전에 인스타그램 클론을 하면서 댓글을 입력하면 document.createElement 를 사용하여 댓글 element를 추가하여 업데이트 하는 기능을 구현했었다. 타입스크립트를 사용하여 이처럼 부모요소에 element를 생성하는 방법에 대해서 알아보고자 한다. 타입스크립트로 이 기능을 구현하기 위해서는 우선 inserAdjacentElement 메서드에 대해 공부해야한다. Element.insertAdjacentElement() Element 인터페이스의 메서드 중 하나인 insertAdjacentElement 는 주어진 노드요소를 주어진 위치에 넣어주는 역할을 한다. insertAdjacentElement(position, element); position 에는 targetElement와 연관된 4..
Execution Context ( 실행 컨텍스트) 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 다르게 말하면 코드가 실행되기 위해 필요한 환경이라고 할 수 있다. 동일한 환경의 코드들을 실행할 때 필요한 환경정보들을 모아 컨텍스트를 구성하고 이를 Call Stack (콜 스택)에 쌓아올리고 최상위에 있는 컨텍스트와 관련된 코드들을 차례대로 실행하는 방식으로 전체 코드의 환경과 순서를 보장하게 된다. Call Stack은 LIFO ( Last In First Out), 즉 후입선출 방식으로 동작한다. 1. 실행 컨텍스트 동작 순서 최초에 전역 컨텍스트가 생성되고, 이 후 함수가 호출될 때마다 컨텍스트가 추가된다. 컨텍스트가 추가되면 VariableEnvironment, Lexi..
Callback은 다른 function이 실행된 뒤에 실행되는 function이다. 자바스크립에서 function은 객체이다. 이점 때문에 function은 다른 function들을 arguments로 가질 수 있다. 그리고 다른 function을 return할 수 있다. 다른 function들을 return하는 function을 higher-order functions라고 하고, argument가 되는 function들을 callback function이라 한다. Callback 함수가 왜 필요한가? Javascript는 event driven 언어이다. 이것은 다음 단계로 실행되기 전에 response를 기다리는 대신에 다른 event들을 listening하는 동안 계속해서 실행되는 것을 의미한다. ..
Array 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); console.log(fruits[fruits.length - 1]); // array의 index는 0부터 시작 3. Looping over an array mission. print all fruits a. for for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } b. for of for (let fru..
clock (digital) #html 00:00 -------------------------------------------------------- #js const clock = document.querySelector(".clock"); const clockTitle = clock.querySelector("h1"); function getTime() { const date = new Date(); const hours date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}`:hours} : ${minutes ..
