Front-end/Javascript

[Javacript ] 변수 선언 방식

sky-j 2023. 6. 30. 11:41
반응형

Javascript 변수 종류

1. var

2. let

3. const

1. var 

기존의 많이 사용 됐던 변수이고 단점이 존재한다.

var name = 'bathingape'
console.log(name) //출력값: bathingape

var name = 'javascript'
console.log(name) //출력값: javascript

위의 코드를 보면 같은 이름의 변수를 한 번 더 선언했음에도 에러가 나오지 않고 각기 다른 값으로 출력된다.

 

이는 코드량이 많아질 수록 변수가 어떻게 사용 되고 있는 지 파악하기 힘들며 값이 바뀔 우려가 있다.

그래서 ES6 이후, 이를 보완한 변수 선언 방식인 let, const가 등장했다.

 

2. let, const

위의 코드를 let 변수 선언 방식으로 바꿔 보자.

let name = 'bathingape'
console.log(name) //출력값: bathingape

let name = 'javascript'
console.log(name) 
//출력값: Uncaught SyntaxError: Identifier 'name' has already been declared

name 이라는 변수가 이미 선언 되었다는 에러 메세지를 확인할 수 있다.(const도 동일함)

let, const는 동일한 이름으로 변수를 재선언할 수 없다.

이는 개발자가 에러메세지를 통해 동일한 변수가 다른 곳에서 사용 되고 있음을 직관적으로 알 수 있게 해준다.

 

3. let과 const에 차이점은 무엇인가?

이 둘의 차이점은 immutable

(변경할 수 없는, 불변의) 여부이다.

 

let :

변수에 값을 재할당 가능하다.

let name = 'bathingape'
console.log(name) // bathingape

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

name = 'react'
console.log(name) //react

const : 변수에 값을 재할당 불가능하다.

const name = 'bathingape'
console.log(name) // bathingape

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

name = 'react'
console.log(name) 
//Uncaught TypeError: Assignment to constant variable.
반응형