JongDDA의 한걸음 한걸음씩
[JavaScript] const 와 let 본문
728x90
변수 선언 시 사용하는 키워드가 두 개 추가되었다!
(ECMA Script 6 이후~)
const : 값을 변경할 수 없는 변수를 만든다! 그리고 이를 상수라 한다!
- 값을 변경할 수 없다!
- 선언과 동시에 초기활르 해야 한다!
- 객체의 메소드를 통한 변경은 변경이 아니다
const 여도 변경 가능하려면?
- 객체 타입이어야 한다 : 배열, 사용자 정의 객체
- 원시 타이이면 안된다 : 숫자, 문자열, 논리형...
let : 변수를 만드는데, 영역{} 구분 기능을 추가했다! 자기영역에서만 영향력 발휘
- let을 사용해서 만든 변수는 자기가 만들어진 영역 안에서 영향력을 행사한다.
- let은 값의 변경이 가능한 변수를 만든다.
변수의 새 키워드들을 쉽게 사용하기
- 무조건 var 쓰는 것보단 권장된다!
- 변경해도 괜찮은 변수면 let을 쓴다!
- 변경하면 안되는 경우 const를 쓴다!
- 객체인 경우 const를 쓴다!
예제)
<!DOCTYPE html>
<html>
<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>
<style>
#container > div {
width: 50px; height: 50px;
background-color: tomato;
margin:10px;
}
</style>
</head>
<body>
<div id="container">
<!--
<input id ="animal" type="text" placeholder="좋아하는 동물"><br>
<input id="ani-name" type="text" placeholder="이름을 지어주세요"><br><br>
<button>추가</button>
-->
</div>
<script src="01_script.js">
</script>
</body>
</html>var container = document.getElementById("container")
for(let i =0; i< 5; i++){
var div = document.createElement("div")
div.onclick =function(){
window.alert("이것은 몇번째 박스 ==> "+ i)
}
container.appendChild(div)
}
728x90
반응형
'개발 > 프론트엔드' 카테고리의 다른 글
| [JavaScript] 로컬스토리지(local storage) (0) | 2021.03.28 |
|---|---|
| [JavaScript] 템플릿 문자열 (0) | 2021.03.28 |
| [JavaScript] DOM 요소의 dataset 속성 (0) | 2021.03.26 |
| [JavaScript] 이벤트, 이벤트 객체 (0) | 2021.03.26 |
| [JavaScript] 함수, 매개변수, 반환(return) (0) | 2021.03.24 |
'개발/프론트엔드' Related Articles
more
Comments