ES6에 추가된 변수 선언 방법입니다.
중복 선언이 불가능 합니다.
함수 범위 스코프 입니다.
let_ex01.html 파일을 다음과 같이 만듭니다.
|
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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>let 키워드</title>
<script>
// 구분선을 그려주는 함수 선언
let line = () => console.log('-'.repeat(50));
let user_name ='한사람';
console.log(`${user_name}님 반갑습니다.`);
// 중복선언이 불가능 하다.
// let user_name = '두사람';
// console.log(`${user_name}님 반갑습니다.`);
// 함수 범위 스코프 이다.
function getUserName(){
let user_name = '두사람';
return `${user_name}님 반갑습니다.`;
}
console.log(getUserName());
console.log(`${user_name}님 반갑습니다.`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
let_ex02.html 파일을 다음과 같이 만듭니다.
|
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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>let 키워드</title>
<style>
#outbox1>div,
#outbox2>div {
height: 100px;
width: 100px;
background-color: skyblue;
border: 1px solid blue;
border-radius: 20px;
text-align: center;
line-height: 100px;
vertical-align: middle;
float: left;
margin: 5px;
cursor: pointer;
}
</style>
<script>
window.onload = ()=>{
const outbox1 = document.getElementById('outbox1')
var div;
for (var i = 0; i < 5; i++) {
div = document.createElement('div')
div.appendChild(document.createTextNode("Box" + (i+1) + " 클릭!!"));
div.onclick = function () {
// 호출 시점에 변수 i값이 적용됩니다.
alert('이것은 박스 #' + (i+1) + '입니다.')
}
outbox1.appendChild(div)
}
const outbox2 = document.getElementById('outbox2');
let div2;
for (let i = 0; i < 5; i++) {
div2 = document.createElement('div')
div2.appendChild(document.createTextNode("Box" + (i+1) + " 클릭!!"));
div2.onclick = function () {
// 명령이 생성될때 변수 i값이 적용됩니다.
alert('이것은 박스 #' + (i+1) + '입니다.')
}
outbox2.appendChild(div2)
}
}
</script>
</head>
<body>
<div id="outbox1"></div>
<hr style="clear: both;">
<div id="outbox2"></div>
</body>
</html>
|
cs |
실행 결과 입니다.
첫번째 줄의 박스들은 모두 6번째 박스라고 출력이 됩니다. 반복문의 변수를 var로 선언했습니다.
두번째 줄의 박스들은 모두 자신번째 박스라고 출력이 됩니다. 반복문의 변수를 let으로 선언했습니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 순수 함수 & 비 순수 함수 & 고차함수 (1) | 2024.10.18 |
|---|---|
| [JavaScript] 일급 객체 & 일급 함수 (1) | 2024.10.18 |
| [JavaScript] var의 문제점 (0) | 2024.10.18 |
| [JavaScript] 화살표 함수(Arrow Function) (2) | 2024.10.17 |
| [JavaScript] 템플릿 리터럴(Template literals) (0) | 2024.10.17 |
