Javascript 조금 더 잘 알기

JavaScript 조금 더 잘 알기

1. Event loop
1. Execution context
1. Prototype

Nodejs by wikipidia
Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는
소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일
스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. (+Event-driven)

const crypto = require('crypto');
const start = Date.now();
crypto.pbkdf2( 'a', 'b', 100000, 512, 'sha512', () => {
console.log( '1:', Date.now() - start );
});
crypto.pbkdf2( 'a', 'b', 100000, 512, 'sha512', () => {
console.log( '2:', Date.now() - start );
});
// 1: 975
// 2: 976

is Single Thread ?
- 자바스크립트는 싱글스레드지만 자바스크립트 런타임은 싱글스레드가 아니다.
- nodejs는 event loop를 돌리는데 하나의 스레드를 사용함.
JavaScript environment runs in a single thread. All the other threads are handled by a C level thread pool.
- libuv => thread pool
- default UV_THREADPOOL_SIZE = 4
https://yoon.site/node-js%EB%8A%94-single-thread%EA%B0%80-%EC%95%84%EB%8B%88%EB%8B%A4/
https://nodejs.org/ko/docs/guides/event-loop-timers-and-nexttick/

자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 이벤트 루프에 기반한 동시성
(concurrency) 모델을 가지고 있습니다.
동시성
동시성(Concurrent)는 실제 물리적으로 동시에 일어나는 것이 아니라, 흐름을 실행시키는 것은 하나(e.g. CPU 코어 혹은 쓰레드)지만 작은 타임 슬라이스(Time slice, Time
quantum)단위로 다른 흐름을 돌아가면서 실행시켜서 동시에 일어나는 것 처럼 보이게 하는 방식입니다 . 논리적인 의미에 동시 실행으로 볼 수 있습니다.
병렬성
병렬성(Parallel)은 실제로 흐름을 실행시키는 것(e.g. CPU 코어 혹은 쓰레드)이 복수개라서 , 각각 실행 흐름을 할당받아 동시에 실행시킵니다 . 물리적인 의미에 동시
실행입니다.
https://eine.tistory.com/entry/자바스크립트 -동시성-모델과-이벤트-
Event loop

Heap
구조화 되지않은 메모리영역. 객체, 변수들이 할당됨
Call stack
함수 호출을 기록하는 데이터 구조
Callback queue(Task queue, Message queue)
처리할 콜백 함수들을 저장하는 데이터 구조

https://vaibhavgupta.me/2018/01/20/understanding-event-loop/

https://medium.com/@theflyingmantis/javascript-single-threaded-non-blocking-asynchronous-concurrent-language-ffae97c57bef
- Call stack에 아무것도 없을때 까지
Callback queue에서 dequeue하지
않음
while(queue.waitForMessage()) {
queue.processNextMessage()
}
아무 메시지도 없다면 새로운 메시지 도착을
동기적으로 기다립니다.
https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=emb_logo

$('.btn').click(function() {
showWaitingMessage();
longTakingProcess();
hideWaitingMessage();
showResult();
});
https://meetup.toast.com/posts/89
주의해야 될 코드

showResult();
});
브라우저는 1초에 60프레임을 그려야함. 16.6ms마다 렌더링이
일어난다.
즉 16.6ms마다 repaint 요청을 task queue에 삽입.

setTimeout(function() {
showResult();
}, 0);
});
비싼작업들을 적절히 스케쥴링해줘야함

try {
$.getJSON('/api/members', function (res) {
// 에러 발생 코드
});
} catch (e) {
console.log('Error : ' + e.message);
}
});

● Micro task queue
Promise, Observer API, process.nextTick
https://engineering.linecorp.com/ko/blog/dont-block-the-event-loop/
1. 마이크로 태스크가 있는지 먼저 확인하고,
있다면 모든 마이크로 태스크를 먼저
수행한다.
2. 처리할 태스크가 있다면 가장 오래된
태스크를 실행한다.
3. 처리할 태스크가 없다면 다음 태스크를
기다린다.
4. 다시 처리할 작업이 있다면 1번으로
돌아가 반복한다.

