본문 바로가기
FRONTEND/Javascript

[Javascript] CONST, LET, VAR 차이 / SCOPE

by LAY CODER 2021. 4. 9.
728x90

CONST

 

  • 상수(변하지 않는 값)
  • 누군가가 인위적으로 변수의 값을 바꿀 수 없으니 보안상 좋다.
  • 다양한 thread가 동시에 접근해서 값을 변경해서 오류가 나는 것을 막아줄 수 있다.
  • human mistake을 방지 할 수 있다.
  • 'const' 는 아래처럼 변수 재선언, 재할당 둘 다 불가능
  • {} 단위의 scope

 

EX1) - 재선언, 재할당 불가

const name = 'JASN'

console.log(name) // JASN


const name = 'OK'

console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared


name = 'OK'

console.log(name) //Uncaught TypeError: Assignment to constant variable.

 

 

EX2) - {} 단위의 scope

const hello='hello!';

{

    const hello='inner hello!';

    console.log(hello); // inner hello!

}

console.log(hello); // hello!

 


 

LET

 

  • 'let' 은 변수 재선언은 불가 하지만, 재할당은 가능
  • {} 단위의 scope

 

EX1) - 재선언 불가

let name = 'JASN'

console.log(name) // JASN



let name = 'OK'

console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared



name = 'OK'

console.log(name) // OK

 

EX2) - {} 단위의 scope

let hello='first hello';

{

    let hello = 'inner hello';

    console.log(hello); // inner hello

}

console.log(hello); // first hello

 


 

VAR

 

  • es6 이전의 변수 선언 방식
  • 변수가 선언 되기 전에도 값을 할당할 수 있고 출력할 수도 있다.(var hoisting)
  • hoisting(올려주다) : 어디에서 선언했는지와 관계없이 선언을 항상 제일 위로 끌어올려 주는 것.
  • function 단위의 scope
  • var 은 변수 재선언, 재할당 모두 가능

 

EX1) - 재선언,재할당 가능

var name = 'JASN'

console.log(name) // JASN



var name = 'OK'

console.log(name) // OK



name = 'JASN'

console.log(name) // JASN

 

EX2) - function 단위의 scope

var hello='hello';

if(true) {

    var hello = 'hello in if';

}

console.log(hello); // hello in if

 


 

Conclusion

 

 

재할당이 필요없는 경우

 

const를 사용해 불필요한 변수의 재사용을 방지

 

 

재할당이 필요한 경우

 

let을 사용

 

References


https://backstreet-programmer.tistory.com/76

velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

hianna.tistory.com/314

 

 

 

댓글