JavaScript

앞서 다뤘던 내용들에서는 이미 만들어진 Promise를 가져다 사용하였다. 이번에는 Promise를 직접 만들어서 사용해보자. new Promise 라는 키워드로 Promise를 새로 만들 수 있고, job1() 함수에서는 이 Promise를 리턴하도록 해줬다. Promise에는 Promise에서 실행된 작업이 성공했을 때와, 실패했을 때에 대한 콜백함수가 정의되어야 한다. 그리고 이 함수는 2개의 파라미터를 갖는데 하나는 성공했을 때 호출될 함수(resolve)이고, 다른 하나는 실패했을 때 호출될 함수(reject) 이다. resolve, reject 이름은 아무거나 설정 가능하지만 관습적으로 저렇게 적는다고 한다. 따라서 위 코드의 job1() 함수를 실행하면 setTimeout을 실행하는 함수가 ..

왼쪽과 오른쪽의 코드를 비교해보자. 왼쪽은 이전 글에서 다루었던 Promise를 사용하여 연쇄적으로 비동기 함수가 호출되는 코드이다. Promise를 리턴하는 timer()라는 함수가 호출되면 .then()을 통해 콜백함수 function()이 호출되고 이 함수는 다시 Promise 리턴해주는 timer() 함수를 리턴한다. 그러면 Promise를 반환하는 함수를 리턴했기 때문에 다시 .then()을 붙여서 Chaining이 가능해진다. 오른쪽은 이러한 왼쪽의 코드와 완전히 동일하게 동작하는 코드이고, async와 await라는 키워드를 사용하여 동기적인 방식으로 코드를 작성하지만 비동기적 처리를 할 수 있게 해준다. 오른쪽 코드를 살펴보면 비동기적으로 실행되는 함수들의 앞에는 await를 붙여줘야 한다..

Synchronous / Asynchronous ?? Synchronous (동기) -> 명령어의 순서대로 실행 위 코드의 출력은 차례대로 1 2 3 4 가 된다. Asynchronous (비동기) -> 명령어의 순서대로 실행되지 않음 위 코드의 출력은 1 2 4 3 이 된다. setTimeout(function(){console.log(3)}. 5000); 코드는 5초 뒤에 function() 함수를 실행시킨다. 이 때 console.log(4)는 setTimeout 코드를 기다리지 않고 먼저 실행된다. 아래의 그림을 살펴보자 왼쪽은 동기적(Synchronous)으로 실행되는 그림이고, 오른쪽은 비동기적(Asynchronous)으로 실행되는 그림이다. 동기적으로 실행될 경우, 하나의 프로세스가 다른 프..

자바스크립트에서는 변수가 함수가 될 수 있다. 그 밖에도 함수의 리턴값으로 함수가 올 수 있고, 함수의 인자로도 함수가 들어갈 수 있다. 위의 예시의 함수 val 처럼 다른 함수의 입력값으로 전달되어서 호출되는 함수를 Callback 함수 라고 한다. 자바스크립트에서 콜백함수가 사용되는 예시를 하나 살펴보자 아래 함수는 자바스크립트의 Array.prototype.filter() 함수이다. filter() 함수는 첫번째 파라미터로 함수를 받도록 되어있다. 이 때, 입력받는 callback 함수는 element들을 살펴보며 true를 반환하면 요소를 유지하고, false를 반환하면 요소를 버린다. filter() 함수의 사용 예시를 살펴보자. words 배열의 단어들 중 길이가 6보다 긴 단어들만 반환된다...