자바스크립트 함수 학습: 화살표 함수, 콜백 함수 및 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
키워드의 동작 방식을 이해하여 함수 유형에 따라 적절히 선택해야 함