화살표 함수를 지양해야할 상황
개발하는 상황에서 주로 화살표 함수를 많이 사용했지만, 여러 코드를 보면서 일반 함수를 사용하는 경우도 종종 보았다. 화살표 함수, 일반 함수를 선택하는 근거가 있어야 한다고 판단하여 나의 기준을 세워보려한다. 1. 메서드를 정의할 때 메서드를 정의할 때 화살표 함수를 사용하면, this가 전역객체(window)를 가르키기 때문에 원치않는 결과를 얻게된다. 대체로 전역객체 를 this로 가리킬 상황은 드문 것 같다. // Bad const person = { name: 'Lee', sayHi: () => console.log(`Hi ${this.name}`) }; // sayHi 프로퍼티에 할당된 화살표 함수 내부의 this는 상위 스코프인 전역의 this가 가리키는 // 전역 객체를 가리키므로 이 예제..
클래스
클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 생성자 훔수와 프로토 타입을 통해 객체지향 언어의 상속을 구현할 수 있다. 하지만 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식에 혼란을 느낄 수 있으며, 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었다. ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며..
async / await
모던 자바스크립트 딥다이브를 공부한 내용입니다. async / await ES8에서는 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await가 도입되었다. async/await 는 프로미스를 기반으로 동작한다. const fetch = require('node-fetch'); async function fetchTodo() { const url = 'https://jsonplaceholder.typicode.com/todos/1'; const response = await fetch(url); const todo = await response.json(); console.log(todo); // {userId: 1, id: 1, title: 'delectus aut autem', c..
프로미스
모던 자바스크립트 딥다이브를 공부한 내용입니다. 비동기 처리를 위한 콜백 패턴의 단점 콜백 헬 아래 코드 처럼 GET 요청을 전송하고 서버의 응답을 전달 받는 get 함수도 비동기 함수다. get 함수가 비동기 함수인 이유는 get 함수 내부의 onload 이벤트 핸들러가 비동기로 동작하기 때문이다. get 함수를 호출하면 GET 요청을 전송하고 onload 이벤트 핸들러를 등록한 다음 get 함수내의 명시적인 return 이 없기때문에 undefined를 반환하고 즉시 종료된다. 즉, 비동기 함수인 get 함수 내부의 onload 이벤트 핸들러는 get 함수가 종료된 이후에 실행된다. 따라서 get 함수의 onload 이벤트 핸들러에서 서버의 응답 결과를 반환하거나 상위 스코프의 변수에 할당하면 기대한..
태스크 큐와 마이크로 태스크 큐
프로미스에 대해 공부하다가, 마이크로 태스크 큐에 대해 알게되었는데 우선순위가 궁금해져 자료들을 찾아보았다. 이벤트 루프 이벤트 루프란 태스크가 들어오길 기다렸다가 콜 스택이 비어 있는 것을 확인하면 이를 콜스택으로 옮기는 자바스크립트 엔진 내부에서 끊임 없이 돌아가는 루프이다. 태스크 큐와 마이크로 태스크 큐 2개의 큐 모두 콜백함수가 들어간다는 점에서 동일하지만, 어떤 함수를 실행하여 생성된 콜백함수냐에 따라 들어가는 방향이 달라진다. 콜백함수를 태스크 큐에 넣은 함수들 setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O , UI 렌더링, 이벤트 리스너 콜백함수를 마이크로태스크 큐에 넣는 함수들 Promise, Object.observ..
실행 컨텍스트
모던 자바스크립트 딥다이브를 공부한 내용입니다. 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 평가와 실행 과정으로 나누어 처리한다. 소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다. 스스코드 평가 과정이 끝난 후 런타임이 실행된다.(소스코드가 순차적으로 실행된다.) 이때 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트의 스코프에 등록된다. 다음과 같은 소스코드가 있다. 먼저 소스코드 평가 과정에서 변수 선언문 var x; 가 실행된다. 이때 생성된 변수 식별자 x 는 실행 컨텍스트..
자바스크립트 엔진의 최적화 기법
JavaScript는 인터프리터 언어로 알려져있습니다. 최근 대부분의 모던 자바스크립트 엔진(크롬의 V8, 마이크로 소프트 엣지의 ChaKra 등)은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결하였습니다. 이러한 방식을 Adaptive JIT Compilation 이라고 하는데, 이러한 엔진을 사용하게 된 흐름을 이해하려면 컴파일러, 인터프리터 , JITC 에 대해 알 필요가 있습니다. 컴파일러특징코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드(CPU가 바로 실행할 수 있는 기계어)로 변환한 후 실행합니다.실행 파일을 생성합니다.컴파일 단계와 실행 단계가 분리되어 있습니다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행합..
자바스크립트 이벤트 루프
비동기 프로그래밍 함수가 호출되면 함수 코드가 평가됩니다. 이때 실행 컨텍스트가 생성 됩니다. 생성된 실행 컨텍스트는 호출 스택에 푸쉬되고 함수 코드가 실행됩니다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거됩니다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미합니다. 실행 컨텍스트 스택의 최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 대기중인 태스크 들입니다. 자바스크립트 엔진은 싱글 스레드 방식으로 동작합니다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생합니다. 현재 실행 중인 태..