함수 (Function)

변수는 데이터에 이름을 짓는 것과 같다고 했다.
함수는 행동이나 절차에 이름을 짓는 것과 같다.

함수의 선언

함수는 다음과 같이 선언할 수 있다.

function func1(pram) {
  // 해야할 일
}

function이라는 키워드로 func1라는 이름의 함수를 선언했다. () 속에 pram은 함수를 호출할 때 전달할 값을 넣어준다. 그리고 {} 내부에서 함수가 수행할 일들을 정의한다.

function print(x) {
  console.log(x)
}

print('print 함수 사용');

위 print라는 함수는 호출될 때, 'print 함수 사용'이라는 문자열을 받았다. 이를 함수가 선언된 절차에 따라 x라는 변수에 문자열을 전달하고, 내부의 console.log를 통해 x에 담긴 문자열이 출력된다.

코드 실행 흐름
1) print 함수 정의, x라는 변수에 값을 받아 console.log로 출력
2) print 함수 호출, 'print 함수 사용'이라는 문자열을 전달, 정의에 따라 문자열 출력

왜 사용할까?

많은 이유들이 있겠지만,
내가 생각한 결정적인 이유는 2가지.
(다른 의견 충분히 수렴합니다.)

1. 반복되는 기능들을 한번에 정의해 다시 가져다 쓸 수 있다.
2. 함수 없이 나열된 코드들은 특정 기능을 찾기 어려워 유지보수에 어렵다.

반복되는 기능 처리

만약 특정 숫자를 받아 덧셈과 곱셈을 반복하는 코드를 구현한다고 생각해보자.

console.log(1 + 2);
console.log(1 * 2);

console.log(2 + 3);
console.log(2 * 3);

상상법을 도입해 수억줄이라 생각한다면..?
🧐

함수를 사용해

function addAndMul(a, b) {
	console.log(a + b);
  	console.log(a * b);
}

addAndMul(1, 2);
addAndMul(2, 3);

아마 다음에 더 사용해야할 때도 쉽게 가져다 쓸 수 있을 것이다.

코드 관리에 용이

모든 코드들이 함수가 없이 쭉 열거되어 있는 것보다, 기능에 따라 이름을 지어 정의되어 있다면 코드를 관리할 때 더 용이할 것이라고 생각한다.

// ... 수억줄
let a = 1;
let b = 2;
let c = 3;

console.log(a + b - c);
// ... 수억줄

위와 같은 코드가 수억줄 사이에 껴있다.
이 때, a + b + c로 계산했어야 하지만 a + b - c와 같이 오타가 생겨버렸다.

저 코드를 찾기 위해 어떻게 해야할까?
🧐

function addThree(a, b, c) {
  console.log(a + b - c);
}

addThree(1, 2, 3);

위와 같이 함수로 이름지어져 있었다면 더 쉽게 찾을 수 있다고 생각한다.

함수 표현식

함수를 정의할 때, 위와 같은 방식이 아닌 다른 방식으로도 정의할 수 있다. (여기서 다루는 것보다 더 다양)

익명함수의 형태로 표현할 수 있다.

var add = function(a, b) { console.log(a + b) }

add(1, 2) // 3

익명으로 함수를 선언하고, add라는 변수에 함수를 전달했다. 함수의 기능대로 동작하게 된다.

이는 다른 함수에 인자로 전달하기 편리하다.

function print(f) {
	console.log(f());
}

함수의 범위

함수는 정의된 곳에서만 사용할 수 있다.

function mul(num) {
  return mul * 2;
}

function print(num) {
  console.log(num);
  mul(num) // num * 2 실행
  function add(x) {
    return x + 1;
  }
  add(num); // num + 1 실행
}

print(3);

add(2); // 실행 안됨 Error

add 함수는 print 함수 내부에 정의된 함수로 그 외부인 전역스코프에서는 사용할 수 없다. mul 함수는 전역 스코프에 선언되어 print 내부에서도 사용할 수 있다. 이는 나중에 실행 컨텍스트에 대한 개념을 배우고 스코프 체인에 대해 이해하면 알 수 있다.

return

함수의 기능을 수행하고, 값을 받아와야 할 때 어떻게 해야 할까?

함수 내부에 return을 통해 반환값을 지정할 수 있다.

function add(a, b) {
  return a + b;
}

let x = add(1, 3); // x = 4

위 함수는 a와 b를 받아 a + b 값을 반환한다. 이를 x라는 변수에 초기화하면 그 값이 전달된다.

---

참고

• 함수 - JavaScript - MDN Web Docs