함수와 var

1. 함수란?

동작해야 할 목적대로 묶은 명령

<script>
	function addNumber(){ //함수 선언
    	var num1 = 2;
        var num2 = 3;
        var sum = num1 + num2;
        alert(sum);
    } 
    addNumber() //함수 호출
</script>

함수를 선언만 하는 것으로는 실행이 되지 않는다.

꼭 호출을 해야한다.

(단, 함수 호출을 먼저 한 후 함수 선언을 작성해도 문제 없이 실행 된다.)

 

2. var를 사용한 변수

지역변수 : 한 함수 안에서만 사용할 수 있는 변수

전역변수 : 스크립트 소스 전체에서 사용할 수 있는 변수

 

① var는 지역변수이다.

함수 안에서 선언하고 함수 안에서만 사용한다.

<script>
	function addNumber(){ //함수 선언
            var sum = 10 + 20;
        }
        addNumber(); //함수 호출
        console.log(sum);
</script>

오류

지역변수 sum은 addNumber() 안에서 선언했는데

함수 addNumber() 밖의 다른 함수 console.log()에서 사용해서 오류 발생

 

② var를 전역변수로 사용하기

함수 밖에서 선언하거나

함수 안에서는 var를 빼고 선언

<script>
	var sum; //함수 밖에서 선언
    function addNumber(){
    	sum = 10 + 20;
    }
    addNumber();
    console.log(sum);
</script>

<script>
	function multiNumber(){ //var 빼고 선언
   	    multi = 10 * 20;
    }
    multiNumber();
    console.log(multi);
</script>

 

③ 호이스팅

변수의 선언과 할당을 분리해서

선언 부분을 가장 위쪽으로 끌어올려 해석한다는 의미

<script>
        var x = 10;

        function displayNumber(){
            console.log("x is " + x);
            console.log("y is " + y);
            var y = 20;
        }
        displayNumber();
        
        
        /*해석기가 인식하는 코드
        var x = 10;

        function displayNumber(){
            var y; //선언부분이 끌어올려짐
            console.log("x is " + x);
            console.log("y is " + y);
            y = 20; //할당은 나중에
        }
        displayNumbr();*/
    </script>

 

④ 재선언, 재할당

<script>
        function add(num1, num2) { //함수 선언
            return num1 + num2;
        }
        var sum = add(10, 20); //함수 호출
        console.log(sum);

        sum = 50; //재할당
        console.log(sum);

        var sum = 100; //재선언
        console.log(sum);
    </script>

재선언, 재할당

 

 

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.