본문 바로가기
Javascript

자바스크립트 변수 (Javascript Variables)

by 40's Programmer 2023. 7. 24.
반응형

변수란?

말그대로 변하는 값입니다. 모든 프로그래밍 언어의 기초는 프린트문과 변수 설정에서 시작하는 것 같아요. 어떠한 데이터도 담을 수 있는 박스 같다고 코드카데미에서는 설명해주네요.

 

출처 : Codecademy

 

자바스크립트에서 변수 선언 방식은 3가지나 있었습니다. 파이썬에서는 구분을 안해도 되는 것 같았는데...

var isStudent = true;
let name = "John";
const age = 30;

 

 

변수 선언 방법

2015년 이전에는 Var로만 변수를 선언할 수 있었다고 합니다. 그런데 ES6 버전에서 let, const 방식이 추가된거죠.

 

var myName = 'John';
  • 새 변수를 생성하는 var 명령어를 입력합니다
  • 변수의 이름인 myName을 씁니다.
    • 자바스크립트에서는 낙타 케이싱이라고 해서 첫 번째 단어는 소문자 그 다음 단어의 첫 글자는 대문자로 씁니다
    • 그리고 자바스크립트에서는 대문자, 소문자를 구분하기 때문에 잘못쓰면 에러가 많이 나더라구요
  • =은 할당 연산자입니다. 
  • 'John'은 변수에 할당한 값입니다.
  • 마지막으로 세미콜론(;)을 찍어줍니다. 자바스크립트의 특징입니다.
  • 요약하면, myName이라는 변수에 John이라는 텍스트를 선언했다는 뜻입니다.
let name = 'John';
const age = 30;

마찬가지 방법으로 let과 const를 사용할 수 있습니다.

 

var, let, const의 차이점

결국 이게 중요한 포인트입니다. let과 const가 나온뒤 부터는 var를 쓰지 않는게 권고사항이라고 하는데요. 왜 그럴까요?

 

var는 변수 재선언이 가능하다

이게 무슨 말이냐면 개발자가 실수로 똑같은 변수명을 선언했을 때 에러가 안난다는 뜻이에요.

var myName = 'John'
var myName = 'Tony'
// 오류가 나지 않고 myName에 'Tony'가 할당됩니다

 

만약 개발자가 myName에 Tony라는 이름을 다시 넣으려고 했다면 아래와 같이 했을 거에요. 위의 경우는 개발자가 의도하지 않은 방식으로 변수값이 변경된 겁니다. 

var myName = 'John'
myName = 'Tony'

 

그래서 var를 사용할 때는 항상 개발자가 변수명이 중복되지 않도록 스스로 꼼꼼히 관리했어야겠죠? 그런데 이제 let, const는 동일한 변수명으로 선언할 때 에러를 뱉습니다. 이미 선언한 변수명이 있다고 말이죠. 그럼 let과 const의 차이는 무엇일까요?

 

let은 변수 재선언 불가, 변수값 재할당 가능

 

위에서 언급했던 것처럼 아래 코드는 에러가 납니다. 

let myName = 'John'
let myName = 'Tony'
// 오류가 납니다
// Identifier 'myName' has already been declared

하지만 아래와 같이 넣으면 변수값이 잘 수정됩니다.

let myName = 'John'
myName = 'Tony'

 

const는 변수 재선언 불가, 변수값 재할당 불가

const는 let보다 더 엄격합니다. 변수값이 혹시나 변하면 안될 때 쓰는 명령어입니다.

const myName = 'John'
myName = 'Tony'
// 오류가 납니다
// TypeError: Assignment to constant variable.

 

 

정리해보면 다음과 같습니다.

  var let const
변수 재선언 O X X
변수값 재할당 O O X

 

반응형