[JavaScript] 4. 함수

함수(function): 실행문 저장해서 사용

-변수: 데이터 저장해서 사용 가능한 메모리 공간

 

<script>

    //    function 함수명(){

    //        실행코드1;

    //        실행코드1;

    //        실행코드1;

    //    }

    //    -> 함수명();

    //    [익명 함수]

    //    var tmp = function(){

    //        실행코드1;

    //        실행코드1;

    //        실행코드1;

    //    }

    //    -> 변수명()/참조변수()

        // 함수 선언(정의)

    function info_ITWILL(){

        alert("안녕하세요!");

        alert("아이티윌입니다!");

        alert("접수는 왼쪽입니다!");

    }

    // 함수 사용(호출)

    //info_ITWILL();

    //info_ITWILL();

    // sayMyName 이름의 함수를 선언

    // -> 본인의 이름을 출력하는 함수

    function sayMyName(){

        document.write("메롱메롱메롱<br>");

    }

    sayMyName();

 

   // 함수에 정보 전달하기

   // function 함수명(매개변수1, 매개변수2,...,매개변수n){

   //     코드 실행;

   // }

    // 함수 호출

    // 함수명(값1,값2...값n);

    // 매개변수 1개 사용(숫자),

    // 1~전달받은 매개변수까지의 합을 출력하는 함수

    function exSum(num){

       //계산

       var sum = 0;

       for(var i=1;i<=10;i++){

        sum += i;

       }

        document.write("합 :"+sum+"<br>");

    }

    exSum(10);

    exSum(55);

    // 숫자 2개를 전달해서, 숫자의 합을 출력 함수 생성

    function exAdd(num1,num2){

        document.write(num1+"+"+num2+"="+(num1 + num2)+"<br>");

    }

    exAdd(99,76);

    // 숫자 2개를 전달하여, 둘 중에 큰 수를 출력

    // ex) 10,20 -> "20"

    function exMax(num1,num2){

        if(num1 > num2){

            document.write(" 최대값 : "+num1+"<br>");

        }else{

        document.write(" 최대값 : "+num2+"<br>");

    }

}

exMax(55,20);

 

 

 

//function 함수명(X,매개변수){

//    실행코드;

//    return 값;

//}

 

Function

1. 매개변수 O 함수명(n1, n2, ...)

- 리턴 O. 리턴 X

2. 매개변수 X 함수명()

- 리턴 O 리턴 X

 

-함수(function)는 리턴이 없을 경우 위에서 아래로 모든 코드 실행(대부분 실행(계산)의 결과를 출력)

-함수function)는 리턴이 있을 경우 위에서 아래로 실행(특정 결과를 리턴)

 

function exABS(n){

    if(n > 0){

       // 양수

    return n;

    }else{

    //음수

    //return -n;

 //   return n*(-1);

   //  n = n * (-1);

   n *= -1;

    }

    return n;

}

var tmp = exABS(100);

document.write("결과 :"+tmp+"<br>");

document.write("결과:"+exABS(-200));

// 매개 변수 3개 사용, 입력받은 산술연산의 결과를 리턴하는 함수

// ex(10,"+",20);

function ex(num1,op,num2){

    var result = 0;

    switch(op){

        case "+":

            result = num1 + num2;

            break;

        case "-":

            result = num1 + num2;

        break;

            case "*":

            result = num1 + num2;

            break;

        case "/":

            result = num1 + num2;

            break;

        case "%":

            result = num1 + num2;

            break;

    }

    return result;

}

//document.write( ex(10,"+"20));

document.write( ex(40,"/",50));

 

 

function test(){

            document.write("1");

            return;

            // -> return문은 실행하는 위치에 따라서

            //   함수를 강제 종료가능하다.

            //document.write("2");

        }

        function test2(){

            document.write(" 1 ");

            document.write(" 2 ");

            document.write(" 3 ");

            return;

            document.write(" 4 ");

            return 100;

            document.write(" 5 ");

        }

 

 

 

var 변수

* 전역변수: 모든 스코프(scope)에서 사용 가능한 변수(함수 밖에서 선언 후 사용, 함수 안에서 사용할 경우 var 타입을 제거)

* 지역변수: 특정 지역에서만 사용 가능한 변수

 

 <script>

        var a = 100;

        function TEST(){

            // var a = 100;(X -> 지역변수)

            a = 100; // 전역변수

        }

        a = 300;

    </script>

 

 

 

함수 호이스팅이란?

끌어올린다라는 개념으로 사용됨

- 자바 스크립트는 인터프리터(순차적 해석)을 사용해서 코드를 해석

- 함수를 만나면 함수 전체를 스캔한다

- 만약 함수에 var 선언이 있는 경우 별도로 저장

 

<script>

         document.write("<hr>");

        var x = 10; // 변수 선언

        x = 20; // 변수 재할당(재사용)

        var x = 30; // 변수 재선언

        function print(){

            var y;

            document.write("x :"+x+"<br>");

            document.write("y :"+y+"<br>");

            //document.write("y :"+z+"<br>"); -> 에러

            //var y = 20; 실제코드

            y=20;

        }

        print();

    </script>

 

 

let 타입: 변수를 선언한 블럭{}에서만 사용 가능함

- 변수의 재사용 가능

- 변수의 재선언 불가능 / 지역 변수 사용 가능

- 변수 호이스팅 X

 

<script>

        let A = 100;

      //  let A = 200; 변수의 재선언 불가능!

        function ex2(){

           // A = 200; // 변수의 재사용

            let A = 200; // 변수의 재선언보다는 지역변수 개념에 가까움

            document.write("A: "+A+"<br>");

            document.write("A: "+B+"<br>");

            // let B = 200;

            //-> let은 호이스팅이 X

        }

        ex2();

    </script>

 

 

 

 

const 타입: 변하지 않는 값을 저장하는 타입

- 변수의 재사용 X

- 변수의 재선언 X

- 변수 호이스팅 X

 

<script>

        const C = 200;

        // 재사용 X

        // C = 300;

        // 재선언 X

        //const C = 300;

        document.write("C :"+C);

        function ex3(){

            document.write(D);

            const D = 100;

        }

        ex3();

    </script>

 

 

var 타입: 전역변수를 선언해서 사용

- 변수 재사용 O

- 변수 재선언 O ->가능한 사용 X

- 변수 호이스팅 O

- 최소한의 사용을 권장함(코드 상단 위치)

 

<script>

     //   function js(){

     //   }

     //   js();

     // 익명함수

        var tmp = function(){

        }

        tmp();

        // 즉시 실행 함수

        (function(){

            alert("즉시실행함수 실행!");

        }());

        // 화살표 함수(람다표현식)

     //   const st = "Hello";

    //    const st = function(){

     //       return "Hello";

     //   }

    // const st = () => {return "Hello";}

    // const st = () => return "Hello";

    const st = () => "Hello";

    </script>