Execution context
An execution context is a specification device that is used to
track the runtime evaluation of code by an ECMAScript
implementation.
실행 컨텍스트는ECMAScript 구현으로 코드의 런타임 평가를 추적하는 데 사용되는 사양 장치입니다.

Global Execution Context
Functional Execution Context
Eval Function Execution Context

Execution context의 구조
Activation / Variable Object
EC에서 사용 될 변수, 매개변수와 arguments, 함수를
저장한다.
Scope Chain
EC를 차례로 중첩해서 가지고 있는 컬렉션. 현재의
Variable Object + 상위 EC의 Scope chain.
this
현재 Context가 참조하고 있는 객체. 객체 속의 함수
(메소드)일때와, this를 직접 지정해주는 형식으로
함수를 호출 했을 때를 제외하곤 항상 전역객체를
가르킨다.

1. Creation Phase
1. Execution Phase.
create execution context

1. Create Variable object
Variable object가 현재 Context에 선언된 변수와 함수로 채워진다. (변수의 값이 초기화되는 것이 아니라
undefined로 set됨) Global context에서는 Global object가 Variable object가 된다.
2. Initialize Scope chain
Scope chain을 생성하고 초기화 한다. 이때 현재의 Variable object가 최상위에 들어가고 상위 함수의 Scope
chain이 차례로 중첩된다. Global context에서는 Global object를 참조한다.
3. this binding
Context에서this에 어떤 객체를 할당 할지 결정한다. 특별한 경우가아니라면 Global object가 할당된다.
Creation Phase

Execution Phase
실행해야할 코드를 해석하고 실행한다. 변수를 할당하고 만약 변수를
찾을 수 없다면 Scope chain을 통해 찾는다.

function func(pass) {
var a = 1;
var b = function innerExpression(){}
function innerDeclaration(){}
}
func(1);
funcExectuionContext = {
Scope Chain,
Activation Object = {
arguments = {
0: 1
length: 1
},
pass: 1,
a: undefined,
b: undefined,
innerDeclaration: reference to innerDeclaration
}
} https://baeharam.github.io/posts/javascript/jsexecution-context/

Prototype
자바스크립트는프로토타입 기반의 동적 다중 패러다임 스크립트 언어로,
객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원한다.(by MDN)

객체
자바스크립트는 많은 종류의 객체들로 이루어져 있다.
자바스크립트에서 원시 타입(Primitives : string | number | bigint | boolean | null |
undefined | symbol)를 제외하고는 모두 객체이다.
객체를 생성할 때, 생성된 객체는 그것의 원형을 표현하기 위한 역할을 수행하는 또
다른 객체를 참조하게 되는데, 이 객체를 프로토타입이라고 부른다.
많은 객체지향 언어에서 객체의 원형이 되는 개념으로 사용하는것은 "클래스"이다.
하지만 자바스크립트는 클래스가 아닌 프로토타입을 통해 객체를 생성한다.

Prototype
자바스크립트에서 function 문법을 통해 정의한 일반적인 함수는 생성자
함수로 사용 할 수 있다. 그리고 생성자 함수를 통해 new 키워드와 함께
사용해 객체를 생성할때 아래와 같은 과정을 거친다.
1. 새로운 빈 객체를 할당한다.
2. 생성한 객체에 __proto__라는 프로퍼티를 만들고 생성자 함수의
prototype의 레퍼런스를 할당한다.
3. 생성자 함수에서 선언한 this 속 프로퍼티들을 만든 객체에 할당한다.
4. 그렇게 생성된 객체를 반환한다.

