Var, Let, Const

최문길·2023년 11월 4일
1

JavascriptES6

목록 보기
5/23

변수

인생을 살아가는데 있어서 어떠한 변수가 있을지,
모르는 것이 희로애락이겠지만 ....

코딩을 하는데 있어서 변수는 제일 중요함
🤣

변수는 왜 쓸까?

긴 자료 || 긴 숫자(자릿수 10억개) 이런걸 변수에 넣어서 간단하게 쓰려고



변수 Key word

1. var
2. let
3. const

변수는 어떻게 써야 하는걸까?

선언, 할당을 기억하자

  1. 선언
// 변수 선언
var myVar 	let myLet 	const myConst

// 변수만 선언 해 놓고 나중에 자료 집어넣어도 된다.
  1. 할당
// 할당
var myVar = 'var' let myLet = 'let' const myConst = 'const'

// 선언 후 등호로 저장 할 자료를 집어 넣어주면 된다.


Var - 특징

1. 재선언 O

        var 이름 = 'kim';
        var 이름 = 'park'; //재선언 가능 (var 이름- 재선언 부분)

2. 재할당 O

var 이름 = 'kim';
	이름 = 'choi'; // 재 할당 가능

let - 특징

1. 재선언 X

let 나이 = 20;
let 나이 = 30; // 재선언이 안된다...

2. 재할당 O

let name = 'kim';
	name = 'choi; // 재할당이 가능하다.

3. Const

1. 재선언X

const name = 'kim';
const name // Error가 막 어마어마하게 console에 띄워짐

2. 재할당X

// 이름에서도 알 수 있듯이 상수이다.
const 나이 = 30;
	  나이 = 20;// Error가 막 어마어마하게 console에 띄워짐	


Object에서 재할당은??

const 사람 = {: 'kim'}

사람.= 'mike' // 현실에선 좀 어렵지만 여기선 가능하다.

왜 가능한걸까??

안에 있는 값을 바꾼거지 변수인 '사람'을 재 할당 한거 아니니까

그렇다면 완전 변경 불가능한 오브젝트를 만들고 싶으면??

Object.freeze()를 사용하자

const obj = { neverChange : true };

Object.freeze(obj)




변수의 범위

변수에는 범위라는 것이 존재한다.

var - function(=함수)가 범위임

function 함수(){
  var 이름 = 'kim';
  console.log(이름); // 가능
}
console.log(이름) // Error 

let, const - 거의 모든 {중괄호} 입니다.

(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 값으로 가져다 쓰면 잘 실행이 된다.

이렇게 훌륭한 예제를 통해서
변수의 범위가 왜 중요한지 알아보게 되었다.

0개의 댓글