함수와 이벤트
<개념 정리>
- 이벤트(Event): 웹 문서에서 버튼을 누르거나 이미지 위에 마우스 포인터를 올려 놓는 등의 사건.
- 함수의 재사용성 : 입력을 바꿔서, 여러번 사용할 수 있는 성질
- 매개변수: 함수를 선언할 때, 함수 이름 옆의 괄호 안에 이름을 넣어줌. 함수를 실행하기 위해 필요하다고 지정하는 값
- 인수: 함수를 실제 실행할 때, 매개벼수 자리에 실제로 넣어주는 값
- ES6에서는, 매개변수가 있는 함수를 선언할 때, 매개변수의 '기본값'을 지정하는 기능도 생김
여러 동작을 묶은 덩어리, 함수
함수, 왜써?
- 자바스크립트에도 여러 함수가 미리 만들어져 있어서, 개발자는 그 함수를 가져다가 사용할 수 있다.
함수 정의와 실행
- 함수를 선언할 때, function이라는 예약어를 사용한다.
-함수 정의와 실행 순서
: 순서는 상관 없다. 마치, C언어에서는, 함수 정의가 가장 함수 실행보다 먼저 와야하지만, C++에서는 상관 없는 것과 마찬가지이다.
: 함수를 선언 후 실행 소스를 작성하나, 함수 실행 소스를 먼저 작성한 후 함수를 선언하나 결과는 같다.
변수의 이해
- 변수에는, 지역변수와 전역변수가 있다.
- ES6버전부터는, 전역변수와 지역변수 말고도, '블록변수'가 추가됨
- 블록변수: 변수를 선언한 블록(중괄호({ })로 묶은 부분)에서만 유효하고, 블록을 벗어나면 사용할 수 없는 변수.
- let 예약어를 사용하여 변수를 선언하면, 블록변수가 된다.
함수의 표현식
함수를 선언한 후, 함수 이름을 사용해 실행하는 것이 기본 방법이지만, 이 외에도 함수를 실행하는 방법이 있다. 이를 '함수 표현식' 이라고 한다.
- 함수 표현식: 익명함수,즉시 실행 함수, 화살표 함수 ...
익명함수
익명함수는 이름이 없는 함수이다. 익명함수는 그 자체로 '식(Expression)'이다.따라서,
- 익명 함수를 변수에 할당할 수 있다.
- 익명함수를 다른 함수의 매개변수로 사용할 수 있다.
- 익명 함수를 실행할 땐, 익명 함수를 선언할 당시, 변수에 할당했었다면 그 변수를 함수의 이름처럼 사용해서, 익명함수를 실행한다.
즉시 실행 함수
1) 즉시실행함수: 함수를 정의함과 동시에 실행하는 함수.
- 함수 선언 소스 전체를 괄호로 묶는다.
- 소스를 닫는 괄호 앞이나 뒤에 인수가 들어갈 괄호 '()' 를 넣는다.
- 방식 1 : 소스를 닫는 괄호 ' ) ' 뒤에, 인수가 들어갈 괄호를 넣는 경우
// 방식1
(
function() {
}
)();
- 방식 2 : 소스를 닫는 괄호 ' ) ' 앞에, 인수가 들어갈 괄호를 넣는 경우
// 방식2
(
function() {
}
());
즉시 실행 함수는 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있다.
- 함수에서 반환한 값을 result변수에 할당한 후 콘솔 창에 표시하는 소스
var result = (function() = {
return 10 + 20;
}());
console.log(result) //콘솔창에는 30이 출력
2) 매개변수가 필요한 즉시 실행 함수 : 함수를 정의할 때, function예약어 괄호 안에 매개변수를 넣는다. 함수 끝에 있는 괄호에는, 실제 실행할 때 사용할 인수를 넣고 실행한다.
var result = (function(a,b) { //매개변수 추가
return a + b;
}(10,20)); //인수 추가
console.log(result);
화살표 함수
ES6버전부터는 '화살표 표기법(=> 표기법)'을 사용해 함수를 좀 더 간단하게 작성할 수 있다.
- 이름이 없는 함수를, 변수에 지정할 때, 많이 사용한다.
- function예약어 사용하지 않음.
- 매개변수를 지정하지 않을 때는, ()만 사용한다.
- 매개변수가 하나라면, 괄호 없이 매개변수만 작성할 수 있다.
- 매개변수가 두 개 이상일 경우는, 기존 매개변수 표기방법과 같다.
자바스크립트 프로그램 안에서, 함수가 스스로 실행되는 경우는 많지 않다. 사용자가 버튼을 누르거나, 목록에서 항목을 선택했을 때, 그에 해당하는 함수가 실행되도록 프로그램을 만드는 경우가 대부분이다.
이를 가능하게 하는 것이 '이벤트 다루기'이다.
즉, 이벤트 = 웹 브라우저나 사용자가 행하는 어떤 동장 / 이벤트 다루기= 사용자 반응에 따라 함수를 실행하는 것
but, 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다.
웹 문서 영역 안에서 이루어지는 동작(ex)웹페이지 읽어 오기, 링크 누르기 등)만 이벤트에 해당.
사용자가 웹 문서 영역을 벗어나 누르는 것(ex)브라우저 창 맨 위의 제목 표시줄 누르기 등)은 이벤트가 아니다.
주요 이벤트들은 다음 게시물에서 설명!