[JS] 모던 자바스크립트 - 07. 함수
함수
- 일련의 과정을 문(statement)로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
- 함수 내부로 입력을 전달받는 변수는 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다
- 함수는 객체타입의 값, 함수가 객체라는 사실은 다른 프로그래밍 언어와 구별되는 자바스크립트의 중요한 특징
- 함수는 일급객체, 값의 성질을 갖는 객체다
- 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자
- 변수는 선언한다고 하지만, 함수는 정의한다고 한다
- 일반 객체는 호출할 수 없지만 함수는 호출 가능
함수 정의
함수 선언문
function add(x,y){
return x + y ;
}- 함수 이름을 생략할 수 없다
- 표현식이 아닌 문이므로 변수에 할당할 수 없다
- 그룹 연산자( ) 내에 있는 함수 리터럴은 함수 선언문으로 해석되지 않고 함수 리터럴 표현식으로 해석 (그룹 연산자의 피연산자는 값으로 평가될 수 있는 표현식이어야하기 때문, 함수 선언문은 피연산자로 사용 불가)
- 함수 몸체 외부에서는 함수 이름으로 함수를 호출할 수 없음
( function bar() {console.log('bar'); });
bar(); // RefereceError : bar is not defined- 자바스크립트 엔진은 함수 선언문을 해석해 런타임 이전에 함수 객체를 생성
- 함수 선언문으로 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 거기에 함수 객체를 할당
- 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출
- 함수 선언문 이전에 호출해도 함수 호이스팅에 의해 호출 가능
함수 표현식
var add = function (x,y) {
return x + y ;
}
- 함수 리터럴로 생성한 함수 객체는 표현식인 문이므로 변수에 할당 가능
- 함수 리터럴의 함수 이름은 생략 가능(익명 함수)
- 런타임에 함수 리터럴이 변수에 할당되는 시점에 평가되어 함수 객체가 됨
- 함수 호이스팅이 아닌 변수 호이스팅이 발생
- 함수 표현식 이전에 함수 참조시 undefined로 평가되어 TypeError 발생
- 함수 선언문보다 함수 표현식을 사용하는 것이 좋음
Function 생성자 함수
var add = new Funtion('x','y','return x + y');- 일반적이지 않고 바람직하지도 않음
- 클로저를 생성하지 않는 등 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작
화살표 함수
const add = (x,y) => x + y;- ES6에서 도입
- function 키워드 대신 화살표(=>)를 사용
- 항상 익명 함수로 정의
- 기존 함수와 this 바인딩 방식이 다르고, prototype 프로퍼티가 없으며, argument 객체를 생성하지 않음
- 함수 내부에 this가 없고, 접근하려고 할 때 스코프 체인상 가장 가까운 this에 접근
함수 호출
매개변수와 인수
- 인수는 값으로 평가될 수 있는 표현식이어야 함, 함수를 호출할 때 지정
- 매개변수는 함수를 정의할 때 선언, 함수 몸체 내부에서 변수와 동일하게 취급
- 매개변수의 스코프(유효 범위)는 함수 내부
- 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않음, 에러 발생 X
- 인수가 할당되지 않은 매개변수의 값은 undefined
- 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시, 버려지는 것은 아니고 arguments 객체의 프로퍼티로 보관(arguments 객체는 함수를 정의할 때 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용)
- 자바스크립트는 동적타입 언어로서 매개변수 타입을 사전에 지정 할 수 없음(이 때문에 타입스크립트를 사용)
- ES6의 매개변수 기본값을 사용하면 함수 내부에서 하던 인수 체크 및 초기화를 간소화
function add(a=0, b=0, c=0){
return a + b + c;
}- 원시 값의 인수는 부수효과가 없음
- 객체 타입 인수는 함수 내부에서 변경 시 부수효과 발생, 그러므로 객체는 깊은 복사를 통해 새로운 객체를 생성하고 재할당을 통해 교체
반환문
- 함수 호출은 표현식으로 return 키워드가 반환한 표현식의 평가 결과, 즉 반환값으로 평가됨
- 함수의 실행을 중단하고 함수 몸체를 빠져나감
- return 키워드 뒤에 오는 표현식을 평가해 반환, 표현식을 명시적으로 지정하지 않은 경우 undefined 반환
- 생략 가능, 생략 시 암묵적으로 undefined 반환
- 함수 내부에서만 사용 가능, 전역에서 사용 시 문법 에러(SyntaxError) 발생 (Node.js 환경에서는 파일별로 독립적인 파일 스코프를 갖기 때문에 에러 발생 X)
함수의 형태
즉시 실행 함수
- 함수 정의와 동시에 호출되는 함수
// 익명 즉시 실행 함수
(function () {
var a = 3;
var b = 5;
return a * b;
}());- 익명함수를 쓰는 것이 일반적, 함수 이름을 쓸 순 있지만 그룹 연산자 내에서의 기명함수는 함수 선언문이 아닌 함수 리터럴로 평가되어 외부에서 호출 불가능하므로 불필요함
- 반드시 그룹 연산자(...)로 감싸야함
- 함수 선언문 뒤에 붙이는 ( )는 함수 호출 연산자가 아니라 그룹 연산자로 해석, 그룹 연산자에 피연산자가 없어 에러 발생
- 즉시 실행 함수 내에 코드를 모아두면 변수나 함수 이름의 충돌 방지 가능
재귀 함수
- 함수가 자기 자신을 호출하는 재귀 호출을 수행하는 함수
- 반복되는 처리를 반복문 없이 구현 가능
- 함수 이름, 함수 식별자 두가지로 전부 호출 가능
- 재귀 함수 내에 재귀 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 함, 그렇지 않으면 함수가 무한 호출되어 stack overflow 에러 발생
- 무한 반복에 빠질 위험이 있으므로 반복문보다 재귀함수를 사용하는 것이 직관적으로 이해하기 쉬울 때만 한정적으로 사용하도록 해야함
중첩 함수
- 함수 내부에 정의된 함수(inner function)
- 중첩 함수를 포함하는 함수는 외부 함수(outer function)
콜백 함수
- 매개변수를 통해 다른 함수의 내부로 전달되는 함수
- 매개변수를 통해 외부에서 콜백 함수를 전달받은 함수는 고차함수
- 고차 함수는 콜백 함수를 자신의 일부분으로 합성
- 고차 함수에 의해 호출되며 콜백 함수에 인수를 전달할 수도 있음
- 함수형 프로그래밍 패러다임과 비동기처리(이벤트 처리, Ajax 통신, 타이머 함수 등)에 활용되는 중요한 패턴
- 배열 고차 함수에서도 사용
순수 함수와 비순수 함수
- 순수함수는 부수효과가 없는 함수, 외부 상태를 변경 X
- 비순수 함수는 부수효과가 있는 함수, 외부 상태를 변경, 외부 상태에 의존
- 순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을 반환
- 함수 내부에서 외부 상태를 직접 참조하지 않더라도 매개변수를 통해 객체를 전달 받으면 비순수 함수가 됨
- 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화해서 불변성을 지향하는 프로그래밍 패러다임
- 자바스크립트는 멀티 패러다임 언어로, 객체 지향 뿐 아니라 함수형 프로그래밍을 적극적으로 활용
출처
- 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리
- 코어 자바스크립트