Java Script #3 함수와 이벤트(함수, var 특징, let , const , 함수 표현식)

1. 함수

1) 함수란

• 동작해야 할 목적대로 명령을 묶어 놓은 것

• 각 명령의 시작과 끝을 명확하게 구별할 수 있음

• 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있음

• 자바스크립트에는 이미 여러 함수가 만들어져 있어서 가져다 사용할 수 있음
예) alert( )

 

2) 함수의 선인 및 호출

• 함수 선언 : 어떤 명령을 처리할지 미리 알려주는 것

• 함수 호출 : 선언한 함수를 사용하는 것

 

<script>
	function addNumber() {
    	var num1 = 2;
        var num2 = 3;
        var sum = num1 + num2;
        alter ("결과 값" + sum);
        }
        
    addNumber(); // 함수 호출하기!
    addNUmber(); // 함수 2번 호출!

2. var를 사용한 변수의 특징

a. 지역 변수

• 함수 안에서 선언하고 함수 안에서만 사용함

• var과 함께 변수 이름 지정

b. 전역 변수

• 스크립트 소스 전체에서 사용함

• 함수 밖에서 선언하거나 함수 안에서 var 없이 선언

c. var 변수와 호이스팅

<script>
	var x =10;
    
    function dispalyNumber() {
    	console.log("x is" + x);
        console.log("y is" + y);
        var y =20; // 호이스팅 적용! 변수가 뒤에 있지만 앞에 있는 것 처럼 인식
      }
      
      displayNumber();
 </script>

호이스팅

- 변수를 뒤에서 선언하지만, 마치 앞에서 미리 앞에서 선언한 것처럼 인식함

- 함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로 끌어올려 인식함

 

d. 재선언과 재활당이 가능하다

• 재선언 : 이미 선언한 변수를 다시 선언할 수 있음

• 재할당 : 같은 변수에 다른 값을 할당할 수 있음

-> 재선언과 재할당이 가능하면 실수로 변수를 잘못 조작할 확률이 높아짐

 

<script>
	function addNumber(num1, num2) {
      return num1 + num2; // 2개의 수 더하기
     }
     var sum = addNumber(10,20); // sum 변수 선언 , 함수 호출
     console.log(sum);
     sum = 50; // sum 변수 재할당
     console.log(sum);
     var sum = 100; // sum 변수 재선언
     console.log(sum);
</script>

실행결과:

3. let 과 const의 등장

1) let을 사용한 변수의 특징

• 블록 변수 – 블록({ }) 안에서만 사용할 수 있다
-> 전역 변수는 변수 이름과 초기값만 할당하면 됨

• 재할당은 가능하지만 재선언은 할 수 없다

• 호이스팅이 없다

 

2) const를 사용한 변수의 특징

• 상수 - 변하지 않는 값을 선언할 때 사용

• 재선언, 재할당할 수 없음

 

3) 매개 변수와 인수 , return 문

• 매개 변수 : 하나의 함수를 여러 번 실행할 수 있도록 실행할 때마다 바뀌는 값을 변수로 처리한 것

• 인수 : 함수를 실행할 때 매개 변수 자리에 넘겨주는 값

4. 함수 표현식

1) 익명 함수

• 함수 이름이 없는 함수

• 함수 자체가 식이므로 함수를 변수에 할당할 수도 있고, 다른 함수의 매개변수로 사용할 수도 있음

var sum function (a,b) {
	return a + b;
    }
document.write("함수 실행 결과 : " + sum(10,20) );

 

2) 즉시 실행 함수

• 함수를 실행하는 순간 자바스크립트 해석기에서 함수를 해석함

• 식 형태로 선언하기 때문에 함수 선언 끝에 세미콜론(;) 붙임

<script>
	(function(a,b) {
    	sum = a + b; // a,b 매개변수
       }(100,200)); // 인수
       document.write("함수 실행 결과 : " + sum);
</script>