[JS] 함수(Function) : 매개인자로 전달하기, 함수 리턴처리, 매개변수로 함수 전달, 함수 리턴, 내장함수

 

함수 선언

1.선언적 함수

함수function에 이름을 집어넣는 것 선언적함수라함

<button onclick="test1();"> 선언적 함수 </button>
<script>
    function test1(){
        console.log('test1함수 실행'); // 선언적 함수
    }
</script>

2.익명 함수

fuction 뒤에 함수명이 없는 함수 함수를 변수에 넣고 변수명으로 호출

이유 : 호출할려해도 이름이 없기에 변수에 넣고 변수명으로 대체

<button onclick="test2();"> 익명 함수 </button>
<script>
    var test2 = function**()** {    // fuction 뒤에 이름이 없는 함수
       // 함수를 변수에 넣고 변수명으로 호출
        console.log('test2함수 실행'); // 
    }
</script>

 

---

 

함수 전달인자와 매개변수

1.매개인자로 전달하기

지정된 매개변수보다 많은 개수를 호출하는 것을 허용, 초과된 인자는 무시됨
지정된 매개변수보다 적은 개수를 호출하는 것을 허용, 전달되지 않은 매개변수는 undefined

함수 위아래 2개가 있고 위의 함수(익명함수)가 아래 함수(선언적 함수)를 호출하는 형태

위쪽 익명함수가 test3(인자o), test3(인자x) 순으로 아래 선언적함수를 2번 호출하는 형태

<script>
  document.getElementById('btn1').onclick = function(){ // getElement로 속성 접근. 클릭하면 해당 함수를 실행하라는 의미
    test3('안녕','반가워');
    test3();    // 자바에서 매개변수 있는 메소드에 매개변수 전달 안하면 
                // 에러가 났는데, 얘는 undefined를 출력
                // 지정된 매개변수보다 적은 개수를 호출하는 것을 허용, 전달되지 않은 매개변수는 undefined
  }
  function test3(value){  // 매개변수 1개인데 위의 test3는 2개이므로 자바라면 에러나지만, js는 오류 안나고 실행됨. 반가워는 안찍힘
    console.log('test3호출');   // test3호출
    console.log(value);         // 안녕 // 위의 test3('안녕','반가워');에서 인자가 안녕,반가워 2개인데 value로 앞의 '안녕'만 들어감
                                // undefined // 두번째로 test3()로 호출되서 test3()에서는 인자가 없으므로 undefined
    console.log(arguments); // Arguments(2) ['안녕', '반가워', callee: ƒ, Symbol(Symbol.iterator): ƒ]
                            // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]    // test3()의 호출. 인자가 없으므로 argument도 받은 인자x
    // arguments : 내가 넘겨 받아온 것을 다 담아오는 것 // arguments 처음 사용
    // 안녕,반가워를 위에서 받은거를 arguments에 다 배열로 저장하는 식
  }
</script>

arguments

넘겨받은 모든 인자들을 저장해두는 ‘배열’

ex)안녕,반가워를 위에서 받은거를 arguments에 다 배열로 저장

(대괄호[]로 남겨있는걸 보면 배열인걸 알 수 있음)

js내장함수

 

 

2.매개인자로 스스로를 전달하기

2가지 방법

방법1 : 인자 직접 설정

button 태그 test4() 안 매개변수인 js,jquery를 function test4(subject) 안에 넣어주고 얘는 다시 alert(subject)로 넣어준다

<button onclick='test4("JavaScript--");'>방법1 : JavaScript</button>
<button onclick='test4("jQuery--");'>방법1 : jQuery</button>
<script>
  // 방법1
// 인자 직접 설정해주는 것이 가장 간단한 방법
// button 태그 test4() 안 매개변수인 js,jquery를 
// function test4(subject) 안에 넣어주고 얘는 다시 alert(subject)로 넣어준다
  function test4(subject){    
      alert('오늘 배울 내용은 '+ subject + '입니다.');    // 오늘 배울 내용은 jQuery--입니다.
  }
