JavaScript - 함수와 이벤트

하쮸·2025년 6월 3일
JavaScript

JavaScript

목록 보기
2/4

1. 함수.

  • 동작해야 할 목적대로 묶은 명령을 함수(function)라고 함.
  • 함수를 사용하면 명령의 시작과 끝을 명확하게 구별할 수 있고 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있음.

1-1. 함수 선언 및 호출.

  • 자바스크립트에서 함수를 선언할 때는 예약어 function을 사용하고 중괄호({})안에 실행할 여러 명령을 넣음.
function 함수명() {
  // 명령.
}
  • 함수를 호출할 때는 선언되어 있는 함수명을 써서 사용함.
함수명();
함수명(변수);

1-1-1. 함수 선언과 실행 순서.

  • 웹 브라우저에서 자바스크립트 소스를 해석할 때에는 함수 선언 부분을 가장 먼저 함.
    • 따라서 원하는 어느 곳에 함수를 선언해 놓기만 하면 선언한 위치와 상관없이 함수를 실행할 수 있음.
// 1.
addNum();
function addNum() {
  ...
}
  
// 2.
function addNum() {
  ...
}
addNum();
  • 1, 2 둘 다 문제없이 잘 실행되는 코드임.
  • 즉, 함수 선언 위치는 프로그램 흐름에 영향을 주지 않음.
    • 그래서 일반적으로 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분을 모아 놓고 필요할 때마다 함수를 호출해서 사용함.

2. var.

  • 자바스크립트 ES6 버전에서 let, const라는 새로운 예약어가 등장했음.
    • Why? 이 부분을 이해하려면 먼저 var예약어를 사용한 변수의 특징을 알아야됨.

2-1. 스코프.

  • 자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프(scope)라 함.
    • 하나의 함수 안에서만 사용할 수 있는 변수 : 지역 변수 or 로컬 변수.
    • 스크립트 소스 전체에서 사용할 수 있는 변수 : 전역 변수 or 글로벌 변수.
  • 지역 변수.
    • 함수 안에서 선언해서 함수 안에서만 사용함.
    • 지역 변수를 선언하려면 예약어 var와 함께 변수 선언하면됨.
  • 전역 변수.
    • 스크립트 소스 코드 전체에서 사용할 수 있음.
    • 함수 밖에서 선언하거나
      함수 안에서는 var 예약어를 빼고 선언하면 됨.
      • 즉, 함수 안에서 선언한 변수라도 var 예약어를 사용하지 않으면 전역 변수임.

2-2. 호이스팅.

  • 호이스팅(hoisting)이란?
    • hoisting = 끌어올린다.
    • 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 식으로 소스를 해석함.
// 1. 실제 코드.
var x = 1;

function num() {
  console.log("x : " + x);
  console.log("y : " + y);
  var y = 2;
}
num();

// 2. 자바스크립트 해석기가 인식하는 코드.
var x = 1;

function num() {
  var y;
  console.log("x : " + x);
  console.log("y : " + y);
  y = 2;
}
num();

  • var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 아직 할당되지 않은 자료형인 undefined값을 가질 수 있음.
    • 호이스팅 때문.
  • 자바스크립트 해석기(interpreter)는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해둠.

2-3. 변수 재선언, 재할당.

  • var를 사용한 변수는 호이스팅 외에도 재선언과 재할당을 할 수 있음.

3. let, const.

  • var를 보완한 let와 const.
    • var
      • 함수 영역(레벨)의 스코프를 가졌음.
    • let, const
      • 블록 영역의 스코프를 가졌음.

3-1. let 변수 특징.

3-1-1. 블록 안에서만 쓸 수 있는 변수.

  • let 예약어로 선언한 변수는 변수를 서언한 블록({})에서만 유효하고 블록을 벗어나면 사용할 수 없음.
    • {}블록이나 ()블록 안에서만 사용할 수 있는 변수를 '블록 변수'라고 함.
  • 만약 전역 변수를 선언하고 싶다면 let를 사용하지 않고 변수 이름과 초깃값만 할당하면 됨.

3-1-2. 재할당 O, 재선언 X

  • let예약어를 사용해서 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없음.
  • 재선언할 경우?
    • Uncaught SyntaxError: Identifier '변수명' has already been declared

3-1-3. 호이스팅 없음.

  • let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지가 나타남.
    • Uncaught ReferenceError: Cannot access '변수명' before initialization

3-2. const 변수 특징.

  • const로 선언한 변수는 상수 변수(constant variable)임.
    • 즉, 변하지 않는 값을 변수로 선언할 때 const를 사용함.
  • const로 할당한 변수는 재선언, 재할당을 할 수 없고 let과 마찬가지로 블록 레벨의 스코프를 가짐.

