해당 영상을 참조하여 정리할 예정이다.
https://www.youtube.com/watch?v=0yJsvly3nuk
호출스택
- console.trace() 처럼 debugger 를 넣으면 call stack trace 확인 가능
스코프 체인
- 스코프 체인은 뭔가?
스코프 ( 중괄호 ) 영역 안에서 전역 , 지역 으로 나눠지는 구간
This
- 호출한 객체가 this 가 된다. ( this 는 FIX 되지 않는다. )
Promise all / allSettled
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject => {
setTimeout(resolve, 100, 'foo');
}));
// setTimeout 의 3번째 위치 (...args) => function 에 추가 파라미터를 전달할 때 사용된다.
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// expected output : Array [3, 42, "foo"];
Promise.all(iterable);
// 결과값은 이미 resolved 된 Promise 이다.
Promise.allSettled([]); // 에러 핸들링에 좋다.
Closure
// 함수와 함수 외부 변수와의 관계
function a() {
// var i = 0; => 계속 증가 (빠르게 5 도달)
// 스코프 내 i 값 고정됨.
// 후 setTimeout 작동. ( 5 반복 )
for (var i = 0; i < 5; i ++) {
setTimeout(() => {
console.log(i);
}, i * 1000);
}
}
// 해결 방법 ( 옛날 버전 )
function a() {
for (var i = 0; i < 5; i ++) {
(function(j) {
// 함수 스코프 안에 j 스코프 넣기
setTimeout(() => {
console.log(j);
}, i * 1000);
})(i);
}
}
function a() {
for (let i = 0; i < 5; i ++) {
setTimeout(() => {
console.log(i);
}, i * 1000);
}
}
// 문제 : var 과 for 의 비동기 콜라보 ()
// 해결법 : var 유지 -> IIFE ( 즉시 실행 함수 ) 클로저 생성
// 해결법 : var -> let 으로 변경
// var -> 함수 스코프를 따른다.
// var 쓰지말자.
a();
Promise
async function getData () {
const response = await axios.get('url');
...
return response;
}
const data = await getData();
async function b() {
const p1 = delay1(3000);
const p2 = delay2(5000);
await Promise.all([p1,p2]);
await delayP(9000);
}
new Promise((resolve, reject) => {
const p1 = delay1(3000);
const p2 = delay2(5000);
return Promise.all([p1,p2]);
}).then(() => {
return delayP(9000)
}).then(() => {
});
async function c() {
const a = await 1;
const b = await 2;
return a + b;
}
(function() {
let a;
let b;
return Promise.resolve(1)
.then((result) => {
a = result;
return 2;
})
.then((result) => {
b = result;
return a + b;
});
})();