[JS] 자바스크립트 기초 - 함수(Function) 알아가기

💡 함수(Function)란?

어떤 작업을 수행하기 위해 필요한 실행 문장들을 집합하여 정의한 코드 블록입니다.

함수의 장점은 프로그램에서 특정 작업을 여러 번 반복해야 할 때, 해당 작업을 수행하는 함수 하나만 만들게 되면

기능을 또 구현하지 않아도 함수를 호출하기만 하면 똑같은 기능을 사용할 수 있습니다.

또한, 함수는 여러 번 호출할 수 있기 때문에 코드를 재사용할 수 있습니다.

 

✅ 함수(Function)의 정의

자바스크립트에서 함수는 function 키워드로 시작하여 함수이름 () {  } 구조로 선언합니다.

// 함수 선언
function 함수이름(매개변수1, 매개변수2) {
  // 실행문장
}

함수이름(인수1, 인수2); // 함수 호출

1) 함수이름 : 함수 이름만 보고도 어떤 기능을 하는지 힌트를 얻을 수 있어야 합니다.

    - 문자, 숫자, 밑줄( _ ), 달러기호( $ )를 가질 수 있습니다. (이 밖에도 명명 규칙이 더 있음)

 

2) 매개변수(Parameter) : 함수를 호출할 때 전달된 값(인수1, 인수2...)을 함수 내부에서 저장, 사용하는 변수입니다.

 

3) 인수(Argument) : 함수를 호출할 때 매개변수로 건네주는 변수 또는 상수입니다.

-> 즉, 매개변수1 = 인수1, 매개변수2 = 인수2와 동일한 말입니다.

---

- 두 수를 받아 더해주는 함수 예제

✔ 두 수를 받아 더해주는 함수 예제를 통해서 자세히 알아봅시다.

function addNumber(x, y) {
  console.log("둘을 더한 값은 " + (x + y));
}

addNumber(2, 3);  // 실행결과 : 둘을 더한 값은 5

1) 함수의 이름은 addNumber입니다.

2) addNumber 함수는 2개의 매개변수를 가지고 있습니다. 이 매개변수의 이름은 각각 x, y라고 정했습니다.

3) addNumber(2, 3); 으로 함수를 호출했습니다.

   -> x = 2, y = 3이라는 값이 전달되었기 때문에 '둘을 더한 값은 5' 라는 결괏값이 나옵니다.

---

💡 만약 매개변수와 인수 둘 다 없다면?

-> 결론은 '아무 이상 없다' 입니다.

function addNumber() {
  console.log("둘을 더한 값은 " + (2 + 3));
}

addNumber();  // 실행결과 : 둘을 더한 값은 5

이런 식으로 매개변수와 인수가 없어도 (2 + 3)이라는 문장을 넣어주기만 하면 실행 결과는 동일한 값이 출력됩니다.

 

💡 만약 매개변수는 있지만 인수가 없다면?

🤔 그런데 문제가 있습니다.

만약 매개변수는 있지만 인수가 없다면 무슨 문제가 생길까요?

function addNumber(x, y) {
  console.log("둘을 더한 값은 " + (x + y));
}

addNumber();

다행히 콘솔 창에서 오류가 발생하지 않습니다.

하지만 결괏값으로 NaN(Not a Number의 약자)이라는 값이 출력되는데요.

이는 수학적으로 정상적인 연산이 불가하지만 억지로 연산이 이루어질 경우 이러한 값이 산출됩니다.

x와 y에 값을 넣어주지 않은 상태에서 이 둘을 더하려고 하니 이런 결과가 나온 것은 어찌 보면 당연할 수 있습니다.

 

(물론 x와 y를 사용하지 않으면 아무 문제가 없습니다.)

function addNumber(x, y) {
  console.log("둘을 더한 값은 " + (2 + 3));
}

addNumber();   // 실행결과 : 둘을 더한 값은 5

 

---

✅ NaN의 해결방법 - 매개변수 기본값 지정

인수로 값을 넘겨줘야 매개변수에 해당 값이 저장이 되어 사용이 가능한데

인수로 값을 못 넘겨준 상태에서 매개변수를 사용할 때 NaN이 발생했었죠?

 

