6주차 학습일지

1. forEach()와 map() 차이점

• 공통점
  둘 다 배열을 순회(iterate)하며 각 요소에 대해 특정 작업을 수행할 때 사용합니다.
• forEach()
  • 주요 특징: 반환 값이 없습니다.
  • 목적: 배열 요소를 단순히 반복하고, 각 요소에 대해 어떤 동작을 수행하는 데 사용됩니다.
• map()
  • 주요 특징: 새로운 배열을 반환합니다.
  • 목적: 배열 요소를 변형하여 새로운 배열을 생성하는 데 사용됩니다.
• 차이점
  forEach()는 반환 값이 없고 단순한 반복 작업에 적합하며, map()은 변형된 데이터를 새로운 배열로 반환합니다.

---

2. 이벤트 루프란?

자바스크립트의 비동기 처리를 관리하는 메커니즘으로, 태스크(작업)들을 실행할 순서를 결정합니다.

• 구조
  1. Call Stack(호출 스택): 현재 실행 중인 함수가 저장되는 공간
  2. Web APIs: 비동기 작업(API 호출, 타이머, 이벤트 리스너 등)을 처리하는 영역
  3. Task Queue(태스크 큐): 비동기 작업이 완료되면 콜백이 대기하는 큐
  4. Event Loop: 호출 스택이 비어 있으면 태스크 큐에서 콜백을 가져와 실행
• 작동 방식
  1. 스택에 동기 코드를 실행
  2. 비동기 작업은 Web APIs로 넘기고, 결과를 태스크 큐에 저장
  3. 스택이 비면 이벤트 루프가 태스크 큐의 작업을 스택으로 이동시켜 실행

---

3. Promise와 async

• Promise
  • 자바스크립트의 비동기 작업을 처리하기 위한 객체입니다.
  • 상태
    • Pending(대기): 작업 진행 중
    • Fulfilled(성공): 작업 성공
    • Rejected(실패): 작업 실패
  • 사용법: then()과 catch()로 처리.
• async/await
  • Promise를 더 간결하게 작성할 수 있는 구문.
  • 특징: await 키워드는 비동기 작업이 완료될 때까지 기다립니다.
  • 사용법: async 함수 안에서만 await을 사용할 수 있습니다.
• 차이점
  Promise는 체이닝(then)을 사용하고, async/await은 동기 코드처럼 읽히도록 작성합니다.

---

4. target과 currentTarget

• target
  • 정의: 이벤트가 발생한 실제 요소를 가리킵니다.
  • 예시: 사용자가 클릭한 버튼 요소
• currentTarget
  • 정의: 이벤트가 바인딩된 요소를 가리킵니다.
  • 예시: 이벤트 리스너가 등록된 부모 요소
• 차이점
  • target은 이벤트가 발생한 요소를,
  • currentTarget은 이벤트 리스너가 등록된 요소를 참조합니다.