TIL - 2021/11/13

>자바스크립트 정리 1편

 

1. 함수의 호출스택

  - Anonymous는 가상의 전역컨택스트로(함수의 호출이 있기전에 항상 있다고 생각하면 된다.)

  - 함수호출 순으로 쌓이고 역순으로 실행한다.

  - 함수 실행이 완료되면 스택에서 빠진다.

  - LIFO구조라서 스택이라 부른다.(호출스택,,)

 

2. 이벤트 루프

  - 호출스택과 백그라운드, 데스크큐로 기능이 실행되는 순서 자체를 이벤트 루프라고 부른다.

      1. 호출 스택에 실행할 함수가 쌓임

      2. 여기서 실행되는 함수가 비동기함수이면 백그라운드로 이동하게 된다.

       ( 코드가 백그라운드로 가면 호출스택의 함수와 동시에 실행이 가능하다.)

      3. 백그라운드에서 태스크큐로 보낸다( 만약, setTimeout실행시는 그 시간만큼 이후에 보내짐)

      4. 호출스택실행이 끝나서 비워지면(), 태스크 큐의 콜백을 호출스택으로 올려준다.

 

3. 비동기 

  - 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

  - 자주사용하는 비동기 처리

      setTimeout() : Web API의 한 종류이며, 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다.

      Promise : 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용.

                      Then을 붙이면 결과를 반환하고 실행이 완료되지 않았으면 완료된 후에 Then내부 함수가 실행 된다.

const condition = true;
const promise = new Promise((resolve, reject) =>{
	if(confition){
    resolve('성공');
    }else{
    reject('실패');
    }
  });
  //다른 코드 작성 가능
  promise
  	.then((message) =>{     //Resolve(성공리턴값) -> then
    console.log(message);
    })
    .catch((error) =>{      //Reject(실패값) -> catch
    console.log(error);
    })
    .finally(() =>{         //Finally 부분 무조건 실행
    console.log('무조건 실행')
    });

  async : function앞에 async를 선언하면 new Promise()해서 객체생성 선언을 생략할 수 있다.

async function callUser(){ 
	//서버에 연결된 로직 수행부분
	ruturn 'hana';
}
const user= fetchUser();
user.then(console.log);   //Promise객체 없어도 then을 사용할수있다.