퉁그리노트 퉁그리노트

JS & TS

• [JS] async, await 함수

  JS & TS 2022. 7. 8. 17:54

  async 함수는 비동기 작업을 한다. new Promise를 리턴하던 함수를 조금씩 수정하면 async함수로 변환이 가능하다. - 함수에 async 키워드를 붙인다. - new Promise 리턴을 없애고 executor 내용만 남긴다. - resolve(value); 부분을 return value;로 변경한다. - rejuect(new Error()); 부분을 throw new Error(...);로 수정한다. function startAsync(age) { return new Promise((resolve, reject) => { if (age > 20) resolve('${age}'); else reject(new Error('error')); }); } async function startAsy..

  Read More
• [JS] Promise

  JS & TS 2022. 7. 8. 16:29

  Promise는 비공기 작업의 단위이다. Promise를 사용하는 가장 정석적인 방법은 new Promise()를 활용한 다음과 같은 방법이다. const pms = new Promise((resolve, reject) => { // 비동기 작업 }); Promise의 생성자는 함수를 인자로 받는데 이 함수를 executor라고 부른다. executor는 1. 첫번째 인자로 resolve를 받고, 두번째 인자로 reject를 받는다. 2. resolve는 executor 내에서 호출할 수 있는 또 다른 함수이며, resolve를 호출한다는 것은 작업의 성공을 의미한다. 3. reject 또한 executor내에서 호출할 수 있는 함수이며, reject를 호출한다는 것은 작업의 실패를 의미한다. Promi..

  Read More
• [JS] 화살표 함수

  JS & TS 2022. 6. 28. 16:05

  이제 function을 굳이 명시 하지 않더라도 화살표 함수를 통해 대체할 수 있게 되었다. function a(x, y) { return x + y; } var b = (x, y) => { return x + y; } var c = (x, y) => x + y; var d = (x, y) => (x + y); function a2(x) { return !x; } var b2 = x => !x; 함수 a는 이제 b, c, d의 방식으로 표시할 수 있고, a2도 b2처럼 표할 수 있다. 함수 내용이 return 뿐인 경우 c처럼 생략할 수 있으며, 매개변수가 하나인 경우 b2처럼 괄호 생략이 가능하다. return이 생략이 되더라도 가시성을 위해 d처럼 괄호로 감싸는 것을 추천한다. 화살표함수와 funct..

  Read More
• [JS] 객체 리터럴

  JS & TS 2022. 6. 28. 15:44

  ES6 버전에서 객체 리터럴이라는 기능이 추가되었다. let sayNode = function(){ console.log('Node'); } let es = 'ES'; let oldObject = { sayJS: function() { console.log('JS'); }, sayNode: sayNode, }; oldObject[es + 6] = 'Fantastic'; oldObject.sayNode(); // Node oldObject.sayJS(); // JS console.log(oldObject.ES6); // Fantastic let newObject = { sayJS() { console.log('JS'); }, sayNode, [es + 6]: 'Fantastic', }; newObject...

  Read More
• [JS] 이벤트 기반의 js, 이벤트 루프

  JS & TS 2022. 6. 28. 14:31

  이벤트 기반이란 이벤트가 발생할 때 미리 저장해둔 작업을 수행하는 방식을 의미. 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 무엇을 할지 미리 등록해두어야 한다. 이를 이벤트 리스너에 콜백 함수를 등록한다고 표현한다. 노드도 이벤트 기반 방식으로 동작하며, 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백 함수를 호출하고, 발생한 이벤트가 없거나 발생했던 이벤트를 다 처리하면, 다음 이벤트가 발생할 때까지 대기한다. 특정 시간 이후에 코드를 실행하는 setTimeout을 사용하면 특이한 상황이 발생한다. function run() { console.log('3초 후 실행'); } console.log('시작'); setTimeout(run, 3000); console.log('끝'); 결과는 다음과 ..

  Read More