슬픈코드

https://www.freecodecamp.org/news/understanding-the-core-of-nodejs-the-powerful-chrome-v8-engine-79e7eb8af964/

드디어 자바스크립트 엔진이다...

js엔진인 Chrome의 V8엔진을 설명하기 전에 엔진의 기본에 대해서 먼저 설명한다.

우리 시스템은 마이크로프로세스들로 구성되어있다. 이건 전기 신호를 받아 일을 수행하는 아주 작은 기계이다. 우리는 이 기계에 코드로 일을 수행하라는 명령을 보낸다. 

이 마이크로프로세스들은 언어로된 명령을 알아들을 수 있는데 마이크로프로세스 별로 해석하는 언어가 다르다. IA-32, x86-64, MIPS, ARM같은 것들이 있단다.

마이크로프로세스들과 가까운 명령어(언어로 작성된 코드)에 가까울 수록 low-level언어라 하고 우리가 작성하는 코드에 가까울 수록 high-level이라 한다. 설명이 좀 이상한데 언어가 더 추상화되어 있으면 high-level에 가깝다고 한다.

- V8 engine

V8은 구글이 만들고 배포한 js엔진 오픈소스이다. 갓 구글

근데 이게 진짜 엔진일까 ?? 사실 이건 js코드를 lower-level 또는 마이크로프로세스들이 이해할 수 있는 기계어에 가깝게 변환시켜 주는 역할을 한다.

js엔진도 여러가지가 있는데 Rhino, JavaScriptCore, SpiderMonkey 등이 있다. 이 엔진들은 ECMAScript라는 표준을 따르는데, 또 ECAMAScript는 스크립팅 언어의 표준을 따른다. JS 또한 이카마스크립트 베이스이다.

기본적으로 V8은 C++로 만들어졌고 브라우저 크롬과 node.js에서 사용된다. 그래서 C++ 프로그램에 JS를 끼워 넣을 수 있다. 물론 우리가 컴파일 하면 에러가 뜨지만 할 수는 있단다. ( 여기 내용을 몰라서 모르겠다 )

어찌 됬든 V8엔진이 만든 C++과의 합작이 JS를 하드웨어에 접근 할 수 있게 만들었고 이게 보통 JS엔진과 큰 차이를 보인다는 내용이 있었다. 뭐 대충 Node.js의 탄생같은거 말한거 같다.

https://javascript.info/settimeout-setinterval

setTimeout과 setInterval 메소드는 자바스크립트의 메소드라고 보기는 힘들다. 이건 웹 브라우저와 node.js에서 지원하는 메소드라고 보는게 편하다. ( 그렇다고한다 )

- setTimeout()

설정한 시간이 지나고 함수를 실행시키는 함수이다.

문법은 이렇게 생겼다. 1000의 숫자가 1초이다.

function sayHi() {
  alert('Hello');
}

setTimeout(sayHi, 1000); // Hello


function sayHi2(phrase, who) {
  alert( phrase + ', ' + who );
}

setTimeout(sayHi2, 1000, "Hello", "John"); // Hello, John

setTimeout을 취소 시키는 방법이 있다. 

let timerId = setTimeout(() => alert("never happens"), 1000);
alert(timerId); // timer identifier

clearTimeout(timerId);
alert(timerId); // same identifier (doesn't become null after canceling)

timerId 변수를 만들고 clearTimeout() 메소드를 사용하면 setTimeout을 취소할 수 있다.

- setInterval()

setInterval은 setTimeout과 문법이 유사하다. 이렇게 생겼다.

// repeat with the interval of 2 seconds
let timerId = setInterval(() => alert('tick'), 2000);

// after 5 seconds stop
setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);

setInterval 메소드의 함수는 설정한 시간이 지나면 한번 실행되는게 아니라 설정한 시간 마다 실행된다.

Zero delay setTimeout

setTimeout( func, 0 )과 setTimeout( func )은 특별한 상황에서 사용한다. 0은 시간의 디폴트 값이다. 

사실 0의 시간이 진짜 zero 시간이 아니다. 최소 4 milliseconds의 시간이 걸린다.

특정한 상황이란 상 '바로 다음'에 실행하는 상황이다. 

setTimeout(() => alert("World"));

alert("Hello");

예를 들어 위의 코드의 경우 hello가 알랏 되자마자 바로 world가 알랏된다. 

- requestAnimationFrame()

http://www.javascriptkit.com/javatutors/requestanimationframe.shtml

https://www.zeolearn.com/magazine/understanding-the-javascript-event-loop

