짧은코딩

클로저 클로저란? 함수와 외부 변수와의 관계 클로저란 내부 함수가 외부로 반환된 이후에도 life-cycle 이 유지되는 것 클로저 안에 정의된 함수는 만들어진 환경을 기억 클로저가 어려운 이유 스코프, 비동기, var 등이 모두 섞여있다. 클로저가 문제가 아니라, 클로저를 사용해서 해결하는 문제가 대부분이다. 주로 for문(반복문)과 비동기를 함께 사용하면 종종 발생 예시 var을 한 경우 function a() { for (var i = 0; i { console.log(i); }, i * 1000); // 0, 1000, 2000, 3000, 4000 } } a(); -결과 -..

await을 남용한 것과 최적화한 예시 // setTimeout을 Promise로 만드는 법 function delayP(ms) { return new Promise((resolve, reject) => { setTimeout(resolve, ms); }); } async function a() { await delayP(3000); await delayP(6000); await delayP(9000); } // 토탈 18초 async function b() { const p1 = delayP(3000); // 3초 const p2 = delayP(6000); //6초 await Promise.allSettled([p1,p2]); // 6초 await delayP(9000); // 9초 } //토탈 15..

then, catch 반복하기 === try, catch 분리하기 Promise - catch는 앞부분을 다 책임진다! 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); }) .then(() => { //여기서 에러나면 }) .then(() => {}) .then(() => {}) .catch(() => { // 나머지 then 다 건너 뛰고 여기로 이동 })..

Promise 코드 let a = 2; 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); }); 출력 결과 코드 분석 -step1 let a = 2; const p = new Promise( // 여기부터 (resolve, reject) => { console.log("제일 먼저"); setTimeout(() => { a = 5; console.log(a); ..

비동기 비동기는 동시에 돌아가는 것이 아니다! 순서의 문제이다. 동기 코드 동기 코드는 "위 -> 아래", "왼쪽 -> 오른쪽"으로 실행 따라서 예측이 쉽다 비동기 코드 보이는 코드대로 실행되지 않음 다만 정해진 순서는 있다 한 번 비동기는 영원한 비동기 async/await, promise 등을 써도 동기로 만들 수 없다. 비동기를 동기로 바꾸려는 노력을 하지 말자 비동기 코드 분석 setTimeout(() => { console.log("a"); }, 0); setTimeout(() => { console.log("b"); }, 1000); setTimeout(() => { console.log("c"); }, 2000); (아래 글은 정확한 JS 스펙은 아니지만 99% 맞다, 스펙을 다 공부하려면 ..

Promise 프로미스는 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 => 나중에 사용 가능 const condition = true; const promise = new Promise(()=> { // 이 if 문은 동기로 실행 if (condition){ resolve('성공'); } else { reject('실패'); } }); promise .then((message) => { console.log(message); }) .catch((error) => { console.error(error); }); new Promise() 안의 if 문은 동기로 실행 성공하든 실패하든 값을 promise에서 값을 가지고 있음 then, catch에서 값을 원할 때 꺼낼 수 있다. callback과..

분석 const x = true; let y = false; function a() { let a = 4; y = true; if (x) { let a = 3; for (let i = 0; i { return a + b; }; z(3, 5); -a()까지 호출된 호출 스택과 선언 지도 호출 스택 우선 anonymous(this=window)가 호출 스택에 들어감 a(this=window)가 호출 스택에 들어감 선언 지도 우선 a(fn)가 호이스팅 되어서 들어가고, 그다음으로 x(true), y(false) 선언 a(fn) 안에 a(4)가 선언, 이게..

zerocho.com 사이트에 들어가서 공지사항을 클릭했을 때 2번째 인자의 function이 아니라 addEventListener이 호출 됨 2번째 인자 function은 함수의 선언이지 호출된 적이 없다 그러면 function은 귀신이 와서 호출해주냐? 그렇다고 봐도 됨. 왜냐면 내가 모르는 코드가 호출해주기 때문 이런 경우의 this는 외워야한다. 왜냐하면 저 함수는 호출하는 부분을 우리가 볼 수 없기에 경험적으로 외워야 한다. 결국 저걸 만든 사람만이 알 수 있다. addEventListener를 구현해보면(추론) 실제 addEventListener는 아마 C++로 구현되어 있을 것이다. const header = { addEventListener: function(eventName, callba..

JS의 this는 다른 언어와 좀 다르다. console.log(this)를 하면 window가 나온다. 기본적으로 this는 window라고 생각하면된다. -함수 function a() { console.log(this); } a(); 함수에서도 this는 window가 나온다. globalThis JS에서는 window, Node에서는 global => 최근 스팩에서는 globalThis로 합쳐짐 window의 2가지 역할 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기에 어디서든 접근이 가능해서 '전역 객체'라고도 부른다. 일반적으로 우리가 열고 있는 브라우저의 창을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다. ex) window.innerWidth, window.innerHe..

좋은 개발을 하려면 호이스팅을 하지 않는 것이 가장 좋다! 분석 코드 const x = "x"; console.log(z); var y = "hehe"; const z = () => {}; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); } a(); c(); 이런 코드가 있을 때, 호이스팅 상황에서 어떻게 되는지 분석해보겠다. var const x = "x"; console.log(z); var y = "hehe"; 이런 코드가 호이스팅 되면 var y; const x = "x"; ..