JAVASCRIPT8 비동기 프로그래밍 JavaScript는 싱글 스레드 언어이다. 한번에 하나의 작업만 수행할 수 있다는 의미이다. 그렇다면 JavaScript 언어로 시간이 오래걸리는 작업을 수행하기 위해서는 어떻게 해야 할까? 오랜 시간이 걸리는 하나의 작업이 JavaScript가 가진 단일 스레드를 막고(블로킹)하게 될 것이다. 이런 블로킹 현상이 일어나는 것을 방지하고 JavaScript로 비동기 프로그래밍을 하는 방법에 대해 알아보자. 크게 세 가지 방법이 있다. 1. 콜백함수 사용 2. 프로미스 사용 3. Async/await 사용 하나 하나씩 살펴보자. 1. 콜백함수: 콜백함수를 통해 비동기 작업을 처리하는 방식. 필요한 비동기 작업에 따라 코드가 다음과 같은 모양이 될 수 있다. 이때, 이렇게 옆으로 누운 피라미드 형태를 띄는.. 2020. 11. 28. Runtime 과 Call Stack JavaScript 런타임은 크게 세 영역으로 구분된다. 1. 엔진 2. 웹 API 3. 이벤트 큐 이는 JavaScript의 브라우저 런타임에 해당하고 Node JS의 런타임과는 다르니 주의하자. (Node JS의 런타임에는 Web API 대신 C++ 바인딩과 스레드 풀이 존재한다) 첫번째, JavaScript 엔진은 크게 두 영역으로 나뉜다. 1. 콜 스택: 작성한 코드가 실행되는 영역. (아래서 더 디테일하게 다룰 예정) 2. 힙: 비구조화된 메모리 영역으로 원시형을 제외한 모든 참조형 객체에 대한 메모리 할당이 이루어지는 영역. 두번째, 웹 API는 JavaScript 엔진의 일부가 아니지만 웹 프로그래밍을 할 때 많이 사용되는 API로써 대표적인 예로는 DOM, timer 함수, fetch 함수.. 2020. 11. 28. 생성자 함수와 Prototype Prototype을 설명하기 전 생성자 함수(constructor function)를 이해하는 게 좋다. 생성자 함수는 다음과 같은 특징이 있다. 1. 일반 함수와 같지만 생성자 함수를 호출할 때 new 예약어를 사용한다. - new 예약어를 사용하여 생성자 함수를 호출하는 순간 다음과 같은 일이 발생한다. 새로운 빈 객체가 생성됨. this 키워드가 만들어진 빈 객체를 가리킴. prototype 프로퍼티가 만들어짐. 위에서 만들어진 객체가 리턴됨. 2. 생성자 함수명의 첫글자는 대문자로 한다. 3. 생성자 함수는 화살표 함수가 아닌 일반 함수로 선언해야 한다. 위 내용을 주의하여 생성자 함수를 만들어 보자. const Book = function(name, publicationYear) { consol.. 2020. 11. 17. Closure의 이해 우선 closure는 우리 개발자가 직접 생성하는 것이 아닌 특정 상황에서 JavaScript에 의해 자동으로 나타나는 결과이다. 우리가 closure를 직접 만들진 않지만 어떤 상황에서 어떤 원리에 의해 closure가 생성되는지 알아야 적절한 때에 용도에 맞게 closure를 활용할 수 있을 것이다. 몇가지 예제 코드와 해당 코드가 실행될 때의 JavaScript 엔진의 동작 방식을 통해 closure를 이해하보자. const attack = function() { let hp = 100; return function() { hp--; console.log(`Your current HP: ${hp}`) }; }; const user = attack(); 코드와 첨부된 사진을 같이 보면 global 실.. 2020. 11. 17. this 키워드 this 키워드(또는 변수)는 각 실행 컨택스트마다 별도로 생성되는 특별한 키워드로써 this 키워드가 사용되고 있는 함수의 주인을 가리킨다. this가 가리키는 것은 상황 별로 다음과 같이 달라진다. 1. 기본 함수의 this: undefined 2. 화살표 함수의 this: 화살표 함수 자체의 this는 존재하지 않지만 화살표 함수의 상위 함수를 가리킴. 3. 메서드의 this: 메서드를 포함하고 있는 객체를 가리킴. 4. 이벤트 핸들러의 this: 해당 이벤트 핸들러가 적용된 DOM을 가리킴. * 주의! this는 this가 사용되고 있는 함수 자체를 가리키거나 실행 컨택스트 마다 존재하는 개별 함수의 변수가 모여있는 공간인 variable environment을 가리키지 않는다. 다음 코드를 통해.. 2020. 11. 16. Hoisting과 Temporal Dead Zone (TDZ) JavaScript로 개발을 하거나 JavaScript로 짜여진 코드를 많이 본 사람들은 한번쯤 궁금했을 개념 hoising에 대해 알아보자. Hoising이란 변수나 함수가 선언되기 전에 이를 사용할 수 있는 현상을 말한다. 프로그램이 실행되기 전 JavaScript는 코드를 스캔하여 어떤 변수가 선언되어 있는지 확인하고 각 변수가 variable environment에 미리 생성된다. 이 작업은 각 함수에 대한 실행 컨택스트가 생성되는 단계에서 일어난다. 다음은 변수 및 함수에 따라 hoisting이 어떻게 적용되는지 표를 통해 살펴보자. Hoising과 더불어 초기값과 스코프에 대한 내용도 함께 정리했다. 위 표를 참고하여 다음 코드를 살펴보자. // undefined console.log(lang.. 2020. 11. 16. Scope와 Call Stack 본 포스팅을 통해 JavaScript Scope와 Call Stack의 차이를 알아보자. 우선 다음의 코드를 먼저 살펴보자. const a = 'How old are you?'; first(); function first() { const b = 20; sedonc(); function second() { const c = 30; third(); } } function third() { const d = 40; console.log(d + c + b + a); // ReferenceError } 함수가 불려진 순서에 따라 콜 스택에 쌓이기 때문에 위 코드에 대한 콜 스택은 다음과 같을 것이다. 각 함수별 실행 컨텍스트가 존재하며 각 실행 컨텐스트에 해당 함수에 포함된 변수들이 표기되어 있다. 함수 별 실.. 2020. 11. 14. 이전 1 2 다음
