[JavaScript] 함수(1)

함수(function)

하나의 특별한 목적으로 작업을 수행하도록 설계된 독립적인 블록을 의미한다. 필요할 때마다 호출하면 반복해서 사용 가능!

 

---

 

반환문(return)

함수는 반환문을 포함할 수 있다. 호출자가 함수에서 실행된 결과를 반환을 통해서 받을 수 있다. return는 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다. 

 

        function multiNum(x, y)
        {
            return x*y; 
        }
        let a = multiNum(3,4);
        document.write(a);

 

multiNum(3,4) 인자값 3,4가 함수로 전달된다.

함수가 호출되고 계산을 한 뒤 리턴값이 a에 저장된다.

 

---

변수의 유효 범위

1. 지역 변수 (local variable)

2. 전역 변수 (global variable)

 

 

지역변수 : 함수 내 선언된 변수로 함수 내에서만 유효하고 종료되는 순간 메모리에서 사라진다. 함수의 매개변수 값도 함수 내에서만 동작하는 지역변수이다. 

 

        function localNum()
        {
            var num = 10;
            document.write("함수 내부에서 변수 num의 타입은" + typeof num + "입니다. <br />");
            
        }
        localNum();
        document.write("함수 내부에서 변수 num의 타입은" + typeof num + "입니다. <br />");

 

함수 내부에서 변수 num의 타입은number입니다. 함수 내부에서 변수 num의 타입은undefined입니다.

 

함수 안에서 num을 선언 및 세팅한 지역변수이기 때문에 아래의 typeof 연산자의 결과값은 undefined 값을 반환한다.

 

변수 선언이 되지 않았을 때나 변수 선언은 됐는데 초기값을 세팅하지 않을 경우 자바스크립트에서는 undefined 값을 반환한다. 다른 언어의 경우 변수 선언을 하면서 데이터타입을 결정하지만 자바스크립트는 따로 선언하지 않고 변수를 만들기 때문에 타입설정이 되어 있지 않으니 undefined가 뜨는 것임!

 

 

 

전역변수 : 함수 외부에서 선언된 변수이다. 프로그램 어디서든지 접근이 가능하다. 대신에 페이지가 닫히면 메모리를 삭제한다.

 

        var num = 10;
        function globalNum()
        {
            document.write("함수 내부에서 변수 num의 값은" + num + "입니다. <br />");
            num = 20; //전역변수 num값을 내부에서 변경
        }
        globalNum();
        document.write("함수의 호출이 끝난 뒤 변수 num의 값은" + num + "입니다. <br />");

함수 내부에서 변수 num의 값은10입니다. 함수의 호출이 끝난 뒤 변수 num의 값은20입니다.

 

 

	function globalNum()
        {
            num = 10;
            document.write("함수 내부에서 변수 num의 값은" + num + "입니다. <br />");
        }
        globalNum();
        document.write("함수의 호출이 끝난 뒤 변수 num의 값은" + num + "입니다. <br />");

함수 내부에서 변수 num의 값은10입니다. 함수의 호출이 끝난 뒤 변수 num의 값은10입니다.

함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면 해당변수는 전역변수가 됨

 

 

        var num = 10;
        function globalNum()
        {
            var num = 20;    
            document.write("함수 내부에서 변수 num의 값은" + num + "입니다. <br />");
        }
        globalNum();
        document.write("함수의 호출이 끝난 뒤 변수 num의 값은" + num + "입니다. <br />");

함수 내부에서 변수 num의 값은20입니다. 함수의 호출이 끝난 뒤 변수 num의 값은10입니다.

전역변수와 같은 이름의 지역변수 선언시 함수내에서는 지역변수만을 출력할 수 있다.

 

 

        var num = 10;
        function globalNum()
        {
            var num = 20;    
            document.write("함수 내부에서 지역변수 num의 값은" + num + "입니다. <br />");
            document.write("함수 내부에서 전역변수 num의 값은" + window.num + "입니다. <br />");
        }
        globalNum();

