개발

function cat() { console.log('cat')}function dog() { console.log('dog')}function fox() { console.log('fox')}setTimeout(cat, 0)Promise.resolve().then(dog).then(fox)- 예제의 실행 순서: dog -> fox -> cat- 이벤트 루프는 하나의 마이크로 태스크 큐를 가지고 있으며 태스크 큐와는 다른 태스크를 처리한다. 마이크로 태스크에는 대표적으로 Promise 가 있으며, 기존 태스크 큐보다 우선권을 가지고 있다. 마이크로 태스크 큐가 비어지기 전까지 기존의 태스크 큐의 실행은 뒤로 밀림. # 대표적인 태스크 큐: setTimeout, setInterval, setImmediat..

Front-End/Javascript 2024. 9. 20. 17:58

function bar() { console.log('bar')}function foo() { console.log('foo')}function fooBar() { console.log('fooBar') setTimeout(bar(), 0) foo()}fooBar() - 호출 스택: 1. fooBar() [call stack +] 2. fooBar() 내부에 console.log [call stack +] 3. 2. 실행 완료 후 다음 코드 (fooBar() 존재) [call stack -] 4. setTimeout() [call stack +] 5. 4. 타이머 이벤트 실행되며 [task queue +, call stack-] 6. foo() [call stack +] 7. foo() 내부에..

Front-End/Javascript 2024. 9. 20. 17:24

- V8 엔진을 기준으로 런타임 외부에서 JS 비동기 실행을 돕기 위해 만들어진 장치이며 자바스크립트 코드를 효과적으로 실행하기 위한 다양한 장치들이 있음. # 1. 호출 스택 (call stack) 과 이벤트 루프 (event loop)- 호출 스택: JS 에서 수행해야 할 코드나 함수를 순차적으로 담아두는 stackfunction foo() { console.log('foo')}function bar() { console.log('bar')}function fooBar() { console.log('fooBar') foo() bar()}fooBar()- fooBar() 호출 후 내부에서 bar(), foo()를 순차적으로 호출하는 함수로 다음과 같은 순서로 call stack이 쌓이고 비워진다.  1..

Front-End/Javascript 2024. 9. 19. 15:51

- JS는 싱글 스레드에서 작동하며, 한 번에 하나의 작업만 동기 방식으로 처리할 수 있다.- 'process' 란 프로그램을 구동해 프로그램의 상태가 메모리상에서 실행되는 작업 단위를 의미하며, 소프트웨어의 복잡성으로 하나의 프로그램에서 동시에 여러개의 복잡한 작업을 수행하기 위해 탄생한 더 작은 실행 단위가 'thread'- 하나의 'process' 에서 여러개의 'thread'를 만들 수 있고, 'thread' 끼리는 메모리를 공유할 수 있어 여러가지 작업을 동시에 수행할 수 있으며, 'process' 내부에서 여러개의 'thread' 를 활용하면서 동시 다발적인 작업을 처리할 수 있게 됨.- 'thread' 는 하나의 'process'에 동시에 접근 가능하며, 동시에 여러 작업 수행 시 같은 자원..

Front-End/Javascript 2024. 9. 19. 15:51

- 클로저는 생성될 때마다 선언적 환경을 기억해야 하므로 추가적인 비용이 발생한다. /* 클로저와 그것에 따르는 비용을 확인하는 예제 */// 일반적인 함수const a = document.getElement('a')function job() { const arr = Array.from({length: 10000000}, (_, i) => i+1) console.log(arr.length)}a.addEventListener('click', job)// 클로저 함수function jobWithClosure() { const arr = Array.from({length: 10000000}, (_, i) => i+1) return function() { console.log(arr.lengt..

Front-End/Javascript 2024. 9. 19. 14:21

1. 함수 레벨 스코프 ( function level scope)  - var  2. 블록 레벨 스코프 (block level scope) - let, const - ECMA 2015 (ECMA6) 이 후 도입되었으며, 이전 버전에서는 블록문 스코프가 없었음. 3. 차이점3.1. 변수 선언 - var: 실행 맥락에 따라 지역 및 전역 변수를 선언하는데 모두 사용되며 선언되지 않은 전역변수를 생성할 수 있으므로 의도되지 않은 동작을 생성할 수 있음. - let, const:  지역 변수를 선언하는데 사용될 수 있음.3.2. 변수 할당 - 지정된 초기값 없이 var, let 문을 사용해서 선언된 변수는 undefined 값을 갖으며, 선언되지 않은 변수에 접근할 경우 ReferenceError 발생.var ..

Front-End/Javascript 2024. 9. 19. 13:45

- 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합. 어떤 함수가 그 주변의 상태를 나타내는 (어휘된) 함수와 함께 묶이는 것. function sum() { const a = 10 function innerSum () { const b = 10 console.log(a + b) } innerSum() //20 } sum() - sum 함수 안에 innerSum이 있고, innerSum 함수 안에서는 b 변수를 선언한 뒤 innerSum 함수 외부에 있는 a 변수와 b를 더해서 20을 출력한 것으로, 함수가 이처럼 중첩되어 있는 상황에서 변수의 범위가 어떻게 정의되어 있는지 확인할 수 있다. a 변수의 유효범위는 sum 함수의 전체이고 b 변수의 유효범위는 innerSum의 전체이..

Front-End/Javascript 2024. 4. 22. 23:43

- ES6 이전에는 프로토 타입을 활용해 클래스의 작동 방식을 동일하게 구현. /* Class */ class Cat { constructor(name) { this.name = name } meow() { console.log(`${this.name} 야옹`) } static hello() { console.log('안녕') } set age(value) { this.catAge = value } get age { return this.catAge } } /* babel로 변환 */ 'use strict' // class가 function처럼 호출되는 것 방지 function _classCallCheck(instance, Constructor) { if(!(instance instanceof Const..

Front-End/Javascript 2024. 4. 21. 20:17