[JavaScript] 함수 / 2021.10.15

1. 익명 함수

함수는 코드의 집합을 나타내는 자료형이다.

function () {}

 

- 함수의 장점 :

(1) 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 코드의 반복을 줄일 수 있다.

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

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

 

예시를 통해서 알아보자.

 

익명 함수 예시

 

정의한 함수안에는 총 4줄의 코드가 들어있다. 만약 이 코드를 함수가 아니라 일일이 다 적는다면 4줄 8줄 12줄 이런 식으로 늘어날 것이다. 그러나 함수를 선언하면 여러 코드를 한 번에 묶어서 실행할 수 있으며 필요할 때마다 호출하여 반복적으로도 사용할 수 있다.

아래는 함수를 두 번 호출한 결과이다.

 

익명 함수 결과

2. 선언적 함수

이름이 없는 함수를 익명 함수라고 하고 이름이 있는 함수를 선언적 함수라고 한다.

function 함수이름(){ }

 

위의 익명 함수 예시를 선언적 함수로 바꾸어보자.

 

선언적 함수 예시

결과는 위와 같이 함수가 2번 호출된다. 그러나 함수 자체를 출력해보면 차이를 알 수 있다.

익명 함수는 함수의 이름이 없는 반면에 선언적 함수는 이름이 있다.

함수 출력 : console.log(함수)

익명 함수

선언적 함수

3. 매개변수와 리턴 값을 갖는 함수

모든 함수가 매개변수와 리턴값을 사용하는 것이 아니라 필요한 경우에만 매개변수와 리턴값을 사용한다.

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

여기서 매개변수는 함수에 들어가는 값이고 리턴 값은 함수에서 결과로 나오는 값이다.

 

(1) 매개변수로 x를 넣으면 x의 제곱을 리턴하는 함수

 

매개변수와 리턴값 갖는 함수

 

이 함수 f는 매개변수로 x를 받고 x*x의 값을 리턴해준다. 

따라서 f(3)을 호출하면 x에 3이 들어가 3*3을 리턴하고

f(4)를 호출하면 x에 4가 들어가 4*4를 리턴한다.

콘솔 창을 확인해보면 3의 제곱과 4의 제곱이 출력된 것을 확인할 수 있다.

 

결과

 

(2) a부터 b까지 더하는  함수

 

a부터 b까지 더하는 함수

 

결과

4. 나머지 매개변수

함수를 호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 한다. 자바스크립트에서 이러한 함수를 구현할 때는 나머지 매개변수라는 특이한 형태의 문법을 사용한다.

function 함수 이름(...나머지 매개변수) { }

함수의 매개변수 앞에 마침표 3개 (...)를 입력하면 매개변수들이 배열로 들어간다.

 

예시를 통해서 알아보자.

 

나머지 매개변수 예시

 

함수 호출을 2번 했는데 하나는 매개변수 4개이고 나머지는 매개변수 5개이다.

 

결과창을 확인해 보면,

 

나머지 매개변수 결과

 

매개변수들이 함수에 배열 형태로 들어간 것을 확인할 수 있다.

 

5. 나머지 매개변수와 일반 매개변수 같이 사용하기

나머지 매개변수는 일반 매개변수와 같이 사용할 수 있다.

function 함수 이름 (매개변수, 매개변수, ...나머지 매개변수) { }

 

예시를 통해서 알아보자.

 

일반 & 나머지 매개변수 예시

 

일반&나머지 매개변수 결과

결과를 확인해 보면 함수를 호출할 때 매개변수 one, two가 먼저 들어가고 나머지 매개변수들은 three에 배열 형태로 들어간다.

 

* 배열 자체를 매개변수로 넘겨주고 싶다면 function 함수 이름 (...배열) 형태로 사용한다.

6. 기본 매개변수

함수를 호출할 때 매개변수를 넘겨줄 수도 있지만 함수를 정의할 때 매개변수에 값을 대입해 놓을 수도 있다.

function 함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값) { }

 

급여를 계산하는 함수를 만들어보자.

 

 

기본 매개변수 예시

 

기본 매개변수의 값은 바꿀 수 있다.

 

기본 매개변수 결과