함수 내부에서 지역변수 num의 값은20입니다. 함수 내부에서 전역변수 num의 값은10입니다.

함수내에서 전역변수를 호출하려면 전역변수에 window 객체의 프로퍼티임을 명시한다. 

 

---

매개변수(parameter)

자바스크립트에서는 함수 정의 시 매개변수 타입을 따로 명시하지 않는다. 함수 호출시 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다. 함수를 호출할 때 함수의 매개변수보다 적은 인수가 전달되더라도 오류가 발생하지 않음! 대신 나머지 매개변수에 자동으로 undefined 값을 설정한다. 

 

        document.write("<br /><br />");
        document.write("*****addNum*****");
        document.write("<br />");

        function addNum(x, y, z)
        {
            return x+y+z;
        }
        document.write("addNum(1, 2, 3) : " + addNum(1, 2, 3) + "<br />");
        document.write("addNum(1, 2) : " + addNum(1, 2) + "<br />");
        document.write("addNum(1) : " +  addNum(1) + "<br />");
        document.write("addNum() : " + addNum() + "<br />");
        //매개 변수가 비어있는 곳의 경우 undefined 값이라서 결과가 NaN으로 뜬다.

*****addNum***** addNum(1, 2, 3) : 6 addNum(1, 2) : NaN addNum(1) : NaN addNum() : NaN

 

addNum()함수를 호출할 때 인수가 세 개보다 적게 전달되면, 계산할 수 없다는 의미인 NaN 반환을 한다. 전달되지 않은 값에 대해서 자동으로 undefined값으로 설정되기 때문에 산술연산을 할 수 없음

 

 

만약 앞의 예제에서 NaN 값을 반환하지 않고 전달된 인수만 가지고 계산을 하고 싶다면?

        document.write("*****addNum2*****");
        document.write("<br />");

        function addNum2(x, y, z)
        {
            if(x === undefined) x = 0;
            if(y === undefined) y = 0;
            if(z === undefined) z = 0;
            return x+y+z;
        }
        document.write("addNum2(1, 2, 3) : " + addNum2(1, 2, 3) + "<br />");
        document.write("addNum2(1, 2) : " + addNum2(1, 2) + "<br />");
        document.write("addNum2(1) : " +  addNum2(1) + "<br />");
        document.write("addNum2() : " + addNum2() + "<br />");
        //undefined 설정을 하면 NaN이 나오지 않는다.

*****addNum2***** addNum2(1, 2, 3) : 6 addNum2(1, 2) : 3 addNum2(1) : 1 addNum2() : 0

 

---

아규먼츠(Arguments) 객체

 

함수의 정의보다 더 많은 수의 인수가 전달되었을 때 아규먼츠 객체를 이용해 함수로 전달된 인수의 총 개수를 확인하거나 각각의 인수에도 바로 접근할 수 있다.

 

        document.write("*****addNum3*****");
        document.write("<br />");

        function addNum3() //매개변수가 없음
        {
            var sum = 0;

            for(var i=0; i<arguments.length; i++)
            {
                sum += arguments[i];
            }
            return sum;
        }
        
        document.write("addNum3(1, 2, 3) : " + addNum3(1, 2, 3) + "<br />");
        document.write("addNum3(1, 2) : " + addNum3(1, 2) + "<br />");
        document.write("addNum3(1) : " + addNum3(1) + "<br />");
        document.write("addNum3() : " + addNum3() + "<br />");
        document.write("addNum3(1,2,3,4,5,6,7,8,9,10) : " + addNum3(1,2,3,4,5,6,7,8,9,10) + "<br />");

 

전달받은 인수의 개수에 상관 없이 정상적인 계산을 수행할 수 있다. 아규먼츠 객체는 배열과 비슷하지만 Array 객체는 아니므로, 인덱스와 length 프로퍼티만을 가지고 있을 뿐 모든 것을 배열처럼 다룰수는 없다.