자바스크립트 함수, 프로세스 및 실행

JavaScript 함수, 프로세스 및 실행

JavaScript를 마스터하려면 코드가 어떻게 실행되는지 이해해야 합니다.

여기 여러분이 알아야 할 핵심 개념들이 있습니다.

1. JavaScript 함수의 5가지 유형

• Named Function (이름이 있는 함수): 특정 이름을 사용합니다. 이는 오류를 빠르게 디버깅하는 데 도움이 됩니다.
• Anonymous Function (익명 함수): 이름이 없습니다. 콜백이나 변수 할당에 사용됩니다.
• Function Expression (함수 표현식): 함수를 변수에 할당합니다.
• Arrow Function (화살표 함수): => 기호를 사용하는 짧은 문법입니다. this 키워드를 다르게 처리합니다.
• IIFE: 정의하는 즉시 실행됩니다. 코드를 격리된 상태로 유지합니다.

2. 프로세스(Process) vs. 스레드(Thread)

프로세스는 실행 중인 프로그램입니다. 각 프로세스는 자신만의 메모리를 가집니다. Chrome이 충돌하더라도 Spotify는 별개의 프로세스이기 때문에 계속 실행됩니다.

스레드는 프로세스 내부의 작은 단위입니다. 스레드는 동일한 메모리를 공유합니다. 이로 인해 프로세스보다 더 빠르고 가볍습니다.

3. 동기(Synchronous) vs. 비동기(Asynchronous)

JavaScript는 싱글 스레드입니다. 보통 한 번에 하나의 작업만 실행합니다.

동기 실행 (Synchronous Execution): 작업이 엄격한 순서대로 실행됩니다. 다음 줄은 현재 줄이 끝날 때까지 기다립니다. 작업이 너무 오래 걸리면 앱이 느려질 수 있습니다.

비동기 실행 (Asynchronous Execution): 작업이 지금 시작되어 나중에 완료될 수 있습니다. 이는 코드가 차단(blocking)되는 것을 방지합니다.

작동 방식:

• Call Stack은 현재 작업을 처리합니다.
• Web APIs는 타이머나 데이터 요청과 같은 오래 걸리는 작업을 백그라운드에서 처리합니다.
• Callback Queue는 완료된 작업을 보관합니다.
• Event Loop는 스택이 비어 있을 때 큐에서 작업을 스택으로 옮깁니다.

비동기 흐름의 예시:

1. "Hi" 출력
2. 2초 타이머 시작
3. "End" 출력
4. (2초 경과) "Vicky" 출력

코드는 타이머를 기다리지 않습니다. 즉시 "End"로 넘어갑니다.

Source: https://dev.to/kamalesh_ar_6252544786997/types-of-function-and-threads-process-and-synchronous-vs-asynchronous-in-javascript-1hhd

선택 사항 학습 커뮤니티: https://t.me/GyaanSetuAi