① 새로운 변수 선언 키워드 : let, const
② class 키워드 ,extends
③ 화살표 함수 (Arrow Function)
④ module 문법 : import, export
<최종 화면> let과 var의 차이를 알아보고 const사용해 본다. (범위 인식)
let과 var의 차이를 알아보자.
우선 var로 변수 선언 및 특징을 알아보자.
var로 똑같은 변수를 사용해도 에러가 안난다.
다른 언어에서는 똑같은 변수를 선언하면 에러..
비교적 실수를 방지하기엔 똑같은 변수 선언은 에러인게 더 좋을거 같다.
그래서 let키워드 변수가 존재한다.
var 대신 let만 써주면 똑같이 변수선언을 하는 것이다.
변수를 만들고 값 변경은 당연히 된다.
const 상수를 만들고 값은 변경할 수 없다.
JS에서는 let, const도 자료형을 마음대로 사용 가능하다.
let d 변수에 "aaa", true, newDate() 사용 가능
이제 인식 범위에 대한 차이를 알아보자.
var은 함수 단위로, let, const는 블럭단위로
우선 var을 알아보자. {}중괄호 안에서 어떤 영향이 있는지 알기 위해 임의로 if문을 만들었다.
만약 밖에 g가 있고 , if{}안에 g가 있다면 어떻게 될까?
{} 중괄호 밖에도 g 값을 확인해보자.
아래 결과 사진으로 알 수 있듯이, var로 선언된 변수는 함수 단위로 지역을 구분하므로, var입장에서 보면 {}가 없는 것이나 마찬가지다. 그래서 g에 최종적으로 20값이 대입되고 어디서든 g값을 확인하면 20이 나올 것이다. (함수가 없으면)
이제 let으로 지역 범위를 알아보자.
let으로 변수 선언을 하면 {} 블럭 단위로 구분하기 때문에, 다른 언어와 마찬가지로 구분이 된다.
또다른 var의 범위 예제를 해보자.
위에서 언급한 것과 같이 함수가 없다면 같은 선상에 k가 존재하므로 마지막에 대입된 k값이 나온다.
let도 똑같이 적용해보자. 당연히 let으로는 논리적 에러!
var이 함수 단위라는 것을 확인하자.
아까 범위 확인 예제와 다른 것은 if문 {}중괄호인지 함수 {}의 차이이다.
결과 사진을 보면 var 변수가 구분이 되는 것을 알 수 있다.
var 변수는 함수로 구분되기 때문에 p는 함수 안에서만 사용 가능하다.
결과 화면을 보면 에러라서 p 값이 안나온다.
반복문에 사용되는 변수 var i는 for문 {} 중괄호 밖에서도 당연히 사용 가능하다.
(함수 범위로 인식하므로)
let으로 사용할 경우 당연히 {}중괄호 밖에서는 인식이 안된다.
호이스팅이란 선언들을 끌어올려 최상단에 선언한 것과 같은 효과를 보여준다.
var x는 112번 줄에 선언했지만, x의 사용은 111번 줄에 했다. 다른 언어라면 에러일 것이다.
하지만 JS에서는 Hoisting으로 인해 에러가 나지 않는다.
그러나 let으로 할 경우는 달라진다. 결론으로는 let의 변수는 Hoisting이 불가한 것처럼 사용된다. (안씀.)
<복붙용 코드>
|
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
// 1. 변수 선언 키워드 추가 : let, const
// 기존의 var 변수 알아고보 let,const를 알아보자.
var a= 10;
var a= 20;
// 새로운 let키워드 변수
let b=100;
// let b=200; //같은 이름의 변수를 또 선언하면 ERROR
// document.write(b+"<br>");
b=200; //당연히 존재하는 변수에 대입 가능
//const : 상수만드는 키워드
const c=100;
// c=200; //ERROR .. 논리적 에러는 이 위치 이전까지는 동작함
// document.write(c+"<br>");
// const c= 200; //let과 마찬가지로.. 같은 이름의 변수선언 금지 : 문법적 에러 - 화면에 아무것도 안나옴
// document.write(c+"<br>");
// let, const도 역시 동적 타이핑 문법이어서 자료형 마음대로 사용가능
let d="aaa";
d=true;
d=new Date();
document.write('<hr>');
//인식범위에 대한 차이!!!
// var 키워드는 함수단위로 인식(function scope)
// let, const는 블럭단위로 인식(block scope)
// 연습 1) var
var g=10; //전역 변수 g
if(true){
var g= 20; //지역 변수 g
}
let h=10; //전역 변수 g
if(true){
let h= 20; //지역 변수 g
}
// 연습 2)
if(true){
var k=50;
}
if(true){
let m=80;
}
// document.write(m+"<br>"); // error..m이 누군지 모름!
// 논리적 에러라서 위에 한줄만 안나온다.
// 연습 3) var이 함수 단위라는 것을 확인
var n=10;
function aaa(){
var n=5;
}
aaa();
function bbb(){
var p=20;
}
bbb();
// document.write(p+"<br>"); // 에서- p를 인식할 수 없음.
//let은 당연히 위와 같다.
// 반복문 사용할 때
for(var i=0; i<3;i++){
document.write("aaaa<br>");
}
for(let j=0; j<3;j++){
document.write("bbbb<br>");
}
// document.write(j+"<br>"); // j가 누군지 모름 - 논리적 오류 해당줄 이하부터 안나온다.
// Hoisting 기술의 차이
document.write('<hr>');
document.write(x+'<hr>'); //Hoisting(호이스팅) : 변수 선언보다 사용을 먼저해도 변수 선언의 사용 이전으로 선언문을 이동시켜주는 기술- 단, 변수선언과 초기화(메모리할당)만 이동되고 값의 대입은 이동하지 않음.
var x=10;
let y=50;
var z=100;
{
let z=50;
}
document.write('ooooooooo');
</script>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| ECMA script 2015(ES6) arrowfunction (화살표 함수[람다식 표기]) (0) | 2019.12.20 |
|---|---|
| ECMA script 2015(ES6) class (멤버 변수,메소드 사용 및 구조분해할당) (0) | 2019.12.20 |
| HTML+Java script (기초) webStorage (localStorage, sessionStorage ) 웹 브라우저 데이터 저장 관련 (0) | 2019.12.19 |
| HTML+Java script (기초) worker (Thread와 같은 기능, 값 전달) (0) | 2019.12.19 |
| HTML+Java script (기초) geolocation Google Map Api 이용 (웹페이지에서 지도 보여주기) (0) | 2019.12.19 |
댓글