2024.08.06.-08.07. JS - 함수

[ 함수(function) ]

- 어떤 기능을 수행하는 명령어들의 모음(묶음)

[ 사용자 정의 함수 ]

- 함수(function)는 단독으로 존재할 수 있지만, 메서드(method)는 클래스 내에서만 정의 가능
- 자바의 메서드와 달리 함수 정의 시 리턴타입을 명시하지 않으며  파라미터(매개변수) 지정 시 거의 동일하나 타입을 명시하지 않음
    => 전달인자(Argument, 아규먼트) : 함수 호출 시 함수에 전달하는 데이터 ex. 로그인시 아이디, 비밀번호.
    => 매개변수(Parameter, 파라미터) : 함수 호출 시 함수에 전달되는 데이터를 받아 저장할 변수
           (매개체가 되는 변수다. 아규먼트와 통합해서 불러도 상관없음.)
    => 리턴값(Return value) : 함수 호출 시 작업 완료 후 원래 위치로 돌아갈 때 가지고 갈 데이터 

         (= 함수 호출한 위치로 돌려줄(= 리턴) 데이터)
- 함수 호출 시 함수 위치로 코드의 흐름(제어권)이 이동하고,

  함수 실행이 끝나고 난 후에는 반드시 원래 호출했던 위치로 다시 돌아감(흐름 복귀)
- 함수의 정의 위치는 순서와 관계없이 스크립트 내의 아무 위치에나 정의 가능하며 외부 자바스크립트 파일에 정의해도 된다! 웹 브라우저에서는 자바스크립트 코드 가운데 함수 선언 부분을 가장 먼저 해석하기 때문에!  = >그러므로 스크립트 코드의 앞부분이나 뒷부분에 함수 선언부분을 모아놓고 필요시 호출해 사용하는 것이 좋다.
- 매개변수 선언시 기본값 지정 : 매개변수 여러개 지정하고 넘겨받지 못했을때 undefined 되는 것 방지

  사용법 : function 함수명(a, b=5, c=10)

< 함수 정의 형태에 따른 분류 4가지 > 1. 전달인자도 없고, 리턴값도 없는 함수 2. 전달인자는 없고, 리턴값만 있는 함수 3. 전달인자만 있고, 리턴값은 없는 함수 4. 전달인자도 있고, 리턴값도 있는 함수

 

 

 

[ 전달인자가 없는 함수 ]
1. 전달인자도 없고, 리턴값도 없는 함수
  => 주의! 해당 함수가 정의(선언)되어 있지 않으면  콘솔창에 오류 메세지가 출력됨.

sister_1 이라는 함수 없어서 생긴 오류.

 (sister_1 is not defined => sister_1이 정의되지 않았음.)


2. 전달인자는 없고, 리턴값만 있는 함수
- 함수 선언 시 자바의 메서드와 달리 별도의 리턴타입은 명시하지 않고,  함수 내부에서 return 문을 사용하여 리턴할 데이터를 명시
  => 다만 함수 호출 후 리턴값이 전달되어도 변수에 저장하는 등의 코드가 없으면 리턴값을 사용할 수 없다. 

       (결과적으로 1번함수와 동일한 함수가 된다. )
 => 단, 리턴값을 전달받지 않아도 오류는 발생하지 않는다.
-  ruturn을 만나는 즉시 원래 호출된 곳으로 돌아간다. 
   => 함수 내에서 return 문이 실행되면 현재 실행중인 함수를 "즉시" 종료하고 함수를 호출한 원래  위치로 돌아감

       (이 때, return 값이 있으면 그 값을 가지고 돌아감.)
   => 따라서 , return 문 보다 아래쪽의 문장들은 실행되지 못한다.



[ 전달인자가 있는 함수 ]
- 외부에서 함수 호출 시 함수에 전달할 데이터를 전달인자(Argument)라고 함
- 이 때, 전달인자를 전달받아 함수에서 사용하기 위해서는 매개변수(Parameter)가 필요함
   => 자바스크립트에서 매개변수는 변수명만 지정하면 된다(let, var 등 선언 불필요)
- 외부에서 전달하는 데이터(전달인자)의 갯수와 동일한 갯수의 매개변수 선언 필수
   => 만약, 전달받은 데이터가 없을 경우 undefined 값이 저장됨
- undefined 값이 아닌 특정 데이터를 기본값으로 지정하는 방법.
   => 함수 선언부에 "함수명(매개변수명 = 기본값)" 의 형태로 지정하거나 

        ex) function a(data = 0) {} // data 매개변수의 기본값이 0으로 설정됨

        함수 내에서 if문을 통해 undefined 값일 경우 기본값을 저장하는 코드를 추가
        ex2) function a(data) {
                       if(data == undefined) {
                                 data = 0;
                        }
                }

3. 전달인자만 있고, 리턴값은 없는 함수 호출
- 매개변수가 복수개인 함수 호출
  =>    함수 호출 시 매개변수 갯수와 일치하는 갯수의 전달인자(데이터) 지정.
          (단, 매개변수 갯수보다 데이터 갯수가 적을 경우 매개변수에는 undefined 값이 저장됨.)
- 매개변수 갯수보다 전달인자 갯수가 적을 경우 순서대로 저장 후 나머지 매개변수는 undefined 가 된다.
  => 단, 코드 상의 오류는 발생하지 않는다. 
- 매개변수 갯수보다 전달인자 갯수가 많을 경우 나머지 전달인자는 버려짐(오류X)
- 함수 호출 시 전달인자의 데이터타입은 무관하므로 서로 다른 타입 데이터 전달도 가능함.

 

 

4. 전달인자도 있고, 리턴값도 있는 함수 정의 
   => 2번 형태 함수 + 3번 형태 함수 

  Q. 정수 2개(num1, num2)를 전달받아  두 수의 합을 계산하여 리턴.

function sum(num1, num2){
	//let total = num1 + num2;
	//return total;
    return num1 + num2; // 더 간단하게 사용가능!   
}

  Q. 정수1개(num)를 전달받아 해당 정수에 대한 절대값을 계산하여 리턴

function abs(num) {
	if(num < 0){
    	//return num *= -1;
		return -num; // 위의 return문 보다 훨씬 간단하다!
	}
	return num;
}

* 오늘의 퀴즈 * 

Q. numberGame 함수 정의 - 외부로부터 정수 1개 전달받기
  1) 함수 내에 correctNum 이라는 변수에 임의의 정수 1개 저장.
       주의! 숫자 입력 시 취소 버튼을 클릭했거나 
       아무 숫자도 입력하지 않고 확인 버튼을 클릭했을 경우에는
        "게임을 종료합니다" 출력 후 현재 함수를 끝내기 위해 return; 코드 실행

 2) 기존에 저장된 정수와 비교하여 일치 여부를 확인한 후    
   1) 입력받은 숫자가 정답보다 작을 경우 : "입력한 숫자보다 정답이 큽니다!" 출력
   2) 입력받은 숫자가 정답보다 클 경우 : "입력한 숫자보다 정답이 작습니다!" 출력
   3) 입력받은 숫자가 정답과 같을 경우 : "정답입니다!" 출력

3). 위의 작업을 정답이 입력될 때까지 반복하면서
   정답이 되기까지 입력한 횟수를 계산(카운팅)하여 "x번만에 정답입니다!" 출력

 -tip. while문 돌때 변수 잘보기