일부 JS.

7413 단어 webdevjavascript
이 블로그에서는 지금까지 배우고 사용한 JS 개념 중 일부를 공유할 것입니다.
  • Single threaded JS.
  • JS engine and the browser.
  • ECMAScript.
  • A little bit about Date.
  • How JS executes.
  • Closures.
  • Async-await.
  • Some quotes from Eloquent JS.

  • JS는 단일 스레드입니다.

    JS is single threaded. It only has one call stack. It does not have multiple threads. It uses the environment that it is running in to deal with the asynchronous tasks. For web apps, it uses the browser APIs to execute the sync/async tasks. Here은 알고 싶은 브라우저 API 목록입니다.

    JS 엔진 및 브라우저.

    Most popular JS engine is Chrome V8 and along with Chrome browser, it's also used by NodeJS. A JS engine provides everything that is specified in ECMAScript standard. Out of all these, memory heap and call stack will be the focus of this blog. Memory heap is used for the space allocation and call stack is used for executing the code. We'll go in detail about the execution steps later . 요약하면 JS 엔진은 JS가 실행할 런타임 환경을 제공합니다. 엔진은 브라우저와 독립적이지만 브라우저와 협력합니다.

    ECMA스크립트

    Initially, I was a bit confused about the differences and would use this name interchangeably with javascript. These are the two different entities. JavaScript is the language that follows a standard called ECMAScript. This is the standard that any language has to follow to be called an ECMASCript language. JScript is another language that follows this specification. The standards are specified in the document called ECMA 262. These standards are decided by a group called TC39. This group has programmers, academics and many others who have a major contribution in deciding the course of this specification called ECMAScript. You can read more about this here

    날짜에 대해 조금

    JS has provided the date object and its methods which can be used to manipulate dates in our app. Out of those, there is a method called getDate() which returns the date. There have been times when I was required the number of days of a month. It can be done by using

    new Date(2022,month,0).getDate()
    

    0 here tells JS to give number of days of month previous to what we have specified. month here is a digit and months are 0 indexed in JS. So if I want to check number of days in Feb 2022, i call it like

    new Date(2022,2,0).getDate()
    

    Here 2 works because I want month previous to March. So when you read it, it aligns with our notion of addressing months as 1-indexed. Hence, its easier to remember.

    JS가 실행되는 방식.

    Now, how does JS execute in the browser. JS is an interpreted language. This does not mean it does not get compiled. It gets compiled during the runtime unlike languages like C++ that are compiled well before execution. This Just in Time compilation is done by the JS engine. Apart from this, browser provides APIs like DOM, AJAX etc. You might not know this but console is also an API and it is not part of JS. In case of console object, it's easier to understand the program flow because it is not an async API. But what happens when an async task is performed. Let's say we have an async task of fetching some data and we are using fetch API.

    fetch("https://rickandmortyapi.com/api/character?page=1", {
      method: "GET"
    })
      .then((res) => res.json()) //callback function to convert response stream to JSON 
      .then((data) => console.log(data.results));
    
    Browser fetches the data from the url specified and the callback function that was specified is then pushed to the microtask queue to be executed by the call stack. Event loop is what takes care of providing these tasks back to the call stack from the queue. As soon as the call stack is empty or it only has global context (we'll talk about execution context later ) 이벤트 루프가 해당 콜백 함수를 대기열에서 팝하고 스택에 푸시합니다. 이제 마이크로태스크 큐보다 우선순위가 낮은 이벤트 큐라는 큐가 하나 더 있습니다. fetch와 같은 약속 기반 API를 사용하는 모든 작업은 마이크로태스크 대기열에 푸시되고 setTimeout와 같은 다른 비동기 작업은 이벤트 대기열에 푸시됩니다. 두 대기열 모두 스택에 푸시되기를 기다리는 작업이 있는 경우 마이크로 작업 대기열에 우선 순위가 부여됩니다. 이 후 콜 스택은 콜백 함수를 실행하고 실행을 계속합니다.

    이제 자세히 알아보기 위해 JS는 두 단계로 실행됩니다. 첫 번째는 메모리 할당 단계이고 두 번째는 코드 실행 단계입니다. 이러한 단계에 대해 자세히 설명하기 전에 실행 컨텍스트에 대해 말씀드리고자 합니다.

    좋은 웹페이지 즐겨찾기