함수

1. 함수란?

• 함수의 사용은 함수의 정의(선언)과 함수의 호출로 나뉜다.
• 함수의 정의(선언)방법

<script>
function 함수이름(){
	...실행할 구문 ...
}
</script>

<script>
 function sayHello() {
    document.write("<h1>안녕하세요</h1>");
    document.write("<h1>자바스크립트</h1>");
  }
</script>

• 함수의 호출 방법

<script>
	함수이름();
</script>

<script>
  sayHello();
  sayHello();
  sayHello();
</script>
결과값 : 
안녕하세요
자바스크립트
안녕하세요
자바스크립트
안녕하세요
자바스크립트

2. 파라미터(매개변수)

• 자바스크립트에서는 함수의 이름뒤에 위치한 괄호()안에 파라미터를 기술한다.
• 파라미터가 있는 함수 정의(선언) 방법

<script>
function 함수이름(파라미터){
	..실행할 구문
}
</script>

• 파라미터가 있는 함수 호출

<script>
	함수이름(파리미터);
</script>

<script>
  function f(x){
  	var y = x+1;
  	document.write("<h1>" + y + "</h1>")
  }

  f(2);
  f(3);
  f(10);
</script>
결과 값 :
3
4
11

3. 다중파라미터

• 자바스크립트 함수의 다중 파라미터

<script>
  function 함수이름(파라마토1, 파라미터2){
      실행할 구문
}
</script>

• 다중 파라미터가 있는 함수 호출

<script>
	함수이름(파리미터1, 파라미터2)
</script>  

<script>
  function f(x,y){
  	var z = x + y;
 	 document.write("<h1>" + z + "</h1>");
  }
  f(2,1);
  f(5,6);
  f(2,4);
</script>
결과 값 : 
3
11
6

4. 리턴값

• 결과값 되돌려 주는 값

<script>
function f(x){
	return x + 1;
}
</script>

• 호출

<script>
var y = f(5);
</script>

<script>
  function sum(x, y){
 	 var z = x + y ;
 	 return z;
  }

  function printResult(x, y) {
  	var result = sum(x, y)
 	document.write("<h1>" + result + "</h1>");
  }

  printResult(7,10);

</script>
결과 값 : 
17

5. 함수의 실행 중단

• 자바스크립트 함수는 처리 도중 return 문을 만나게 되면 그 즉시 실행을 중단한다.
• 이러한 특성을 이용하여 특정 조건이 충독되지 않을 경우등에 대한 처리중단을 목적으로 return 문을 사용할 수 있으며, 리턴값 없이 처리를 중단하고자 하는 경우에는 return 키워드만 사용한다.
• 이때 값이 없이 리턴 결과를 변수에 대입한 경우, 정의되지 않은 값인 "undefined"가 대입된다.

6. 함수간의 호출

• 자바스크립트에서도 어떤 함수 안에서 다른 함수를 호출할 수 있다.
• 현재 함수 안에서 호출한 다른 함수의 리턴값을, 현재 함수 안에서 다른 계산을 처리하는데 활용할 수 있다.

7. 익명함수

• 익명함수는 선언하지 않고 바로 사용하는 1회성 함수이다.
• ()();

<script>
  (function(){
  	 let i = 0;
 	 while(i < 10){
        document.write(i);
        i += 1; 
     }
  })();
</script>

8. 변수에 함수할당

• 변수를 선언하고 그 변수에 함수를 할당할 수 있다.

<script>
  // numbering 이라는 변수가 함수를 갖게된다.
  // function numbering(){..}과 같다.
  let numbering = function () {
 	 let i = 0;
  	while( i < 10){
           document.write(i);
           i += 1;
           }
  }
  numbering();

</script>

9. 화살표 함수

• 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있다.

매개변수를 지정하는 방법

• () => {...} : 매개변수가 없는 경우

<script>
  let foo = () => {console.log('foo function')}
  foo();
</script>

• x => {...} : 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.

<script>
  let foo2 = x => document.write(x);
  foo2('user');
  
  let sayHi = () => alert("안녕하세요");
  sayHi();
</script>

• (x,y) => {...} : 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

<script>
  let user = (a,b) => a+b;

  document.write(user(1,3));
  document.write("<br>")
  let user2 = (a,b) => {return a + b}  // 중괄호가 있으면 무조건 return이 있어야 한다.
  document.write(user2(3,4));

  document.write("<br>")
  let user3 = (a,b) => {a + b}
  document.write(user3(3,4));

  document.write("<br>")
  let user4 = (a,b) =>{
  let c= 3;
  return a + b + c;
  }
  document.write(user4(10,11));

  document.write("<br>")
  let user5 = n => n *2;
  /*
  function user5(n){
  return n*2;
  }
  */
  document.write(user5(3));
</script>
결과 값 : 
4
7
undefined
24
6

함수 몸체 부분

• x => {return x * x}
• x => x * x : 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며, 암묵적으로 return 된다.

<script>
  () => {
  	const x = 10;
  	return x;
  }
</script>
여러줄이면 중괄호 생략 할수 없음.

isNaN

변수의 NaN여부를 검사하는 함수

• isNaN 함수는 파라미터로 전달되는 변수의 NaN 여부를 boolean 형태로 리턴한다.
• 파라미터가 숫자로 변환할 수 없는 문자열일 경우에는 NaN형태이므로 true 리턴
• 파라미터가 숫자 모양을 한 문자열이거나 실제 숫자형 변수일 경우에는 NaN이 아니므로 false 리턴

숫자인지 검사하기

• parseInt 함수나 Number 함수의 정상동작을 보장하기 위해서는 파라미터를 전달하기 전에 해당 값이
  NaN이 아니라는 것을 검사해야 한다.
• isNaN 함수의 결과를 부정하면 그 값은 숫자값이거나 숫자형으로 변환 가능한 문자열이라는 의미가 된다.

<script>
  let v1 = "가나다라";
  let v2 = "123456";

  let is_num1 = !isNaN(v1);
  let is_num2 = !isNaN(v2);

  if (is_num1) {
  	document.write("<h1>" + v1 + "는 숫자이다</h1>");
  }else{
 	 document.write("<h1>" + v1 + "는 숫자가 아니다</h1>");
  }

  if (is_num2) {
  	document.write("<h1>" + v2 + "은 숫자이다</h1>");
  }else{
 	 document.write("<h1>" + v2 + "은 숫자가 아니다</h1>");
  }
</script>
결과 값 : 
가나다라는 숫자가 아니다
123456은 숫자이다