인생을 살아가는데 있어서 어떠한 변수가 있을지,
모르는 것이 희로애락이겠지만 ....
코딩을 하는데 있어서 변수는 제일 중요함 🤣
긴 자료 || 긴 숫자(자릿수 10억개) 이런걸 변수에 넣어서 간단하게 쓰려고
1. var
2. let
3. const
선언, 할당을 기억하자
// 변수 선언
var myVar let myLet const myConst
// 변수만 선언 해 놓고 나중에 자료 집어넣어도 된다.
// 할당
var myVar = 'var' let myLet = 'let' const myConst = 'const'
// 선언 후 등호로 저장 할 자료를 집어 넣어주면 된다.
var 이름 = 'kim';
var 이름 = 'park'; //재선언 가능 (var 이름- 재선언 부분)
var 이름 = 'kim';
이름 = 'choi'; // 재 할당 가능
let 나이 = 20;
let 나이 = 30; // 재선언이 안된다...
let name = 'kim';
name = 'choi; // 재할당이 가능하다.
const name = 'kim';
const name // Error가 막 어마어마하게 console에 띄워짐
// 이름에서도 알 수 있듯이 상수이다.
const 나이 = 30;
나이 = 20;// Error가 막 어마어마하게 console에 띄워짐
const 사람 = { 성 : 'kim'}
사람.성 = 'mike' // 현실에선 좀 어렵지만 여기선 가능하다.
왜 가능한걸까??
안에 있는 값을 바꾼거지 변수인 '사람'을 재 할당 한거 아니니까
그렇다면 완전 변경 불가능한 오브젝트를 만들고 싶으면??
const obj = { neverChange : true };
Object.freeze(obj)
변수에는 범위라는 것이 존재한다.
function 함수(){
var 이름 = 'kim';
console.log(이름); // 가능
}
console.log(이름) // Error
(for, if, function 등)
if(true) {
let 이름 ='park'
const yourName='movie'
console.log(이름,yourName);// 가능
}
for() {
}
console.log(이름,yourName) //에러
아래 예제를 보자
'철수'는
'버튼0'을 누르면, 모달창 0을 띄우고
버튼 1을 누르면, 모달창 1을 띄우고 싶어서
자바스크립트로 멋지게 아래의 코드와 같이 짰다.
근데 이상하게 동작한다...
<div style="display : none">모달창0</div>
<div style="display : none">모달창1</div>
<div style="display : none">모달창2</div>
<button>버튼0</button>
<button>버튼1</button>
<button>버튼2</button>
<script>
var btns = document.querySelectorAll('button');
var modals = document.querySelectorAll('div');
for (var i = 0; i < 3; i++){
btns[i].addEventListener('click', function(){
modals[i].style.display = 'block';
});
}
</script>
왜 계속해서 모달창2번만 띄워지는 걸까??
철수가 변수의 범위를 잘 몰라서 그렇다..
바보...
반복문이 3번 실행되면서 i값은 0,1,2,3 ... 이렇게 차례로 변하다가 i값이 2이 되어 종료했고 i 값은 var로 만든 전역변수이다.
그래서 i값을 쓰려고 봤더니 전역변수 i = 2밖에 없어서 2를 집어넣어서 계속 에러가 났던 것
그렇다면 어떻게 해결해야 하나???
let을 사용하기 => et 변수는 범위가 중괄호이기에 for 반복문도 중괄호에 해당한다. 반복문이 돌고 나서도 let i= 어쩌구 값이 {for 반복문}내에 남아있기에 그걸 i 값으로 가져다 쓰면 잘 실행이 된다.
이렇게 훌륭한 예제를 통해서
변수의 범위가 왜 중요한지 알아보게 되었다.