C++, Ruby등의 언어와는 다르게 자바스크립트는 싱글스레드 언어이다. 싱글스레드는 한번에 한가지 일을 하고 하나의 일을 할 때 다른 일을 하지 못 한다. 이게 또 물론 멀티스레드 데드락 같은 현상이 이러나지 않지만 복잡한 일을 하지 못하는 단점을 가진다. 

 V8엔진이라고 구글이 만든 자바스크립트 엔진이 있다. 브라우저에서 동작한다. JS엔진은 2가지 메인 컴포넌트로 구성 되어있는데 그게 Heap과 Call Stack이다.

Heap은 모든 메모리가 할당되는 장소이다. 

Call Stack은 기본적으로 데이터 구조이고 우리가 프로그래밍을 하는 장소를 기록한다. 그러니까 만약 프로그램에 실행 컨텍스트(ex/ function call)가 있다면 콜 스텍이 실행 컨텍스트를 스택에 넣고 리턴을 받을 때 다시 꺼내는 역할을 한다. 

콜스텍 내부에서 어떻게 동작하는지 보자

function multiply(a, b) {
   return a*b;
}

function square(a) {
   const sq = multiply(a, a);
   
   console.log(sq);
}

square(3); // 9

JS엔진은 힙안에 함수할당에 대한 메모리를 만든다.  읽어내리다 square(3)코드에 도달하면 js엔진은 이걸 콜 스텍에 집어 넣는다.

먼저 함수 multiply, square를 힙에 올리고 square함수가 콜스텍에 들어간다. square함수 내부의 변수 sq가 그 다음으로 콜 스텍에 들어가고 sq변수가 참조하고 있는 multiply함수가 실행된다. multiply가 실행되고 sq변수가 콜 스텍에서 빠지고 콘솔로그sq가 다음으로 콜 스텍에 들어간다. 콘솔로그 찍고 콜스텍에서 빠지고 마지막으로 모든걸 다 실행한 함수 square가 콜 스텍에 빠지고 코드가 끝난다. 콜 스텍은 FILO( First Input Last Out )이다.

각 콜스텍의 입구는 Stack Frame이라 부르고 우리는 콘솔(크롬 F12눌러 나오는 창에서 console부분)에서 이걸 확인할 수 있다.

function customError() {
   throw new Error("Print the stack trace from here!!");
}
function foo() {
   customError();
}
function bar() {
   foo();
}
bar();

위의 코드를 실행하면 콘솔에

Uncaught Error: Print the stack trace from here !!
	at customError (main.js:2)
    at foo (main.js:6)
    at bar (main.js:10)
    at main.js:13

위의 에러가 뜬다. 여기에 콜 스텍 순서(Stack Trace)를 볼 수 있다.

- Asynchronous 

setTimeout은 비동기 API이다. 보통 동기적으로 코드가 작동되면 콜스텍에 들어간 코드가 끝나야 다음 코드라인으로 넘어가는데 비동기는 이러한 코드들을 비 동기적으로 실행하게 한다.

console.log("a");

setTimeout(() => {
	console.log("b");
}, 500);

console.log("c");

위의 코드를 실행하면 a,b,c 순서대로 로그가 찍히지 않는다.

먼저 a 로그가 콜 스텍에 들어갔다 나오며 로그를 찍고 다음으로 b로그를 찍기 위해 setTimeout이 콜 스텍에 들어가지만 실행하지 않고 시간이 될때 까지 대기 상태가 된다. 이때 안 기다리고 바로 c가 콜스텍에 들어가 로그를 찍고 빠지고 시간이 다 되면 b가 다시 콜 스텍에 들어가 b로그를 찍는다.

대기 상태의 코드들은 queue에 들어가게 된다. 이게 비동기방식으로 작동하는 코드이다.

그런데 자바스크립트는 싱글스레드인데 어떻게 동시적으로 프로세스들이 실행될 수 있는지 궁금할거다. 브라우저는 Wep APIs, Callback Queue, Event Loop같은 것들로 구성 되어있는데 이게 JS런타임 보다 많은 일을 하게한다.

Wep APIs는 우리가 요청하는 스레드들이고 그 스레드들을 콜 스텍이 비어있을 때 프로세스들을 실행하게 해준다. 

위에 처럼 생겼다.

아까 그 비동기 코드들을 브라우저 구성요소와 함께 보면 이렇다.

setTimeout같은 API들은 js런타임에 존재하는게 아니라 Web API에 의해 실행된다. 이게 callback과 함께 등록되며 타이머가 만료되면 event queue에 들어가고 이벤트 루프가 콜스텍이 비었을 때 이걸 콜스텍으로 보낸다. 대충 위의 구조로 작동된다.

