함수 (Function)

함수란?

어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록

---

입력값과 출력값

함수는 항상 출력값(return)을 반환하는데,
만약 함수 내부에서 return을 하지 않으면, 출력값으로 undefined를 반환한다.

---

함수를 선언하는 법

1. 함수 선언식

function getArea(width, height) {
	let area = width * height;
  	return area;
}

2. 함수 표현식

변수를 선언하고, 변수에 익명 함수를 할당한다.

const getArea = function(width, height) {
	let area = width * height;
  	return area;
}

3. 화살표 함수

함수 표현식을 화살표 함수로 간단하게 표현할 수 있다.

const getArea = (width, height) => {
	let area = width * height;
  	return area;
}

화살표 함수의 특징

1. 함수의 body에 return문만 있는 경우, return과 중괄호{ }를 생략할 수 있다.

const getArea = (width, height) => width * height;

하지만 이 때 return을 생략하고 중괄호{ }는 생략하지 않으면, undefined를 반환한다.

const getArea = (width, height) => {width * height}; // XXX!!!
getArea(2, 2); // undefined

2. 필요에 따라 return문에서 소괄호( )를 사용할 수 있다.

const getArea = (width, height) => (width, height);

3. 매개변수가 하나일 경우 소괄호를 생략할 수 있다.

const square = width => width * width;

4. 함수 내의 표현식이 2줄 이상인 경우, return과 중괄호{ }를 명시적으로 쓰는 것이 좋다.

---

함수를 호출하는 법

매개변수와 전달인자의 차이

• 매개변수(parameter) : 함수를 선언할 때 소괄호( ) 안에 들어가는 변수

function getArea(width, height)

• 전달인자(argument) : 함수를 호출할 때 전달되어 매개변수에 할당되는 값
  • 함수를 호출하면서 넘긴 전달인자는 호출된 함수의 지역변수로 선언된다.

getArea(3, 4);

❔ 만약 설정된 parameter보다 argument가 더 많이 전달되면 어떻게 될까?

function getArea(side) {
    return side * side;
}
getArea(4);    // 16
getArea(4, 10); // 16

➡️ 첫 번째 argument만 전달되고, 더 많이 전달된 argument는 무시된다.

❔ 만약 전달되는 argument보다 parameter가 더 많이 설정되어 있다면 어떻게 될까?

function getArea(width, height) {
    return width * height;
}
getArea(4, 4); // 16
getArea(4);    // NaN (4 * undefined이므로)

➡️ NaN을 반환한다.

이때, 인자가 전달되지 않은 매개변수의 값은 undefined가 할당된다.

function getArea(width, height) {
	console.log(width, height);
}
getArea(4, 4); // 4 4
getArea(4);    // 4 undefined

---

기본값 매개변수(default parameters)

: 매개변수에 값이 전달되지 않거나 undefined가 전달될 경우의 매개변수에 기본값을 설정할 수 있다.

function getArea(width = 4, height = 4) {
    return width * height;
}

getArea(); // 16 (4 * 4)
getArea(10); // 40 (10 * 4)
getArea(undefined, 20); // 80 (4 * 20)

• 매개변수인 배열에 기본값으로 빈 배열[]을 설정해줄 수도 있다.

function pushNum(num, arr = []) { // num과 arr을 매개변수로 받아서
	arr.push(num); //  arr에 끝에 num을 추가하고,
	return arr;    // arr을 반환하는 함수
}

pushNum(1, 2, 3); // [1, 2, 3]
pushNum(4, [1, 2, 3]); // [1, 2, 3, 4]