LGHV_3기_함수와 이벤트_JavaScript(3)

Pepzera·2025년 3월 17일

LG 헬로비전 DX DATA SCHOOL 3기 공부 정리 웹 개발

LGHV3기_공부정리

목록 보기

28/34

Chap 03 함수와 이벤트

함수와 이벤트

1. 함수

함수란? 🧐

동작해야 할 목적대로 명령을 묶어 놓은 것
각 명령의 시작과 끝을 명확하게 구별할 수 있음
묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있음❗❗
자바스크립트에는 이미 여러 함수가 만들어져 있어서 가져다 사용할 수 있음 (python의 print()함수 처럼!)
- 예 ) alert( )

함수의 선언 및 호출

함수 선언

어떤 명령을 처리할지 미리 알려주는 것
기본형

  function function_name() {
	명령
  }

함수 호출

선언한 함수를 사용하는 것 (까먹지 말고 꼭 하기!)
기본형

  function_name() 또는 function_name(변수)

코드 예시 ) - 두 수를 더하는 함수 만들고 호출

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>함수</title>
</head>
<body>
	<script>		
		function addPlus(){
			let add1 = 50;
			let add2 = 30;
			let sum = add1 + add2;
			alert(`결과는 ${sum}입니다.`)
		}

		addPlus()
	</script>	
</body>
</html>

결과 )

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

스코프

변수가 적용되는 범위
- 스코프에 따라 지역 변수(로컬 변수)와 전역 변수(글로벌 변수)로 나뉨.
- var 예약어를 사용한 변수는 함수 스코프를 가짐

지역 변수

함수 안에서 선언하고 함수 안에서만 사용함
var과 함께 변수 이름 지정
- 함수 내에서 선언한 result 때문에 전역 부분에서 result 변수를 요청하면 오류가 난다!

전역 변수

스크립트 소스 전체에서 사용함
함수 밖에서 선언하거나 함수 안에서 var 없이 선언

var 변수와 호이스팅

코드 예시 )

호이스팅

변수를 뒤에서 선언하지만, 마치 앞에서 미리 앞에서 선언한 것처럼 인식함.
- undefined 값으로 인해 엉뚱한 결과 발생
- 아예 오류를 발생하는 것이 안전할 수 있음!
함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로 끌어올려 인식함. (자바스크립트의 실행방식이라서 ..)

재선언과 재할당이 가능하다

재선언 : 이미 선언한 변수를 다시 선언할 수 있음.
재할당 : 같은 변수에 다른 값을 할당할 수 있음.
- 재선언이 가능하면 실수로 변수를 잘못 조작할 확률이 높아짐!!!

코드 예시 ) - 3의 배수를 만들려고 했는데 var num이란 변수를 재선언 )

var num = 3;

for (let i=1; i<=10; i++){
  var num=5;
  var multipleResult = num * i;
  console.log(`${num} X ${i} = ${multipleResult}`);
}

결과 )

3. let과 const의 등장

let을 사용한 변수의 특징

블록변수 - 블록 ( { } ) 안에서만 사용할 수 있다.
- 전역 변수는 변수 이름과 초깃값만 할당하면 됨.
재할당은 가능하지만 재선언은 할 수 없다.
호이스팅이 없다!!!
코드 예시 )

function sum() {
  let num = 5;
  let result = 0;
  for (let i = 1; i <= num; i++){
    result = result + i;
  }
  console.log(result);
}

sum();
console.log(result);

결과 )

const를 사용한 변수의 특징

상수 - 변하지 않는 값을 선언할 때 사용
재선언, 재할당할 수 없음.

자바스크립트 변수, 이렇게 사용하자 ❗❗❗

전역 변수는 최소한으로 사용
var 변수를 써야 한다면 함수의 시작 부분에서 선언
for 문에서 카운터 변수는 var보다 let 변수로 선언
ES6를 사용한다면 var보다 let을 사용하는 것이 좋다.

4. 재사용할 수 있는 함수 만들기

매개 변수와 인수, return문

매개 변수 : 하나의 함수를 여러 번 실행할 수 있도록 실행할 때마다 바뀌는 값을 변수로 처리한 것.
인수 : 함수를 실행할 때 매개 변수 자리에 넘겨주는 값
매개 변수와 인자를 합쳐서 인자라고도 부름

자바스크립트 해석기가 function이라는 예약어를 만나면 함수를 선언하는 부분이라는 걸 인식하고 함수 블록을 해석한다. 아직 실행 X
mul(8, 5)을 만나면 해석해 두었던 mul( ) 함수를 실행함.
mul( ) 함수에서 8은 num1으로 5는 num2로 넘기고 곱한 값을 multiple 변수에 저장.
함수 실행이 모두 끝나면 multiple 값을 return
넘겨받은 결괏값(multiple)을 result라는 변수에 저장
result 변수에 있는 값을 화면에 표시.

매개 변수 기본값 지정하기

ES6부터는 매개변수에 기본값을 지정할 수 있다.
함수를 실행할 대 변수값을 넘겨 받지 못하면 기본값을 사용함.
코드 예시 )

function mul(num1, num2 = 5, num3 = 10){
  return num1 + num2 + num3;
}

