두 변수 x, y에 대하여 x가 정해지면 그에 따라 y의 값이 하나만 결정될 때, y 를 x의 함수
스크립트에서의 함수란?
입력받은 변수에 따라서 결과(리턴) 값이 정해지는. 아래 네모 박스와도 같다.
주로 여러 번 반복적으로 사용해야 하는 경우가 있으면 만들어 두고 사용하면 편의하다.
프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 표현하고, 코드 블록으로 감싸 하나의 실행 단위로 정의한 것이다.
// [예제 12-01]
// 함수 정의 f(x,y) = x + y
function add(x, y){
return x + y;
}
// f(2, 5) = 7
add(2, 5); // 7
// 함수 호출
var result = add(2, 5);
// 함수 add에 인수 2, 5를 전달하면서 호출하면 반환값 7을 반환한다.
console.log(result);
2 함수를 사용하는 이유
내 생각은 동일한 작업을 반복하는 불편함을 줄이고자 사용하는것 같다. 즉 재사용성 때문에 사용한다.
코드를 함수로 만들고 매개변수를 사용하면 코드가 간결해지고, 같은 코드를 반복 선언할 필요가 없어 번거로움을 줄일 수 있다. 오타의 방지도 된다.
또한 함수에 이름(식별자)을 붙일 수도 있어 내부 코드를 이해하지 않고도 함수의 역할을 파악할 수 있게 돕는다.
3 함수 리터럴
자바스크립트의 함수는 객체 타입의 값이다. 함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성된다.
// [예제 12-04]
var f = function add(x, y){
return x + y;
};
구성요소
설명
함수 이름
* 함수 이름은 식별자다. 따라서 식별자 네이밍 규칙을 준수해야 한다.
함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다.
함수 이름은 생략할 수 있다. 이름이 있는 함수를 기명 함수, 이름이 있는 함수를 기명 함수, 이름이 없는 함수를 anonymous function (익명 함수)이라 한다. | | 매개변수 목록 | * 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분한다.
각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당한다. 즉, 매개변수 목록은 순서에 의미가 있다.
매개변수는 함수 몸체 내에서 변수와 동일하게 취급된다. 따라서 매개변수도 변수와 마찬가지로 식별자 네이밍 규칙을 준수해야 한다. | | 함수 몸체 | * 함수는 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의 한 코드 블록이다.
함수 몸체는 함수 호출에 의해 실행된다. |
리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 방식을 말한다. 따라서 함수 리터럴도 값을 생성하며 이 값은 객체다. 즉, 함수는 객체다.
4 함수 정의
함수 선언문
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’);
화살표 함수(ES6)
var add = (x, y) ⇒ x + y;
4.1 함수 선언문
// [예제 12-05]
// 함수 선언문
function add(x, y){
return x + y;
}
// 함수 참조
// console.dir은 console.log와 달리 함수 객체의 프로퍼티까지 출력한다.
// 단, Node.js 환경에서는 console.log와 같은 결과가 출력된다.
console.dir(add); // f add(x, y)
// 함수 호출
console.log(add(2, 5)); // 7
// [에제 12-07]
// 함수 선언문은 표현식이 아닌 문이므로 변수에 할당할 수 없다.
// 하지만 함수 선언문이 변수에 할당되는 것처럼 보인다.
var add = function add(x, y){
return x + y;
};
// 함수 호출
console.log(add(2, 5)); // 7
4.3 함수 생성 시점과 함수 호이스팅
// [예제 12-12]
// 함수 참조
console.dir(add); // f 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;
}
함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문에 함수 선언문으로 정의한 함수만 호이스팅이 된다.
4.4 Function 생성자 함수
// [예제 12-14]
var add1 = (function (){
var a = 10;
return function (x, y) {
return x + y + a;
};
}());
console.log(add1(1, 2)); // 13
var add2 = (function () {
var a = 10;
return new Function('x', 'y', 'return x + y + a;');
}());
console.log(add2(1, 2)); // ReferenceError: a is not defined
함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 매개변수 (인자)를 통해 인수를 전달한다. 인수는 값으로 평가될 수 있는 표현식이어야 한다.
// [예제 12-16]
// 함수 선언문
function add(x, y){
return x + y;
}
// 함수 호출
// 인수 1과 2가 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다.
var result = add (1, 2);
5.2 인수 확인
// [예제 12-22]
function add(x, y){
return x + y;
}
console.log(add(2)); // NaN => 매개변수를 두개를 요구하지만 한개만 전달.
console.log(add('a', 'b')); // "ab" => String 연결 연산자로 사용됨
자바스크립트는 타입을 지정하지 않는 유연한 동적 타입 언어이기에 타입을 지정할 수가 없다. 따라서 적절한 인수가 전달되었는지 확인할 필요가 있다.
// [예제 12-23]
function add(x, y){
if (typeof x !== 'number' || typeof y !== 'number') {
throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
}
return x + y;
}
console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 합니다.
console.log(add('a', 'b')); // TypeError: 인수는 모두 숫자 값이어야 합니다.
}
이처럼 함수 내부에서 적절한 인수가 전달되었는지 확인하더라도 사전에 방지할 수 없고 런타임때 에러가 발생하게 된다. 따라서 타입스크립트와 같은 정적 타입을 선언할 수 있는 방법을 생각하기도 해야한다.
5.4 반환문
함수는 return 키워드와 표현식(반환값)으로 이뤄진 반환문을 사용해 실형 결과를 함수 외부로 반환(return) 할 수 있다.
// [예제 12-22]
function add(x, y){
return x + y;
}
// 함수 호출은 반환값으로 평가된다.
var result = add(5, 6);
console.log(result); // 11
만약 반환값이 없거나 생략이 되어있을 경우 undefined를 반환한다.
6 참조에 의한 전달과 외부 상태의 변경
// [예제 12-33]
// 매개변수 primitive는 원시 값을 전달받고, 매개변수 obj는 객체를 전달받는다.
function changeVal(primitive, obj){
primitive += 100;
obj.name = 'Kim';
}
// 외부 상태
var num = 100;
var person = { name : 'Lee' };
console.log(num); // 100
console.log(person); // {name : "Lee"}
// 원시 값은 갑 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달된다.
changeVal(num, person);
// 원시 값은 원본이 훼손되지 않는다.
console.log(num); // 100
// 객체는 원본이 훼손된다.
console.log(person); // {name : "Kim"}
7 다양한 함수의 형태
7.1 즉시 실행 함수
함수 정의와 동시, 즉시 실행되는 함수를 즉시 실행 함수 라고 한다. 보통 익명함수 (Anonymous Function )을 사용한다.
// [예제 12-34]
// 익명 즉시 실행 함수
(function () {
var a = 3;
var b = 5;
return a * b;
}());
// 기명 즉시 실행 함수
(function foo(){
var a = 3;
var b = 5;
return a * b;
}());
foo(); // RefernceError: foo is not defined
기명 함수는 함수 리터럴로 평가되며, 함수 이름은 함수 몸체에서만 참조할 수 있으므로 즉시 실행 함수를 다시 호출할 수 없다.
// [예제 12-42]
// 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있다.
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));
console.log(res); // 15
// [예제 12-48]
function outer(){
var x = 1;
// 중첩 함수
function inner(){
var y = 2;
// 외부 함수의 변수를 참조할 수 있다.
console.log(x + y); // 3
}
inner();
}
outer();
중첩 함수는 외부 함수 내부에서만 호출할 수 있다. 일반적으로 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수의 역할을 한다.
7.4 콜백 함수
// 예제 12-51]
// 외부에서 전달받은 f를 n만큼 반복 호출한다
function repeat(n, f){
for (var i = 0; i < n; i++){
f(i)
}
}
var logAll = function (i) {
console.log(i);
};
// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logAll); // 0 1 2 3 4
var logOdds = function (i){
if (i % 2) console.log(i);
};
// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logOdds); // 1 3
이처럼 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function) 라고 하며, 매개변수를 통해 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고한다.
// [예제 12-55]
// 콜백 함수를 사용하는 고차 함수 map
var res = [1, 2, 3].map(function (item) {
return item * 2;
});
console.log(res); // [2, 4, 6]
// 콜백 함수를 사용하는 고차 함수 filter
res = [1, 2, 3].filter(function (item){
return item % 2;
});
console.log(res); // [1, 3]
// 콜백 함수를 사용하는 고차 함수 reduce
res = [1, 2, 3].reduce(function (acc, cur){
return acc + cur;
}, 0);
console.log(res); // 6
7.5 순수 함수와 비순수 함수
함수형 프로그래멩에서는 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수효과가 없는 함수를 순수 함수라 하고 변경하는, 즉 부수효과가 있는 함수를 비순수 함수라고 한다.
순수 함수는 전달된 인수에만 의존해 값을 생성하고 반환한다.
외부상태 ex): 전역 변수, 서버 데이터, 파일 Console. DOM
// [예제 12-56]
var count = 0; // 현재 카운트를 나타내는 상태
// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n){
return ++n;
}
// 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count); // 1
count = increase(count);
console.log(count); // 2
비순수 함수는 외부 상태에 따라 반환값이 달라지는 함수이다.
// [예제 12-57]
var count = 0;
// 비순수 함수
function increase(){
return ++count; // 외부 상태에 의존하며 외부 상태로 변경한다.
}
// 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase();
console.log(count); // 1
increase();
console.log(count); // 2
위 상태와 같이 인수를 전달받지 않고 함수 내부에사 외부 상태를 직접 참조하면 외부 상태에 의존하게 되어 반환값이 변할 수 있고, 외부 상태도 변경할 수 있으므로 비순수 함수가 된다.
함수형 프로그래밍은 결국 순수 함수를 통해 부수 효과를 최대한 줄이고 오류를 피해 프로그램의 안정성을 높이려는 노력의 일환이라 할 수 있다.
