티스토리 뷰
프로그램 안에서 기능에 따라서 변하는 값을 변수라 합니다.
변수는 숫자나 문자열 와 같은 단순한 데이터 형식, 객체, 복잡한 데이터 형식을 담는 저장소이며 자바스크립트에서 변수 선언은 var, const, let 키워드를 사용하고 선언과 초기화를 각각 하거나, 선언과 초기화를 동시에 할 수 있습니다.
1. 자바스크립트 변수 선언
var : 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언
let : 블록 유효 범위를 갖는 지역 변수 ( ES6 ) { read/write )
const : 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. ( read )
1-1. var
변수를 선언하는 키워드 중에 하나로 초기의 자바스크립트는 변수 선언은 모두 var로 선언했습니다.
var로 선언된 변수는 어디에 선언이 되어 있어도 어떠한 코드가 실행되기 전에 처리가 됩니다.
var a;
a = 10;
console.log(a); // 10- 식별자 a는 변수로 선언이 되었으며, 10을 저장합니다.
- 자바 스크립트에서 변수 선언을 var로 선언해서 사용할 때는 많은 주의가 필요합니다. var은 사용하는 위치에 따라서 전역 변수로 사용되기도 하고 지역 변수로 사용되기도 하며 선언을 하지 않고 사용하여도 오류가 나지 않습니다.
console.log(a); // undefined
var a;
a = 10;
console.log(a); // 10- consolr.log(a)는 a 변수를 선언하기 전에 사용되었는데 오류가 나지 않고 "undefined"으로 출력이 됩니다. 왜 이런 현상이 나올까요? 다음과 같이 소스를 변경해서 실행을 합니다.
var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10- 동일한 결과가 나옵니다. 이것을 호이 스팅이라 합니다. 자바스크립트는 var로 선언한 모든 변수를 실행 전에 미리 선언한 것처럼 만드는데 이것을 호이 스팅이라 합니다. 자세한 것은 호이 스팅에서 설명합니다.
변수 범위
다음 예제는 변수의 범위에 대한 소스로 변수 a, b, c는 전역 변수로 각각 10, 5, 2로 초기화, fVarExample 함수 안에는 지역 변수 a는 1로 초기화, b는 선언만, if 블록 안에 지역 변수 a가 2로 초기화되어 있습니다. 그리고 fVarExample 함수 안에서 연산식을 사용하여 연산을 하는 예제입니다.
|
console.log("전역 변수 a = " + a); // ① undefined
var a = 10; // ②
var b = 5; // ⓐ
var c = 2; // ⒜
function fVarExample(){
var a = 1; // ③
var b; // ⓑ
if (true) {
var a = 2; // ④
var d = 2;
b = b + 1; // ⓒ
c = c + 1; // ⒝
console.log("if 지역 변수 a = " + a); // ⑤ 2
}
b = b + 3; // ⓓ
c = c + 3; // ⒞
console.log("fVarExample 지역 변수 a = " + a); // ⑥ 2
console.log("fVarExample 지역 변수 b = " + b); // ⓔ NaN
console.log("전역 변수 c = " + c); // ⒟ 6
console.log("d = " + d); // 6
}
fVarExample();
console.log("전역 변수 a = " + a); // ⑦ 10
console.log("전역 변수 b = " + b); // ⓕ 5
console.log("전역 변수 c = " + c); // ⒠ 6
|
결과 : 전역 변수 a = undefined if 지역 변수 a = 2 fVarExample 지역 변수 a = 2 fVarExample 지역 변수 b = NaN 전역 변수 c = 6 전역 변수 a = 10 전역 변수 b = 5 전역 변수 c = 6- |
1. 변수 a에 대해서
" 변수의 범위는 함수 블록 내에서 유효함 "
변수 a가 작성된 코드의 위치는 다음과 같습니다.
- ① 전역 변수 a 출력 : console.log("전역 변수 a = "+a);
-> 변수 a는 선언하기 전에 log를 표시하기 위해서 사용됨 : undefined
- ② 전역 변수 a 선언 및 초기화 : var a = 10;
- ③ fVarExample 함수 내에 지역 변수 a 선언 및 초기화 : var a = 1;
- ④ if (true) 블록 내에서 지역 변수 a 선언 및 초기화 : var a = 2;
- ⑤ if (true) 블럭 내에서 출력 : console.log("if 지역 변수 a = "+a);
-> ④에서 지역 변수 a를 선언하였으므로 a를 2 값을 가지고 있습니다. 결과 : 2
- ⑥ fVarExample 함수 내에서 출력 : console.log("fVarExample 지역 변수 a = "+a);
-> ④에서 지역 변수를 a로 선언한 것이 if 블록 내에서 만 적용되는 것은 아닙니다. 자바스크립트의 변수 범위는 함수 블록으로 ③에서 선언한 지역 변수 a가 유효한 변수이며 ④에서 var a로 선언한 변수는 ③에서 선언한 변수와 동일 이름을 사용하고 있으므로 var의 의미는 사라지고 a = 2로 저장됩니다. if 함수 내에서 a에 값을 변경하고 if 블록을 벗어났으므로 ⑥에서는 지역 변수 a의 값은 2입니다. 결과 : 2
- ⑦ 전역 변수 a 출력 : :console.log("전역 변수 a = = "+a);
-> 전역 변수 a의 값을 10으로 결과는 10
2. 변수 b에 대해서
" 변수 선언 후 초기화하지 않고 연산을 하는 경우 'NaN'으로 인식함 "
변수 b가 작성된 코드의 위치는 다음과 같습니다.
- ⓐ : 전역 변수로 5로 초기화 var b = 5;
- ⓑ : 함수 fVarExample()에서 함수 블록 : var b;
-> 변수 b는 함수 블록에서 선언 하였으므로 전역변수 a와는 별도 메모리 사용
- ⓒ : 함수 fVarExample()의 if (true) 블럭 : b = b+1
-> 변수 b에 + 연산을 하고 있는데 실제는 하지 않음 변수 b는 초기화되어 있지 않음
- ⓓ : 함수 fVarExample()의 블록 : b = b+3
-> 변수 b에 + 연산을 하고 있는데 실제는 하지 않음 변수 b는 초기화되어 있지 않음
- ⓔ : 함수 fVarExample()의 블록 : console.log("fVarExample 지역 변수 b = "+b);
NaN로 출력 Not-A-Number(숫자가 아님)을 의미합니다. 즉 초기화되지 않은 상태에서 +1, +3 연산을 하고 있어서 사용 시점에 숫자가 아닌 값이라는 의미입니다.
- ⓕ : 전역 범위에서 출력 : console.log("전역 변수 b = "+b);
-> 5로 출력됨 ⓐ에서 5로 초기화함
3, 변수 c에 대해서
" 전역 영역에서 선언한 변수는 함수에서 동일 이름으로 선언하지 않으면 전역 영역에 선언한 변수를 사용한다, "
변수 c가 작성된 코드의 위치는 다음과 같습니다.
- ⒜ 전역 변수 c 선언 및 초기화 : var c = 2;
- ⒝ fVarExample 함수 블록의 if 블럭 내 : c = c + 1; 전역 변수 c의 값 3
- ⒞ fVarExample 함수 블록 안에서 : c = c + 3; 전역 변수 c의 값 6
- ⒟ fVarExample 함수 블록 안에서 출력 : console.log("전역 변수 c = "+c);
-> 전역 영역에서 선언 한 변수는 함수 내에서 선언하지 않으면 전역 변수를 그대로 사용됩니다. 결과 : 6
- ⒠ 전역 영역에서 출력 : console.log("전역 변수 c = " +c);
-> 결과 6
변수 d는 fVarExample 함수에서만 사용되는 지역 변수이다
'JavaScript > 기본' 카테고리의 다른 글
| 006. JavaScript : 형변환 (0) | 2022.03.17 |
|---|---|
| 005. JavaScript : 배열 (0) | 2022.03.16 |
| 004. JavaScript : 자료형 (0) | 2022.03.16 |
| 003. JavaScript : let, const (0) | 2022.03.06 |
| 001. Javascript 란 (0) | 2022.03.01 |