Chap 4. 함수

김승현·2021년 11월 10일
JavaScript국비수업
0

함수

  • 소스코드의 집합으로 메소드, 모듈, 기능, 프로시져 등을 말함
  • 자바스크립트에서는 function 도 하나의 자료형
  • 함수는 인자값/매개변수, 리턴값을 가질 수 있음



함수 선언

  • 반환 타입 선언 없이 function 키워드만을 이용하여 사용

  • 선언적 함수

    • function 키워드에 함수 명을 작성하여 사용하는 방법

  • 익명 함수

    • function에 함수 명을 작성하지 않고, 변수에 대입하는 방법
    • 스스로 동작하는 함수
      • 이벤트 처리시 사용



선언적 함수

  • 함수의 이름을 붙이고, 선언한 형태의 함수

👨‍🎓 작성 방법

function 함수명 ([매개변수]){
처리되는 로직
[return되돌려줄 값;]
}


EX) 매개변수 X, 인자값 X 는 함수

<script>
    function test(){
        alert("test 함수 호출");
    }

</script>
<button onclick="test()">버튼</button>

EX) 매개변수 X, 인자값 O 는 함수

  • 함수의 매개변수를 따로 지정하지 않은 경우
  • 자바스크립트의 함수들은 자동으로 arguments 라는 배열을 사용하여 데이터를 저장
    <button onclick="test()">버튼</button>
    <button onclick="test(20)">버튼</button>
    <button onclick="test(30,40)">버튼</button>
    
    
   <script>
        function test() {
            if (arguments.length == 0) {
                alert("test 함수가 호출 되었습니다.");
            } else if (arguments.length == 1) {
                alert(arguments[0]);
            } else if (arguments.length == 2) {
                alert(arguments[0] + " / " + arguments[1]); 
            }

        }
    </script>

EX) 매개변수 O, 인자값 X 는 함수

    <button onclick="test()">버튼</button>
    
    <script>
        function test(data) {

            alert(data);
            //인자값이 넘어오지 않은 경우 출력시 -> undefined
        }
    </script>

EX) 매개변수 O, 인자값 O 는 함수

    <button onclick="test(20)">버튼</button>
    
    <script>
        function test(data) {
            alert(data);
        }
    </script>

EX) 함수의 리턴값 처리

    <button onclick="test(20)">버튼</button>

    <script>
        function test(data) {
            var result = test2(data);
            alert(result);
        }

        function test2(data) {
            return data * data;
        }
    </script>

form 태그에서 리턴값을 이용한 처리 (유효성 검사)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <form action="test.html" method="get" onsubmit="return check();">
        <fieldset>
            <legend>로그인</legend>
            ID : <input type="text" name="userId" id="userId" /><span id="message1"></span><br>
            PW : <input type="password" name="userPw" id="userPw" /><span id="message2"></span><br>
            <input type="submit" value="로그인" /><input type="reset" value="취소" />
        </fieldset>
    </form>

    <H3>로그인 할때 ID와 Password를 입력 받아야 한다.</H3>
    <H4>이때, ID 또는 Password가 입력되지 않았다면 옆에 경고 메시지 띄우고,
        submit 처리가 되지 않도록 해야 한다.
    </H4>


    <script>
        function check() {
            var userIdElement = document.getElementById("userId");
            var userPwElement = document.getElementById("userPw");

            document.getElementById("message1").innerText = "";
            document.getElementById("message2").innerText = "";

            if (userIdElement.value.length == 0) {

                document.getElementById("message1").innerText = "ID를 입력해야 합니다.";
                document.getElementById("message1").style.color = "red";
                return false;
            } else if (userPwElement.value.length == 0) {
                document.getElementById("message2").innerText = "PW를 입력해야 합니다.";
                document.getElementById("message2").style.color = "red";
                return false;
            } else {
                return true;
            }
        }
    </script>

</body>

</html>

참고

구분타입
" "(공백)string
nullobject
data 자체가 없는 경우undefined



익명 함수

변수에 함수를 넣어 작성하는 방법

  • 익명함수는 함수의 이름이 없는 함수
  • 기존 선언적 함수는 만든 함수를 메모리에 바로 올려 놓기 때문에 코드의 순서에 상관없이 호출이 가능
  • 하지만 변수에 담기는 익명함수는 함수 선언 이후에만 사용이 가능

👨‍🎓 작성 방법

var test = function([매개변수]){
		처리되는 로직;
		[return 리턴 값;]
}

EX)

    <script>
     
        test1();

        //선언적 함수
        function test1() {
            alert("test1 함수가 호출 되었습니다.");
        }

        //익명 함수
        var test2 = function() {
            alert("test2 함수가 호출 되었습니다.");
        }

        test2();
        
    </script>

EX)

    <button onclick="test();">버튼</button>

    <script>
        var count = 0;

        var test = function() {

            count++;

            alert(count + "번째 호출");

            if (count == 5) {
                test = null;
            }
        };
    </script>

EX)

    <button onclick="test();">버튼</button>
    <button onclick="on();">이벤트 활성화</button>
    <button onclick="off();">이벤트 비활성화</button>

    <script>
        var event = function() {
            alert('알림창 입니다.');
        };
        var test;

        function on() {
            test = event;
        };

        function off() {
            test = null;
        };



변수에 함수를 넣어 작성하는 방법

  • 호출 없이 바로 실행되는 구조의 함수

👨‍🎓 작성 방법

