함수와 이벤트
자바스크립트 프로그램은 단순히 동작 하나만 실행되는 게 아니라 여러 가지 동작이 연결 됨
동작해야할 목적대로 묶은 명령을 함수라고 함 !
자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위르 스코프라고 함
→ 변수가 어디까지 유효한지 가리키는 영역이 필요해서...!
지역변수 / 로컬변수
: 한 함수 안에서만 사용할 수 있는 변수
전역변수 / 글로벌 변수
: 스크립트 소스 전체에서 사용할 수 있는 변수
호이스팅
: '끌어올린다', 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽에 끌어올리는 것
실제로 끌어올리는 것이 아니고 고그를 그런 식으로 해석한다는 의미
변수를 실행하지 전이지만 '이런 변수가 있구나'하고 기억해두기 때문에 마치 선언한 것과 같은 효과가 있는 것
var
: var를 사용한 변수는 호이스팅 외에도 재선언과 재할당이 가능
전역 변수로 사용하려면 함수 밖에서 선언하거나 함수 안에서는 var예약어를 빼고 선언
함수 안에서 선언한 변수라 하더라도 var 예약어를 사용하지 않으면 전역 변수가 됨
호이스팅이 있는 변수, 아직 할당되지 않은 자료형인 undefined값을 가질 수 있음
let
: let 예약어로 선언한 변수는 변수를 선언한 블록({}로 묶은 부분)에서만 유효하고 블록을 벗어나면 사용 못함
값을 재할당할 수는 있지만 변수를 재선언할 수는 없음
호이스팅이 없는 변수! let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지 나타냄
const
: const로 선언한 변수는 상수 변수, 상수는 프로그램 안에서 변하지 않는 값을 의미
프로그램 안에서 특정한 상숫값을 자주 사용한다면 변수에 담아서 사용하는 것이 편리
재선언 . 재할당 불가능, 블록레벨의 스코프를 가짐
함수 선언하고 호출하기
function 함수명(0) {
명령
}
함수명() 또는 함수명(변수)
▽ var, let, const로 선언한 변수 비교
| 구분 | var | let | const |
| 스코프 | 함수 레벨 | 블록 레벨 | 블록 레벨 |
| 재할당 | 가능 | 가능 | 불가능 |
| 재선언 | 가능 | 불거눙 | 불가능 |
마무리 문제 ♥♡
1. 사용자에게 입력받은 두 수의 값이 같으면 두 수를 곱하고, 다르면 더하는 함수 sumMulti()를 작성하세요. 그리고 두수의 값으로 5, 10을 실행할 때와 10,10을 실행할 때의 결과를 다음과 같이 콘솔 창에 표시해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 1</title>
</head>
<body>
<script>
function sumMulti(x, y) {
if (x === y)
return x * y;
else
return x + y;
}
console.log(sumMulti(5, 10));
console.log(sumMulti(10, 10));
</script>
</body>
</html>
2. 프롬프트 창에서 두 수를 입력받아 크기를 서로 비교하여 더 큰 숫자를 알림 창에 표시하는 함수를 작성하시오.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
</head>
<body>
<script>
var num1 = parseInt(prompt("비교할 첫 번째 숫자: "));
var num2 = parseInt(prompt("비교할 두 번째 숫자: "));
compareTwo(num1, num2);
function compareTwo(x, y) {
if (x === y) {
alert(x + "와(과) " + y + "는 같습니다.");
}
else if (x > y) {
alert( x + "(이)가 " + y + "보다 큽니다.");
}
else {
alert(y + "(이)가 " + x + "보다 큽니다.");
}
}
</script>
</body>
</html>
'HTML_CSS_JavaScript' 카테고리의 다른 글
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑩ (0) | 2023.03.15 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑨ (0) | 2023.03.13 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑦ (0) | 2023.03.08 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0) | 2023.03.03 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑤ (0) | 2023.03.01 |