[모던 자바스크립트 튜토리얼] 2.4 변수와 상수

변수와 상수

🎈 변수(Variable)

변수는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다.
let 키워드를 사용해 변수를 생성한다.
let message;// 변수를 생성(선언)

생성하기만 한 변수는 값이 없는 상태(undefined)이다.

할당 연산자 =를 사용하여 변수 안에 데이터를 저장할 수 있다.

let message;
message = 'Hello' // 문자열 저장

문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있다.

let message;
message = 'Hello'

alert(message); // 변수에 저장된 값을 보여준다.

변수의 선언과 할당을 한 줄에 작성할 수도 있다.

let message = 'Hello'; //변수 정의 및 값 할당
alert(message); //Hello 출력

한 줄에 여러 변수를 선언하는 것도 가능하다.

let user = 'John', age = 25, message = 'Hello';

위처럼 작성하면 코드가 짧아지나, 가독성이 좋지 않기 때문에 권장하는 방법이 아니다.

아래와 같은 방식으로도 변수를 정의할 수 있다.

let user = 'John',
  age = 25,
  message = 'Hello';

let user = 'John'
  , age = 25
  , message = 'Hello';

개인 취향에 따라 작성하면 된다.

var

var는 let과 거의 동일하게 동작하지만 '오래된' 방식이다.
let과 var의 차이점은 추후에 다루도록 한다.
var message = 'Hello';

변수에 저장한 값은 다른 값을 다시 저장함으로써 변경할 수 있다. 이 때 이전 값은 변수에서 제거된다.

let message;

message = 'Hello!';

message = 'World!'; 

alert(message); //World! 출력

변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있다.

let Hello = 'Hello world!';

let message = Hello; // Hello의 'Hello world!' 값을 message에 복사합니다.

alert(Hello); // Hello world!
alert(message); // Hello world!

변수를 두 번 선언하면 에러가 발생한다.(var는 두 번 선언할 수 있다.)

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared

따라서 변수는 한 번만 선언하고 선언한 변수를 참조할 때는 let 없이 변수명만 사용한다.

변수값 변경이 금지되는 언어도 있다. 함수형 프로그래밍 언어가 그렇다. Scala, Erlang 등이 있다.

변수 명명 규칙

자바스크립트에선 변수 명명 시 두 가지 제약사항이 있다.

1) 변수명에는 문자, 숫자, 기호$와 _만 사용할 수 있다.
2) 첫 글자는 숫자가 될 수 없다.

let userName;
let test123;

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법이 흔히 사용된다. 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성하는 방식이다.(ex. myVeryLongName)
유효한 변수명

let $ = 1; // '$'라는 이름의 변수를 선언
let _ = 2; // '_'라는 이름의 변수를 선언

alert($ + _); // 3

유효하지 않은 변수명

let 1a; // 변수명은 숫자로 시작할 수 없다

let my-name; // 하이픈 '-'은 변수명에 올 수 없다.

변수명은 대소문자를 구별한다. apple과 Apple은 다른 변수이다.

비 라틴계 언어도 변수명에 사용할 수 있지만 권장하진 않는다. 코드는 각 나라의 언어와 상관없이 같은 규칙을 사용하기 때문에 범용성이 있는 영어로 작성하는 것이 권장된다.

예약어

예약어는 자바스크립트 내부에서 이미 사용중이거나 사용 예정인 단어이므로 변수명으로 사용할 수 없다.

let, class, return, function 등
let let = 5; // 'let'을 변수명으로 사용할 수 없으므로 에러!
let return = 5; // 'return'을 변수명으로 사용할 수 없으므로 에러!

엄격모드(use strict)를 사용하지 않으면 let 없이도 단순하게 값을 할당하여 변수를 생성할 수 있다.

num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성된다.
alert(num); // 5 출력

3️⃣ 상수(Constant)

변하지 않는 변수를 선언할 땐, let 대신 const를 사용한다.

const myBirthday = '18.04.1982'; //생일은 변하지 않는 날짜이므로 상수에 적합하다.

상수는 재할당하려고 하면 에러가 발생한다.

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다.
대문자와 밑줄로 구성된 이름으로 명명한다.

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

let color = COLOR_ORANGE;
alert(color); // #FF7F00

대문자 상수에는 다음과 같은 장점이 있다.
COLOR_ORANGE는 "#FF7F00"보다 기억하기가 쉽다
COLOR_ORANGE를 사용하면 "#FF7F00"를 사용하는 것보다 오타를 낼 확률이 낮다.
COLOR_ORANGE가 #FF7F00보다 유의미하므로, 코드 가독성이 증가한다.

일반적인 상수 명명과 대문자 상수 명명할 때의 차이는 무엇일까?

위의 16진수 값은 코드가 실행되기 전에 이미 정해진 숫자이다. 하지만 런타임 과정에서 계산되지만, 그 값이 변하지 않는 상수도 있다.

const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;

권장되는 방법은 하드코딩한 값의 별칭을 만들 때 대문자 상수를 사용하는 것이다.

바람직한 변수명

변수에 관한 매우 중요한 사실이 한 가지 더 있다.
간결성, 명확성이다. 변수가 담고 있는 것이 무엇인지 잘 설명할 수 있어야 한다.
다음은 변수 명명 시 참고하기 좋은 규칙이다.
userName이나 shoppingCart처럼 사람이 읽을 수 있는 이름 사용
무슨 의미인지 명확하지 않을 경우 줄임말 또는 a, b, c 등의 짧은 이름은 피한다.
최대한 서술적이면서 간결하게 명명한다. data와 value는 나쁜 이름의 예시이다. 아주 명확한 경우에만 사용한다.
자신만의 규칙이나 소속된 팀의 규칙을 따른다. 사이트 방문객을 user라고 정했다면 관련 변수명 또한 visitor가 아닌 user로 통일하는 방식이다.