let result1 = mul(5, 10, 15);
console.log(result1);
let result2 = mul(5, 10);
console.log(result2);
let result3 = mul(20);
console.log(result3);

결과 )

5. 함수 표현식

익명 함수

함수 이름이 없는 함수
함수 자체가 식이므로 함수를 변수에 할당할 수도 있고, 다른 함수의 매개변수로 사용할 수도 있음.
변수에 할당된 익명 함수는 변수를 이용해 함수 실행

즉시 실행 함수

함수를 실행하는 순간 자바스크립트 해석기에서 함수를 해석함.
식 형태로 선언하기 때문에 함수 선언 끝에 세미콜론(;)을 붙임.
기본형

(function() {
	명령
}());

// 또는

(function(매개변수) {
	명령
}(인수));

화살표 함수

ES6 이후 사용하는 = > 표기법
익명 함수에서만 사용할 수 있음.
기본형

(매개변수) => { 함수 내용 }

매개 변수 없을 경우

// 원래 식
const hello = function() {
	return alert("하이헬로우");
}

// 🔽

const hello = () => {return alert("하이헬로우")};

// 🔽 return 생략

const hello = () => alert("하이헬로우");

매개 변수 있을 경우

let hello = function(user) {
	document.write (user + "님, 하이!");
}

// 🔽

let hello = user => {document.write (user + "님, 하이!");}

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

// 🔽

let sum = (a,b) => a + b;

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

이벤트

웹 브라우저나 사용자가 행하는 동작
웹 문서 영역안에서 이루어지는 동작만 가리킴!
주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생

키보드 이벤트

종류	설명
`keydown`	사용자가 키를 누르는 동안 이벤트가 발생
`keypress`	사용자가 키를 눌렀을 때 이벤트가 발생
`keyup`	사용자가 키에서 손을 뗄 때 이벤트가 발생

마우스 이벤트

종류	설명
`click`	사용자가 HTML 요소를 클릭할 때 이벤트가 발생
`dblclick`	사용자가 HTML 요소를 더블 클릭할 때 이벤트가 발생
`mousedown`	사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생
`mousemove`	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생
`mouseover`	마우스 포인터가 요소 위로 움직일 때 이벤트 발생
`mouseout`	마우스 포인터가 요소를 벗어날 때 이벤트 발생
`mouseup`	사용자가 요소 위에 놓은 마우스 버튼에서 손을 뗄 때 이벤트가 발생

문서 로딩 이벤트

종류	설명
`abort`	문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생
`error`	문서가 정확히 로딩되지 않았을 때 이벤트 발생
`load`	문서가 로딩이 끝나면 이벤트 발생
`resize`	문서 화면 크기가 바뀌었을 때 이벤트 발생
`scroll`	문서 화면이 스크롤되었을 때 이벤트 발생
`unload`	문서에서 벗어날 때 이벤트 발생

폼 이벤트

종류	설명
`blur`	폼 요소에 포커스를 잃었을 때 이벤트 발생
`change`	목록이나 체크 상태 등이 변경되었을 때 이벤트 발생. `<input>`, `<select>`, `<textarea>` 태그에서 사용
`focus`	폼 요소에 포커스가 놓였을 때 이벤트 발생. `<label>`, `<select>`, `<textarea>`, `<button>` 태그에서 사용
`reset`	폼이 reset되었을 때 이벤트 발생
`submit`	submit 버튼을 클릭했을 때 이벤트 발생

이벤트 처리기

이벤트가 발생했을 때 처리하는 함수
이벤트 핸들러(event handler)라고도 함
이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결
코드 예시 ) - 버튼 클릭하면 알림 창 표시 하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/function.css">
</head>
<body>
	<!-- HTML 요소에 이벤트 처리기 연결하기 -->
	<ul>
		<li><a href="#" onclick="alert('Green 버튼을 클릭했습니다.')">Green</a></li>
		<li><a href="#" onclick="alert('Orange 버튼을 클릭했습니다.')">Orange</a></li>
		<li><a href="#" onclick="alert('Purple 버튼을 클릭했습니다.')">Purple</a></li>
	</ul>		
	<div id="result"></div>
</body>
</html>

결과 )

Pepzera

이전 포스트

LGHV_3기_자바스크립트 기본 문법_JavaScript(2.2)

다음 포스트

LGHV_3기_함수와 이벤트_JavaScript(3)

LGHV3기_공부정리

Chap 03 함수와 이벤트

함수와 이벤트

1. 함수

함수란? 🧐

함수의 선언 및 호출

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

스코프

지역 변수

전역 변수

var 변수와 호이스팅

호이스팅

재선언과 재할당이 가능하다

3. let과 const의 등장

let을 사용한 변수의 특징

const를 사용한 변수의 특징

자바스크립트 변수, 이렇게 사용하자 ❗❗❗

4. 재사용할 수 있는 함수 만들기

매개 변수와 인수, return문

매개 변수 기본값 지정하기

5. 함수 표현식

익명 함수

즉시 실행 함수

화살표 함수

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

이벤트

이벤트 처리기

LGHV_3기_자바스크립트 기본 문법_JavaScript(2.2)

LGHV_3기_자바스크립트와 객체_JavaScript(4)

0개의 댓글