자바스크립트의 변수

프로그래밍의 문법은 바뀌기 마련입니다. 없던 것들이 생기고, 있던 것들이 없어집니다. 자바스크립트를 배우려는 분들에게도, 이미 알고 있는 분들에게도 지금 제일 중요한건 바뀐다고 확실시 된 새로운 자바스크립트 문법(es6)일 것이라고 생각합니다. 제가 작성할 자바스크립트 강의들은 "~~을 사용해왔지만 새롭게 추가된 ~~도 있습니다."라는 형태로 진행될 것 같습니다. 자바스크립트도 얼른 끝내고 빨리 또 여러가지를 같이 만들어보겠습니다 !

변수란 무엇일까요?

---

변수라는 것은 값을 담고 있는 상자입니다. 그리고 이름에서도 알 수 있듯이 변할 수 있는 값을 나타냅니다. 크롬에서 새 창을 연 다음 주소창에 about:blank를 입력해주세요. 그러면 안에 내용이 없는 창으로 이동합니다. 그리고 f12번을 누르고 크롬개발자 도구가 나타나면 console을 클릭해주세요.

오늘의 실습은 크롬개발자 도구의 콘솔창에서 진행합니다.

간단하게 콘솔창에 변수들을 입력해보겠습니다. 변수 앞에는 var라는 키워드가 붙습니다. 

var x = 10;
var y = 20;
var z = x + y;
z;

변수란 것은 값을 담는 상자라고 위에서 설명했죠? x라는 상자엔 10을 담고, y라는 상자엔 20을 담았습니다. 그리고 z에는 x의 값과 y의 값이 더해진 30이 담기고, 마지막 줄엔 z의 값을 물어봤습니다. 콘솔창에서 30이라고 알려주나요? x나 y, z에 다른 값들을 줄 수도 있습니다. 변수는 변할 수 있으니까요. 

var d;
d;

위의 소스코드도 복사해서 콘솔창에 붙여넣어보세요. 이번에는 undefined라고 알려줄 겁니다. 자바스크립트는 유연한 언어입니다. 값을 넣지 않고 미리 선언만 해도 됩니다. 이럴 경우 undefined라는 값이 담기게 됩니다. 미리 선언하고 값을 변경해도 상관없습니다.

d = 10;
var e = 7, f = 6;

var d;를 통해서 선언만 하면 undefined 값이 나왔었죠? 위에 소스코드를 바로 밑에 실행하면 d의 값은 10으로 바뀝니다. 그리고 e와 f처럼 여러개를 한번에 선언할 수도 있습니다. 

변수의 형태에 대해서 살펴보도록 하겠습니다.

---

var는 변수를 선언할 때 사용합니다. 변수(variable)에서 가져온 말입니다. 위의 예시들에서는 변수의 이름을 a, b, c라는 이름들로 사용했습니다. 이런 변수의 이름들을 식별자(identifier)라고 부릅니다.

변수뿐만 아니라 앞으로 배울 상수, 함수 이름도 식별자(identifier)라고 합니다.

그리고 =(등호) 기호를 통해서 오른쪽에 있었던 숫자 값을 할당했습니다.  그리고 마지막에는 ;(세미콜론을) 적었습니다. 세미콜론은 구문이 끝났다는 것을 알려줍니다. 꼭 구문이 끝나고 세미콜론을 해주시는 것을 권장합니다.

등호는 값을 할당할 때 사용하고, 구문이 끝나면 항상 세미콜론을 적어주세요.

위의 예시에서는 a나b,c와 같은 이름을 식별자로 사용하긴 했지만 실제로는 그러지 않겠죠. 유저 아이디를 변수에 담을 때 a = "lemoncandy", b = "chocolate" 이러면 나중에 봤을 때 이게 무엇인지 알 수없을 겁니다. 그래서 userid1 = "lemoncandy", userid2 = "chocolate" 처럼 식별자를 정해야 다음에 봤을 때도 어떤 값들이 담겨 있는지 알 수 있을 겁니다. 하지만 이런 이름에도 문제가 있습니다. userid가 user id를 뜻하는 지 use rid를 뜻하는 지 구분이 되어야 겠죠?

그래서 식별자 표기법이 있습니다. 대표적으로 카멜 케이스(camel case)와 스네이크 케이스(snake case)가 있습니다.

소문자로 시작해서 중간에 대문자로 표현하는 것은 카멜 케이스 이고, 문자 사이에 _(언더스코어)를 사용하는게 스네이크 케이스입니다. 

예를 들면 userId는 카멜 케이스, user_id는 스네이크 케이스 입니다.

마지막으로 식별자의 규칙을 알아보고 나서 포스팅을 마무리 하겠습니다. 식별자는 반드시 글자나 $(달러 기호), _(언더스코어)로 시작해야합니다. 그리고 첫글자만 이렇게 시작하고 문자, $, _를 포함해서 숫자도 쓸 수 있습니다. 그리고 var라는 식별자는 사용할 수 없습니다. var 등 몇 몇 단어들은 자바스크립트에서 식별자로 사용하지 못하도록 만들어 놓았습니다. 이런 단어들을 예약어라고 합니다. 예시를 들면 var var = 1;은 에러가 납니다. 

정리해볼까요? 식별자의 첫 글자는 글자, $, _로 시작하고, 그 뒤부터는 문자, $, _, 숫자를 사용하시면 되고, 예약어들은 식별자로 사용 불가입니다.

자바스크립트의 변수에 대해서 알아보았습니다. 다음 시간에는 es6로 달라진 변수와 상수를 다뤄보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.