Prototype
- 생성한 객체에 __proto__라는 프로퍼티를 만들고
모든 객체는 __proto__라는 프로퍼티를 가지고 있다. 이 프로퍼티에 접근하면
내부적으로 빌트인 메소드인 Object.getPrototypeOf가 호출되어 해당 객체의 부모격
객체라고 할 수 있는 프로토타입 객체를 반환한다. 즉, 어떤 객체의 프로토타입또한
객체이기 때문에 프로토타입의 프로토타입의 프로토타입… 체이닝이 가능하다.
https://tc39.es/ecma262/#sec-ordinary-object-internal-methods-and-internal-slots
All ordinary objects have an internal slot called [[Prototype]]. The value of this internal slot is either null or an object and is used for implementing inheritance.

Prototype
- 생성자 함수의 prototype의 레퍼런스를 할당한다
자바스크립트에서 함수는 객체이다. 모든 객체가 __proto__라는 프로퍼티를 가지고 있는
반면, 그 중 function키워드로 생성한, 생성자 함수로 사용될 수 있는 함수들은
prototype이라는 프로퍼티를 가지고있다. 이 프로퍼티가 참조하는 객체는 이 함수가
생성자 함수로 사용되었을때 자식객체가 __proto__ 프로퍼티를 통해 참조하도록 할
객체이다. 그리고 prototype프로퍼티를 통해 참조하는 이 객체는 constructor라는
프로퍼티를 가지고 이 프로퍼티는 생성자 함수를 다시 참조한다.
https://tc39.es/ecma262/#sec-ordinary-object-internal-methods-and-internal-slots
※ 함수도 객체이므로, __proto__프로퍼티를 통해 함수의 원형이 되는 객체를 참조한다

상속
자바스크립트에서도class ... extends ... 키워드를 통해 상속을 구현할 수 있다.
하지만 자바스크립트는여타 언어들과는 다르게, 내부적으로 class라는 개념이 존재하지 않는다. 따라서
당연히 클래스형 상속도 존재하지 않는다. class 와 extends는 사실 프로토타입을 통해 잘 동작하도록
구현해놓은 Syntactic sugar 이다.
class가 생기기전의 자바스크립트에서도객체지향적으로코드를 작성하기위한 숱한 노력들이 있었고,
익히 알려진 여러가지 방법들이 존재한다. 그것을 매끄럽게 사용할 수 있도록 내부적으로 구현해놓은
문법이다.

class Parent {
등짝스매싱(){
console.log('철썩');
}
밥먹기(){
console.log('냠냠');
}
}
class Child extends Parent {
용돈드리기(){
console.log('입금');
}
밥먹기(){
console.log('쩝쩝');
}
}
var me = new Child();

class Parent {
등짝스매싱(){
console.log('철썩');
}
밥먹기(){
console.log('냠냠');
}
}
class Child extends Parent {
용돈드리기(){
console.log('입금');
}
밥먹기(){
console.log('쩝쩝');
}
}
Child.prototype.gender = 'male'
var me = new Child();
var you = new Child();
console.log(me.gender); // ① 'male'
console.log(you.gender); // ① 'male'
you.gender = 'female';
console.log(me.gender); // ② 'male'
console.log(you.gender); // ① female'
객체의 프로퍼티를 참조하는 경우, 해당 객체에
프로퍼티가 없는 경우, 프로토타입 체인이 동작한다.
객체의 프로퍼티에 값을 할당하는 경우, 프로토타입
체인이 동작하지 않는다. 이는 객체에 해당
프로퍼티가 있는 경우, 값을 재할당하고 해당
프로퍼티가 없는 경우는 해당 객체에 프로퍼티를
동적으로 추가하기 때문이다.
https://poiemaweb.com/js-prototype

끝
(이제 여러분도 “자바스크립트는 왜그래요..?” 라는 동료의 질문에 대답할 수 있습니다)

Javascript 조금 더 잘 알기

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Javascript 조금 더 잘 알기

Ähnlich wie Javascript 조금 더 잘 알기 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

Javascript 조금 더 잘 알기