모던 자바스크립트 Deep Dive 정리
함수란?
▶일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
함수를 사용하는 이유
▶실행 시점을 개발자가 결정할 수 있다
▷원하는 시점에 함수 호출(invoke) 가능
▶언제든지 재사용이 가능하다
▷코드의 재사용성을 증가 -> 유지보수 편의성 증가
함수 리터럴
▶함수 이름
▷함수명은 식별자이기 때문에 식별자 네이밍 규칙을 준수해야 한다
▷이름 사용 여부에 따라 기명함수, 무기명 함수로 나뉜다
▶매개변수
▷매개변수는 함수 몸체 내에서 변수와 동일하게 취급되므로 식별자 네이밍 규칙을 준수해야 한다
함수 정의
함수 정의에는 4가지 방법이 있다
1) 함수 선언문
2) 함수 표현식
3) Function 생성자 함수
4) 화살표 함수(ES6)
▶함수 선언문
▷예시
function add(x, y) {
return x + y;
}
// 함수 참조
// console.dir은 console.log와는 달리 함수 객체의 프로퍼티까지 출력한다.
// 단, Node.js 환경에서는 console.log와 같은 결과가 출력된다.
console.dir(add); // ƒ add(x, y)
▷함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다
▷그러나 함수는 이름이 아닌 함수 객체를 가리키는 식별자로 호출한다
▷함수 선언문은 함수 이름을 생략할 수 없다
▶함수 표현식
▷예시 (무기명 함수 표현식)
// 함수 표현식
var add = function (x, y) {
return x + y;
};
console.log(add(2, 5)); // 7
▷함수는 이름이 아닌 함수 객체를 가리키는 식별자로 호출한다
▷예시 (기명 함수 표현식)
// 기명 함수 표현식
var add = function foo (x, y) {
return x + y;
};
// 함수 객체를 가리키는 식별자로 호출
console.log(add(2, 5)); // 7
// 함수 이름으로 호출하면 ReferenceError가 발생한다.
// 함수 이름은 함수 몸체 내부에서만 유효한 식별자다.
console.log(foo(2, 5)); // ReferenceError: foo is not defined
▷함수 이름은 함수 몸체 내부에서만 유효한 식별자이다 (재귀 함수)
▷값의 성질을 갖는 객체를 일급 객체라 하는데, JS에서는 함수도 일급 객체이다
함수 호이스팅
▶함수 선언문으로 정의한 함수는 호이스팅이 가능하다
▷예시
console.dir(add); // ƒ add(x, y)
console.dir(sub); // undefined
// 함수 호출
console.log(add(2, 5)); // 7 // 호이스팅 가능
console.log(sub(2, 5)); // TypeError: sub is not a function
// 함수 선언문
function add(x, y) {
return x + y;
}
// 함수 표현식
var sub = function (x, y) {
return x - y;
};
▷함수 선언문은 런타임 이전에 함수 이름과 같은 식별자를 암묵적으로 생성하고 함수 객체를 할당한다
▷따라서 undefined가 할당되는 함수 표현식과 다르게 함수 호이스팅이 가능하다!
▷함수 표현식은 변수 호이스팅이 발생한다
▷호이스팅 이슈때문에 함수 선언문 대신 함수 표현식이 권장된다
함수호출
▶매개변수
▷함수를 정의할 때 선언
▷함수 몸체 내부에서만 참조 가능
▷매개변수에 기본값 부여(ES6) -> 매개변수에 인수를 전달하지 않거나 undefined를 전달하면 유효
▷이상적인 매개변수는 1개이다 (함수는 한가지 일만 하는 것이 바람직)
▶인수
▷함수를 호출할 때 선언
▷매개변수보다 인수가 적어도 상관없음 (부족한 인수는 undefined가 자동 할당)
▷매개변수보다 인수가 많으면 초과된 인수는 무시된다
반환문
▶return
▷return 뒤에 아무것도 없으면 단순히 undefined를 반환
▷반환문은 생략 가능
즉시 실행 함수
▶즉시 실행 함수는 그룹 연산자를 필요로 한다
▷예시
// 익명 즉시 실행 함수
(function () {
var a = 3;
var b = 5;
return a * b;
}());
▷즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다
콜백 함수
▶함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
▷콜백함수를 매개변수로 전달받는 함수는 고차함수(map,reduce 등) 라고 한다
▷예시
// 익명 함수 리터럴을 콜백 함수로 고차 함수에 전달한다.
// 익명 함수 리터럴은 repeat 함수를 호출할 때마다 평가되어 함수 객체를 생성한다.
repeat(5, function (i) {
if (i % 2) console.log(i);
}); // 1 3
▷콜백 함수가 고차함수 내부에서만 호출된다면 콜백 함수를 익명 함수 리터럴 형태로 곧바로 전달하는 것이 일반적
순수 함수와 비순수 함수
▶순수 함수
▷부수 효과(side effect)가 없는 함수
▶비순수 함수
▷외부 상태에 의존하거나 외부 상태를 변경하는, 부수 효과가 있는 함수
함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는것이 바람직