함수 객체
자바스크립트에서는 함수도 객체다
함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 것이다.
자바스크립트에서 함수는 값으로 취급된다
자바스크립트에서는 함수도 일반 객체처럼 취급될 수 있다. 때문에 자바스크립트 함수는 다음과 같은 동작이 가능하다.
- 리터럴에 의해 생성
- 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능
- 함수의 인자로 전달 가능
- 함수의 리턴값으로 리턴 가능
- 동적으로 프로퍼티를 생성 및 할당 가능
이와 같은 특징이 있으므로 자바스크립에서는 함수를 일급First Class 객체라고 부른다.
자바스크립트 함수의 기능은 입력한 값을 받아 처리한 다음 그 결과를 반환하는 구조다. 하지만 이러한 기본적인 기능 외에도 함수가 일급 객체이며 이는 곧 함수가 일반 객체처럼 값Value 로 취급된다는 것을 이해해야 한다.
함수 객체의 기본 프로퍼티
자바스크립트에서는 함수 역시 객체이므로 함수 역시 일반적인 객체의 기능에 추가로 호출됐을 때 정의된 코드를 실행하는 기능을 가지고 있다. 또한, 일반 객체와는 다르게 추가로 함수 객체만의 표준 프로퍼티가 정의되어 있다.
함수의 다양한 형태
콜백함수
콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다. 또한, 특정 함수의 인자로 넘겨서 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다.
대표적인 콜백 함수의 사용 예가 이벤트 핸들러 처리이다. 웹 페이지가 로드 되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 브라우저는 정의된 DOM 이벤트에 해당하는 이벤트 핸들러를 실행시킨다. 만약 이러한 이벤트 핸들러에 콜백 함수가 등록됐다면, 콜백 함수는 이벤트가 발생할 때마다 브러우저에 의해 실행되게 된다.
즉시 실행 함수
함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수immediate functions 라고 한다. 이렇게 함수가 선언되자마자 실행되게 만든 즉시 실행 함수의 경우, 같은 함수를 다시 호출할 수 없다. 이러한 특징을 이용해 최초 한 번의 실행만을 필요로 하는 초기화 코드 등에 사용할 수 있다.
즉시 실행함수의 또 다른 용도는 jQuery와 같은 라이브러리나 프레임워크 소스들이다. jQuery에서 즉시 실행 함수를 사용하는 이유는 자바스크립트의 변수 유효 범위 특성 때문이다. 자바스크립트에서는 함수 유효 범위를 지원한다. 기본적으로 자바스크립트는 변수를 선언할 경우 프로그램 전체에서 접근할 수 있는 전역 유효 범위를 가지게 된다. 그러나 함수 내부에서 정의된 매개변수와 변수들은 함수 코드 내부에서만 유효할 뿐, 함수밖에서는 유효하지 않다. (var문 사용)이것은 달리 말하면 함수 외부의 코드에서 함수 내부의 변수를 액세스하는 게 불가능하다는 것이다. 따라서, 라이브러리 코드를 즉시 실행 함수 내부에 정의해두게 되면 라이브러리 내의 변수들은 함수 외부에서 접근할 수 없다. 이렇게 즉시 실행 함수 내에 라이브러리 코드를 추가하면 전역 네임스페이스를 더럽히지 않으므로 이후 다른 자바스크립트 라이브러리들이 동시에 로드가 되더라도 라이브러리 간 변수 이름 충돌 같은 문제를 방지할 수 있다.
내부 함수
자바스크립트에서는 함수 코드 내부에서도 다시 함수 정의가 가능하다. 이렇게 함수 내부에 정의된 함수를 내부 함수 inner function 라고 한다. 내부 함수는 자바스크립의 기능을 보다 강력하게 해주는 클로저를 생성하거나 부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도 등으로 사용한다.
※ 내부 함수는 일반적으로 자신이 정의된 부모 함수 내부에서만 호출이 가능하다.
함수를 리턴하는 함수
자바스크립트에서는 함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수도 있다. 이러한 특징때문에 함수를 호출함과 동시에 다른 함수로 바꾸거나, 자기 자신을 재정의하는 함수를 구현할 수 있다.
'개발공부 > JavaScript 책' 카테고리의 다른 글
인사이드 자바스크립트 #09 (프로토 타입 체이닝) (0) | 2021.11.02 |
---|---|
인사이드 자바스크립트 #08 (함수 호출과 this, 함수리턴) ☆★ (0) | 2021.11.01 |
인사이드 자바스크립트 #06 (함수정의) (0) | 2021.11.01 |
인사이드 자바스크립트 #05 (연산자) (0) | 2021.11.01 |
인사이드 자바스크립트 #04 (배열) (0) | 2021.11.01 |