함수 정의 방법
1. 함수 선언문
function add (x, y) {
return x + y;
}- 독자적인 구문의 형테
- 매개변수는 항상 복사된 값 사용
- 런타임 이전에 함수 객체 생성
-> 함수 정의되기 전에도 호출 가능(함수 호이스팅) - 실제 동작 방식
- 함수 이름과 동일한 이름의 식별자를 생성한 후, 함수 객체 할당
- 사실은 함수 이름이 아닌 함수 객체를 가리키는 식별자로 호출됨
2. 함수 표현식
var add = function (x, y) {
return x + y;
}- 함수 리터럴의 함수 이름 생략하는 것이 일반적 -> 익명 함수
- 실행 흐름이 해당 변수에 도달했을 때, 함수 생성됨(변수 호이스팅)
3. Function 생성자 함수
var add = new Function('x', 'y', 'return x + y');- 일반적이지 않으며 바람직하지도 않음
4. 화살표 함수
var add = (x, y) => x + y;
// 인수가 없는 경우, 괄호 생략 불가
var add = () => 1 + 2;
// 중괄호 이용 시, return 필수
var add = (x, y) => {
x += 1;
y += 2;
return x + y;
}- ES6에서 도입된 방식
- 항상 익명 함수로 정의
함수 호출
1. 매개변수와 인수
- 매개변수의 스코프: 함수 내부
- 매개변수(인자)와 인수의 개수 체크 하지 않음
- 인수가 할당되지 않은 매개변수는 undefined 처리- 매개변수 보다 인수가 더 많은 경우, 무시
- 모든 인수는 암묵적으로
arguments객체의 프로퍼티로 보관됨
- 함수가 한 가지 기능만 하도록 가급적 적은 수의 매개변수가 좋음
2. 인수 확인
- 매개변수에 적절한 인수가 전달되었는지 확인하기(인수의 타입 체크)
- arguments 객체를 통해 인수 개수 확인하기
- 단축 평가를 통해 매개변수의 기본값 할당하기
3. 반환문
- 함수의 실행을 중단하고 함수 몸체를 빠져나감
- return문이 없거나 지시자만 있는 경우, undefined 반환
다양한 형태의 함수
1. 즉시 실행 함수
- 함수 정의와 동시에 즉시 호출되는 함수
var res = (function(a, b){
return a * b;
}(3, 5));- 단 한 번만 호출
- 익명 함수 사용
- 반드시 그룹 연산자(( ... )) 이용
2. 재귀 함수
- 자기 자신을 호출하는 함수
- 반복문 없이 구현 가능
- 재귀 호출을 멈추는 탈출 조건 생성 필수
3. 중첩 함수(내부 함수)
- 외부 함수 내부에 정의된 함수
4. 콜백 함수
- 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
- 고차 함수: 매개변수를 통해 함수의 외부에서 콜백 함수를 전달 받는 함수
// 고차 함수
function repeat(n, func) {
for(var i = 0; i < n; i++) {
func(i);
}
}
// 콜백 함수
var logAll = function (i) {
console.log(i);
}
repeat(5, logAll);5. 순수 함수
- 외부 상태를 변경하지도 의존하지도 않는 함수
- 부수 효과 X
6. 비순수 함수
- 외부 상태를 변경하거나 의존하는 함수
- 부수 효과 O
함수형 프로그래밍
- 순수 함수를 통해 부수 효과를 최대한 억제하며 오류를 피하고 안정성을 높이는 프로그래밍 패러다임
- 자바스크립트는 멀티 패러다임 언어이므로 객체지향 프로그래밍 뿐만 아니라 함수형 프로그래밍도 적극적으로 활용함
함수와 일급객체
일급 객체
- 무명의 리터럴로 생성 가능 -> 런타임에 생성 가능
- 변수나 자료구조(객체, 배열 등)에 저장 가능
- 함수의 매개변수에 전달 가능
- 함수의 반환값으로 사용 가능
-> JS의 함수는 위 조건을 모두 만족하기에 일급 객체 이다.
=> "함수를 객체와 동일하게 사용할 수 있다."
함수 객체의 프로퍼티
1. arguments
- 함수 호출 시 전달된 인수들의 정보를 담고 있는 유사 배열 객체
- 유사 배열 객체란?
: 실제 배열이 아니며length프로퍼티를 가진 객체로 for문으로 순회할 수 있는 객체 - 함수 내부에서 지역 변수 처럼 사용됨
ES6의Rest파라미터와 연관
function multiply(x, y) {
console.log(arguments);
return x * y;
}2. caller
- ECMAScript 사양에 포함되지 않은 비표준 프로퍼티
- 함수 자신을 호출한 함수를 가리킨다.
3. length
- 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.
- arguments 객체의 length(인자의 개수) != 함수 객체의 length(매개변수의 개수)
4. name
- 함수 이름
- 익명함수의 경우,
- ES5: 빈 문자열
- ES6: 함수 객체를 가리키는 식별자
5. prototype
- constructor만이 소유하는 프로퍼티
- 함수가 객체를 생성하는 생성자 함수로 호출될 때 생성할 인스턴스의 프로포타입 객체를 가리킨다.
6. __proto __
-[[Prototype]] 내부 슬롯이 가리키는 프로포타입 객체 접근하기 위해 사용하는 접근자 프로퍼티
junior backend-developer 👶💻