JavaScript

JavaScript

JS | 클로저(Closure) 와 호이스팅

클로저란? 클로저란 함수와 렉시컬 환경의 조합으로 함수가 생성될 당시의 외부 변수를 기억하고 생성된 이후에도 계속 접근이 가능한 것을 의미한다. 클로저를 이해하기 위한 사전 지식 1. 실행 컨텍스트 (Execution Context) 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하는 객체이다. 자바스크립트 코드가 실행되면 자바스크립트 엔진은 콜스택에 전역 실행 컨텍스트를 담고, 코드를 한줄씩 읽어나가며 코드가 선언되었을때의 환경을 실행컨텍스트에 저장하게 된다. 이 과정은 생성 단계(Creation Phase) 와 실행 단계(Execution Phase) 를 거치면서 이루어지는데, 생성단계에서는 실행 컨텍스트를 생성하고 선언문 코드만 실행하여 환경 레코드(Environment Record)에 기록한..

JavaScript

JS | Execution Context: 실행 컨텍스트

Execution Context ( 실행 컨텍스트) 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 다르게 말하면 코드가 실행되기 위해 필요한 환경이라고 할 수 있다. 동일한 환경의 코드들을 실행할 때 필요한 환경정보들을 모아 컨텍스트를 구성하고 이를 Call Stack (콜 스택)에 쌓아올리고 최상위에 있는 컨텍스트와 관련된 코드들을 차례대로 실행하는 방식으로 전체 코드의 환경과 순서를 보장하게 된다. Call Stack은 LIFO ( Last In First Out), 즉 후입선출 방식으로 동작한다. 1. 실행 컨텍스트 동작 순서 최초에 전역 컨텍스트가 생성되고, 이 후 함수가 호출될 때마다 컨텍스트가 추가된다. 컨텍스트가 추가되면 VariableEnvironment, Lexi..

JavaScript

JS | Array

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..

JavaScript

JS | logical and data type

논리식 (Logical) 논리식에서 거짓(false)인 8가지 1. 0 2. -0 3. '' 4. "" 5. false 6. null 7. undefined 8. NaN AND조건, OR조건 AND 조건 : && OR 조건 : || &&는 AND 연산자로 양쪽 모두 True 여야 한다. 반면 ||은 OR 연산자로 양쪽 중 한 쪽만 True여도 True를 출력한다. 예시 *** AND조건 2&&3 : AND 조건이므로 2를 먼저 확인하여 True이면, 3 또한 확인해야합니다. 여기서는 3 또한 True이므로 마지막 값인 3이 출력된다. 0&&2 : 같은 AND 조건이지만, 앞의 0이 이미 False이기 때문에 뒷 부분과 관계없이 0이 출력된다. 'Hi'&&0 : 앞의 String은 True이므로 뒷 부분을..

JavaScript

JS | clock(digital) , add back to top button

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 ..

3jun
'JavaScript' 태그의 글 목록