JS 기본기 채우기

TS로 개발을 함에 있어 JS의 모든 것들은 기본으로 알아야 하는데 부족한기본기가 있는것 같아 하루빨리 채우기로 했다.

 

호이스팅

var로 선언된 변수와 function 으로 정의된 함수를 해당 js 파일을 실행할때 이것들이 js파일 내에 어느 순서에 있던지 제일 위로 올려서 먼저 선언,정의해주고 다른 코드를 실행하게됨

 

CALLBACK

js는 기본적으로 동기적으로 실행하다가 콜백을 만나면 해당 내용을 나중에 불러달라는 방식으로 사용된다.

 

Synchronous callback : 동기적으로 즉각적으로 실행하는 콜백

Asynchronous callback : 비동기적으로 실행하는 콜백

콜백체인(콜백지옥)의 문제점 : 가독성이 매우 떨어지고 디버깅,유지보수에도 어려움

 

Promise (es6부터 비동기 처리를 위해 도입)

js에서 제공하는 비동기를 간편하게 처리할수있도록 도와주는 object , 즉 JS의 object 비동기를 실행할때 콜백대신 활용가능

 

new Promise에 전달되는 함수를 executor 라고 부름

promise를 만드는 순간 우리가 전달한 executor 라는 콜백함수가 바로 실행됨

즉, 네트워크 통신을 요청하는 executor를 작성하면 경우에 따라 불필요한 데이터 통신이 발생할수 있음으로

기획의도에 맞게 작성해야함

executor의 인수 resolve와 reject는 JS자체에서 제공되는 콜백함수로 개발자는 resolve와 reject는 신경쓰지 않고 executor안에 코드만 작성하면 된다. 다만 executor에선 결과를 즉시또는 늦게 얻는 것과 무관하게 인수(resolve,reject)로 넘겨준 콜백함수 중 하나를 반드시 호출해야 한다. 이떄 변경된 상태는더이상 변하지 않는다.

executor는 자동으로 실행되고 개발자가 작성한 코드가 실행되는 것이며 이의 성공여부에 따라 resolve나 reject가 호출 된다. 

 

new Promise 생성자가 반환하는 promise 객체는 내부에 state,result 라는 내부 프로퍼티를 갖고 개발자가 직접 접근할수 없으며 then, catch,finally 매서드를 사용해서 접근해야 한다.

 

1.state: pending(대기,우리가 지정한 operation이 실행중일때 상태)  -> resolve가 호출되면 fulfilled(이행,operation이 성공적으로 실행되었을경우 상태) or reject(실패시)가 호출되면 rejected(거부)

2.result: 처음에는 undefined, resolve가 호출되면 value, reject(error)가 호출되면 error

 

then  promise.then을 이용해서 프로미스가 이행되었을때 실행결과와 거부되었을때 에러를 받는다.

then을 사용해서 에러만 다루고 싶다면 .then(null,errorHandle함수)과 같이 첫번째 인수로 null을 전달하면 된다.

 

catch  promise.catch 로 사용해서 에러가 발생한경우만 다룰수있다. 위에어 then의 첫번째 인수에 null을 전달한것과 동일하게 작동한다. catch 문법이 간결하고 기능적으로 .then(null,fn)과 완벽하게 같다.

 

finally 프로미스가 처리되면 fn이 실행된다는 점에서 finally(fn) 호출은 then(fn,fn)와 유사하다.

쓸모 없어진 로딩 인디케이터를 멈추는 경우와 같이 결과가 어떻든 마무리가 필요하면 유용하다.

다만 finally(fn)는 .then(fn,fn)과 유사하지만 차이점이 존재하는데 

finally 메서드엔 인수가 없고 finally에선 프로미스가 이행되는지,거부되었는지 알수없다.

finally 메서드는 자동으로 다음 핸들러에 결과와 에러를 전달한다.

 

async,await

*기존에 존재하던것을 감싸서 api를 제공하는 것을 syntactic sugar 라고부름 ex)class, async,await

async, await 깔끔하게 promise 를 사용할수 있는 방법

promise를 사용하면 return 값으로 resolve나 rejected가있어야 하는데 이게 없으면 pending state에만 머물러있게됨

async를 함수앞에 붙이면 함수 안에 있는 코드블럭이 자동으로 promise로 바뀜

 

await은 async 를 붙여둔 함수안에서만 사용가능

 

promise를 사용해서 병렬적으로 await 사용하는 코드를 짜면

async function getOne(){
    await delay(1000);
    return '1';
}

async function getTwo(){
    await delay(1000);
    return '2';
}

async function getNumber(){
    const onePromise = getOne();
    const twoPromise = getTwo();
    const one = await onePromise;
    const two = await twoPromise;
    return '$(one) + $(two)';
}

getNumber().then(console.log);

그러나 Promise의 메소드 중에 all을 사용하면 더 간결하게 코드를 만들수있다.

function getAllnum(){
    return Promise.all([getOne(), getTwo()]).then(num=>nums.join(' + '))
}
getAllnum().then(console.log)

또 다른 메소드로 배열에 전달된 Promise중에서 가장먼저 값을 return하는 것만 전달해주는 것으로 race가있음

 

function getanyone(){
    return Promise.race([getOne(), getTwo()]);
}

getanyone().then(console.log);