[JS] 조건부 삼항 연산자 ? true : false & Event Loop

조건부 삼항 연산자 [Conditional Operator]

// if문
if (a) {
  a = "a";
} else {
  a = "b";
}

👇

// if문을 한 줄의 코드로 작성
a ? a = "a" : a = "b";

✅ 예시 1 : 나이로 성인 여부 판단

const age = 20;
// 나이가 18세 이상이면 성인입니다 아니면 미성년자입니다
const isAdult = age >= 18 ? : '성인입니다' : '미성년자입니다';
// 나이가 20이니까 18세 이상이니 성인입니다가 출력
console.log(isAdult);

✅ 예시 2 : 로그인 상태에 따라 문구 출력

const isLoggedIn = true;
const message = isLoggedIn ? '환영합니다!' : '로그인 해주세요.';

console.log(message); // 환영합니다!

✅ 예시 3 : 숫자가 짝수인지 홀수인지

const num = 7;
// num을 2로 나누어 떨어지면 짝수 아니면 홀수
const result = num % 2 === 0 ? '짝수' : '홀수';
// num이 7이니까 2로 안 나누어 떨어지니 홀수 출력
console.log(result);

---

🔄Event Loop

⏰setTimeout( )

👉 일정 시간이 지난 후에 함수를 한 번 실행하는 함수

// 동기
console.log('1');

// 비동기
setTimeout(() => {
  console.log('2')
}, 3000); // 3초

// 동기
console.log('3');

🖨 출력 순서 : 1, 3, 2

🎈동기 [Synchronous] & 비동기 [Asynchronous]

비동기는 setTimeout이고 나머지는 동기임

동기는 먼저 이전의 것이 끝나야 다음 것을 할 수 있지만
비동기는 순서 상관없이 동시에 진행될 수 있음🤓

🔸자바스크립트 == '동기 언어'

JS는 한 줄 실행하고 또 다음 줄 실행하는 동기 언어❗
하지만 위에 setTimeout에 콜백 함수를 실행하는 비동기 코드를 사용했음

🤔 어떻게 된 걸까 ❓
👉 JS는 원래 동기적으로 동작하지만
브라우저(또는 Node.js)가 setTimeout, fetch 같은
비동기 기능을 대신 처리해줘서 비동기처럼 보이게 할 수 있음
즉, JS 혼자 힘으로는 비동기 못 하고
브라우저 같은 외부 도우미가 있어야 비동기처럼 동작하는 거🔥

🔍내부에서 어떻게 진행되는지 살펴보자👀

🔹자바스크립트 엔진

👉 코드를 읽고 실행하는 친구 ( 예 - Chrome의 V8 )

JS 코드를 실행하려면 JS '엔진'이 필요✔

◽ 메모리 힙 : 메모리 할당이 발생하는 곳
( 변수를 정의하면 저장이 되는 창고 )
◽ 호출 스택 : 코드가 실행될 때 스택들이 이곳에 쌓이게 됨

function B() {
  setTimeout(function () {
    console.log('B-1...');
  }, 1500);
}

function A() {
  console.log('A-1...');
  B();
  console.log('A-2...');
}

A();

1️⃣ A를 실행했으니 콜스택에 A( )가 쌓이게 됨

2️⃣ A 함수 안에 콘솔 로그 A-1... 이게 또 쌓이고 출력한 후에 사라짐

3️⃣ 그담에 B( ) 호출한게 쌓이게 됨

4️⃣ setTimeout은 쌓이고 난 다음 어떤 일이 일어나고 바로 없어짐🤨❓

5️⃣ B( )도 할 거 다했으니 없어짐

6️⃣ A 함수에서 할 게 남은 콘솔 로그 A-2...가 쌓이고 출력한 후 사라짐

7️⃣ A 함수 할 일 다 했으니 사라졌는데
갑자기 어디선가 setTimeout 콘솔인 B-1...이 등장,,,🐱‍🏍
없어졌었는데 나타나서 출력 후 사라져버림

8️⃣ 이제 할 일이 아예 없으므로 콜스택은 비워짐

🙋‍♀️setTimeout의 함수가 어디로 갔다가 다시 왔다,,,⏰

✅ 비동기는 JS가 처리 못하고 "브라우저에서 처리"해줄 수 있음
👉 비동기 작업인 setTimeout은 'Web API' 에서 처리⭕

⚡Web APIs⚡
👉 setTimeout, DOM, AJAX 같은 걸 대신 처리해주는 브라우저의 기능들

💡 setTimeout의 시간이 지나서 완료되면 '콜백 큐'로 함수가 들어오게 됨
✋ 콜백 큐엔 Web API의 콜백 함수들이 대기하게 됨
👉 Callback Queue : Web API 작업이 끝난 콜백 함수들을 줄 세워 놓는 곳

🔄이벤트 루프➡콜 스택 & 콜백 큐 계속 지켜보다가
콜 스택이 비게 되면 먼저 들어온 순서대로
콜백 큐에 있는 함수들을 콜 스택에 넣어줌🥅
👉 Event Loop : JS 엔진이 일이 비면 콜백 큐에서 꺼내와 실행해주는 관리자