이론 - 함수와 이벤트

함수란?

함수 (Function)을 사용하면 무엇이 좋을까?

--> 각 명령의 시작과 끝을 명확하게 구별할 수 있다.

--> 함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.

 

[ user defin function이라고 부름]

ex) function addNumber(){     //<- 선언부

     let sum = 10 + 20;         // {   } 안에 있는 것을 구현부, 정의부라고 함

     console.log(sum);

     }

 

함수 선언 (함수 정의)

--> 함수가 어떤 명령을 처리해야 할지 미리 알려주는 것

--> function 예약어를 사용하고, { } 안에 실행할 명령을 작성

 

함수 호출 ( 함수 실행 )

--> 함수 이름을 사용해 함수 실행

 

ex) addNumber()

--> 30

 

함수는 입력이 있으면 출력이 있다. 하지만 때로는 입력 값이 없을 수도 있고 결과값이 없을 수도 있다.

 

매개변수 ( parameter ) , 인자값

--> 함수를 실행하기 위해 필요하다고 지정하는 값

--> 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음

ex) function addNumber(a, b){       //     a, b    --> 매개변수라고 함    

     let sum = a + b;        

     console.log(sum);

     }

 

인수 ( argument )

--> 함수를 실행하기 위해 필요하다고 지정하는 값

--> 함수를 실행할 때 매개변수로 넘겨주는 값

 

ex) addNumber(2, 3)        // 2, 3을 인수

ex) addNumber(10, 20)        // 10, 20을 인수

 

return 문

--> 함수를 실행한 결과값을 함수 밖으로 넘기는 문

--> 반환된 값은 함수를 호출한 곳으로 넘어감

변수의 적용 범위

스코프 ( scope)

--> 변수를 선언하고 사용할 때 변수가 적용되는 범위

 

지역변수 ( local variable )

--> 변수를 선언한 함수에서만 사용할 수 있는 변수

--> 함수 안에서 변수를 선언할 때 var, let, const 예약어 사용

 

ex) let myVar = 100;    //  전역 변수 선언

     test();

     document.write("myVar is " + myVar);

 

function test(){

myVar = 50;        // 전역변수 선언

}

 

전역변수 ( global variable )

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

--> 함수 밖이라면 var, let, const 예약어를 사용해서 변수 선언

--> 함수 내에서 전역 변수를 선언하려면 var, let, const 예약어 없이 선언

익명함수와 즉시 실행 함수

익명함수 ( 무명 함수, anonymous function )

--> 이름이 없는 함수

--> 함수 자체가 '식( Expression )'이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수도 있음

 

ex) let add = function(a, b){     // 함수 선언 후 변수 add에 할당

          return a +b;

      }

 

ex) let sum = add(10,20); {       // 익명 함수 실행 후 결괏값을 변수 sum에 저장

sum --> 30

 

즉시 실행 함수
--> 함수를 정의함과 동시에 실행하는 함수 
--> 즉시 실행 함수는 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있음.


ex) let result = (function(a , b) {      // 매개 변수 추가
         return  a  + b;
}, (10, 20));         //  인수 추가
console.log(result);

이벤트란?

이벤트(event)란?
--> 웹 브라우저나 사용자가 행하는 동작, 웹 요소를 클릭을 한다던지 마우스가 이동한다던지 등..
--> 사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트가 아님 (예, 브라우저 창의 제목 표시줄 클릭)