자바스크립트) 변수 const, let, var

1.var , let , const 한눈에 정리하기

 

	선언	할당	범위
var	재선언 O	재할당 O	function 함수 내부
let	재선언 X	재할당 O	{}  블록(중괄호 내부)
const	재선언 X	재선언 X	{}  블록(중괄호 내부)

 

 

---

2. 구체적으로 살펴보기

 

1) var : 재선언이 가능하다?? 먼말이지?

 

재선언이 가능하다는 말은 아래와 같이 변수를 선언해주는 키워드를 계속 쓸수있다는 말이다. 

var만 재선언 가능하고 let이나 const 는 불가능하다.

var 이름 = 'kim'

var 이름 = 'park'

var 이름 ;

var 이름;

동일하게 재선언할 때 let 과 const 는 아래와 같이 오류가 난다.

 

2) 선언과 할당 그림으로 한눈에 보기

 

3) let 은 재할당이 가능하고, const 는 재할당이 불가능하다

 

즉, 값을 바꿀 수 있다는 말이다. 

let 이름 = 'kim'
이름 = 'kim'

//const 로 선언한 변수는 재할당이 불가능하다 아래 예시는 에러가난다.


const 이름 = 'kim';
이름 = 'park'

 

※ const 는 재 할당은 불가능하지만, object 안에 있는 값을 바꾸는 것은 자유다.

// const 로 object를 만들었을 때, 오브젝트 내부 값을 변경하는 것은 괜찮다.


const 선은혜 = {나이 : 28}
선은혜.나이 = 25

 

4) 범위 

범위는 유효(사용)범위를 말한다. 즉, 내가 이 변수를 선언했을때 어디까지 사용할수있을지?를 뜻한다.

 

var는 function scope 이다. 함수 외부에서 선언된것은 전역변수로 어디서든 쓸수있지만, 함수 내부에서 선언된 var는 함수 내부에서만 쓸수있다는 것이다. 함수 외부에서 쓰면 에러가 난다.

 

즉, 함수 안에서만 존재한다는 것이다.  

아래 예제를 보면, 함수안에서 var 이름을 선언했다.  변수 이름은 함수 안에서는 console.log로 출력해보면 'kim'이 그대로 찍히지만, 함수 밖에서 console.log(이름) 으로 출력해보면 에러가 나는 것을 확인할 수 있다. 

 

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

  console.log(이름); //이름 is not defined 라고 에러를 뿜는다.

 

let 과 const 는 블록 범위 즉, {} 중괄호 안에서만 사용가능하다. 중괄호 안에서만 살고 중괄호 밖에서는 죽는다!

중괄호 내부에 const, let으로 선언된 변수를 외부에서 사용하면 에러가 발생한다. 

 

예시1)

    let num = 100;

    if (num > 10) {
      const addNum = num + 2;
      console.log(addNum); //102 로 출력
    }

    console.log(addNum); //addNum is not defined라고 에러를 뿜음

예시2) 콘솔창에 뭐가 나올지 예측해보기!!

if(true){
  let a = 1;
  var b = 2;
  if(true){
    let b = 3;
  }
  console.log(b);
}

 

정답은 b 는 2가 나온다!

왜냐!! let은 중괄호 안에서 죽는애라고 했다. 그러니 if문안에 if 문 내에 있는 let b 는 그 안에서만 쓰이고 죽는것이다.

그러니 바깥에 if 문인 var b =2 만 쓰인다!

 

 

 

 

 

 

참고자료 : 코딩애플