DAY25 - JavaScript 함수 / 변수

📌 1. 함수의 사용

📍 1-1. 기본 함수 선언과 호출

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

• 함수의 정의(선언)방법

  •   function 함수이름() {
          ... 실행할 구문 ...
      }

• 함수 호출 방법

  •   함수이름();

📍 1-2. 파라미터가 있는 함수 선언과 호출

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

  • 파라미터가 있는 함수의 정의(선언)방법

    •   function 함수이름(파라미터) {
            ... 실행할 구문 ...
        }

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

    •   함수이름(파라미터);

• 다중 파라미터 함수의 경우에는 콤마,로 구분한다.

  • 다중 파라미터가 있는 함수의 정의(선언)방법

    •   function 함수이름(파라미터 1, 파라미터 2,...){
            ... 실행할 구문 ...
        }

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

    •   함수이름(파라미터1, 파라미터2, ...);

📍 1-3. 함수의 리턴값

• 리턴값은 결과값, 함수에서 반환하는 값을 뜻한다. return문으로 리턴값을 지정한다.

  • 예시

      function f(x){
          return x + 1;
      }
      var y = f(5);	// y = 6

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

  • 예시

      function f(x,y) {
          var z = x + y;
          // 조건
          if( z < 10 ) {
              return;
          }
          return z;
      }

• 이 때 값이 없이 리턴 결과를 변수에 대입한 경우, 정의되지 않은 값인 undefined가 대입된다.

  • 예시

      	var a = f(2,1);
      	document.write("<h1>" + a + "</h1>")
     		a = f(5,7);
      	document.write("<h1>" + a + "</h1>")
      	a = f(10,5);
      	document.write("<h1>" + a + "</h1>")

  • 출력 형태
    

📍 1-4. 함수간의 호출

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

  • 예시

          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);

  • 출력 형태
    

---

📌 2. 변수 선언 방식의 종류

• 지금까지처럼 var로 변수 선언을 할 경우 선언 기준이 너그러운 나머지 같은 이름으로 재선언이 가능해 혼란을 가져올 수 있다는 문제점이 있다. 따라서 변수 선언 시let 또는 const를 사용하는 것이 좋다.

  변수 선언 방식	재선언	변수 재할당
  var	가능	가능
  let	불가능	가능
  const	불가능	불가능

• 재할당이 필요하지 않은 상수와 객체에는 const를 사용하는 것이 권장된다.

---

📌 3. 주요 내장 함수

📍 3-1. eval

• 주어진 문자열을 수식으로 변환하여 리턴한다.

  • 예시

          let str = "100 + 1";
          document.write("<h1>" + str + "</h1>");
          let result = eval(str);
          document.write("<h1>" + result + "</h1>");

  • 출력 형태
    

📍 3-2. Number, parseInt

• 주어진 문자열의 변수가 숫자 모양일 경우 실제 숫자형으로 변환한다.

• Number() : 주어진 문자열이 실수 형태일 경우 그대로 변환한다.

• parseInt() : 주어진 문자열이 실수 형태일 경우 소수점 자리를 내림하고 정수만 리턴한다.

  • 예시

          let value = "100.6";
          let num1 = Number(value);
          let num2 = parseInt(value);
          let r1 = value + 1;
          let r2 = num1 + 1;
          let r3 = num2 + 1;
          document.write("<h1>" + r1 + "</h1>")
          document.write("<h1>" + r2 + "</h1>")
          document.write("<h1>" + r3 + "</h1>")

  • 출력 형태
    

➕ isNaN

• Number 함수와 parseInt 함수는 파라미터로 전달된 문자열이 숫자형태가 아닌 경우 NaN이라는 값을 리턴한다. 이 NaN 값과 숫자값과의 연산은 모든 결과가 NaN이다.

  • 예시

         let a = Number("a");
         document.write("<h1> a = " + a + "</h1>");
         let a_sum = a + 1;
         document.write("<h1> a_sum = " + a_sum + "</h1>");
         let a_str = a + "str";
         document.write("<h1> a_str = " + a_str + "</h1>");

  • 출력 형태
    

• isNaN은 변수의 NaN여부를 검사하는 함수다. 파라미터로 전달되는 변수의 NaN 여부를 boolean 형태로 리턴한다.

  • 파라미터가 숫자로 변환할 수 없는 문자열일 경우에는 NaN이므로 true 리턴
  • 파라미터가 숫자 모양을 한 문자열이거나 실제 숫자형 변수인 경우에는 NaN이 아니므로 false 리턴
    

• parseInt 함수나 Number 함수의 정상동작을 보장하기 위해서는 파라미터를 전달하기 전에 해당 값이 NaN이 아니라는 것을 검사해야 한다.

  • isNan 함수의 결과가 false이면 그 값은 숫자값이거나 숫자형으로 변환 가능한 문자열이라는 의미가 된다.

    let is_num = !isNaN(검사할값);

📍 3-3. alert, prompt, confirm

• alert

  • 웹페이지에서 가장 일반적으로 사용되는 대화상자. 확인 버튼이 함께 표시된다.
  • alert("알림 대화상자");

• prompt

  • 사용자의 입력 내용을 얻고자 하는 경우에 사용하는 대화상자. 확인, 취소버튼이 함께 표시된다.
  • let str = prompt("입력할 대화상자","")
  • 만약 아무런 값도 입력되지 않았으면 처음 설정한 빈 문자열("")이 리턴되고, 취소를 누르면 null이 리턴된다.

• confirm

  • 사용자에게 어떠한 결정사항에 대한 긍정 혹은 부정의 답을 얻고자 하는 경우에 표시되는 대화상자. 확인, 취소버튼이 함께 표시된다.
  • 리턴값은 boolean값이다.

---

📌 4. 함수의 다른 선언법

📍 4-1. 익명함수(변수 할당)

• 함수를 선언할 때 function 뒤에 함수 이름을 붙이는 것이 기본적인 방법이다.

  • function numbering(){...}

• 그러나 변수를 선언하면서 함수를 할당하는 것도 가능하다. 이렇게 하면 동일하게 numbering이라는 이름으로 함수를 호출할 수 있으나 함수 자체는 익명이다.

  • 예시

          let numbering = function(){
              let i = 0 ;
              while (i < 10){
                  document.write(i);
                  i += 1;
              }
          }
          // 호출 방식은 동일
          numbering();

📍 4-2. 화살표(=>) 함수

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

• 매개변수가 없는 경우

  • () => { ... }

• 매개변수가 1개인 경우

  • x => { ... } // 소괄호 생략 가능

• 매개변수가 두 개 이상인 경우

  • (x,y,..) => { ... } // 소괄호 생략 불가능

• 함수가 한 줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다.

  • 예시) x => x * x

• 중괄호를 사용할 시에는 반드시 return을 포함해야 하며 그렇지 않을 시 값을 리턴하지 못한다.

  • 예시) x => { return x * x }

• 함수로 선언하여 사용하는 예

  •      let foo = () => { document.write('foo function') }
         foo();
         document.write("<br>")
         let foo2 = x => document.write(x);
         foo2('user');

  • 출력 형태
    

📍 4-3. 즉시 실행 함수

• 일회성으로 호출해 사용하는 즉시 사용하는 함수를 즉시 실행 함수라고 부른다. 호출할 시 부를 이름이 없기 때문에 재사용이 불가하다.

  • 즉시 실행 함수 예시

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

          (() => {
              if(confirm("동의하십니까?")){
                  alert("동의하셨습니다.")
              }else{
              alert("취소 버튼을 누르셨습니다.")
              }   
          })();