1. 지역 변수와 전역 변수
- 지역변수 (로컬 변수)
: 한 함수 안에서만 사용할 수 있는 변수
: var 변수이름
- 전역변수(글로벌 변수)
: 스크립트 소스 전체에서 사용할 수 있는 변수
: 함수 밖에서 선언
: 함수 안에서 var예약어 없이 선언
- var예약어를 사용한 지역변수와 전역변수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>var 예약어를 사용한 지역변수와 전역 변수 </title>
</head>
<body>
<script>
function addNumber() {
var sum=10+20; //지역 변수 sum 선언
multi=10*20; //전역 변수 multi 선언
}
addNumber();
console.log(multi); //전역 변수 사용
</script>
</body>
</html>
2. var와 호이스팅
- 호이스팅 : 변수의 선언과 할당을 분리해서 선언 부분을 스코프에 가장 위쪽으로 끌어올리는 식으로 해석
- 자바스크립트 해석기는 함수 소스를 훑어보면서 var을 사용한 변수는 따로 기억해둠 =>마치 선언한 것과 같은 효과
- 변수와 호이스팅
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수와 호이스팅</title>
</head>
<body>
<script>
var x=10;
function displayNumber() {
console.log("x is"+x);
console.log("y is"+y);
var y=20;
}
displayNumber();
</script>
</body>
</html>
실제 코드
var x=10;
function displayNumber() {
console.log("x is"+x);
console.log("y is"+y);
var y=20;
}
displayNumber();
자바스크립트 해석기가 인식하는 코드
var x=10;
function displayNumber() {
var y;
console.log("x is"+x);
console.log("y is"+y);
y=20;
}
displayNumber();
3. 변수의 재선언과 재할당
- var를 사용한 변수는 호이스팅 외에도 재선언과 재할당 가능
- var 예약어를 사용한 변수의 재할당과 재선언
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>var 예약어를 사용한 변수의 재할당과 재선언</title>
</head>
<body>
<script>
function addNumber(num1, num2) {
return num1+num2; //2개의 수 더하기
}
var sum=addNumber(10,20); //sum 변수 선언, 함수 호출
console.log(sum);
sum=50; //sum 변수 재할당
console.log(sum);
var sum=100; //sum 변수 재선언
console.log(sum);
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 15장 - 재사용할 수 있는 함수 만들기 (0) | 2023.04.07 |
|---|---|
| 15장 - let과 const (0) | 2023.04.07 |
| 15장 -함수의 선언과 호출 (0) | 2023.04.06 |
| 14장 마무리 문제 2 (0) | 2023.04.06 |
| 14장 마무리 문제 1 (0) | 2023.04.06 |
