1급 객체

어떤 변수에 대응시킬 수 있는 객체를 1급 객체라고 합니다. 자바스크립트에서 함수는 1급 객체입니다. 왜냐하면 특정 변수에 함수 자체를 대응시켜서 사용할 수 있기 때문입니다. 그리고 변수에 함수 자체가 대응될 수 있다면, 함수는 또 다른 함수의 리턴값이 될 수도 있는 것입니다. 이것이 1급 객체(first class citizen)의 특징입니다.

const myFunc = function (text){
	return text;
} 

function fn(){
	myFunc = function (text){
	return text;
	} 
  	return myFunc
}

콜백 함수

어떤 함수 자체는 callback 함수가 아닙니다. 하지만 이 함수가 다른 함수에 인자로 전달되어서 함수 내부에서 나중에 호출되는 상황이라면, 맥락 상 이 함수는 '콜백함수'가 되는 것입니다. 즉, 나중에 호출한다는 의미로 콜백함수라고 부릅니다.

const myFunc = (text) => {
	return text;
}
const newFunc = (arg) => {
	arg();
}
newFunc(myFunc) 
/** myFunc is callback function in this situation. */

AJAX

Asynchronous JavaScript And XML
서버와 비동기적으로 통신할 때 사용하는 api를 의미합니다. 비동기 통신의 장점은 전체 페이지를 새로고침 할 필요 없이, 데이터가 변경된 일부분만 바꿔줄 수 있어 리소스와 사용자 경험 측면에서 효율적이라는 것입니다.

JSON

JavaScript Object Notation
데이터를 저장하거나 전송하는 교환 방식 중 하나입니다. 용량이 작고 작성 방식이 사람과 기계에게 모두 해석하기 편하기 때문에, 많이 선호되는 방식입니다. JSON은 자바스크립트 객체 형식을 기반으로 만들었기 때문에, JSON이라는 이름이 붙여졌습니다.

자바스크립트의 비동기 내장함수

자바스크립트는 싱글 스레드 런타임을 가진 동기식 언어입니다. 따라서 모든 코드의 처리는 코드의 흐름과 동일하지요. 하지만 비동기를 위한 별도의 내장함수를 제공합니다. 바로 'setTimeout, XMLHttpRequest, fetch'입니다.

Promise

promise는 비동기식 작업을 취하기 위해 고안된 객체입니다. 기존의 다른 코드들은 위에서부터 아래로 동기적으로 즉 순서대로 코드를 읽으면서 실행되지만, 프로미스 객체는 비동기적으로 동작되기 때문에 순서와 상관없이 주어진 조건에 따라 독립적으로 실행됩니다.

JavaScript의 fetch 메소드를 사용해서 특정 url에 request 요청을 보낼 수 있습니다. 이때 fetch 메소드가 호출되면 promise 객체가 리턴되는데, 이 프로미스 객체는 2가지 메소드를 사용할 수 있습니다. then과 catch입니다.

then은 데이터 요청이 성공했을 때 동작할 콜백 함수를 인자로 가지는 메소드이고, catch는 데이터 요청이 실패했을 때 동작할 콜백 함수를 가지게 됩니다.

<script>
      	fetch("https://jsonplaceholder.typicode.com/posts/1/comments")
        .then((res) => {
          return res.json();
        })
        //promise object를 return함
        //따라서 그 프로미스에 대해 then 메소드를 다시 사용
        .then((myJson) => {
          console.log(myJson);
        });
</script>

then 안에 전달된 콜백 함수는 매개변수를 이용해서 response 값을 또 다른 메소드를 사용해서 json 또는 text 형식으로 바꾸어서 사용할 수 있습니다.

그런데 이 메소드 또한 프로미스 객체를 리턴하기 때문에, 콜백 함수가 이 메소드의 리턴값을 리턴해주면 이 자체가 다시 프로미스 객체가 됩니다. 그래서 체인처럼 연결지어 프로미스에 대한 then 또는 catch 메소드를 반복적으로 사용할 수 있게 됩니다.

이 덕분에 기존에는 연쇄적인 작업처리를 위해 콜백 함수 안에 콜백 함수를 전달했던 '콜백지옥'에서 벗어나서, 'promise - then - 리턴된 promise - then ... ' 처럼 체인 형식으로 더 편리하게 코드를 작성할 수 있게 되었습니다.

async & await

await는 async 함수 안에서만 사용될 수 있습니다.
async를 붙이면 평범한 함수는 프로미스 객체를 리턴하는 비동기적 함수가 됩니다. 따라서 async 함수 안에서는 await를 써서 비동기 함수들을 관리할 수 있게 됩니다.

참조링크

생활코딩
[JavaScript] 자바스크립트 비동기식 처리