javascript 함수

1.함수란?
자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다.
(수학의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것이다.)
(ex. f(x,y) = x + y라는 함수를 정의하고 이 함수에 두 개의 입력 2,5를 전달하면 함수는 정의된 일련의 과정, 즉 x + y를 실행하여 7을 출력한다.)

function add(x,y){
	return x + y;
}
// f(2,5) = 7
add(2,5); // 7

프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다.
이때 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라 한다. 또한 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다.

함수는 함수 정의를 통해 생성한다.

// 함수 정의
function add(x,y) {
	return x + y;
}

함수 정의만으로 함수가 실행되는 것은 아니다.
수학의 함수처럼 미리 정의된 일련의 과정을 실행하기 위해 필요한 입력, 즉 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다.
이를 함수 호출이라 한다.

2. 함수를 사용하는 이유
함수는 필요할 때 여러 번 호출할 수 있다.
즉, 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하다.
동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 중복해서 여러 번 작성하는 것이 아니라 미리 정의된 함수를 재사용하는 것이 효율적이다. 함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 매우 유용하다.

함수는 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.
함수는 객체 타입의 값이다.

3. 함수 리터럴
자바스크립트의 함수는 객체 타입의 값이다. 함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성된다.

// 변수에 함수 리터럴을 할당
var f = function add(x,y){
	return x + y;
};

함수는 객체지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

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;

함수 선언문은 함수 리터럴과 형태가 동일하다. 단 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.

// 함수 선언문은 함수 이름을 생략할 수 없다.
function (x,y){
	return x+y;
}

함수 선언문은 표현식이 아닌 문이다. 함수 선언문이 만약 표현식이 문이라면 완료 값 undefined 대신 표현식이 평가되어 생성된 함수가 출력되어야 한다.

자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.

함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다. 즉, 함수 선언문으로 생성한 함수를 호출한 것은 함수 이름 add가 아니라 자바스크립트 엔진이 암묵적으로 생성한 식별자 add인것이다. 함수 이름과 변수 이름이 일치하므로 함수 이름으로 호출되는 듯 하지만 사실은 식별자로 호출된 것이다.

	(식별자)		(함수이름)
var add = function add(x,y){
	return x+y;
};

console.log(add(2,5)); // 7 , 식별자

- 함수 표현식
자바스크립트의 함수는 객체 타입의 값이다. 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다. 자바스크립트의 함수는 일급 객체다. 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다.

// 함수 표현식
var add = function (x,y) {
	return x+y;
};

console.log(add(2,5)); // 7

함수 리터럴의 함수 이름은 생략할 수 있다. 이러한 함수를 익명 함수라 한다. 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다.

- 함수 생성 시점과 함수 호이스팅

// 함수 참조
console.log(add); // f add(x,y)
console.log(sub); // undefined

// 함수 호출
console.log(add(2,5)); // 7
console.log(sub(2,5)); // typeError

// 함수 선언문
function add(x,y){
	return x+y;
}

// 함수 표현식
var sub = function(x,y){
	return x-y;
};

그러나 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다. 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.

이처럼 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.

변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

- Function 생성자 함수

var add = new Function('x','y','return x + y');

console.log(add(2,5)); // 7

- 화살표 함수

const add = (x,y) => x+y;
console.log(add(2,5)); // 7

5. 함수 호출
함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다.