'즉시실행함수'

: 실행하는 즉시 로그에 결과가 찍히는 함수.

예시

(function iffe() {
     console.log("나는 iffe다")
})();

문법
1. 함수 정의 2. 정의된 함수 랩핑 (함수)();

1. 함수 정의
   function iffe() {
   console.log("나는 iffe다")
   };

2. 랩핑
   ( function iffe() {
   console.log("나는 iffe다")
   } )();

'즉시실행함수'를 사용하는 '이유'

: 전역 스코프에 영향을 주지 않고 단독 스코프내에서 사용하기 위함.

(function() {
  var x = 10;
  console.log(x); // 10
})();
console.log(x); // 에러: x는 정의되지 않았습니다.

==> x의 스코프는 IFFE 함수 범위 내에서만 적용된다.

----------

Fetch 함수

: 외부와 소통하기 위해 사용하는 함수.
소통? 외부에서 데이터를 요청하고 받아오는 것

1. fetch함수는 비동기 작업을 처리한다.

비동기 작업이란?
짜여진 전체 코드가 순서대로가 아닌 독립적으로 처리되는 작업.

동기 작업이란?
짜여진 코드 순서대로 처리되는 작업

예시

ex) 1에서 100의 순서로 번호가 붙여진 코드

동기 작업
: 1->2->3->4->5

비동기 작업
: 동기작업이 실행되는 동안 ex. 1->2->3->4->5
따로 30번 코드도 독립적으로 실행됨.

==>연극으로 비유하자면 무대에서 연극이 순서대로 진행될 때
무대 뒤편에서 다른 연극도 이뤄지고 있다는 말.

비동기 작업을 하는 이유?

처리가 오래 걸리는 작업일 경우 그 작업이 끝날 때까지 다음 순서의 코드들이 실행이 안 되기 때문.

즉, 백그라운드에 비동기 처리로 해놓고 다른 코드들은 실행시키는 것.

1. fetch함수는 async await과 함께 사용한다.

fetch 함수는 외부에서 데이터를 가져오는 비동기 작업이다. 비동기 작업이라 데이터가 잘 가져와졌는지를 확인하지 않고 바로 다른 코드들로 넘어가버린다. 이때 만약 데이터가 잘 들어오지 않았다면? 다음 코드들은 오류가 뜨기 시작한다. 그래서 이때 asyunc await을 이용해 동기적으로 작업을 처리한다. '데이터가 잘 받아져왔다면 그 다음에 코드를 실행해'처럼 말이다.

예시

async function fetchData() {
trt {
	const response = await fetch("https~!~!~!~!~!~) 
    if (!response.ok){
    alert("오류가 있습니다")
    }
    const dataResult = await response.json();
    return dataResult;
   	} catch (error) {
    console.error(error);
    }
}

이렇게 되면 데이터를 확실히 받은 상태에서 코드가 밑으로 흐른다.
만약 데이터가 정상적으로 받아지지 않았다면 오류 alert가 뜬다.
*await을 쓰게 되면 response에 데이터가 들어갈 때까지 기다려야 한다.

공부하면서 든 생각

fetch함수로 open api 데이터를 가져오는 상황은 데이터 의존이 외부에 있는 상태다. 이때 외부 서버가 정상적이지 않는다면 데이터를 가져올 수 없는 상황이 된다. 하지만 fetch함수는 비동기 처리이기 때문에 데이터가 제대로 들어오지 않은 상태에서 다음 로직을 수행하게 된다. 그래서 이를 막기 위해 비동기 fetch를 동기적으로 표현하여 사용한다. 일반적으론 .then이 그 예다.

데이터가 잘 가져와졌다면 그리고나서!(.then) 그 데이터를 제이슨 형식으로 바꾼다. 그리고나서!(.then) 그 데이터를 변수에 할당한다. .then도 async와 await과 원리가 비슷하나 쓰임이 다르다고 한다.