(function (){
	처리 로직
	// 리턴값 없음 (스스로 호출하고 끝나기 때문)
	})();

EX)

    <script>
        (function() {
            alert("스스로 호출하는 함수");
        })();
    </script>



this 인자값

  • this 라는 키워드를 이요하면 현재 함수를 호출하는 자기자신 (요소)을 보낼 수 있다.

EX)

    <button onclick="test(this);">버튼1</button>
    <button onclick="test(this);">버튼2</button>


    <script>
        function test(elememt) {
            elememt.style.fontSize = "30px";
        }
    </script>



함수리턴(클로저)

  • 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부함수를 말함

특징

  1. 3개의 Scope 를 가진다. (전역변수, 외부함부 변수, 내부함수 변수)
    • 스코프체인 이라고도 함
  2. 클로저를 사용하게 되면 내부에서 사용하였던 지역변수를 계속 사용할 수 있게 됨
    • 함수가 끝나고 해당 변수가 사라지지 않음
  3. 클로저는 어떠한 값을 유지시키면서, 값을 보호하기 위할때 사용 된다.

EX)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
</head>

<body>

      <script>
       
        function incre(){
             var count = 0;
            
            return function(){
                count++;
                document.getElementById("data").innerHTML = count;    
            }
            
        }
          
        var closure = incre();
        
        
    </script>
    
    결과 : <span id="data">0</span> <br>
    <button onclick="closure();">증가</button>

</body></html>



내장 함수 (인코딩, 디코딩)

  • 웹 상에서 통신시 유니코드 문자는 오작동을 일으킬 문제가 있어서 별도의 인코딩을 필요

    • 인코딩 : 문자 -> 숫자로 변환

    • 디코딩 : 숫자 -> 문자로 변환

    • 문자셋 유니코드 문자: 다양한 문자를 표현하기 위한 코드 값

    • 유니코드를 표현하기 위한 다양한 인코딩 방식 : UTF-8, UTF-16, EUC-KR 등등

함수의미
escape 함수아래를 제외한 모든 문자열을 인코딩 처리

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
@*-_+./
unescape 함수escape로 만들어진 값을 디코딩 처리
encodeURI인터넷 주소에 사용되는 문자열 인코딩

파라미터값을 인코딩 할때 사용
: ; / = ? & 는 인코딩 하지 않음
decodeURIencodeURI 함수로 인코딩한 문자열을 디코딩
encodeURIComponent알파벳과 숫자를 제외한 모든 문자 인코딩
decodeURIComponentencodeURIComponent 함수로 인코딩한 문자열을 디코딩

EX) encodeURI 와 decodeURI 예제

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
</head>

<body>
    <script>
        function original(){
            var parameter = document.getElementById("input1").value;
            var url = "http://www.iei.or.kr?data="+parameter;
            alert(url);
        }
        function encode(){
            var parameter = document.getElementById("input1").value;
            var url = "http://www.iei.or.kr?data="+parameter;
            alert("인코딩값 : " + encodeURI(url));
        }
        function decode(){
            var parameter = document.getElementById("input1").value;
            var url = "http://www.iei.or.kr?data="+parameter;
            var encodeData = encodeURI(url);
            alert("인코딩값 : " + encodeData + "\n"+
                 "디코딩값 : " + decodeURI(encodeData)
                 );
        }
    </script>
    
    <input type="text" id="input1" /><br>
    <button onclick="original();">원본</button>
    <button onclick="encode();">encode</button>
    <button onclick="decode();">decode</button>

</body></html>



eval(String)

  • 문자열로 기술 된 코드를 자바스크립트로 실행하는 함수

EX) eval(String) 예제

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>

</head>

<body>
    계산할 내용 : <input type="text" id="input" /><br>


    <p id="print1" style="border:1px solid blue; width:300px; height : 100px;"></p>
    <p id="print2" style="border:1px solid blue; width:300px; height : 100px;"></p>
    <button onclick="test();">결과 확인</button>

    <script>
        function test() {
            var input = document.getElementById("input").value;
            var print1 = document.getElementById("print1");
            var print2 = document.getElementById("print2");

            print1.innerHTML = input;
            print2.innerHTML = eval(input);
        }
    </script>




</body></html>



숫자 검사 비교 함수

함수의미
isFinite(number)숫자가 맞는지를 확인하는 함수

숫자면 true / 아니면 false
단, 아무것도 없을 경우에도 true로 출력 됨
isNaN(number)숫자 데이터가 아닌지를 확인하는 함수

숫자가 아니면 true / 숫자이면 false
isFinite의 반대 기능

EX) isNaN 예제

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>

</head>

<body>
    첫번째 수 : <input type="text" id="input1" /><br>
    두번째 수 : <input type="text" id="input2" /><br>
    <button onclick="add();">더하기(+)</button>
    <p id="p1" style="width:200px;height:200px;border:1px solid black;"></p>

    <script>
        function add() {
            var su1 = Number(document.getElementById("input1").value);
            var su2 = Number(document.getElementById("input2").value);

            if (isNaN(su1) || isNaN(su2)) {
                document.getElementById("p1").innerHTML = "숫자를 입력해주세요";
            } else {

                document.getElementById("p1").innerHTML = parseInt(su1) + parseInt(su2);
            }

        }
    </script>




</body></html>
profile
김승현
개발자로 매일 한 걸음
이전 포스트

Chap 3. 배열

다음 포스트

Chap 5. 객체

0개의 댓글