[TIL] 함수의 필요성 & 함수를 선언하는 4가지 방법 (JavaScript)

함수란?

• 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합
• 어떠한 입력(Input)을 받아 특정한 기능이나 계산을 수행한 다음 그 결과(Output)를 돌려주는 역할을 한다. (1️⃣ input 받기 → 2️⃣ 기능 수행 → 3️⃣ output 반환)
  • 물론, 프로그래밍에서 쓰는 함수는 입력이나 결과 없이도 함수 안에서 특정 기능만을 수행할 수도 있다. (1️⃣ input 받기 → 2️⃣ 기능 수행 OR 2️⃣ 기능 수행 only)

© 위코드

---

함수의 선언과 실행

• 함수의 선언(=정의): 함수의 이름부터 함수에 들어갈 매개변수(괄호 속), 함수를 실행했을 때 수행할 구체적인 내용(중괄호 속)까지 정의(Definition)하는 것
• 함수의 실행(=호출): 함수가 동작하게 하려고 미리 정의해둔 내용을 함수의 이름으로 호출(Call)하는 것
  • [주의] 함수는 정의한 것만으로는 동작하지 않는다. 반드시 호출을 거쳐야지만 함수가 동작한다.
  • 같은 변수인 것처럼 보이지만, 함수를 선언할 때 사용한 변수를 매개변수(Parameter) 또는 인자라고 부르고, 함수를 실행할 때 전달한 값을 인수(Argument) 또는 전달인자라고 한다.

// 1. 함수의 선언 (또는 정의)
function sayHello(name) {  // name이라는 매개변수가 입력되도록 만들어진 함수!
  console.log("Hello, " + name + "! 😆");
}

// 2. 함수의 실행 (또는 호출)
sayHello("Jaewon");  // 인수에 "Jaewon"을 넣어 "Hello, Jaewon! 😆"이 출력
                     // 다만, 인수에 다른 이름을 넣으면 name 부분은 바뀔 수 있다.

함수의 필요성

1. 재사용성 - 대체로 함수를 만드는 이유는 코드의 이곳저곳에서 계속 다시 사용하기 위해서다. 코드를 작성하다 보면 같은 작업을 여러 곳에서 반복해야 하는 일이 생기기 마련이다. 이때 반복적으로 적히는 코드가 간단하지 않고, 몇백 줄이 넘어가는 복잡한 코드일 수도 있다. 이럴 때, 반복되는 코드를 함수로 만들어두고 필요할 때마다 불러서 사용하면 굉장히 편리할 것이다.
2. 가독성 - 함수의 기능을 잘 정의하고 함수의 이름도 잘 지어놨다면, 해당 함수명만으로도 이 함수가 어떤 기능을 할지 어떻게 동작할지 자연스럽게 유추할 수 있을 것이고, 해당 기능이 필요할 땐 선언한 함수를 호출함으로써 불필요한 소스는 줄어들게 되며, 체계적이면서도 가독성 높은 소스를 구성할 수 있다.
3. 모듈화 - 대규모의 프로젝트를 구성하게 될 때, 필요한 기능을 정의하고 기능을 팀별로 구성하여, 서로에게 영향을 미치지 않도록 모듈화해두면, 유지보수나 버그 발생 시 해당 모듈의 함수만 수정하면 되기 때문에 보다 편리해진다.

---

함수를 선언하는 4가지 방법

1) 함수 선언식 (Function Declaration)

function hello() {
  // function body..
}

• 가장 대중적인 방법이다. 함수의 이름이 hello가 된다.
• 함수 선언식으로 작성된 함수의 경우에는 항상 최상위로 Hoisting 되어 실행문의 순서가 중요하지 않아 편리하다.

2) 함수 표현식 (Function Expression)

const hello = function() {
  // function body..
};

• 이름이 없는 함수를 변수에 담은 방식이다. 이름이 없는 대신, 자바스크립트 엔진이 변수명(hello)으로 추정하여 함수의 이름 대신 넣는다.
• 모든 변수 선언문에 대해 해당하는 흐름이기 때문에, 함수를 대입하는 경우에도 동일하게 적용된다. 그래서 함수 표현식으로 함수를 작성하는 경우에는 항상 실행문의 위치와 함수를 대입하는 구문의 위치가 중요하다.

"함수(Function)는 위와 같이 크게 두 가지 방법으로 선언하여 만들 수 있다. 각자 선호하는 방식으로 선언하여 사용해도 무관하지만, 단일 프로젝트 내에서는 일관된 스타일을 유지하는 것이 중요하므로 한 가지 방식을 선택하여 사용하는 게 좋다!" ... 일반적으로는 함수 선언식을 많이 사용하는 편이다!

3) 화살표 함수 (Arrow Function)

// 기존의 함수 표현식
const func = function(arg1, arg2, ...argN) {
  return expression;
};

// 새로운 화살표 함수 - 일종의 축약 버전
const func = (arg1, arg2, ...argN) => expression

• 화살표 함수는 위와 같이 생성할 수 있으며, 반드시 함수 표현식으로 생성해야 한다.

// 예제 1)
const func = (a, b, c) => {
  return a + b - c;
};

func(1, 2, 3);

// 예제 2) 화살표 함수는 매개 변수가 하나일 경우, 소괄호를 생략할 수 있다.
const func = a => {
  console.log(a);
};

func(1);  // 1 출력

// 예제 3) 화살표 함수 본문이 하나의 실행문일 경우, 위와 같이 중괄호를 생략하고 한 줄에 표기할 수 있다.
//        이렇게 작성할 경우, 해당 실행문의 결과가 함수의 반환값으로 지정된다.
const multiply = (a, b) => a * b;

const result = multiply(2, 4);
console.log(result);  // 8 출력

4) 즉시 실행 함수 표현식 (IIFE, Immediately Invoked Function Expression)

(function() {
  // function body..
})();

• 즉시 실행 함수 표현식은 정의되자마자 즉각적으로 실행되는 자바스크립트 함수 중 하나이다.
• 즉시 실행 함수를 만들 땐, 함수 표현식을 괄호로 둘러쌓아 (function {…})와 같은 형태로 만들고, 이를 바로 호출함으로써 해당 함수가 바로 실행되도록 한다. (요즘에는 자주 쓰지 않지만, 오래된 스크립트에서 만날 수 있기 때문에 즉시 실행 함수 표현식이 무엇인지 알아 둘 필요가 있다.)
• 전역 스코프에 선언된 전역 변수의 스코프 범위에 제약을 걸어주기 위해 사용하는 경우도 간혹 존재한다.