[JavaScript] 함수 (익명 함수vs선언적 함수, 나머지 매개변수, 전개 연산자, 기본 매개변수)

1. 익명함수 VS. 선언적 함수

익명함수는 말그대로 이름이 없는 함수이다. 따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 사용하여야 한다. 즉, 함수를 정의시 "function () {}"와 같이 이름이 부여되지 않기 때문에, let 함수 = function () {};"와 같이 변수에 넣어서 호출해야한다. 선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말한다. "function 함수() {}"와 같이 선언하므로 따로 변수에 넣어주지 않고 선언할 때 붙여준 이름으로 호출하면 된다. 둘다 호출하는 방식은 똑같이 "함수()"가 된다.

 

다시 말하자면 함수 자체의 이름이 있냐 없냐(function 옆에 있는 이름)에 따라 달라지므로 let으로 변수에 넣는 것은 함수를 구분하는데 의미가 없다.

 

그런데 두가지 함수의 차이는 호이스팅에서의 차이가 있다. 선언적 함수는 웹브라우저가 가장 먼저 읽고, 익명함수는 그 뒤에 코드를 차례로 읽을 때 읽기 때문이다. 이 때문에 선언적 함수와 익명함수 두가지가 모두 존재하는 경우 무조건 선언적 함수가 먼저 선언되고 익명함수가 나중에 선언되기 때문에 이름이 같은 함수가 덮어씌어지는 불상사를 막기위해 안전상의 이유로 최근에는 많은 개발자들이 익명함수를 선호한다고 한다. 즉 익명함수든 선언적함수든 한 가지로 통일하여 사용하는 것이 오류의 위험을 줄일 수 있다.

// 익명함수
let apple = function () {};

// 선언적 함수
function apple() {};

 

2. 나머지 매개변수

함수를 호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 부른다. 이 경우 일반 매개변수가 아닌 나머지 매개변수를 사용해야한다. 함수의 매개변수 앞에 마침표 3개를 입력하면 되고, 이렇게 나머지 매개변수로 받을 시 매개변수들이 배열(Array)로 들어오게 된다.

function apple(...items) {
	console.log(items)
}
apple(1,2,3) // 실행결과: [1,2,3]

나머지 매개변수가 일반 매개변수와 조합되는 경우, 순서대로 일반 매개변수에 할당이 되고나서 남는 나머지에 해당하는 인자들이 나머지 매개변수에 할당된다. 즉 나머지 매개변수는 이름 그대로 나머지이므로, 항상 마지막에 위치해야한다.

function apple(a, b, ...items) {
	console.log(a, b, c)
}
apple(1, 2, 3, 4) // 실행결과: 1 2 [3, 4]

 

3. 전개 연산자

매개변수로 배열을 입력할 수 없고, 숫자들만 입력해야하는 경우에 배열을 입력하고싶다면 어떻게 해야할까?  배열에 있는 요소들을 하나하나 전개하여 입력해야할 것이다. 이 경우를 대비하고자 배열을 전개하여 함수의 매개변수로 전달해주는 것이 전개 연산자이다. 나머지 매개변수와 같이 ...을 붙여 표현하지만 사실 나머지 매개변수와는 아무런 관련이 없다. 나머지 매개변수는 함수에게 주어진 매개변수들을 배열로 바꾸는 것이고, 전개 연산자는 함수를 호출하여 매개변수를 줄 때 배열을 전개하여 전달해주는 것이기 때문이다.

function apple(...items) {
    console.log(items)
}
const array = [1, 2, 3, 4]

apple(array)
apple(...array)

출력 결과

위의 두가지 출력결과를 보면 확실히 깨달을 수 있다. 첫번째 호출은 배열인 상태 그대로 함수에 넣었고, 해당 함수가 나머지 매개변수를 사용하므로 array라는 배열에 한번더 배열이 씌여진 모습이다. 그런데 두번째의 경우 array배열을 전개연산자 ...을 사용하여 배열을 전개해서 넘겨줬으므로 나머지 매개변수로 받아 깔끔하게 하나의 배열로 표현된 모습이다.

 

4. 기본 매개변수

함수의 매개변수로 항상 비슷한 값을 입력하거나 입력을 하지 않을 경우를 대비하기위해 매개변수에 기본값을 지정할 수 있다. 기본 매개변수를 사용하면 해당 매개변수에 입력을 하지 않더라도 기본값으로 할당이 되어진다.

// b에 기본값을 2로 설정
function apple(a, b=2) {};

// 그런데 이와 같이 왼쪽에 두면 안되고 항상 오른쪽에 기본 매개변수를 두어야한다.
function apple(a=1, b) {
    console.log(a+b)
}
apple(2) // 출력 결과: NaN --> 이와 같이 컴퓨터가 잘못 인식하기 때문이다.