HTML 함수

함수

f(x) = x*x

반복되는 코드나 다시는 못 짤 것 같은 어려운 소스들을 함수로 묶어준다.

 

함수 선언

<script>
    function 함수명(){
        
    }
</script>

 

>> 함수는 반드시 호출이 되어야 함

<script>
    function f_start(){
        alert("나는 함수");
    }
    f_start();// 함수호출
</script>

 

1) 매개변수

>> 1개의 매개변수

변수타입의 선언 없이 변수명만 주면 됨!!

<script>
    function f_start(p_arg){
        alert("넘어온 값은= "+p_arg);
    }
    f_start("흥치피");
</script>

>> 2개 이상의 매개변수

<script>
    function f_start(p_arg, p_arg2){
        alert("넘어온 값은= "+p_arg+"과"+p_arg2);
    }
    f_start("흥치피",625);
</script>

>> 배열 매개변수

<script>
    function f_start(p_arr){
        alert("배열 2번째 값은 "+p_arr[1]);
    }
    var v_arr = ["A","B","C"];
    f_start(v_arr);
</script>

 

>> 매개변수를 넘기지 않았을 때

<script>
    function f_start(p_arg, p_arg2, p_arr){
        alert(p_arr);
    }
    var v_arr = ["A","B","C"];
    f_start("흥치피",625);
</script>

 

>> 매개변수로 함수의 포인터

     first class언어

 

<script>
    function f_msg(){
        alert("안녕?");
    }
    function f_msg2(p_func){
        p_func();
    }
    f_msg2(f_msg);
</script>

>>

 function f_msg2(p_func()){
        p_func();
    }

>> 처음부터 f_msg()함수를 부르면 안돼

    함수 포인터(fp)를 매개변수로 넘김!

f_msg2(f_msg());

 

 

>> 매개변수의 타입은 상관 없음

 

<script>
    var v_json={};
    v_json.name="박성연";
    v_json.age=23;

    function f_json(p_json){
        alert("이름은 "+p_json.name+ "나이는 "+ p_json.age);
    }
    f_json(v_json);
</script>

 

변수의 범위

>> 지역변수와 전역변수

*** 함수 안 선언이면 중괄호에 상관 없이 지역변수이고

      함수 밖 선언이면 전역변수***

<script>
    var v_aaa ="난 전역";
    function f_scope(p_arg){
        var v_aaa="난 지역";
        alert(v_aaa);
    }
    f_scope();
    alert(v_aaa);
</script>

f_scope()가 실행되어 지역변수인 "난 지역"이 실행이되고 난 뒤

alert(v_aaa)가 실행되어 전역변수인 "난 전역"이 실행된다.

<script>
    var v_aaa ="난 전역";
    function f_scope(p_arg){
        v_aaa="난 지역";
        alert(v_aaa);
    }
    f_scope();
    alert(v_aaa);
</script>

"난 지역"만 두 번 출력

지역변수였던 v_aaa가 전역변수로 변경되었기 때문!!

 

 

<script>
    function f_scope(p_arg) {
            for (var i = 1; i <= 3; i++) {

        }
        alert("for문 밖 i= " + i)
            }
        f_scope();
        alert(v_aaa);
</script>

<script>
    function f_scope(p_arg) {
        for(var i=1;i<=3;i++){
            var v_psy = "박성연";
        }
        alert("for문 밖 i= "+v_psy);
    }
    f_scope();
    alert(v_aaa);
</script>

 

리턴

값을 돌려주거나 함수를 종료하는 기능

함수 안에만 사용!

<script>
    function f_add(p_arg1, p_arg2){
        var hap=p_arg1+p_arg2
        return hap;
    }
    alert(f_add(1,5));
</script>

 

>> 덧셈 하기 전에 함수 종료

<script>
    function f_add(p_arg1, p_arg2){
        return;
        var hap=p_arg1+p_arg2
        return hap;
    }
    alert(f_add(1,5));
</script>

>> 숫자 3개 더하기

<script>
    function f_add(p_arg1, p_arg2){
        return p_arg1+p_arg2;
    }
    alert(f_add(1,f_add(2,3)));
</script>

 

>> 숫자 4개 더하기

<script>
    function f_add(p_arg1, p_arg2){
        return p_arg1+p_arg2;
    }
    alert(f_add(f_add(1,4),f_add(2,3)));
</script>

 

>>  alert(f_add(f_add(1,4),f_add(2,3)));는 가독성이 떨어지므로 아래와 같이 가독성을 높여주는 코드를 작성하는게 좋음

    var v_A = f_add(1,4);
    var v_B = f_add(2,3);
    alert(f_add(v_A,v_B));