Javascript - JS 실행구조

참고자료 제로초 인간JS엔진 되기

알고 있던 내용 복습과 몰랐던 내용 아카이빙

const add = (a, b) => a + b;

function calculator(func, a, b) {
  return func(a, b);
}

add(3, 5);
calculator(add, 3, 5);


const onClick = () = (e) => {
  console.log('hello')
}
document.querySelector('button').addEventListener('click',onClick()); // 고차함수를 호출했을 때 고차함수의 리턴값을 생각해보면 된다. 
===
document.querySelector('button').addEventListener('click',(e) => {
  console.log('hello')
});

• 함수의 선언과 호출을 구분해야 된다.
• 함수의 호출은 무조건 return 값으로 대입해서 생각하면 편하다.

호출스택

• 일반적으로 자바스크립트 함수는 동기적으로 실행되며 함수가 호출되면 호출 스택에 쌓인다. FILO 형식으로 호출 스택이 쌓이고 빠져나가고를 반복하며
• 비동기 함수는 백그라운드에서 동시에 실행되며 실행된 비동기 함수는 큐에서 대기한다.
• 큐는 호출스택이 다 빠져나가면 FIFO 방식으로 실행된다. 비동기 함수의 종류에 따라 마이크로 큐, 매크로 큐로 분류되며 큐의 구분에 따라 실행 우선순위가 달라진다.
  

스코프 체인

• 함수에서 어떤 값에 접근이 가능하고 불가능한 지 판단
• 함수의 선언 환경을 기준으로 판단하면 편함.(호출 x)

const x = 'x';
function c() {
  const y = 'y';
  console.log('c');
  function b() {
    const z = 'z';
    console.log('b');
    c();
  }
}

function a() {
  const x = 'x';
  console.log('a');
  console.log(x) // scope는 내부에서 외부로 퍼져나가는 형식이다.
  b();
}

a();  // 하단 lexical scope에서 a 함수 내에b가 선언되지 않았기 때문에 에러 발생
c();

lexical scope (선언으로만 보면 확인이 편하다, 호출 x)
c -> annonymous
a -> annonymous
b -> c -> annonymous(a를 포함)

호이스팅

• 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미하며, 속한 Scope의 최상단에 선언됨.

console.log(a) // undefined
var a = 1;

• 순서대로 작동한다면 a가 선언되기 전에 a를 호출하였기 때문에 에러가 나야되지만 a라는 변수는 선언됐지만 값이 할당되지 않은 상태로 나온다.
• var과 더불어 모든 함수와 변수는 호이스팅이 발생하지만 var과 다르게 let,class,const의 경우 선언 전에 호출한다면 접근할 수 없다는 에러가 발생한다.(TDZ)

호이스팅이 발생하는 이유

• 호이스팅은 변수가 선언되는 과정을 살펴보면 이해하기 쉽다.

• 변수 선언은 선언/초기화/할당의 과정을 거친다. 기본적으로 모든 함수와 변수는 scope의 최상단에서 선언된다.

• var과 함수선언문의 경우 선언과 초기화를 동시에 하게 된다. 이 과정에서 var에 아직 값이 할당되지 않았기 때문에 undefined로 초기화되며, 함수는 내부 값으로 초기화 되기 때문에 접근이 가능한 것이다.

  • 이 때 호이스팅의 우선 순위는 변수>함수이다.

• 반대로 나머지 const,let,class, 함수표현식의 경우 선언과 초기화가 분리해서 일어나기 때문에 초기화되지 않은 함수,변수에 접근을 하면 에러가 발생하는 것이다.