</script>

 

방법2 : this를 통한 button 요소값 전달 + innerHTML

button 태그 test5() 안 매개변수인 this는 버튼의 내용인 '방법2 : JavaScript'를 인자로 받아 function test5(subject) 안에 넣어주고 얘는 여기서 다시 alert(subject.innerHTML)로 넣어준다

<button onclick='test5(this);'>방법2 : JavaScript</button>
<button onclick='test5(this);'>방법2 : jQuery</button> <!-- this : 지금 현재 내가 있는 곳에 대한 코드를 의미 -->
<script>
  // 방법2
	// this를 통한 button 요소값 전달 + innerHTML
// button 태그 test5() 안 매개변수인 this는 버튼의 내용인 '방법2 : JavaScript'를 인자로 받아  
// function test5(subject) 안에 넣어주고 얘는 여기서 다시 alert(subject.innerHTML)로 넣어준다
  function test5(subject){   
  // 온클릭 this에서 함수 파라미터인 subject에 넣을 때 뭐라고 찍히나 확인해보자   
      console.log(subject) // <button onclick='test5(this);'>JavaScript</button>
      alert('오늘 배울 내용은 '+ subject.innerHTML + '입니다.'); // 오늘 배울 내용은 방법2 : jQuery입니다.
  }
</script>

 

 

 

3.함수의 리턴처리

함수에서 다른 함수를 호출하여 리턴값 받아오기

test6() 함수에서 값을 리턴하는 returnFunc()함수를 호출하여 test6()에서도 값 리턴할 수 있게 만든 구조

<button onclick="test6();">함수 리턴처리</button>
<script>
  function test6(){
      // 반환타입이 없다고 리턴할 수 없는건 아님
      var ran = returnFunc ();
      alert(ran); // 알림창으로 값 리턴됨 : 68.4503529682732
  }
  function returnFunc(){
      return Math.random() * 100 + 1; // Math.random() : 랜덤값 부여 함수. 범위:0~1까지
      // test6()에 리턴해줌. 위의 test6()함수의 ran 변수가 해당 함수의 리턴값을 받아 담음. 
  }
</script>

<innerText & innerHTML 차이>

// innerText : 해당 태그의 텍스트만 가져온다
function setInnerText()  {
    const element = document.getElementById('content');
    element.innerText = "<div style='color:red'>A</div>"; -> 출력값 : <div style='color:red'>A</div>
}

// innerHTML : html 요소를 적용시킨 상태에서 값을 반환한다. 즉, html의 태그들을 적용시키고 태그사이의 값을 반환한다
function setInnerHTML()  {
    const element = document.getElementById('content');
    element.innerHTML = "<div style='color:red'>A</div>"; -> 출력값 : (빨간색 글씨) A
}

자료출처 : https://hianna.tistory.com/480

 

 

4.매개변수로 함수 전달

함수도 매개변수로 전달하고 리턴받을 수 있음

내부 로직 설명

1)button test7(calledFunction)의 calledFunction인자가 function test(v)의 매개변수인 (v)로 들어감 2)v();의 v에는 calledFunction이 담겨있으므로 아래의 fuction calledFunction(){} 함수를 호출

 

<button onclick='test7(calledFunction);'> 매개변수로 함수 전달</button>
<script>
  function test7(v){  // v가 calledFunction을 받아옴
      v();     //실행시키면 v가 calledFunction을 실행시키게 됨 
  }
  function calledFunction(){
      alert('calledFunction 실행');   // calledFunction 실행
  }
// 내부 로직 설명
// 1)button test7(calledFunction)의 calledFunction인자가 function test(v)의 매개변수인 (v)로 들어감
// 2) v();의 v에는 calledFunction이 담겨있으므로 아래의 fuction calledFunction(){} 함수를 호출
</script>

 

5.함수 리턴

함수에서 다른 함수를 호출하여 리턴값 받아오기

내부 로직 설명

