함수
함수란 입력을 받아 출력을 내보내는 과정을 정의한 것입니다.
프로그래밍에서도 이런 과정을 statement로 구현하고, 코드 블록으로 감싸 실행 단위로 정의합니다.
아래 두 개의 인자를 받아 그 곱을 반환하는 곱셈 함수를 정의해보겠습니다.
function multiply(x, y) {
return (x * y);
}이렇게 함수를 생성해놓으면 필요할 때 함수를 호출하여 재사용성을 높일 수 있습니다.
또한 유지보수에도 이점을 가지며, 코드의 가독성 및 신뢰성 향상에도 도움이 됩니다.
JavaScript의 함수는 일급 객체로써 다른 프로그래밍 언어의 함수와는 차이점을 갖고 있습니다.
따라서 함수는 리터럴로 생성할 수도 있고, 변수에 저장도 할 수 있으며, 매개변수 혹은 반환값으로도 사용이 가능합니다.
함수의 정의
함수를 정의하는 방법은 4가지가 있습니다.
함수 선언문
함수 선언문은 함수 리터럴과 형태는 같지만 함수 이름을 꼭 포함해서 선언해야 합니다.
function multiply(x, y) {
return (x + y);
}한 가지 특이한 점은 '함수 선언문'이란 statement를 뜻하는데, 표현식처럼 변수에 할당이 가능한 것입니다.
var multiply = function multiply(x, y) {
return (x * y);
}이는 자바스크립트 엔진이 중괄호 내부의 코드를 문맥에 따라 블록문으로 해석할 수도, 리터럴로 해석할 수도 있기 때문입니다.
함수 선언문을 통해 함수를 정의하면 자바스크립트 엔진은 함수 이름과 동일한 식별자를 생성하고 해당 식별자에 함수 객체를 할당해줍니다.
함수 표현식
함수 표현식으로 함수를 정의할 때는 함수 이름을 생략할 수도 있습니다.
var namedFunc = function multiply(x, y) {
return (x * y);
};
var anonymousFunc = function (x, y) {
return (x * y);
};여기서 주의할 점은 변수 호이스팅과 마찬가지로 함수 호이스팅을 고려해야 하는 점입니다.
식별자는 런타임 이전에 생성되지만, 함수 표현식의 경우 할당이 뒤에 이루어집니다.
따라서 함수를 표현식으로써 할당하기 전에 함수를 호출하면 Type Error가 발생합니다.
Function 생성자
Function 생성자로도 함수 정의가 가능합니다.
하지만 이는 일반적이지 않으며, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작합니다.
화살표 함수
ES6에서 추가된 함수 정의 방법입니다.
화살표 함수를 통해 함수를 정의할 때는 언제나 익명 함수로 정의해야 합니다.
하지만 이는 this 바인딩 방식이 다르고, arguments 객체를 생성하지 않습니다.
const multiply = (x, y) => x * y;함수 호출
함수 실행을 위해서는 함수 호출이 필요합니다.
함수를 호출할 때 함수의 파라미터를 전달하고 이 파라미터는 함수 내부에서만 참조가 가능합니다.
파라미터가 함수에서 정의된 개수보다 적으면 할당되지 않은 파라미터는 undefined 값을 가집니다.
파라미터가 함수에서 정의된 개수보다 많으면 남은 인수는 arguments 객체의 프로퍼티로 보관됩니다.
code>
const multiply = (x, y) => x * y;
console.log(multiply(1));
console.log(multiply(1, 2, 3));result>
NaN
2따라서 함수 내부에서 파라미터를 확인할 필요가 있습니다.
앞서 포스팅했던 단축 평가 등을 사용해 기본값 할당하는 방법도 있습니다.
또한 ES6에서는 파라미터 기본값을 정해줄 수 있습니다.
code>
const multiply = (x = 1, y = 1) => x * y;
console.log(multiply(1));
console.log(multiply(1, 2, 3));result>
1
2함수의 반환
함수 반환은 위의 예제들에서 많이 보았습니다.
return을 통해 원하는 출력을 반환합니다.
하지만 return이 없는 경우, 함수는 undefined를 반환합니다.
즉시 실행 함수
함수 정의와 동시에 즉시 한 번만 실행되는 함수를 의미합니다.
익명 또는 기명으로 정의되며 기명이라 해도 다시 호출할 수 없습니다.
일반적으로 그룹 연산자 ()로 감싸서 사용합니다.
code>
(function sayHello() {
console.log("hello");
}());
(function say(word, name) {
console.log(`${word}, ${name}`);
}("hello", "hyeonsik"));
result>
'hello'
'hello, hyeonsik'중첩 함수
중첩 함수란 함수 내부에 정의된 함수를 의미합니다.
다른 말로 내부 함수라고 하며, 중첩 함수를 포함하는 함수는 외부 함수라고 합니다.
function sayHello(name) {
var hello = 'Hello';
function callName() {
console.log(`${hello}, ${name}`);
}
callName();
}콜백 함수
콜백 함수는 파라미터로써 다른 함수 내부로 전달되는 함수를 말합니다.
콜백 함수를 전달받은 함수는 고차함수라고 합니다.
function repeat(n, f) {
for (let i = 0; i < n; i++)
f(i);
}
function odds(n) {
if (n % 2)
console.log(n);
}
function evens(n) {
if (!(n % 2))
console.log(n);
}
repeat(10, odds);
repeat(10, evens);result>
1
3
5
7
9
0
2
4
6
8순수 함수/비순수 함수
순수 함수란, 외부 상태에 의존하지 않는 함수입니다.
비순수 함수란, 외부 상태에 따라 결과가 바뀔 수 있거나 외부 상태를 변경할 수 있는 함수입니다.
함수형 프로그래밍에서는 불변성 지향을 위해 부수 효과를 최소화하는 순수 함수를 사용하는 것이 추천됩니다.