Event Loop는 한가지 일을 하는데 그건 Call Stack과 Callback Queue를 지켜보는 거다. 콜 스텍이 비어있을 때 이벤트 루프는 큐에 있는 첫 번째 이벤트를 갖고 스텍으로 보내준다. 이게 다다.

https://www.freecodecamp.org/news/javascript-modules-a-beginner-s-guide-783f7d7a5fcc/

작곡가는 곡의 파트를 나누고, 작가는 글의 챕터를 나눈다. 프로그래머는 프로그램의 코드를 모듈로 나눈다. 모듈( Module )이 뭔가 ?

간단히 생각해서 코드같은 언어의 뭉치? 같은 개념이라고 생각 할 수 있다.

물론 좋은 모듈은 특정 목적을 위해 기능적으로 구분된 뭉치라고 볼 수 있다.

이같은 모듈을 프로그램에 통합 시키는 방법이 여러가지 있다.

- Anonymous closure

(function () {
  // We keep these variables private inside this closure scope
  
  var myGrades = [93, 95, 88, 0, 55, 91];
  
  var average = function() {
    var total = myGrades.reduce(function(accumulator, item) {
      return accumulator + item}, 0);
    
      return 'Your average grade is ' + total / myGrades.length + '.';
  }

  var failing = function(){
    var failingGrades = myGrades.filter(function(item) {
      return item < 70;});
      
    return 'You failed ' + failingGrades.length + ' times.';
  }

  console.log(failing());

}());       // ‘You failed 2 times.’

위의 예제에서는 average, failing 변수에 익명의 클로저 함수를 할당하고 전체를 IIFE( Immediately-Invoked Function Expressions )로 모듈을 만들어 사용하였다.

이러한 방식의 장점은 함수 내부의 로컬 변수에 접근을 하면서 동시에 글로벌 변수들의 namespace를 해치지 않는다는 점이다.

- Global import

(function ( globalVariable ) {

  // Keep this variables private inside this closure scope
  var privateFunction = function() {
    console.log('Shhhh, this is private!');
  }

  // Expose the below methods via the globalVariable interface while
  // hiding the implementation of the method within the 
  // function() block

  globalVariable.each = function(collection, iterator) {
    if (Array.isArray(collection)) {
      for (var i = 0; i < collection.length; i++) {
        iterator(collection[i], i, collection);
      }
    } else {
      for (var key in collection) {
        iterator(collection[key], key, collection);
      }
    }
  };

  globalVariable.filter = function(collection, test) {
    var filtered = [];
    globalVariable.each(collection, function(item) {
      if (test(item)) {
        filtered.push(item);
      }
    });
    return filtered;
  };

  globalVariable.map = function(collection, iterator) {
    var mapped = [];
    globalUtils.each(collection, function(value, key, collection) {
      mapped.push(iterator(value));
    });
    return mapped;
  };

  globalVariable.reduce = function(collection, iterator, accumulator) {
    var startingValueMissing = accumulator === undefined;

    globalVariable.each(collection, function(item) {
      if(startingValueMissing) {
        accumulator = item;
        startingValueMissing = false;
      } else {
        accumulator = iterator(accumulator, item);
      }
    });

    return accumulator;

  };

 }( globalVariable ));

위의 글로벌 임폴트 예제가 좀 길긴 한데 이러한 방식은 클로저를 만드는 방법과 비슷하다.  받은 파라미터가 글로벌 변수인 점을 빼고.

이렇게 하는 이유는 그냥 코드를 읽기 쉽게 하려고 한단다.

- Object interface

var myGradesCalculate = (function () {
    
  // Keep this variable private inside this closure scope
  var myGrades = [93, 95, 88, 0, 55, 91];

  // Expose these functions via an interface while hiding
  // the implementation of the module within the function() block

  return {
    average: function() {
      var total = myGrades.reduce(function(accumulator, item) {
        return accumulator + item;
        }, 0);
        
      return'Your average grade is ' + total / myGrades.length + '.';
    },

    failing: function() {
      var failingGrades = myGrades.filter(function(item) {
          return item < 70;
        });

      return 'You failed ' + failingGrades.length + ' times.';
    }
  }
})();

myGradesCalculate.failing(); // 'You failed 2 times.' 
myGradesCalculate.average(); // 'Your average grade is 70.33333333333333.'

 self-contained object interface(이게 한국말로 뭔지 모르겠다)를 사용해서 모듈을 만든 예제이다.

이러한 방식의 모듈의 장점은 어떤 변수나 메소드를 private할지 혹은 expose할지 결정할 수 있다는 점이다.

함수안에 return 안에 있는 것들이 노출을 시키려고 의도를 하였고, 나머지 부분(myGrades)를 프라이빗으로 감추었다.