3-3. 결론.

  • 값이 자주 바뀌는 변수는 let을 사용하고 재할당이 없는 변수라면 const를 사용.

  • 자바스크립트는 유연성이 많아 편리한 언어이지만, 이러한 편리성으로 인해 가독성이나 디버깅을 어렵게 만듦.

  • 전역 변수는 최소한으로 사용.

    • 전역 변수가 많아질 경우 오류가 발생할 확률이 높아짐.

  • var 변수는 함수의 시작 부분에서 선언.

    • var 변수는 어디에서 선언하든 상관없지만 호이스팅으로 인해 오류가 발생할 수 있음.

  • for문에서 카운터 변수는 var를 사용하지 않음.

    • var 변수는 함수 레벨의 스코프이므로 for문 밖에서 선언하거나 let를 사용해서 블록 변수로 선언하는 것이 좋음.

  • ES6에서는 var보단 let를 사용하는 것이 좋음.

    • var 변수는 재선언할 수 있으므로 실수로 같은 변수를 다시 선언하더라도 오류가 발생하지 않음.
      재선언할 수 없는 let를 사용하는 것이 좀 더 안전함.

4. 재사용할 수 있는 함수.

  • 재사용성은 함수의 가장 큰 장점.
function addNumber(num1, num2){				// 매개변수. (parameter)
  var sum = num1 + num2;			
  return sum;
}
var result = addNumber(2, 3);					// 인수. (argument)
document.write("두 수를 더 한 값 : " + result);
  • num1, num2 : 매개변수(parameter) -> 외부에서 값을 받아줄 변수.
  • 2, 3 : 인수(argument) -> 매개변수가 있는 함수를 호출할 때의 실제 값.
  • return sum : 반환값
  • 매개변수 기본값 지정.
    • ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정할 수 있는 기능도 생김.
    • 매개변수가 값을 넘겨받지 못했을 때 기본값을 사용함.
function multiple(a, b = 2 c = 3 {
  return a * b + c;
}
  • multiple(1);로 호출한다면
    a = 1, b= 2, c = 3을 사용하게 됨.

5. 함수 표현식.

5-1. 익명 함수.

  • 익명 함수란?
    • 이름이 없는 함수.
    • 즉, 선언할 때 이름을 붙이지 않음.
function(a, b) {
  return a + b;
}
  • 익명 함수는 이름이 없는데 어떻게 실행함?
    • 익명 함수는 함수 자체가 식(expression)이므로 함수를 변수에 할당할 수 있고
      또한 다른 함수의 매개변수로 사용할 수도 있음.

5-2. 즉시 실행 함수.

  • 즉시 실행 함수란?
    • 함수를 정의하면서 동시에 실행할 수 있는 것.
    • 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석함.
(function() {
  // 명령
}());

또는

(function(매개변수) {
  // 명령
}(인수));
  • 함수를 식 형태로 선언하므로 마지막에 세미콜론(;)을 붙임.

5-3. 화살표 함수.

  • ES6 버전부터는 =>(화살표) 표기법을 사용해 함수 선언을 좀 더 간단하게 할 수 있음.
    • 익명 함수에서만 사용할 수 있음.
(매개변수) => {
  // 함수 내용
}

5-3-1. 매개변수가 없을 경우.

  • 매개변수를 넣는 괄호 안을 비워둠.
const tmp = function() {
  return "가나다";
}

↓

const tmp = () => {
  return "가나다"
};

5-3-2. 매개변수가 1개인 경우.

let tmp = function(user) {
  document.write(user + "님 안녕하세요");
}

↓

let tmp = (user) => {
  document.write(user + "님 안녕하세요");
}

5-3-3. 매개변수가 2개인 경우.

let sum = function(a, b) {
  return a + b;
}

↓

let sum = (a, b) => {
  return a + b;
}

6. 이벤트와 이벤트 처리기.

  • 사용자가 버튼을 클릭하거나 항목을 선택하는 것을 이벤트라고 함.
  • 이벤트가 발생했을 때 실행하는 함수를 이벤트 처리기라고 함.

6-1. 이벤트.

  • 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 의미함.
    • Ex) 키보드로 키를 누르는 것, 웹 브라우저에서 새로운 페이지를 불러오는 것 등등.
    • 다만, 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아님.
  • 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 의미함.
    • 그래서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아님.
  • 자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼(form)에 내용을 입력할 때 발생함.

6-1-1. 마우스 이벤트.

  • 마우스 버튼이나 휠 버튼을 조작할 때 발생함.
종료설명
click- 사용자가 HTML 요소를 클릭할 때 이벤트가 발생함.
dbclick- 사용자가 HTML 요소를 더블 클릭할 때 이벤트가 발생함.
mousedown- 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생함.
mousemove- 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생함.
mouseover- 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생함.
mouseout- 마우스 포인터가 요소를 벗어날 때 이벤트가 발생함.
mouseup- 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생함.

6-1-2. 키보드 이벤트.

  • 키보드에서 특정 키를 조작할 때 발생함.
종류설명
keydown- 사용자가 키를 누르는 동안 이벤트가 발생함.
keypress- 사용자가 키를 눌렀을 때 이벤트가 발생함.
keyup- 사용자가 키에서 손을 뗄 때 이벤트가 발생함.

