Hoisting

• hoisting : "끌어올린다"를 뜻하며 python과 다르게 선언된 var변수와 함수가 밑에있어서 위로 끌어올려서 사용하는 것.
• 편리하긴 하지만 일반적인 논리순서( 선언-> 초기화-> 사용 )가 아니기에 되도록 피하는 것이 좋다!
• 선언 만이 hoisting 대상이다.
• 따라서 이것만 기억하면된다.
  변수는 let과 const만 쓸것.
  함수는 함수표현식으로 쓸것.

(x)
function 함수(){
  로직
}

(o)
let 함수 = function(){
  로직
}

TDZ(time dead zone)

• "time" 인 이유는 사각지대(dead zone)가 코드의 작성 순서가 아니라 코드의 실행 순서에 의해 형성되기 때문이다.

{
    // TDZ 시작~ (스코프 맨 위부터~)
    const func = () => console.log(letVar); // OK
    // ~ 이곳 TDZ 안에서 letVar에 접근하면 ReferenceError가 난다.
  
    let letVar = 3; // TDZ 종료
    func(); // TDZ 밖에서 호출함
}

Scope

const, let

• Global scope
  Function scope
  Block scope
• 다른 언어는 전역변수와 지역변수인 반에 JS는 블록레벨이 추가로 더 있다.

var

• Global scope
  Function scope
• 타 언어와 같이 전역변수와 지역변수로 동작함. 블록레벨이 사라짐.

동기, 비동기

• JS도 타 언어와 같이 동기로 코드를 구성하되 아무거나 비동기로 하는것이 아닌 다음과 같은 것(시간이 오래걸리는 거)들만 비동기로 처리하는 것을 추천한다.

1. Rest API 요청
2. file/BD 처리
3. 타이머, 암호화 / 복호화

setTimeout()

setTImeout(함수, milliseconds)

비동기의 문제점

• Rest API의 결과값을 받아서 이를 기반으로 코드를 실행할 때 결과값을 받지 않은채로 다음 코드가 실행될 수 있다.
• 그래서 Vanilla JS에서는 axios를 사용한다!

call back 함수

• JS함수는 first-class function이다.

first-class function

1. 함수 자체를 변수에 저장가능
2. 함수의 인자에 다른 함수를 매개변수로 전달가능
3. 함수의 return에 다른 함수를 return 가능

• 나머지는 앞전에 한 포스팅에서 확인 가능

Promise

• 무한 콜백함수를 넣을 수 있는 콜백함수의 단점을 극복하기위해 나온 문법

1. Promise 객체를 생성하고
2. Promise객체는 executor라는 함수가 자동으로 실행되고 executor함수가 resolve와 reject 함수를 인자로 받아 비동기 처리 함수를 실행
3. executor를 통해 비동기 처리 함수를 실행 완료 후 해당 작업이 성공하면 resolve 실패하면 reject를 호출한다.

promise의3가지 state

1. Pending : 비동기 처리가 아직 실행되지 않은 초기상태
2. Fulfilled : 비동기 처리가 성공적으로 완료된 상태
3. Rejected : 비동기 처리가 실패한 상태

then method

promise.then(성공시함수, 실패시함수)

• 작업 성공 또는 실패시 수행할 작업을 정의하고 promise 코드를 실행해주는 method이다.
• 이때 매개변수는 2개(성공, 실패)이다.

const promise = new Promise(
  (res, rej) => {
    setTimeout(() => {
      let num = 10;
      if (num > 9) {
        res(num);
      } else {
        rej("error");
      }
    }, 1000);
  }
);

promise.then((성공함수이름) => {
  console.log("success", 성공함수이름);
}, (실패함수이름) => {
  console.log(실패함수이름);
});

chaining

• 만약 위의 코드에 동기코드를 한개 더 붙이고 싶다면

const promise = new Promise(
  (res, rej) => {
    setTimeout(() => {
      let num = 10;
      if (num > 9) {
        res(num);
      } else {
        rej("error");
      }
    }, 1000);
  }
);

promise.then((성공함수이름) => {
  console.log("success", 성공함수이름);
}, (실패함수이름) => {
  console.log(실패함수이름);
}).then(() => {
  성공로직
}, () => {
  실패로직
});

• 만약 .then() 뒤에 success 함수만 넣어놓을 경우 당연하게도 나머지 함수들은 실행이 안 된다.

catch method

• 실행중 예외 상황을 처리
• failureCallback이 정의되있지 않을 경우 reject 시에 catch method를 호출한다.
  단, filureCallback이 정의되어있다면 catch method는 실행되지 않는다.

const promise = new Promise(
  (res, rej) => {
    setTimeout(() => {
      let num = 10;
      if (num > 9) {
        res(num);
      } else {
        rej("error");
      }
    }, 1000);
  }
);

promise.then((성공함수이름) => {
  console.log("success", 성공함수이름);
})
.catch((err) => {
  console.log(error);
});

throw

• 사용자 정의 예외를 만들 때 사용

throw new Error("~~에러")

• 통상 위와 같은 구문으로 사용됨.

const promise = new Promise((res, rej) => {
  console.log("start");
  res(1);
});

promise.then((num) => {
  console.log("성공1");
})
  .then(() => {
    console.log("성공2");
    throw new Error("에러");
  })
  .then(() => {
    console.log("성공3");
  })
  .catch((err) => {
    console.log("에러");
  });

chaining과 return

• 만약 .then() method의 결과값을 return 했다면 그 값은 바로 다음 .then()의 매개변수로 들어간다.

finally

• switch문의 default 포지션과 같다.
• 그런데 우선순위가 항상 제일 마지막은 아니다. 만약

promise.then(()=>{
  로직~
  throw new Error("에러");
})
.then(~~함수~~)
.finally(~~함수~~)
.catch(~~함수~~)
       
// 결과값은
1번 then
finally 함수
catch 함수

Promise.all

• 동기화 처리할 promise를 한큐에 묶어서 실행

const promise = new Promise(~~함수~~);
const promise2 = new Promise(~~함수~~);

Promise.all([promise, promise2]).then(~~함수~~)

Promise.race

• 여러 promise 함수중 가장 빨리 실행된 함수만 then에 실행될 수 있음.

const promise = new Promise(~~함수~~);
const promise2 = new Promise(~~함수~~);

Promise.race([promise, promise2]).then(~~함수~~)