[초심자를 위한 Javascript] 2. 변수와 상수

1. 변수 (Variable)

변수는 특정 이름에 어떤 값을 저장할 수 있는 공간입니다. 그리고 그 공간에는 다른 값도 들어올 수 있습니다. 변화가 가능한 값이 계속해서 들어올 수 있는 공간이다라는 의미에서 변수라고 말합니다.

값이라는게 무엇일까요?
게임을 좋아하시는 분들은 캐릭터의 체력, 공격력, 방어력, 레벨 등을 생각할 수 있고, 제 블로그를 보면 방문자 수, 포스팅 수 등 다양한 데이터가 있는 것을 볼 수 있습니다. 이러한 데이터는 계속해서 생겨나고, 빠르게 변할 수 있다는 특징을 가지고 있죠. 이러한 데이터를 처리하기 위해서는 저장할 수 있는 공간이 필요합니다. 이 공간이 바로 변수입니다.

아래는 간단한 날짜 확인 코드입니다. 콘솔 창에 따라 쳐보시고 엔터를 치면 결과를 확인할 수 있습니다.
콘솔 창에서 여러 줄의 코드를 실행없이 계속해서 입력하고 싶다면, 다시 말해 줄 바꿈을 포함해서 코드를 작성하고 싶다면 Shift + Enter를 치면 됩니다. 그냥 엔터를 칠 경우에는 해당 코드가 실행되어버리거든요. 그리고 코드에는 // 뒤에 설명을 적어두었는데, 이 부분은 해당 코드가 무얼 의미하는지 추가 설명한 주석을 의미합니다. 이 부분은 코드에 직접적인 영향을 주지 않고, 단순히 코드를 이해할 수 있도록 첨언하는 문법입니다. 이 글을 보고 따라하시는 분들은 코드를 입력할 때 따라 적으실 필요는 없습니다.

let date = new Date(); // 현재 날짜를 date 변수에 저장
alert(date); // date에 저장된 값을 알림창에 출력

코드를 실행했을 때 위의 결과처럼 현재 날짜를 알려주는 알림 창이 나왔나요? 이렇게 별도의 프로그램을 사용하지 않고도 웹 브라우저를 이용해서 자바스크립트 코드의 결과를 바로 볼 수 있습니다.

데이터는 정말 다양한 값을 가질 수 있기 때문에, 자바스크립트에서는 데이터의 종류를 구분해놓았습니다. 이는 프로그래밍을 위한 언어마다 종류가 다른데요, 자바스크립트에서 쓰이는 데이터의 종류가 무엇이 있는지 살펴보겠습니다. 아래의 코드를 콘솔창에 한 줄씩 따라 치면서 손에 코딩을 익혀보세요! 주석은 치지 않으셔도 괜찮습니다.

let varString = 'hello'; // 문자열
varString = 'change string...'; // 값 변경

let varNumber = 123; // 숫자
let varBoolean = false; // 불린
let varNull = null; // null
let varUndefined = undefined; // undefined
let varArray = []; // 배열
let varObject = {}; // 객체
let varFunction = function() {}; // 함수객체

첫 번째 줄을 해석해보면, let varString은 자바스크립트 엔진(자바스크립트 해석 도구)에게 '나 방금 데이터가 추가됐으니까 varString이라는 이름으로 데이터 저장공간을 마련해줘!' 라고 말하는 것입니다. 그 후에 varString이라는 이름을 가진 데이터 저장공간에 'hello' 라는 문자열을 저장합니다. 이러한 코드 방식을 '변수 선언'이라고 표현하고, 이렇게 변수를 선언하자마자 값을 대입하는 방식을 '변수를 초기화한다'라고 표현합니다. 그 다음 줄에는 varString에 'change string...'이라는 새로운 문자열을 저장하게끔 코드를 작성했는데, 이렇게 변수에 값을 저장하는 행위를 프로그래밍에서는 변수에 데이터를 대입(assign)한다고 표현합니다. 마지막으로 ;(세미콜론)은 문장이 끝났음을 알리는 프로그래밍 기호입니다.

---

대입에서의 =

여기서 주의해야할 점은, 대입한다는 표현을 = 으로 작성했는데 수학에서의 같다(equal)과는 다르다는 것입니다.
varString과 'hello'가 같다는 것이 아니라, varString에 'hello'를 저장한다는 의미로 해석해야 한다는 것을 꼭 기억하세요!

---

그런데 변수 이름을 짓는 데에는 규칙이 몇가지 있습니다. 숫자로 시작하면 안되고, 자바스크립트 내부에서 이미 기능을 정의한 키워드들은 변수의 이름으로 사용할 수 없습니다. for, if, import ... 등 여러 키워드가 존재하며, 자바스크립트엔진에서 키워드로 변수 이름을 지었을 경우 에러를 통해 알려주기 때문에 모든 키워드를 외우지 않으셔도 괜찮습니다.

 

2. 상수 (Constant)

let x = 1; console.log(x); // 1
x = 123;
console.log(x); // 123

const value = 5555;
console.log(value); // 5555;
value = 6666; // Error: "value" is read-only

자바스크립트에서 const는 상수(Constant)입니다. 변수와 달리, 상수는 한번 선언하고 값이 바뀌지 않는 데이터를 의미합니다. 따라서 위의 코드에서 let으로 선언된 x는 1에서 123으로 값을 바꿔서 대입하더라도 이상없이 작동하지만, const로 선언된 value는 새로운 값을 대입하려고 하자 Error을 출력하는 것을 확인할 수 있습니다. 에러 메세지를 보면 "Error: "value" is read-only" 라고 나오듯이, value라는 값은 한번 값이 선언되었으면 값을 바꿀 수 없다는 경고 문구입니다.