📖 함수

⭐️ 함수란?

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

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

인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다. 이를 함수 호출이라 한다. 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되고, 실행 결과, 즉 반환값을 반환한다.

// 함수 호출
var result = add(2,5);
// 함수 add에 인수 2, 5를 전달하면서 호출하면 반환값 7을 반환한다.
console.log(result); // 7

⭐️ 함수를 사용하는 이유?

함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 매우 유용하다.
유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높인다
코드의 가독성을 향상

⭐️ 함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수 리터럴은 function 키워드 함수 이름, 매개 변수 목록, 함수 몸체로 구성된다

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

함수는 객체다 함수는 객체지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 그리고 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 갖는다.

⭐️⭐️⭐️ 함수 정의

함수 정의 방식	예시
함수 선언문	function add(x,y) { return x+y; };
함수 표현식	var add= function add(x,y) { return x+y; };
Function 생성자 함수	var add = new Function('x','y', 'return x+y');
화살표 함수(ES6)	var add = (x,y) => x+y;

변수 선언과 함수 정의
변수는 선언한다고 했지만 함수는 정의한다고 표현했다. 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다. 따라서 ECMAScript 사양에서도 변수에는 선언, 함수에는 정의라고 표현한다.

⭐️ 함수 선언문

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

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

⭐️ 함수 표현식

자바스크립트의 함수는 값처럼 변수에 할당 할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다. 자바스크립트의 함수는 일급 객체다.

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

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

⭐️ 함수 생성 시점과 함수 호이스팅

// 함수 참조
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;
};

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

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

⭐️⭐️ 화살표 함수

ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.

// 화살표 함수
const add= (x,y) => x+y; 
console.log(add(2,5)); // 7

⭐️⭐️ 함수 호출

⭐️ 매개변수와 인수

함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수를 통해 인수를 전달한다. 인수는 값으로 평가될 수 있는 표현식이어야 한다. 인수는 함수를 호출할 떄 지정하며, 개수와 타입에 제한이 없다.

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

// 함수 호출
// 인수 1과 2가 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다.
var result = add(1,2);

⭐️ 반환문

함수는 return 키워드의 표현식으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있다.

function multiply(x,y){
  return x * y; // 반환문
}

// 함수 호출은 반환값으로 평가된다.
var result = multiply(3,5);
console.log(result); // 15

반환문은 두가지 역할을 한다

• 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다. 따라서 반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시된다.
• 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다. return 키워드 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환된다.

다양한 함수의 형태

⭐️ 즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수라고 한다. 즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다.

// 익명 즉시 실행 함수
(function () {
  var a = 3;
  var b = 5;
  return a + b;
}());

즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다.

⭐️ 재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 호출이라 한다. 재귀 함수는 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수를 말한다.
재귀 함수는 반복되는 처리를 위해 사용한다.

function countdown(n) {
  if (n < 0) return;
  console.log(n)
  countdown(n - 1); // 재귀 호출
}

conutdown(10);

재귀 함수는 반복되는 처리를 반복문 없이 구현할 수 있다는 장점이 있지만 무한 반복에 빠질 위험이 있고, 이로 인해 스텍 오버플로 에러를 발생시킬 수 있으므로 주의해서 사용해야 한다.

⭐️ 중첩 함수

함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다. 그리고 중첩 함수를 포함하는 함수는 외부 함수라 부른다. 중첩 함수는 외부 함수 내부에서만 호출할 수 있다. 일반적으로 중첩함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수의 역할을 한다.

function outer() {
  var x = 1;
  
  //중첩 함수
  function inner() {
    var y = 2;
    // 외부 함수의 변수를 참조할 수 있다.
    console.log(x+y); // 3
  }
  inner();
}

outer();

⭐️ 콜백 함수

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.

• 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다. 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.

• 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

	//외부에서 전달받은 f를 n만큼 반복 호출한다.
	function repeat(n, f){
    	for(var i = 0; i < n; i++){
        	f(i); // i를 전달하면서 f를 호출
        }
    }

	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

⭐️ 순수 함수와 비순수 함수

• 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수를 순수 함수라 한다.
• 외부 상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수를 비순수 함수라 한다.