AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

자바스크립트 함수 학습: 화살표 함수, 콜백 함수 및 Map - 특히 루프에서의 활용

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

자바스크립트를 활용한 배열, 루프, 데이터 처리 작업에 관심 있는 개발자 / 중급 수준

핵심 요약

  • 화살표 함수(=>)는 ES6에서 도입된 간결한 함수 표현 방식으로, this 바인딩이 자동으로 이루어지고 콜백 및 배열 메서드에서 유리
  • 콜백 함수는 비동기 처리 및 루프 이후 작업 실행에 활용되며, 함수를 인자로 전달하는 방식으로 작동
  • Map 함수는 배열 요소를 순회하며 새로운 배열 생성에 사용되며, num => num * 2와 같은 화살표 함수와 결합 시 간결한 코드 구현 가능
  • this 키워드는 일반 함수와 화살표 함수에서 다른 범위(스코프)를 참조하므로, 객체 메서드로 사용 시 주의

섹션별 세부 요약

1. 화살표 함수(Arrow Functions)

  • ES6(ES2015)에서 도입된 간결한 함수 문법: const add = (a, b) => a + b;
  • this 키워드 자동 바인딩으로 콜백 및 배열 메서드에서 유리
  • 일반 함수 대비 작성 간결성 향상 (예: () => {} 형식)

2. 콜백 함수(Callback Functions)

  • 함수를 인자로 전달하여 비동기 처리 또는 루프 후 작업 실행 가능
  • 예: function wish(name, callback) { ... }에서 callback()을 실행
  • 함수 실행 순서 제어에 유용 (예: callMe()wish() 내부에서 실행)

3. Map 함수와 루프 활용

  • .map()은 배열 요소를 순회하며 새로운 배열 생성
  • 예: numbers.map(num => num * 2)로 배열 요소를 2배로 증가
  • 기존 배열 수정 없이 새로운 배열 반환 (불변성 유지)

4. `this` 키워드 동작 방식

  • 일반 함수: this호출한 객체를 가리킴 (예: person.greet()에서 this.name"Alice")
  • 화살표 함수: this부모 스코프를 상속 (예: this.name"undefined"로 반환)
  • 객체 메서드로 사용 시 화살표 함수는 this 바인딩 실패

5. 루프와 Map, 콜백 결합 사용

  • fruits.map(printFruits)와 같은 방식으로 배열 요소 반복
  • printFruits 화살표 함수를 콜백으로 전달하여 간결한 출력 가능
  • I love apple, I love banana 등과 같은 결과 생성

결론

  • 화살표 함수는 this 바인딩이 자동이므로 객체 메서드로 사용 시 주의
  • Map 함수는 배열 변환에 효율적이며, 화살표 함수와 결합 시 코드 간결성 향상
  • 콜백 함수는 비동기 처리 및 루프 후 작업 실행에 필수
  • this 키워드의 동작 방식을 이해하여 함수 유형에 따라 적절히 선택해야 함