[JavaScript] 함수

함수 (Function)

1️⃣ 함수 선언과 표현식

2️⃣ 인수(arguments)와 전달 방식

3️⃣ 매개변수(parameters)

4️⃣ 화살표 함수 (arrow function)

5️⃣ 내부 함수

 

 

1️⃣ 함수 선언과 표현식

---

❓ 함수란?

- 어떠한 기능(function)을 코드로 표현한 집합

- 독립적으로 설계되어 있다.

- 반복적인 코드 작성 피할 수 있다. (코드 간결화)

- 쉬운 유지보수

 

함수 호출 (function call)

// 함수 선언
function sum(num1, num2){
   return num1 + num2;
}

// 함수 호출
sum(1,2)

 

 

2️⃣ 인수(arguments)와 전달 방식

---

❓ 인수란?

- 함수 호출 시에 전달하는 값 또는 데이터

// 함수 선언
function sum(num1, num2){
   return num1 + num2;
}

// 함수 호출
sum(1,2)

>> 위에서 함수 호출 시 입력한 1 과 2 가 인수라고 할 수 있다.

 

만일 매개변수가 2개(num1, num2)인 함수에서 다음과 같이 인수 3개를 입력한다면 출력 결과는 어떻게 될것인가?

sum(1,2,3)
// 3

오류가 나타나지 않고 연산된 결과값이 출력되는 것을 볼 수 있다.

이 이유는 자바스크립트의 지나친 관대함 특징으로 나온 결과로 논리적 오류가 발생하지 않도록 알맞게 써줄 필요가 있다.

반대로 매개변수보다 적은 인수를 입력할 경우는 다음과 같다.

sum(10)
//NaN

console.log(num1)
console.log(num2)

//10
//undefined

sum() 함수에 콘솔을 이용하여 각 매개변수에 입력된 값을 확인해보면 num1에 인수값이 들어간 것을 확인할 수 있다.

 

 

3️⃣ 매개변수 (parameters)

---

❓ 매개변수란?

앞서 매개변수에 대해 간략하게 설명하였다. 다시 한번 정리해보자.

- 파라미터라고 또는 변수라고도 한다.

- 함수 내부에 있는 인자

- 전달되는 인수 값이 변수에 할당된다.

// 함수 선언
function sum(num1, num2){
   return num1 + num2;
}

// 함수 호출
sum(1,2)

>> 위에서 함수에서 정의한 num1 과 num2 가 파라미터(매개변수)라고 할 수 있다.

 

 

4️⃣ 화살표 함수 (arrow function)

---

❓화살표 함수란?

- 함수의 표현식보다 간결하게 사용이 가능하다.

const funcName = (arg1, arg2, ...) => expression

기존 함수와 비교해보면 다음과 같다.

// 기존 함수
function sum(num1, num2){
   return num1 + num2;
}

// 화살표 함수
const sum = (num1, num2) => num1 + num2;

 

5️⃣ 내부 함수

---

❓ 내부 함수란?

- 내부적으로 함수 안에서 다른 함수를 정의하여 사용하는 것

- 선언된 함수는 어디서나 호출이 가능하다.

function sumAge(age1, age2){
   return sum(age1, age2);
}