- 함수
- 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
- 매개변수
- 함수 내부로 입력을 전달받는 변수
- 인수
- 입력
- 반환값
- 출력
- 함수호출
- 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시
- 함수 호출시 코드 블록에 담긴 문들 일괄적 실행 후 반환값 반환
함수 리터럴
자바스크립트의 함수 = 객체 타입의 값
- 함수도
함수 리터럴
로 생성 가능- function 키워드, 함수이름, 매개변수, 함수 몸체로 구성
- 함수 리터럴은 평가되어 값(객체) 생성
- 함수는 객체지만 일반 객체와 달리 호출 가지며 함수 객체만의 고유한 프로퍼티 가짐
- 함수가 객체라는 것은 다른 언어와 구별되는 중요한 특징
함수 정의
- 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출됨
함수 표현식
- 아래의 경우 자바스크립트 엔진은 함수 선언문을 해석해 함수 객체를 생성함
함수 선언문
function foo(){ console.log('foo'); }
- 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당함
⇒ 자바스크립트 엔진은 함수 선언문을 함수 표현식으로 변환해 함수 객체를 생성함
- 아래의 경우 자바스크립트 엔진은 함수 선언문을 해석해 함수 객체를 생성함
자바스크립트의 함수 = 일급객체
- 값처럼 변수에 할당 가능
- 프로퍼티 값이 될 수 있음
- 배열의 요소가 될 수 있음
함수 표현식
: 함수 리터럴로 생성한 함수 객체를 변수에 할당하는 함수 정의 방식var add = function (x, y) { return x + y; }
- 함수 리터럴의 함수 이름은 생략 가능 ⇒
익명함수
- 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적
- 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름으로 함수를 호출할 수 없음 ⇒ 함수 객체를 가리키는 식별자를 사용해야 함
var add = function foo (x, y) { return x + y; } // 함수 객체를 가리키는 식별자로 호출 console.log( add(2,5) ); // 7 //함수 이름으로 호출 console.log( foo(2,5) )l // ReferenceERror: foo is not defined
- 함수 리터럴의 함수 이름은 생략 가능 ⇒
함수 생성 시점과 호이스팅
함수선언문으로 정의한 함수
⇒ 함수 선언문 이전에 호출 가능
function add(x, y) { return x + y }
함수표현식으로 정의한 함수
⇒ 함수 표현식 이전에 호출 가능
var sub = function (x, y) { return x - y }
런타임
: 코드가 한 줄씩 순차적으로 실행되는 시점
- 함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성됨
- 런타임에는 이미 함수 객체가 생성되어 있고 함수 이름과 동일한 식별자에 할당한 상태임
- 함수 선언문 이전에 함수를 참조, 호출 가능
⇒ 함수 호이스팅
함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징
함수 호이스팅과 변수 호이스팅 (var 키워드를 사용한 변수 선언)
- 공통점
- 함수 변수 선언문 모두 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 식별자를 생성함
- 차이점
- var 키워드로 선언된 변수
- undefined로 초기화 ⇒ 변수 선언문 이전에 변수 참조시 변수 호이스팅에 의해 undefined로 평가됨
- 함수 선언문을 통해 암묵적으로 생성된 식별자
- 함수 객체로 초기화
- 선언문 이전에 호출시 함수 호이스팅에 의해 호출 가능
- var 키워드로 선언된 변수
함수표현식 = 변수에 할당되는 값이 함수 리터럴인 문
- 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작
⇒ 변수 할당문의 값은 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 됨
⇒ 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생함
- 함수 표현식 이전에 함수를 참조하면 undefined로 평가됨
* 함수 선언문 대신 함수 표현식을 사용할 것을 더 권장함
Function 생성자 함수
- 자바스크립트가 기본 제공하는 빌트인 함수
var add = new Function('x', 'y', 'return x + y');
- Function 생성자 함수에
매개변수 목록
과함수 몸체
를 문자열로 전달하면서new 연산자
와 함께 호출하면 함수 객체를 생성해서 반환함- new 연산자 없이 호출해도 결과 동일
💡생성자 함수
객체를 생성하는 함수
- 이렇게 생성하는 방식 일반적이지 않고 바람직하지 않음
- 이렇게 생성한 함수는 클로저 생성하지 않는 등 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작함
화살표 함수
- ES6에 도입됨
const add = (x,y) => x + y;
- function 키워드 대신 화살표
⇒
를 사용해 함수 선언
- 화살표 함수는 항상 익명함수로 정의함
- 기존의 함수보다 내부 동작 또한 간략화되어 있음
- 생성자 함수로 사용할 수 없음
- 기존 함수와 this 바인딩 방식이 다름
- prototype 프로퍼티가 없음
- arguments 객체를 생성하지 않음
함수 호출
함수를 가리키는 식별자
와 한 쌍의 소괄호인 함수 호출 연산자 '()'
로 호출
- 함수 호출 연산자 내에 0개 이상의
인수
를 쉼표로 구분해서 나열
- 함수 호출시 현재의 실행 흐름 중단 후 호출된 함수로 실행 흐름 옮김
- 이때 매개변수에 인수가 순서대로 할당되고 함수 몸체의 문들 실행되기 시작
- 인수
- 값으로 평가될 수 있는 표현식이어야 함
- 함수를 호출할 때 지정
- 개수와 타입에 상관 x
- 매개변수보다 인수가 더 많을 때 초과된 인수는 무시되는데, 암묵적으로
arguments객체
의 프로퍼티로 보관됨- arguments 객체: 함수 정의시 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하게 사용됨
- 매개변수
- 함수를 정의할 때 선언
- 함수 몸체 내부에서 변수와 동일하게 취급됨
- 함수 호출시 함수 몸체 내에서 암묵적으로 매개변수가 생성되고 undefined로 초기화된 이후 인수가 순서대로 할당됨
- 함수 몸체 내부에서만 참조 가능
스코프
(유효범위) : 함수 내부
JS는 동적 타입 언어임 ⇒ JS 함수는 매개변수의 타입을 사전에 지정할 수 없음
⇒ JS는 함수 정의시 적절한 인수가 전달되었는지 확인 필요
- ES6에 도입된 매개변수 기본값 사용시 인수 체크 및 초기화 간소화 가능
- 매개변수에 인수를 전달하지 않았을 경우 & undefined를 전달한 경우에만 유효
function add( a=0, b=0, c=0 ) { return a + b + c; }
매개변수의 개수
함수의 매개변수는 코드를 이해하는 데 방해되는 요소
⇒ 이상적인 매개변수 개수 = 0개 (적을수록 좋음)
- 매개변수의 개수 多 → 함수 가능 多 ⇒ 바람직 x
- 이상적인 함수 = 한 가지 일만 해야 함 ⇒ 가급적 작게 만들어야 함
- 매개변수 최대 3개 이상 넘지 않을 것 권장
- 그 이상 필요시 하나의 매개변수 선언 후 객체를 인수로 전달하는 것이 유리
🚨함수 외부에서 함수 내부로 전달한 객체를 함수 내부에서 변경시 함수 외부의 객체가 변경되는 부수효과가 발생 (🔗)
반환문
= return
표현식(반환값)
- 실행 결과를 함수 외부로 반환
function multiply(x,y) { return x * y } var result = multiply(3,5) console.log(result) // 15
- return 키워드 통해 JS에서 사용 가능한 모든 값 반환 가능
- 함수 호출 = 표현식
- 함수호출표현식 = return 키워드가 반환한 표현식의 평과 결과(반환값)로 평가됨
- 함수 호출 = 표현식
- 역할
- 함수의 실행 중단 후 함수 몸체 빠져나감
반환문 이후 다른 문 실행되지 않고 무시
- return 키워드 뒤에 오는 표현식을 평가해 반환
반환값 명시적 지정하지 않을시 undefined 반환
- 함수의 실행 중단 후 함수 몸체 빠져나감
- 반환문 생략 가능
- 함수 몸체 내부에서만 사용 가능
- Node.js
- 모듈 시스템에 의해 파일별로 독립적인 파일 스코프를 가지므로 파일의 가장 바깥 영역에 반환문 사용 가능
참조에 의한 전달과 외부 상태의 변경 (11장 참고)
- 매개변수도 함수 몸체 내부에서 변수와 동일하게 취급
⇒ 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식 따름
- 원시 값은 값 자체가 복사되어 전달
- 객체는 참조 값이 복사되어 전달
- 원시 타입 인수
- 값 자체가 복사되어 매개변수에 전달 → 함수 몸체에서 그 값을 변경해도 원본 훼손 X
- 함수 외부에서 함수 몸체 내부로 전달한 원시 값의 우너본을 변경하는 어떠한 부수 효과도 발생 X
- 객체 타입 인수
- 참조 값이 복사되어 매개변수에 전달 → 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본 훼손
- 함수 외부에서 함수 몸체 내부로 전달한 참조 값에 의해 원본 객체가 변경되는 부수 효과 발생
⇒ 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워짐
- 객체의 변경 추적시 Observer 패턴 등을 통해 객체 참조를 공유한는 모든 이들에게 변경 통지하고 대처하는 추가 대응 필요
- 해결책
- 객체를
불변 객체(immutable object)
로 만들어 사용하는 것- 객체를 마치 원시값처럼 변경 불가능한 값으로 동작하게 만드는 것
- 객체의 상태 변경 원천 봉쇄
- 객체의 상태 변경이 필요한 경우 객체의
방어적 복사
를 통해 원본 객체를 완전히 복제 (깊은복사) 를 통해 새로운 객체를 생헝하고 재할당을 통해 교체
- 객체를
순수함수
- 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수
함수형 프로그래밍
- 순수 함수를 통해 부수효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 프로그래밍 패러다임
즉시 실행 함수
함수 정의와 동시에 즉시 호출되는 함수
(function () { ... }());
- 익명 함수를 사용하는 것이 일반적
- 반드시 그룹 연산자
( )
로 감싸야 함- 함수 리터럴을 평가해서 함수 객체를 생성하기 위해
- 객체 생성 방법 다양
(function () { ... }()); (function () { ... })(); !function () { ... }(); +function () { ... }();
- 값 반환 가능
- 인수 전달 가능
재귀 함수
재귀 호출
을 수행하는 함수
재귀호출: 함수가 자기 자신을 호출하는 것
- 반복되는 처리를 위해 사용
function countdown(n){ if ( n < 0 ) return; console.log(n); countdown(n-1); // 재귀 호출 } countdown(10);
- 함수 이름은 함수 몸체 내부에서만 유효하므로 함수 내부에서는 함수이름을 사용해 자기 자신 호출 가능
- 함수 표현식으로 정의한 함수 내부에서는 함수 이름은 물론 함수를 가리키는 식별자로도 자기 자신 호출 가능
- 외부에서 함수를 호출할 때는 반드시 함수를 가리키는 식별자로 해야 함
- 재귀 함수는 자신을 무한 호출하므로 재귀 함수 내에는 재귀 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 함
- 탈출 조건이 없으면 함수가 무한호출되어 스택 오버플로 에러가 발생
중첩 함수
함수 내부에 정의된 함수 / 내부함수
(+) 외부함수 = 중첩함수를 포함하는 내부 함수
콜백 함수
함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
고차함수
매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수
- 매개변수를 통해 함수를 전달받거나 반환값으로 함수를 반환하는 함수
- 함수형 프로그래밍 패러다임에서 고차함수라 함
- 콜백함수를 자신의 일부분으로 합성함
- 매개변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 호출
- 고차함수에 콜백함수 전달시 콜백함수 호출하는 것이 아니라 함수 자체를 전달해야 함
콜백함수 익명 함수 리터럴로 정의하여 전달하는 게 일반적
- 콜백함수가 고차함수 내부에만 호출시
- 고차함수가 호출될 때마다 평가되어 함수 객체 생성
- 자주 호출시 콜백함수 정의 후 함수 참조를 고차 함수에 전달하는 편이 효율적
repeat(5, function(i) {
if (i%2) console.log(i);
})
var logOdds = function (i) {
if (i%2) console.log(i)
}
콜백함수 활용
- 함수형 프로그래밍 패러다임
- 비동기처리
- 배열 고차 함수
순수함수와 비순수함수
- 순수 함수
- 어떤 외부 상태에 의존하지도 않고 변경하지 않는 부수효과가 없는 함수
- 동일한 인수가 전달되면 언제나 동일한 값 반환
- 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값 생성
- 최소 하나 이상의 인수를 전달 받음
- 인수를 변경하지 않는 것이 기본 (인수의 불변성)
- 함수의 외부 상태를 변경하지 않음
var count = 0; function increase(n) { return ++n } count = increase(count); console.log(count); // 1
- 비순수 함수
- 외부 상태에 의존하거나 외부 상태를 변경하는 부수효과가 있는 함수
- 외부상태에 따라 반환값 달라짐
- 전역 변수, 서버데이터, 파일, Console, DOM
var count = 0; //외부 상태 변경 function increase() { return ++count } increase(); console.log(count); //1
- 인수를 전달 받지 않고 함수 내부에서 외부 상태를 직접 참조 → 외부 상태에 의존하게 되어 반환값 변할 수 있고, 외부 상태도 변경할 수 있으므로 비순수 함수가 됨
- 매개변수를 통해 객체를 전달 받는 경우도 비순수 함수가 됨 (객체는 변경가능한 값)
- 외부 상태 변경 → 상태 변화 추적 어려워짐
☝🏻함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는 것이 좋음함수형 프로그래밍
순수함수와 보조함수의 조합을 통해 외부 상태를 변경하는 부수효과를 최소화해서 불변성을 지향하는 프로그래밍 패러다임
- 로직 내 존재하는 조건문 반복문 제거 → 복잡성 해결
- 로직의 흐름 이해하기 어렵게 함 (가독성 저하)
- 변수 사용 억제 또는 생명주기 최소화 → 상태 변경 피함 → 오류 최소화
- 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있음
- 순수 함수를 통해 부수효과를 최대한 억제 → 오류 예방 & 프로그램 안정성 ↑