인간 js 엔진 되기

함수 호출

매개변수로 함수를 넘겨 줘야 하는데 함수의 호출, 선언 중 어떤것을 넘겨줘야 할지 모를 때, 해당 부분을 리턴값으로 대체해봐라. 함수의 호출과 선언을 명확하게 구분할 수 있다.

scope

anonymous는 최상단에 항상 존재하는 스코프.

스코프 체인으로 특정 함수가 어떠한 변수에 접근할 수 있는지 여부를 판단한다.

아래 코드에서 function b 의 스코프 체인을 작성해보면 다음과 같다.

b => c => anonymous

this

객체의 메소드에서 this는 그 객체를 가리킨다.

apply, bind, call로 this를 바꿔줄 수 있다.

this는 호출될 떄 결정이된다.

화살표 함수는 부모의 this를 그대로 가져온다.

객체의 메소드가 화살표 함수일 때, 화살표 함수의 this는 obj(메소드의 부모)의 this인 window를 가리킨다.

const obj = {
	name: 'zerocho'
    sayName() {
    	console.log(this.name); // zerocho
        const inner = () => {
        	console.log(this.name); // zerocho
        }
        function inner(){
        	console.log(this.name); // this는 window
        }
        inner();
    }
	sayName2: ()=>{
     	console.log(this.name); // this는 window
    }
}

Promise

Promise란? 실행은 바로 하되, 결과값은 나중에 원할 때 쓸 수 있는것.

실행은 바로되나 => 결과값이 나오는것은 나중이고 => 결과 값을 사용할때도 그 이후이다.

const p = new Promise((resolve, reject) => {
  	console.log('제일먼저');
	setTimeout(() => {
    	a = 5;
    	console.log(a);
      	resolve(a);
    }, 0);
});
// 딴짓하다가
console.log('딴짓');
// 결과값 받아오기
p.then((result)=>{
	console.log('result', result);
});

/* 
	콘솔로그 결과 (동기코드 먼저 콜스택에서 실행된다)
	'제일먼저' => '딴짓' => 5 => result 5 
	Promise 안에 있는 코드는 동기코드이다. setTimeout의 첫번째 매개변수인 콜백함수가 비동기 코드다. 
*/

Promise.allSettled

Promise.all은 여러개의 비동기 코드 중 하나라도 실패하면 error를 리턴하지만

Promise.allSettled는 성공과 실패 log를 알 수 있고 이를 바탕으로 실패한 비동기 코드만 따로 다시 시도 처리를 할 수 있다.

결론 : Promise.allSettled 쓰자

Micro & Macro 큐

promise, process.nextTick은 micro 큐에 나머지는 macro 큐에 들어간다.

micro, macro 큐 모두 처리해야할 비동기 코드가 있으면 micro 먼저 콜스택에 올라간다.

async & await

async function a() {
	await delayP(3000); // 3초
    await delayP(6000); // 6초
    await delayP(9000); // 9초
} // 총 18초

async function a() {
	const p1 = await delayP(3000); // 3초
    const p2 = await delayP(6000); // 6초
    await Promise.all([p1, p2]); //6초
    await delayP(9000); // 9초
} // 총 15초

const results = await Promise.all([p1, p2, p3]);

results.map(async() => {
  await result조작(); // 동시에 p1, p2, p3 조작
},[]);

for (let result of results) {
	await result조작(); // p1 끝난후 p2 끝난후 p3 조작 
}

	async function a() {
    	console.log('2');
        const a = await 1;
        console.log('4');
      	console.log('a',a);
      	console.log('Hmm');
      	await null;
      	const b = await Promise.resolve(1);
      	console.log('b', b);
      	return a+b;
    }
	console.log('1');
	a().then(result=>{
      console.log(result);
    }).then(result2=>{
      console.log(result2);
    });
	console.log('3');

	// 1 => 2 => 3 => 4 => a 1 => Hmm => b 1 => 2

closure

내부함수가 외부함수나 외부 변수에 접근하는 관계