728x90
변수의 범위
1. 지역 변수
- 함수 내에서 선언된 변수
- 지역 변수는 변수가 선언된 함수(블록) 내에서 유효하고 함수가 종료되면 메모리에서 사라짐
function func1(x, y) { // x, y 지역변수
let sum = 0; // sum 지역변수
...
console.log(x, y, sum); // 값 출력
}
console.log(x, y, sum); // undefined
2. 전역 변수
- 함수의 외부에서 선언된 변수
- 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹페이지가 닫혀야만 메모리에서 사라짐
let global = 0;
function func1(x, y) {
console.log(global) // 값 출력
...
}
console.log(global) // 값 출력
<!DOCTYPE html>
<html lang="en">
<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>
<h2>변수의 범위</h2>
<script>
'use strict';
var num1 = 10; // 전역 변수
function func1() {
console.log(num1); // 10
num1 = 20; // 전역 변수 num1의 값을 20으로 재대입
}
func1();
console.log(num1); // 20
var num2 = 30; // 전역 변수
function func2() {
var num2 = 40; // 지역 변수
console.log(`num2 : ${num2}`); // 지역 변수 40
}
func2();
console.log(num2); // 전역 변수 30
var num3 = 50; // 전역 변수
if (num3 == 50) {
num3 = 100; // 전역 변수 num3의 값을 100으로 재대입
console.log(`num3 : ${num3}`); // 100
}
console.log(num3); // 전역변수
// var의 문제
var num4 = 50; // 전역 변수
if (num4 == 50) { // var는 함수에서만 지역 변수가 쓰여지고 블록에서는 전역 변수를 사용하게 된다.
var num4 = 100; // 전역 변수 num4를 100으로 덮어씌움(지역 변수 x)
console.log(`num4 : ${num4}`); // 지역 변수 100x, 전역 변수
num4 = 200; // 전역 변수를 200으로 재대입
console.log(`num4 : ${num4}`); // 지역 변수 50, 전역 변수
}
console.log(`num4 : ${num4}`);
// 😑 결론 : var는 사용하지 말자
console.log('⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐');
// let으로 변경
let num5 = 50; // 전역 변수
if (num5 == 50) {
let num5 = 100; // 지역 변수
console.log(`num5 : ${num5}`); // 지역 변수 100
num5 = 200; // 지역변수 num5의 값을 200으로 재대입
console.log(`num5 : ${num5}`); // 지역 변수 200
}
console.log(`num5 : ${num5}`); // 전역 변수 50
</script>
</body>
</html>
var는 함수에서만 지역변수를 사용할 수 있고 블록내에서는 지역변수를 사용할 수 없게된다.
728x90
'JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 프로토타입 (0) | 2022.05.03 |
|---|---|
| [JavaScript] 자바스크립트의 객체 (0) | 2022.05.03 |
| [JavaScript] 함수 만들기 (0) | 2022.04.28 |
| [JavaScript] 함수 (0) | 2022.04.28 |
| [JavaScript] 배열의 반복 (0) | 2022.04.28 |