*위 내용은 <Do it! HTML+CSS+자바스크립트 웹 표준의 정석> 책을 기반으로
공부하면서 작성되었습니다.

변수란?

변수(Variable)

변수란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 가리킨다.
쉽게 말하자면, 변할 수 있는 수를 이른다.

반대로, 값을 한 번 지정하면 바뀌지 않는 데이터를 상수(Constant)라고 한다.

예를 들어, 나이를 계산하는 프로그램을 만든다고 가정해보자.
나이를 계산할 때, 다음과 같은 식을 사용할 수 있을 것이다.

나이 = 올해 연도 - 태어난 연도 + 1

여기서 변수와 상수는 각각 무엇일까?
우선, 맨 끝의 '1'은 값이 변하지 않는 '상수'라는 것은 모두 납득할 수 있을 것이다.
하지만, 올해 연도와 태어난 연도는 입력하는 때, 입력하는 사람마다 달라지기 마련이다. 따라서 올해 연도와 태어난 연도는 '변수'에 해당한다.

변수 선언의 규칙

변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여주어야 한다.
이를 바로 변수 선언이라고 한다.

자바스크립트에서 변수를 선언할 때는 지켜야 할 규칙이 몇 가지 존재한다.
몇 가지 변수 선언의 규칙에 대해 알아보자.

1. 변수 이름은 영어 문자와 언더스코어(_), 숫자를 사용한다.

변수 이름의 첫 글자는 영어 대소 문자나 언더스코어(_)만 사용가능하다.
이 말은 즉슨, 우리가 흔히 문서 제목을 지을 때 넣곤 하는 숫자나 기호, 띄어쓰기 등은 허용되지 않는다는 것이다.

사용할 수 있는 변수와 그렇지 않은 변수 이름을 예시로 살펴보자.

yeson, yeson123, _yeson, yeson_123 -> 사용 가능(O)
123yeson, yeson 123, ^yeson, *yeson -> 사용 불가능(X)

2. 자바스크립트는 영어 대소 문자를 구별하며, 예약어는 변수 이름으로 사용할 수 없다.

자바스크립트에서는 영어 대소문자를 구별한다.
즉, yeson과 Yeson, YEson 모두 다른 변수 이름으로 인식하기에 이를 구별해서 사용해야 한다.
또한 var과 같이 미리 정해 놓은 예약어는 변수 이름으로 사용할 수 없다는 규칙을 갖는다.

3. 여러 단어를 연결한 변수 이름은 중간에 대문자를 섞어 사용한다.

주로 한 단어로 이루어진 변수 이름은 모두 소문자로 쓰고, 두 단어 이상인 변수 이름은 totalAction이나 TotalAction 또는 Total_Action과 같이 중간에 대문자를 섞어 사용해주어야 한다.
이와 같은 규칙을 낙타 표기법(camel case)이라고 한다고 한다.
반드시 낙타 표기법을 사용해야 하는 것은 아니지만, 많은 개발자들이 이 방법을 사용하므로 웬만하면 따르는 것이 좋다고 한다.

4. 변수 이름은 의미있게 작성해야 한다.

프로그래밍할 때, 사용되는 변수는 수십 개가 넘어가기도 한다.
이 때, 각 변수의 이름을 제대로 작성하지 않으면 각 변수의 역할을 일일이 기억하기가 쉽지 않을 것이다. 따라서 변수 이름만 보고도 대충 어떤 값인지 추측할 수 있도록 작성하는 것이 중요하다.
예를 들어, 시험 점수 합계라면 total로, 평균 점수라면 average와 같이 의미를 쉽게 유추할 수 있는 변수 이름을 정하면 누구나 알아보기 쉬워질 것이다.

앞에서 언급했던 나이 계산 식을 예시로 활용해보자.

나이 = 올해 연도 - 태어난 연도 + 1

위 식에서 변수는 상수 1을 제외한 나이, 올해 연도, 태어난 연도이다.
이 때, 올해 연도의 변수 이름을 어떻게 지을 것인가?
일반적으로 year라고 할 수도 있겠지만, currentYear라고 작성한다면 훨씬 알아보기 쉬울 것이다. 마찬가지로, 태어난 연도 역시 year2라고 하기 보다는, birthYear이라고 변수 이름을 지정하는 것이 훨씬 식별하기 쉬울 것이다.
이를 계산한 값, 즉 나이는 age라는 변수 이름을 지정할 수 있겠다.

변수 선언하기

자바스크립트에서 변수 선언은 다음과 같이 var이라는 예약어 뒤에 변수 이름을 적어주면 된다.

var 변수명

앞선 식을 토대로 예를 들자면, 다음과 같이 변수 선언을 할 수 있을 것이다.

var current Year; //올해 연도 변수 선언
var birthYear; // 태어난 연도 변수 선언
var age; // 계산한 나이 변수 선언

변수 3개를 한꺼번에 선언할 수도 있다.

var currentYear, birthYear, age; //올해 연도, 태어난 연도, 계산한 나이 변수 선언

변수를 선언했다면 , 변수에 값을 저장할 수도 있다.
이를 값 할당이라고 하며, '=' 기호를 사용하여 변수에 값을 저장한다.
값 할당은 변수를 선언한 후에 할 수도 있고, 변수를 선언하면서 동시에도 가능하다.

1)변수 선언과 값 할당 따로하기

var birthYear; //태어난 연도 변수 선언
birthYear = 2000; //변수에 값 할당

2)변수 선언과 값 할당 동시에 하기

var currentYear = 2023; //올해 연도 변수 선언하고 값 할당하기