함수
일련의 과정을 문으로 구현하고 코드 블럭으로 감싸서 하나의 실행 단위로 정의한 것
- 함수의 선언
function add(x, y) {
return x + y;
}- 함수 호출
add(2, 3);12.2 함수를 사용하는 이유
반복되는 코드를 재사용할 수 있도록 하여 편의성을 높이고 코드의 신뢰성을 높인다.
12.3 함수 리터럴
자바스크립트에서 함수는 객체다.
일반객체와 다른점은 함수는 호출할 수 있다는 것이다.
12.4 함수 정의
함수를 정의하는 4가지 방법
- 함수 선언문
function add(x, y) {
return x + y;
}- 함수 표현식
const add = function(x, y) {
return x + y;
}- Function 생성자 함수
const add = new Function('x', 'y', 'return x + y');- 화살표 함수(ES6)
const add = (x, y) => x + y;12.4.1 함수 선언문
function add(x, y) {
return x + y;
}함수 선언문은 함수 이름을 생략할 수 없다. → 함수 선언문은 표현식이 아닌 문이다. (개발자도구에서 undefined 출력 됨)
자바스크립트는 함수 객체를 가리키는 식별자가 없으면 생성된 함수 객체를 참조할 수 없으므로 호출할 수도 없다. → 따라서 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
const add = function add(x, y) {
return x + y;
}
console.log(add(2,5)); // 7함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.
위의 예제에서 함수 이름인 add가 아닌 const add를 이용하여 호출한다.
12.4.2 함수 표현식
자바스크립트의 함수는 객체타입의 값이다. 즉, 값으로 해석된다. 이러한 값의 성질을 나타내는 객체를 일급 객체라 한다.
⇒ 자바스크립트의 함수는 일급 객체이다.
var add = function foo(x, y) {
return x + y;
};
console.log(add(2, 5)); // 7
console.log(foo(2,5)); // syntax errorfoo는 함수 내부에서만 접근하는 이름이다.
add 식별자를 통해 함수를 호출한다.
12.4.3 함수 생성 시점과 호이스팅
console.dir(add); // f add(x,y)
console.dir(sub); // undefined
console.log(add(2,5)); // 7
console.log(sub(2,5)); // sub is not a function
function add(x, y) {
return x + y;
}
var sub = function(x, y) {
return x - y;
}- 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르다.
함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라고 한다.
- 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
→ 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.
12.4.4 Function 생성자 함수
자바스크립트가 기본적으로 제공하는 빌트인 함수
안쓴다.
12.4.5 화살표 함수
ES6에서 도입된 화살표 함수. 항상 익명으로 정의한다.
나중에 정리한다.
12.5 함수 호출
12.5.1 매개변수와 인수
함수는 매개변수를 통해 함수에 인수를 전달한다. 인수는 값으로 평가될 수 있는 표현식이여야 한다.
// 함수 선언문
function add(x, y) {
return x + y;
}
// 함수 호출
var result = add(1,2);매개변수 또한 변수처럼 undefined로 초기화된 후 변수처럼 사용된다.
이 때, 매개변수의 스코프는 함수 내부이다.
초과되는 인수들은 arguments로 함수에서 보관한다.
12.5.2 인수 확인
자바스크립트에서 인수와 매개변수의 개수가 일치하는지 혹은 인수의 타입이 적절한지는 체크하지 않는다.
⇒ 그러므로 적절한 인수가 전달되었는지 체크해야한다.
function add(x, y) {
if(typeof x !== 'number' || typeof y !== 'number') {
throw new TypeError('인수는 모두 숫자 값이어야 한다.');
}
return x + y;
}인수가 전달되지 않은 경우에는 단축 평가를 사용해 매개변수에 기본값을 할당하는 방법도 있다
function add(a, b, c) {
a = a || 0;
b = b || 0;
c = c || 0;
return a + b + c;
}⇒ ES6에서는 기본값을 사용하면 인수 체크 및 초기화를 간소화 할 수 있다.
12.5.3 매개변수의 최대 개수
매개변수는 최대한 적을수록 좋다 (0개가 제일 좋다)
최대 3개. 더 많은 변수를 필요로 할 때는 객체형태로 한가지 매개변수를 갖는게 좋다
조심할 점은 전달받은 객체를 함수 내에서 변경할 경우 부수효과(side effect)가 발생할 수 있다.
12.5.4 반환문
함수는 return 키워드와 표현식으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환한다.
12.6 참조에 의한 전달과 외부 상태의 변경
매개변수는 참조에 의한 호출, 값에 의한 호출로 나눠진다.
참조에 의한 호출은 객체타입과 같은 mutable값이기에 원본데이터가 변경된다.
값에 의한 호출은 값을 복사하여 전달하기에 원본값이 변경되지 않는다.
⇒ 여러곳에서 참조하기에 의도치 않은 객체변경에 의해 값을 추적하기에 힘이 든다.
이를 해결하기 위해 순수함수를 만들어 해결한다.
깊은 복사를 이용하여 새로운 객체를 생성하고 재할당을 통해 교체한다. 이를 통해 부수효과를 제거할 수 있다.
12.7 다양한 함수의 형태
12.7.1 즉시 실행 함수
함수 정의와 동시에 실행하는 함수를 즉시 실행 함수(IFE)라고 한다.
(function() {
var a = 3;
var b = 5;
return a * b;
}())즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있고 인수를 전달할 수 있다.
var res = (function() {
var a = 3;
var b = 5;
return a * b;
}())
console.log(res); // 15
res = (function(a,b) {
return a * b;
}(3,5));12.7.2 재귀 함수
함수가 자기 자신을 호출하는 것을 재귀 호출이라 한다. 재귀 함수는 자기 자신을 호출하는 행위 즉, 재귀 호출을 수행하는 함수를 말한다.
// 반복문을 이용한 방식
function countdown(n) {
for (var i = n; i >= 0; i--) console.log(i);
}
countdown(10);
//
function countdown(n) {
if(n < 0) return;
console.log(n);
countdown(n - 1);
}- 재귀함수는 탈출조건이 필요하다.
12.7.3 중첩 함수
함수 내부에 정의된 함수를 중첩함수 또는 내부함수라고 한다.
ES6부터 함수 정의는 문이 위치할 수 있는 문맥이라면 어디든지 가능하다.(for문, if문에서 정의가능)
단, 호이스팅으로 인해 혼란이 발생하므로 바람직하지 않다.
12.7.4 콜백함수
함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.
고차 함수는 매개변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 인수를 전달하여 호출할 수 있다.
⇒ 즉, 고차함수에게 인수로서 함수를 전달할 경우 호출하지 않고 함수 자체를 전달한다.
12.7.5 순수 함수와 비순수 함수
순수함수
- 부수효과가 없다
- 언제나 같은 인풋에 같은 아웃풋을 만든다.
- 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 반환값을 만든다.
- 외부의 상태를 변경하지 않는다.
함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화해서 immutable을 지향하는 프로그래밍 패러다임이다.
출처: 모던 자바스크립트 Deep Dive - 이웅모
