함수와 이벤트
함수
- 함수란 프로그래밍 소스 안에서 일정한 동작을 수행하는 코드들을 의미한다.
- 각 명령의 시작과 끝을 명확하게 구별할 수 있고, 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.
javascript에서의 함수
- 함수 선언 및 호출
- function 예약어를 사용하고, {} 안에 실행할 명령을 작성한다.
// 함수 예약어 함수명 (매개변수/파라미터) { 실행할 코드 } function addNumber (a, b) { return a + b; }- 호출시 함수 이름을 사용한다.
let sum = addNumber(10, 20); console.log("sum : ", sum); // sum : 30- 선언된 함수는 호이스팅이 된다.
- 매개변수(parameter)
- 함수를 실행하기 위해 필요하다고 지정하는 값.
- 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음
- 인수(argument)
- 함수를 실행할 때 매개변수로 넘겨주는 값
- return 문
- 함수를 실행한 결과값을 호출 위치로 넘겨주는 문.
- 스코프(scope)
- 변수와 함수가 접근 가능한 범위
- 전역 스코프 (global variable)
- 스크립트 소스 전체에서 사용할 수 있는 변수
- 지역 스코프 (local variable)
- 특정 부분에서만 접근 가능한 변수. 함수 내부에서 선언된 변수는 그 함수 내부에서만 접근이 가능하다. 이를 함수 스코프라고도 한다.
- 블록 레벨 스코프 (block level scope)
- 해당 변수가 선언된 블록 (중괄호 안)에서만 접근 가능
- let과 const 변수는 블록 레벨 스코프를 가진다.
- 호이스팅 (hoisting)
- 변수(혹은 함수)의 메모리 공간을 선언 전에 미리 할당하는 것이다. 즉, 선언과 동시에 메모리에 해당 변수(함수)를 위한 공간을 할당하고, 값을 초기화 하는 것이다.
- var 호이스팅
- 메모리에 변수 선언 + 'undefined'로 초기화
- let/const 호이스팅
- 메모리에 변수 선언. 단, TDZ(Temporal Dead Zone) 지역에 있어 선언한 코드 줄을 지나야 접근 이 가능하기에 초기화 전에는 사용이 불가능하다.
- 함수 호이스팅
- 함수 선언식 (function func()과 같은 경우)은 코드의 최상단으로 호이스팅 된다.
- 함수 표현식 (let func = functin()과 같은 경우)는 변수 호이스팅과 같은 규칙을 따른다.
익명 함수와 즉시 실행 함수
-
익명 함수 (무명 함수, anonymous function)
- 이름이 없는 함수.
- 즉, 함수라는 정의만 하고 해당 함수의 이름을 정의하지 않는 함수이다.
- 함수 자체가 '식(Expression)'이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있다.
- 익명 함수는 호이스팅이 일어나지 않고 실행할 때만 메모리에 올라가는 함수이다. 따라서 일회성 함수에서 많이 쓰이는 형태이다.
-
즉시 실행 함수
- 함수를 정의함과 동시에 실행하는 함수
- 즉시 실행 함수는 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있다.
- 기본 형태 (function() { 실행할 코드 }) ();
이벤트
- 이벤트 (event)
- 웹 브라우저나 사용자가 행하는 동작
- 사용자가 웹 문서 영역을 벗어나 하는 행동은 이벤트가 아니다.
- 종류
- 마우스 이벤트
- click, doubleclick, mouseover, mouseout 등...
- 키보드 이벤트
- keypress, keydown, keyup 등...
- 폼 이벤트
- blur, change, focus 등...
- 문서 로딩 이벤트
- load, error, scroll 등...
- 마우스 이벤트
