함수란? 사용하는 이유는?
함수는 과정을 문으로 구현하고 코드 블럭으로 감싸서 하나의 실행 단위로 정의한 것이다.
- 코드의 재사용
- 동일한 작업을 반복적으로 할 때 함수 사용
- 유지보수 편의성 & 코드의 신뢰성
- 코드의 중복을 억제하고 실수를 줄일 수 있다.
- 가독성
- 함수는 "객체 타입의 값"이다
- 적절한 함수 이름은 함수의 역할을 파악할 수 있게 하여 가독성을 향상시킨다.
함수를 정의하는 방법
함수 정의란, 함수 호출하기 전에 매개변수, 실행 문, 반환 값을 지정하는 것이다.
- 정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가 된다.
- 변수는 "선언"한다. 함수는 "정의"한다.
함수 선언문
function add(x, y) {
return x + y;
}함수 표현식
var add = function (x, y) {
return x + y;
};Function 생성자 함수
var add = new Function("x", "y", "return x + y");화살표 함수
var add = (x, y) => x + y;함수 호출
- 매개변수는 함수 몸체 내부에서만 참조할 수 있다. 즉, 매개변수의 유효 범위는 함수 내부다.
- 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않아, 인수를 개수만큼 전달하지 않아도 에러가 발생하지 않는다.
- 매개변수보다 인수가 적은 경우 -> 인수가 할당되지 않은 매개변수의 값은
undefined다. - 매개변수보다 인수가 많은 경우 -> 초과된 인수는 무시된다. 버려지는 것이 아니라, 객체의 프로퍼티로 보관된다.
- 매개변수보다 인수가 적은 경우 -> 인수가 할당되지 않은 매개변수의 값은
function add(x, y) {
return x + y;
}
console.log(add(2)); // NaN자바스크립트 문법상의 문제
- 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
- 자바스크립트는 동적 타입 언어로, 매개변수의 타입을 사전에 지정할 수 없다.
- typeof 연산자 사용
- 타입스크립트 사용 -> 컴파일 시점에 부적절한 호출을 방지할 수 있다.
- 인수가 전달되지 않은 경우, 단축평가 사용 -> 기본값 할당
- 매개변수 기본값 사용
// typeof 연산자 사용
function add(x, y) {
if (typeof x !== "number" || typeof y !== "number") {
throw new TypeError("인수는 모두 숫자값 이어야 합니다.");
}
return x + y;
}
console.log(add(1, 2)); // 3
console.log(add(2)); // TypeError: 인수는 모두 숫자값 이어야 합니다.
console.log(add("a", "b")); // TypeError: 인수는 모두 숫자값 이어야 합니다.
// "단축 평가"로 arguments 문제 방지
function mul(a, b, c) {
a = a || 1;
b = b || 1;
c = c || 1;
return a * b * c;
}
console.log(mul(1, 2, 3)); // 6
console.log(mul(1, 2)); // 2
console.log(mul(1)); // 1
console.log(mul()); // 1
// 매개변수 기본값 사용
function sub(a = 0, b = 0) {
return a - b;
}
console.log(sub(10, 9)); // 1
console.log(sub(10)); // 10
console.log(sub()); // 0값에 의한 호출 vs 참조에 의한 호출
- 값에 의한 호출 (call by value): 함수 호출 시, 매개변수에 원시 값을 전달
- 참조에 의한 호출 (call by reference): 함수 호출 시, 매개변수에 객체를 전달
- 객체는 변경 가능한 값인데, 참조 값으로 전달한 객체를 변경할 경우 원본이 훼손된다. -> 상태 변화 추적이 어렵다.- 해결 방법으로 객체를 불변 객체(immutable object) 로 만들어서 사용한다.
- 깊은 복사를 통해 새로운 객체를 생성하고 재할당한다.
function changeVal(primitive, obj) {
primitive += 100;
obj.name = "LEE";
}
// 외부 상태
var num = 100; // 원시 값
var person = { name: "KIM" }; // 객체
console.log(num); // 100
console.log(person); // { name: 'KIM' }
changeVal(num, person);
console.log(num); // 100
console.log(person); // { name: 'LEE' }다양한 함수
즉시 실행 함수 (IIFE)
Immediately Invoked Fuction Expression
함수 정의와 동시에 즉시 호출되는 함수이다.
- 그룹 연산자
( ... )로 감싸야 한다. - 이름이 없는 익명 함수를 사용한다.
- 즉시 실행 함수는 다시 호출할 수 없다.
(function () {
/// ...
})();재귀 함수
반복되는 처리를 반복문 없이 구현할 수 있지만, 무한 반복에 빠질 수 있고 스택 오버플로 에러를 발생시킬 수 있다.
중첩 함수 (nested function) = 내부 함수 (inner function)
함수 내부에 정의된 함수이다
- 중첩 함수를 포함하는 함수를 외부 함수라고 한다.
- 중첩 함수는 외부 함수 내부에서만 호출할 수 있다.
- 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수 역할을 한다.
function outer() {
var x = 1;
// 중첩 함수 == 내부 함수
function inner() {
var y = 2;
// 외부 함수의 변수 참조
console.log(x + y); // 3
}
inner();
}
outer();콜백 함수
함수의 매개변수를 통해 다른 함수 내부로 전달되는 함수이다.
- 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를
고차 함수(Higher-Order Function, HOF)라 한다. - 콜백 함수는 고차 함수에 의해 호출된다.
- 고차 함수는 콜백 함수에 인수를 전달할 수 있다. -> 따라서, 고차 함수에 콜백 함수를 전달할 때는 콜백 함수를 호출하지 않고 함수 자체를 전달해야 한다.
- 함수는 일급 객체이므로 함수의 매개변수를 통해 함수를 전달할 수 있다.
// 외부에서 전달받은 func 를 n 만큼 반복 호출 - 고차 함수 repeat
function repeat(n, f) {
for (var i = 0; i < n; i++) {
f(i);
}
}
// 콜백 함수 정의 - logAll
var logAll = function (i) {
console.log(i);
};
// 반복 호출할 함수를 인수로 전달
repeat(5, logAll); // 0 1 2 3 4
// 콜백 함수 정의 - logOdd
var logOdd = function (i) {
if (i % 2) console.log(i);
};
// 반복 호출할 함수를 인수로 전달
repeat(5, logOdd); // 1 3
탄탄한 개발자로 살아남기🗿