#3. Variables ( 변수 )
데이터를 담아내는 공간, Variables ( 변수 )
변수는 문자나 숫자 등 어떤 데이터를 담아내는 공간입니다. 자바스크립트 뿐만 아니라 모두 프로그래밍 언어에는 값을 담아내는 변수가 존재합니다. 흔히 변수를 만들면 “변수를 선언한다.” 라고 표현하는데 자바스크립트에 변수 선언 방법은 다음과 같습니다.
var 변수명 = 데이터;
자바스크립트에 변수를 선언하기 위해서는 var 라는 키워드를 꼭 입력해야 합니다. var 를 사용하지 않고 변수를 선언할 경우 큰 문제가 발생할 수 있기 때문에 자바스크립트에서는 모두 변수에 var 를 입력해야 하는 것으로 기억하는 것이 좋습니다
그리고 처음 개발 언어를 공부를 할 때, "=" 기호때문에 혼란스러운 상황이 발생할 수 있습니다. 개발 언어에서 "="은 "변수와 데이터는 같다"가 아닌 "변수에 데이터를 넣다"라는 의미입니다.
1 + 1 = 2 처럼 변수명 = 데이터라고 생각할 경우 이후에 등장하게 되는 여러 개념들을 잡을 때 혼란이 올 수 있습니다. 필자 또한 처음 개발 언어 공부를 할 때 같다로 인식을 했다가 뒤에 중요 개념들을 학습할 때 멘붕에 빠지곤 했습니다.
이해하기 쉽도록 그림으로 다시 설명드리면, 변수를 선언한다는 것은 "변수명이라고 하는 박스 안에 데이터를 넣는다" 라고 생각하면 됩니다.
그럼 "나비" 데이터를 담고 있는 catName 이라는 변수를 선언해 보겠습니다.
var catName = “나비”;
코드를 해석하면 catName 이라고 하는 박스 안에 "나비" 라고 하는 데이터를 넣었다는 의미입니다. 이를 이미지화시키면 다음과 같습니다.
노파심에 다시 말씀드리면... 절대!!! "=" 은 수학에서의 같다는 의미가 아닙니다.
자바스크립트에서 세미콜론 ( ; )은 문장을 구분해주는 역할을 합니다. 때에 따라 세미콜론을 생략할 수도 있지만 세미콜론을 사용하지 않을 경우 치명적인 오류가 발생할 수 있으니 항상 붙이는 버릇을 갖는 것이 좋습니다.
그리고 변수에 들어가 있는 데이터는 교체 가능합니다.
var fruit = "apple";
fruit = "banana"
console.log(fruit); // banana 출력
"apple" 데이터가 들어가 있는 fruit 변수를 선언하였습니다. 이후 "banana" 데이터를 동일한 변수에 넣을 경우 결과값으로 "banana" 가 출력되는 것을 확인할 수 있습니다. 참고로 이미 선언된 변수에 데이터를 넣을 경우에는 var 를 생략할 수 있다는 점을 주목해 주세요.
console.log() 는 변수에 들어가 있는 데이터 값을 확인하거나 작성된 코드가 문제가 없는지 오류를 체크할 때 사용되는 메소드입니다.
변수 선언시 알아두어야 할 법칙
변수명은 내 마음대로 이름을 지을 수 있을까요? 코드가 길어지다보면 여러 개의 변수를 선언해야 하는 경우가 발생하는데, 자바스크립트에서는 변수명을 지을 때 사용하는 몇 가지 규칙이 있습니다. 다른 프로그래밍 언어에서도 사용되는 공통된 규칙이 있으니 꼭 기억해 두시기 바랍니다.
1. 자바스크립트 예약어는 변수명으로 사용할 수 없습니다.
여기서 예약어란 자바스크립트 안에 기본적으로 내장되어 있는 키워드로 예약어는 변수명으로 사용할 수 없습니다. 변수명으로 사용할 수 없는 예약어의 종류는 아래와 같습니다.
출처 : W3School
굳이 위에 있는 예약어를 전부 외우려고 할 필요는 없습니다. 앞으로 많은 자바스크립트 코드를 작성하다보면 자연스럽게 몸이 먼저 배우게 될 것입니다.
2. 변수명은 영어의 대소문자를 구분합니다.
var catname 과 var catName 은 전혀 다른 변수입니다. 이를 그림으로 살펴보면 "나비"라는 같은 데이터를 catname 과 catName 변수에 넣더라도 이는 전혀 다른 2개의 박스에 각각의 데이터를 넣는 것과 같은 형태입니다.
3. 변수명 첫 문자로 숫자를 사용할 수 없습니다.
즉, var 10people 와 같은 형태로 변수를 선언할 수 없습니다. 만약 숫자를 먼저 입력할 경우 syntaxError 가 발생하게 됩니다. syntaxError 는 글자 그대로 문법적 오류가 발생했다는 의미입니다.
4. 변수명은 데이터가 갖고 있는 의미를 담고 있어야 합니다.
변수명을 지을 때 가장 중요한 것은 데이터가 갖고 있는 의미를 변수명이 제대로 표현했는지 고려해봐야 합니다. 예를 들어 무게를 나타내는 변수를 선언할 때, var w 보다는 var weight 를 사용하는 것이 직관적이고 구체적입니다. 만약 모호한 표현으로 사용할 경우 나중에 코드를 수정할 경우나 다른 개발자에 인수 인계를 할 경우 본인이 작성한 변수명의 의미를 이해하지 못해 난감한 상황이 올 수 있습니다.
5. 캐멀 케이스 또는 스네이크 케이스로 변수를 선언하는 습관을 들여야 합니다.
변수 이름을 지을 때 캐멀 케이스, 스네이크 케이스 방식이 있습니다. 캐멀 케이스는 낙타의 혹처럼 단어의 첫 머리를 대문자로 작성하는 방식입니다. 이러한 모양이 낙타 혹처럼 생겼다고 해서 캐멀 케이스라고 불립니다.
var appleBoxCount
스네이크 케이스는 _ (언더바) 를 사용하여 뱀처럼 길게 변수 이름을 늘려서 짓는다는 의미입니다.
var apple_box_count
뱀 실사 이미지는 적응하기 힘들어 그림으로 대체했습니다. (-_-;;)변수명으로 어떤 케이스를 하든 선택의 자유이지만 필자의 경우에는 텍스트 사이에 _ 를 사용하는 것에 이질감을 느껴서 캐멀 케이스를 더 선호하는 편입니다. 참고로 개발 언어별로 선호하는 케이스가 다르며, 자바스크립트 언어를 쓰는 사람들 간에는 캐멀 케이스로 통일해서 작업을 진행하는 경우가 많습니다.
** 본 글에 조언을 주신 이*혁님께 감사합니다. ^^