인수로 못 넘겨줘도 매개변수 기본값을 지정해주면 그 기본값을 사용하면 되니까 NaN이 발생할 일이 없을텐데 말이죠.

다행히 자바스크립트에서는 매개변수에 기본값을 지정할 수 있습니다.

 

function addNumber(x = 2, y = 3) {
  console.log("둘을 더한 값은 " + (x + y));
}

addNumber();  // 실행결과 : 둘을 더한 값은 5

이런식으로 매개변수 () 안에 x = 2, y = 3이라고 명시를 하게 된다면

addNumber(); 호출 시 인수가 없더라도 기본값인 2와 3이 들어있어 같은 결괏값을 출력할 수 있습니다.

 

(매개변수에 인수값을 준다고 하면 당연히 기본값이 아닌 인수값이 들어갑니다.)

function addNumber(x = 2, y = 3) {
  console.log("둘을 더한 값은 " + (x + y));
}

addNumber(3, 5);  // 실행결과 : 둘을 더한 값은 8

 

---

✅ 함수에서 return 사용하기

함수에서 원하는 결괏값을 계산한 후 해당 결괏값을 받고 싶을 때 또는

함수자체를 강제로 종료시키고 싶을 때 사용하는 키워드가 return입니다!

 

1) 원하는 결괏값을 받고 싶을 때

function addNumber(x, y) {
  console.log("둘을 더한 값은 " + (2 + 3));
  return x + y;
}

var sum = addNumber(3, 5);
console.log("함수의 return 값은 " + sum);

지금까지와 다른 점이라면 return을 썼다는 것과 함수를 호출 시킬 때 변수에 저장하고 있죠?

공통점이라면 호출해서 x = 3, y = 5를 집어넣었고 콘솔에 2 + 3을 했으니까 '둘을 더한 값은 5' 가 출력되었다는 것까지는 알겠습니다.

 

그런데 return x + y는 무엇일까요?

x + y = 3 + 5 = 8이라는 것은 알 것 같습니다.

 

결론) return을 쓰게 되면 x + y라는 값을 함수 밖에서도 사용이 가능해집니다.

 

이 함수는 두 수를 받아 더하면 일이 끝납니다.

그런데 제가 원하는 것은 함수밖에서 더한 결괏값을 쓰고 싶다는 것입니다.

매개변수 x와 y는 함수내에서만 쓸 수 있는 지역변수입니다. 함수 밖에서는 사용 할 수 없죠.

이는 x와 y를 함수 밖에서 가지고 와서 덧셈을 시킬 수 없다는 의미입니다.

그렇다면 어떻게 해야할까요?

 

그럴 때 쓰는 것이 바로 return 입니다.

return을 쓰게 되면 함수 밖 -> 함수를 호출시킨 곳에 더한 값을 받을 수 있습니다.

 

함수를 호출한 곳에서 더한 값을 받는 것이고 이를 쓰려면 당연히 변수에 저장을 시켜야 하기 때문에

var sum = addNumber(3, 5); 를 쓴 것이랍니다.

 

이제 그럼 함수가 아닌 다른 곳에서 sum이라는 변수만 있으면 함수의 결괏값을 어디서든지 불러올 수 있게 됩니다.

 

return은 이 역할이 끝인줄 알았으나 한 가지 일이 더 있습니다.

 

2) 함수 자체를 강제종료

function addNumber(x, y) {
  console.log("둘을 더한 값은 " + (2 + 3));
  return x + y;
  console.log("1 + 2 = " + (1 + 2));
}

var sum = addNumber(3, 5);
console.log("함수의 return 값은 " + sum);

방금 썼던 코드에서 return된 후 다시 콘솔을 프린트했습니다.

실행해보시면 알겠지만 콘솔에 어디에도 1 + 2 = 3이라는 프린트는 없습니다.

 

이가 의미하는 바는 return문 뒤에 온 모든 문장들은 실행이 안 되었다는 것을 알 수 있죠.

즉, return이라는 문장이 실행되자마자 함수는 종료가 된다는 것을 의미합니다.

뒤에 무슨 문장들이 오던지 상관없이 강제종료시킵니다.

 

---

지금까지 함수의 기본적인 원리와 사용법에 대해 배웠습니다. 감사합니다 :)