Chap 4. 함수

김승현·2021년 11월 10일

JavaScript 국비수업

함수

소스코드의 집합으로 메소드, 모듈, 기능, 프로시져 등을 말함
자바스크립트에서는 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
null	object
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>

함수리턴(클로저)

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

특징

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

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 등등
  - 유니코드 Encoding 사이트
  - UTF-8 전체 코드 표

함수	의미
escape 함수	아래를 제외한 모든 문자열을 인코딩 처리 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 @*-_+./
unescape 함수	escape로 만들어진 값을 디코딩 처리
encodeURI	인터넷 주소에 사용되는 문자열 인코딩 파라미터값을 인코딩 할때 사용 : ; / = ? & 는 인코딩 하지 않음
decodeURI	encodeURI 함수로 인코딩한 문자열을 디코딩
encodeURIComponent	알파벳과 숫자를 제외한 모든 문자 인코딩
decodeURIComponent	encodeURIComponent 함수로 인코딩한 문자열을 디코딩

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>

김승현

개발자로 매일 한 걸음

이전 포스트

Chap 3. 배열

다음 포스트

Chap 4. 함수

함수

함수 선언

선언적 함수

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

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

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

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

EX) 함수의 리턴값 처리

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

참고

익명 함수

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

EX)

EX)

EX)

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

EX)

this 인자값

EX)

함수리턴(클로저)

특징

EX)

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

EX) encodeURI 와 decodeURI 예제

eval(String)

EX) eval(String) 예제

숫자 검사 비교 함수

EX) isNaN 예제

Chap 3. 배열

Chap 5. 객체

0개의 댓글