6-1-3. 문서 로딩 이벤트.

  • 웹 문서를 브라우저 창에 보여 주는 것과 관련된 이벤트.
종류설명
abort- 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생함.
error- 문서가 정확히 로딩되지 않았을 때 이벤트가 발생함.
load- 문서 로딩이 끝나면 이벤트가 발생함.
resize- 문서 화면 크기가 바뀌었을 때 이벤트가 발생함.
scroll- 문서 화면이 스크롤 되었을 때 이벤트가 발생함.
unload- 문서에서 벗어날 때 이벤트가 발생함.

6-1-4. 폼 이벤트.

  • 폼 요소에 내용을 입력하면서 발생하는 이벤트.
    • 폼(form)은 로그인, 검색, 게시판처럼 사용자가 입력하는 모든 요소를 가리킴.
종류설명
blur- 폼 요소에 포커스를 잃었을 때 이벤트가 발생함.
change- 목록이나 체크 상태 등이 변경되면 이벤트가 발생함.
- <input>, <select>, <textarea>태그에서 사용함.
focus- 폼 요소에 포커스가 놓였을 때 이벤트가 발생함.
- <label>, <select>, <textarea>, <button> 태그에서 사용함.
reset- 폼이 리셋되었을 때 이벤트가 발생함.
submit- submit 버튼을 클릭했을 때 이벤트가 발생함.

6-2. 이벤트 처리기.

  • 웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 or 이벤트 핸들러(event handler)라고 함.

    • Ex) 이미지를 클릭하면 큰 이미지를 보여줌.
      • 이미지 클릭 : 이벤트.
      • 큰 이미지 표시 : 이벤트 처리기.

  • 이벤트를 처리하는 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것.

  • ↓ 이벤트 처리기의 기본형식.

    • HTML 태그안에서 'on' 다음에 '이벤트명'을 붙여서 속성 이름을 만들고, 그 후 실행할 이벤트 처리기의 함수명을 작성.
<태그 on이벤트명 = "함수명">
<body>
	<ul>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
	</ul>		
	<div id="result"></div>
</body>
  • 이벤트가 발생한 후에 여러 가지 명령을 실행해야 한다면 해당 명령들을 묶어서 하나의 자바스크립트 함수로 만드는 것이 좋음.
    • 이벤트가 발생할 때 함수 이름과 인수를 지정하여 실행함.
<body>
	<ul>
		<li><a href="#" onclick="changeBg('green')">Green</a></li>
		<li><a href="#" onclick="changeBg('orange')">Orange</a></li>
		<li><a href="#" onclick="changeBg('purple')">Purple</a></li>
	</ul>		
	<div id="result"></div>
	
	<script>
		function changeBg(color) {
      		// querySelector('#result') : div id="result" 선택.
			var result = document.querySelector('#result');
			result.style.backgroundColor = color;
		}
	</script>
</body>

7. DOM을 이용한 이벤트 처리기.

  • HTML 요소에 이벤트 처리기를 지정하면 태그 속성과 자바스크립트 소스가 섞임.
    • 이로인해 자바스크립트를 수정하려면 HTML의 태그와 속성을 하나씩 찾아봐야 하는 단점이 있음.
  • DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 보기 좋게 할 수 있음.
    • 즉, DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결함.

Ex. 웹 요소를 클릭했을 때 실행할 함수를 연결.

웹 요소.onclick = 함수;
  • 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있음.
    • 가장 쉬운 방법은 querySelector()함수를 사용해서 가져오는 것.
      • 함수의 괄호(())안에는 클래스 이름 or id이름 or 다양한 선택자를 넣을 수 있음.

↓ Ex) 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용

<body>
	<button id="change">글자색 바꾸기</button>	
	<p>가나다라마바사</p>
	
  
  	<!-- 방법 1. -->
	<script>
    var changeBttn = document.querySelector("#change");     // 버튼 요소를 가져와서 changeBttn에 저장.
    changeBttn.onclick = changeColor;                       // 함수 이름 뒤에 괄호'()'가 없다는 것에 주의할 것.
    
	  function changeColor() {
      document.querySelector("p").style.color = "#f00";
    }
	</script>
</body>

↓ Ex) 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용. (웹 요소를 여러 번 사용하지 않을 경우.)

document.querySelector("#change").onclick = changeColor;

function changeColor() {                             
  document.querySelector("p").style.color = "#f00";
}
  • 웹 요소를 프로그램 안에서 여러 번 사용하지 않는다면 변수에 할당하지 않고 직접 사용해도 됨.

↓ Ex) 방법 3 : 직접 함수를 선언 (함수를 딱 한 번만 사용한다면.)

document.querySelector("#change").onclick = function() {
  document.querySelector("p").style.color = "#f00";
};
  • 함수를 딱 한 번만 사용한다면 함수 이름이 들어갔던 자리에 직접 함수를 선언해도 됨.
profile
하쮸
Every cloud has a silver lining.
이전 포스트

JavaScript - 개념과 문법.

다음 포스트

JavaScript - JavaScript와 객체

0개의 댓글