[JavaScript] 함수(function)란 무엇일까?

안녕하세요! 오늘은 자바스크립트의 함수에 대해 공부하고자 합니다.

 

본격적으로 함수를 알아보기 전에 몇 가지 용어를 정리해보겠습니다. 함수를 사용하는 것을 함수 호출, 즉 '함수를 호출한다'라고 표현합니다. 함수를 호출할 때는 괄호 내부에 여러 가지 자료를 넣는데, 이러한 자료를 매개변수라고 부릅니다. 그리고 함수를 호출해서 최종적으로 나오는 결과를 리턴값이라고 부릅니다. 

 

---

익명함수

함수는 코드의 집합을 나타내는 자료형이며, 기본형태는 다음과 같습니다.

fuction() {}

함수를 코드의 집합이라고 말하는 이유는 중괄호 {...} 내부에 코드를 넣기 때문입니다!

함수를 사용하면 좋은 점은 다음과 같습니다.

1. 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복작업을 피할 수 있습니다.

2. 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아집니다.

3. 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽습니다.

 

함수 예제를 한 번 살펴보겠습니다.

 

예제 코드

<script>
  // 변수 생성
  const 함수 = function () {
    console.log("함수 내부의 코드입니다...1");
    console.log("함수 내부의 코드입니다...2");
    console.log;
  };

  // 함수 호출
  함수();
  함수();

  // 출력
  console.log(typeof 함수);
  console.log(함수);
</script>

결과

함수는 코드의 집합입니다. 그래서 함수를 실행하면서 여러 코드를 한 번에 묶어서 실행할 수 있으며, 필요할 때마다 호출하여 반복적으로 사용할 수 있습니다!! 

함수의 자료형은 function이며 현재 코드에서 함수를 출력하면 f() { }라고 출력됩니다. 이때 f는 함수를 나타냅니다. 함수를 출력했을 때 이름이 붙어있지 않은 것을 볼 수 있습니다. 이처럼 이름이 붙어있지 않은 함수를 익명함수라고 표현합니다!

 

선언적 함수

앞에서 함수 생성 방법을 간단히 살펴봤습니다. 하지만 일반적으로 다음과 같이 이름이 있는 함수를 많이 사용합니다. 이렇게 생성한 함수를 선언적 함수라고 합니다.

function 함수() {

}

간단하게 선언적 함수를 만들어보겠습니다.

 

예제코드

<script>
  // 변수 생성
  function 함수() {
    console.log("함수 내부의 코드입니다...1");
    console.log("함수 내부의 코드입니다...2");
    console.log;
  }

  // 함수 호출
  함수();
  함수();

  // 출력
  console.log(typeof 함수);
  console.log(함수);
</script>

결과

실행결과는 앞에서 살펴보았던 익명 함수와 큰 차이가 없는 것을 알 수 있습니다. 한 가지 차이는 함수를 출력했을 때 함수에 이름이 붙어있다는 것뿐입니다.

 

매개변수와 리턴값

함수를 호출할 때 괄호 안에 적는 것을 매개변수라고 합니다. prompt() 함수를 사용할 때 매개변수로 message를 넣어야 합니다. 그러면 prompt()함수의 최종 결과는 문자열로 나옵니다. 함수의 최종결과를 리턴값이라고 부릅니다.

그런데 앞에서 우리가 만든 '함수'라는 이름의 함수는 입력할 때 괄호 내부에 아무 것도 나오지 않습니다. 모든 함수에 매개변수와 리턴값을 사용하는 것이 아니라 필요한 경우에만 매개변수와 리턴값을 사용합니다.

매개변수와 리턴값을 갖는 함수는 다음과 같은 방법으로 만듭니다.

function 함수(매개변수, 매개변수, 매개변수)
	문장
    문장
    return 리턴값
)

매개변수와 리턴값은 맨 처음 앞에 있는 그림과 같은 형태로 생각할 수 있습니다. 함수에 넣는 input이 매개변수이고, 결과로 나오는 output이 리턴값입니다. 리턴값은 함수 내부에 return 키워드를 입력하고 뒤에 값을 넣어서 생성합니다.

 

그러면 매개변수로 x를 넣으면 x의 제곱을 리턴하는 함수를 만들어보겠습니다.

 

코드

<script>
  // 함수 선언
  function f(x) {
    return x * x;
  }
  // 함수 호출
  console.log(f(3));
</script>

결과

 

이렇게 오늘 함수에 대해 알아보았습니다!!

이해가 잘 안되는 부분이 있거나 잘못된 설명이 있으면 댓글로 알려주세용!!