1)button 태그에서 test8()함수 호출

2)function test8() 함수 내부에서 return 으로 함수 리턴시킴

3)return으로 받아온 함수가 button test8()을 들어감

받아온 함수 실행을 위해 button test8()에 소괄호()를 추가

<!-- function 받아와서 실행시켜줘야해서 onclick="test8()();"에다가 ()소괄호 추가 -->
<button onclick="test8()();">함수 리턴</button> <!-- 실행을 위한 소괄호() 한번 더 붙임 -->
<script>
  function test8(){     
    return function(){  // 함수 반환    // 익명함수
        alert('함수 반환 성공');   // 결과값이 아무것도 나타나지는 않으나 펑션을 반환받음. test8이 펑션 자체임
    }  // 내가 받아온 것을 실행시키기 위해 button test8()에 ()를 추가. 실행시켜야되니 뒤에 소괄호 한번 더 붙여줌
}      // function test8()에서 button test8()으로 펑션만 받아온거지 실행한게 아니라서 실행용 소괄호를 넣어줘야함
</script>

 

 

---

 

내장 함수

1. eval()

문자열을 JS코드로 변환해서 실행시켜주는 함수

내장함수 eval()

<input type="text" id="test1"><button onclick="test9();"> 내장함수 : eval()</button>
    <script>
        function test9(){
            var test = document.getElementById('test1').value;
            console.log(test); // 1+1   // // input창에 있는 입력값이 콘솔에 잘 출력됨. 
            console.log(eval(test));    // 1+1을 입력하면 2를 출력함.     
            //문자열을 자바스크립트 코드로 변환해서 실행을 시켜주는것. 
            // 1+1 문자열이 아닌 자바스크립트 코드로 변환을 하니 
            // 계산식이 되어 2가 출력된것. 

            var str = '';
            str += 'var num1 = Number(prompt(" 2"));';
            str += 'var num2 = Number(prompt(" 2"));';
            str += 'var sum = num1 + num2;';
            str += 'alert(num1 + " + " + num2 + " = "+ sum);';
            
            console.log(str); 
            eval(str);  // eval()을 통해 진짜 코드로 바꿔보겠다

        }
    </script>

 

2.infinity & NaN

infinity와 NaN을 찍어보면 넘버타입

 

방법1 : == 사용

infinity는 ==, isFinite() 둘다 가능 NaN는 isNaN()만 가능

 

방법2 : isFinite() & isNaN() 사용

isFinite 유한한지,정해진 수가 있는지 물어보는 것 isFinite()를 쓰면 매개변수 안에 숫자가 유한한지 물어보는 거기 때문에 무한인 Infinity니가 들어가면 false로 뜨는 것

NaN은 == 비교 불가능(isNaN으로 확인해야함)

function test10(){
  var num1 = 10 / 0; // -> 자바에서 이러면 바로  ArithmeticException예외
  var num2 = 10 / '강건강' ;
  console.log(num1); // Infinity
  console.log(num2); // NaN(Not a Number)

  // 에러가 나지 않고 콘솔창보면 인피티니와 NaN(Not a Number)이 뜸
  // 데이터 확인해보면 str이 아닌number 타입이 나옴

  console.log(typeof num1); // number타입
  console.log(typeof num2);

  // 인피와 nan인지 아닌지 확인방법  
  // 방법1
  // num1 == Infinity
  console.log(num1 == Infinity);  // true
  // 방법2
  // isFinite 유한한지 정해진 수가 있는지 물어보는 것
  console.log(isFinite(num1));    // false
  // Infinity니까 무한하지

  console.log(isNaN(num2));       // true
  console.log(num2 == NaN); 
  // 이렇게는 안됨, isNaN으로 확인해야함.

  // 음의 무한대와 양의 무한대가 존재함
  var num3 = -10 /0 ;
  console.log(num3);// 음의 무한대
  console.log(num3 == -Infinity); // true // 인피티 앞에 마이너스(-) 붙음
}