공부/JavaScript
Variable 선언과 적용범위
726582776982
2022. 6. 6. 18:19
** Variable 선언과 적용범위 ***
1. 선언
1.1) 변수
=> var : 재선언가능, 재할당가능
=> let : 재선언불가능, 재할당가능
1.2) 상수
=> const : 재선언불가능, 재할당불가능
1.3) 묵시적 정의 ( var, let, const 없이 정의 )
=> 전역변수의 경우
=> 차이점
delete 가 적용됨 (변수와 값이 메모리에서 삭제됨)
명시적 선언시에는 delete가 적용되지않고, 변수와 값이 메모리에 보존됨
1.4) delete
=> 변수의 정의를 취소함
=> var, let, const 로 정의한 변수에는 적용되지 않고,
정의없이(묵시적으로) 사용한 변수에만 적용됨.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
// 1.1) var : 재선언가능, 재할당가능
var x= 100; x='대한민국'; x=123.456;
var x = 'Korea';
document.write('var x => '+x);
// 1.2) let : 재선언불가능, 재할당가능
let y= 123; y='홍길동'; y=123.456;
// => 파싱단계에서 오류 : script 모두 실행 안됨
// Identifier 'y' has already been declared
document.write('let y = '+y+"<br>");
// 1.3) const : 재선언불가능, 재할당불가능
// => 전체 대문자로
const PI = 3.141592;
// ** 재선언
// => 파싱단계에서 오류 : script 모두 실행 안됨
// Identifier 'PI' has already been declared
//const PI = '초코파이';
// ** 재할당
// => 실행시 오류
// Assignment to constant variable.
//PI = '초코파이';
document.write('const PI => '+PI+'<br>');
// 1.4) delete
// => 묵시적 변수, 배열의 원소, 객체의 속성(프로퍼티) 등을 삭제할 수 있음.
// => var, let, const 로 정의한 변수에는 적용되지 않고,
// 정의없이(묵시적으로) 사용한 변수에만 적용됨.
// => 삭제를 하면 true를 반환, 아니면 false를 반환
// 존재하지 않는 속성을 delete 하면 delete는 어떠한 작업도 없이 true를 반환
delete(x); delete(y); delete(PI);
document.write("delete 확인 x,y,PI => "+x+y+PI+'<Br>');
// Error 없고 delete 만안될뿐 -> false 등 return 임
name = "홍길동";
document.write(`before => ${name} <br>`);
document.write(`delete => ${delete(name)}<br>`);
//document.write(`after => ${name}`); // error -> name is not defined;
// null 값 할당과 delete 비교
addr = "Korea";
document.write("before "+addr+"<br>");
addr = null;
document.write("after "+addr+"<br>");
x = null; y = null;
//PI = null ; Assignment to constant variable;
document.write(`null 적용 확인 => ${x}${y}${PI} <br>`);
var arr = ["가","나","다","라","마"];
document.write("before 배열 => ");
for(var i of arr){
document.write(i+' ')
}
delete arr[2];
document.write("<br>");
document.write("after 배열 => ");
for(var i of arr){
document.write(i+' ')
}
document.write("<br>");
// *** 객체의 프로퍼티 delete Test
var student={
name: '홍길동',
score: 100,
study:function() {
return "*** Test delete Object Method ***<br>";
}
}//student
delete student.score;
delete student.study;
document.write(`after delete student.score => ${student.score}<br>`); // undefined
document.write(`after delete student.study => ${student.study}<br>`); // undefined
//document.write(`after delete student.study => ${student.study()}<br>`);
// error -> student.study is not a function
// 2. Variable 적용범위
// 2.1) 전역변수 : 현재스크립트 내의 어디서든 사용가능
var sum = 100;
var name = "홍길동"; // 명시
addr = "경기도 성남시"; // 묵시
document.write(`전역변수 Test => ${sum},${name},${addr}<br>`);
//test(); // 실행안됨
const test = (count) => {
var name = "명시적 지역";
var id = "banana";
company = "그린학원";
// ** 묵시적 지역변수
// => 일단 실행되어 값이 할당되면, 전역으로 사용됨.
// => 이러한 변수는 전역에서만 사용할 것을 권장하고,
// 지역변수는 명시적으로 선언후 사용할 것을 권장함.
document.write(`전역변수_Function 내부 => ${sum},${name},${addr} <br>`);
document.write(`지역변수_Function 내부 => ${name},${id},${company} <br>`);
// ** 변수명이 동일한경우 전역변수 접근
// => this 또는 window 로 접근
// => 이 외에도 전역객체를 가리키는 식별자는 self, frames, global 등
// 이 있으나, ECMA11 (ES11) 에서는 globalThis 로 통일됨.
document.write(`function 전역변수 , 지역변수 구별 => ${this.name}, ${window.name},${name},${id}, ${company} <br>`);
sum = 0;
// ** 반복자로 정의된 변수
// => function 에 종속된 지역변수
for(var i=0; i<count; i++){
sum += i;
}
document.write(`**After_for_sum => ${sum},${i}<br>`);
}
test(5);
document.write(`지역변수_Function 외부 => ${name},${company} <br>`);
//document.write(`** Test의 매개변수 Count = > ${count}<br>`);
//document.write(`** Test의 매개변수 id = > ${id} <Br>`);
|
cs |