검색
검색
공개 노트 검색
회원가입로그인
JavaScript 중급 지침서

제2장: 함수 완전 정복 (선언식, 표현식, 화살표 함수, 콜백, 클로저)

함수 선언과 함수 표현식

자바스크립트 함수는 다양한 방식으로 정의할 수 있습니다. 가장 기본이 되는 함수 선언식은 function 키워드 뒤에 함수명을 명시합니다. 이렇게 선언된 함수는 코드 어느 곳에서든 미리 불러 사용할 수 있습니다. 이는 호이스팅(hoisting)이라는 자바스크립트의 동작 원리 덕분으로, 인터프리터가 코드 실행 전 함수 정의를 미리 탐지하여 메모리에 등록하기 때문입니다.

함수 표현식은 함수를 하나의 값처럼 변수에 할당하는 방법입니다. 이 방식은 변수에 익명(이름 없는) 함수를 담을 수 있을 뿐 아니라, 함수 자체도 또 다른 값처럼 전달할 수 있게 합니다. 함수 표현식은 선언문과 달리, 실제 코드가 해당 위치에 도달해야만 함수가 만들어집니다. 즉, 호이스팅의 영향을 받지 않아 선언 전에 호출하면 에러가 발생합니다.

화살표 함수의 활용과 특징

ES6부터 도입된 화살표 함수는 간결한 문법이 특징입니다. 파라미터가 하나일 때는 괄호조차 생략할 수 있고, 한 줄의 코드는 중괄호와 return도 생략 가능합니다. 여기에 더해, 화살표 함수는 this의 동작 방식이 일반 함수와 다르다는 점에서 주의가 필요합니다. 화살표 함수 내부의 this는 외부 스코프의 this를 그대로 따릅니다. 콜백 함수나 짧은 함수 정의에 특히 적합하지만, 객체 메서드로 사용할 때는 의도와 다른 결과가 나올 수 있습니다.

콜백 함수 이해하기

함수를 다른 함수의 인자로 전달해 필요할 때 불러 쓰는 방식을 콜백 함수라고 합니다. 콜백 함수는 비동기 처리, 배열 함수(map, filter 등), 이벤트 처리 등 실무에서 많이 활용됩니다. 콜백 덕분에 같은 동작 구조라도 원하는 작업을 유연하게 끼워 넣을 수 있다는 장점이 있습니다. 대표적인 사용 예는 배열의 각 요소에 특정 동작을 적용할 때입니다. 이처럼 콜백은 함수형 프로그래밍의 기반이 됩니다.

클로저의 개념과 쓰임새

자바스크립트 함수는 자신이 선언될 당시의 환경, 즉 렉시컬 환경을 기억합니다. 이렇게 함수와 그 주변 상태가 함께 생성되는 현상을 클로저라고 부릅니다. 클로저를 활용하면 외부 함수 내부의 변수에 접근하는 내부 함수를 만들 수 있으며, 이 변수들은 외부 함수 실행이 끝나도 사라지지 않고 남아 있습니다. 비공개 변수나 데이터 은닉, 함수형 모듈 구현에 매우 유용하게 쓰입니다.

한 걸음 더 깊게 — 실제 코드에서의 활용

이 장에서는 각 개념별로 실제 예제 코드를 직접 입력해보는 연습을 권합니다. 함수 선언식·표현식의 선언 순서 차이, 화살표 함수의 this 바인딩, 콜백을 활용한 다양한 배열 처리, 클로저를 이용한 캡슐화 등 각 주제마다 직접 코드를 수정하며 감각적으로 익혀보세요. 함수는 자바스크립트 중급 이후의 모든 심화 주제와 맞닿아 있다는 점을 기억해야 합니다.


공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기