티스토리 뷰

Languages

JavaScript : 기본적인 내용

Korean Eagle 2021. 2. 23. 23:21
728x90

1. 자바스크립트 실행 시 2가지의 과정을 거친다.

  1-1 생성 과정, 실행 과정이다. 이 두 과정은 순차적으로 실행된다.

 

2. 생성 과정

  2-0 생성 과정에서 실행 컨텍스트(Execution Context)가 생성된다.

    2-0-1 실행 컨텍스트에는 this 변수가 생성되고 변수 환경이 만들어지고 외부 환경이 지정된다.

    2-0-2 변수 환경은 실행 컨텍스트 내에 존재하는 변수들이 저장되는 공간이다.

    2-0-3 외부 환경은 Scope Chain(경계 연결)이 연결되어 변수가 변수 환경에 존재하지 않는 경우 연결을 따라간다.

    2-0-4 Global 실행 컨텍스트는 global 객체가 지정된다.(브라우저는 window 객체, 노드는 global 객체이다.)

  2-1 생성 과정은 먼저 메모리에 함수와 변수의 공간을 할당하는 과정이다.

  2-2 함수는 전체가 복사되어 저장된다.

  2-3 변수는 변수만큼의 공간이 할당되고 기본적으로 undefined가 지정된다.

  2-4 생성 과정이 종료 했을 때 이미 변수와 함수의 존재가 파악되어 있기 때문에 실제 위치가 바뀌는 것은 아니지만

    2-4-1- hoist라는 표현으로 함수와 변수의 위치가 실행 시작부분의 가장 상단으로 올라가는 효과로 나타난다.

  2-5 Scope Chain은 변수가 존재하지 않은 경우 외부 환경을 검색하기 위한 연결고리이다.

    2-5-1 가장 중요한 점은 해당 실행 컨텍스트와 연결되는 외부 환경은 코드의 위치(Lexical)로 결정된다는 것이다.

    2-5-2 다시 말하면 아래 소스의 함수 a, b, c의 외부 환경은 모두 동일하다. 모두 global 아래에 위치하기 때문이다.

    2-5-3 함수 d의 외부 환경은 함수 c가 된다. 즉 함수 d에서 사용한 변수가 존재하지 않는 경우 함수 c를 뒤지고 

      2-5-3-1 없는 경우 global의 변수를 뒤지게 된다.

 

function a() {

}

function b() {

}

function c() {

  function d() {
    
  }
}

 

3. 실행 과정

  3-1 실행 과정은 생성 과정이 완료된 후 실제 코드가 수행되는 부분이다. 

  3-2 실행 과정 시 함수 호출이 될 경우 실행 스택(Execution Stack)이 생성된다.

  3-3 실행 과정에서 함수가 호출될 경우에는 새로운 실행 컨텍스트가 생성되고 실행 스택의 상단에 올라간다.

  3-4 실행 과정에서 변수의 값이 변경되면 생성 과정에서 만들어진 변수 환경에 존재하는 변수의 값이 변경 된다.

 

4. 자바 스크립트의 객체는 단순히 이름과 값의 쌍이다. 이름 안에 다른 이름 쌍이 들어 있다고 생각하면 된다.

 

5. 자바 스크립트는 single threaded 방식이고 synchronous 방식으로 동작한다. 즉 명령어가 순차적으로 실행된다.

  5-1 자바 스크립트 코딩 시 비동기식 코딩이 대부분을 차지하고 있는데, 자바스크립트는 동기식 언어이다.

  5-2 단지, 브라우저나 노드에서 Event Queue를 제공하는데 다른 모듈의 스레드가 Event Queue에 메시지를 쌓고,

    5-2-1 자바 스크립트 엔진은 모든 코드가 수행이 끝난 후에 Event Queue를 체크하고 Event 존재할 경우

    5-2-2 해당 callback 루틴을 수행하게 된다. 자바스크립트가 동기식이라는 것이지 노드와 브라우저는 당연히 아니다.

    5-2-3 즉, Randering Engine이나 HTTP Request Engine같은 것은 별도의 모듈로 별도의 프로세서가 동작한다.

 

6. ES6에서 도입된 let의 경우는 block 스코프를 가진다.

  6-1 사실 자바 스크립트의 설계 원칙에 어긋나는 메카니즘을 가지고 있기 때문에 이해하기가 까다롭다.

  6-2 하지만, 자바와 C같은 언어에서 사용하는 변수의 스코프를 생각하면 이해하기가 쉽다. 그렇게 이해하는게 편하다.

  6-3 즉, 생성 과정에서 let은 변수 환경에 해당 변수를 할당하지 않고 실행 환경에서 바로 할당하게 된다.

    6-3-1 따라서 var처럼 실행이 생성보다 우선되는 경우는 undefined가 아닌 error를 표출하면서 종료하게 된다.

 

7. 자바 스크립트의 ;는 내부적으로 필수적으로 사용된다. 하지만 사용자가 생략하는 경우 자동으로 추가된다.

  7-1 대부분의 경우는 ;를 명시적으로 사용하지 않아도 문제가 되지 않지만 return 키워드의 경우는 주의가 필요하다.

  7-2 return 키워드를 사용하고 다음 줄에 반환값을 명시하는 경우는 그 반환값이 넘어가지 않는다.

    7-2-1 그냥 return; 으로 치환되어 다음 줄의 반환 값이 넘어가지 않게 된다.

  7-3 내 경험으로는 이 경우를 제외하면 거의 문제가 생기지 않는다. 그냥 ;를 사용하지 않아도 된다.

728x90

'Languages' 카테고리의 다른 글

Javascript : 기본적인 것들 3  (0) 2021.02.25
JavaScript : 기본적인 내용2  (0) 2021.02.24
Java 배열복사, Wrapper 클래스 등  (0) 2021.01.30
Java : Optional  (0) 2020.07.28
Java 2. main 메소드  (0) 2020.07.06
댓글