[JS] 변수와 상수

1. 변수

 프로그래밍 언어를 한 번이라도 배운 적이 있다면, 변수, 상수의 개념에 대해서 한 번씩 들어본 적이 있을 것이다. 이 두 개는 거의 모든 언어에서 약속된 것 같이 개념이 비슷하다. 하지만, 함수형 언어의 일종인 스칼라같은 언어의 경우, 모든 변수가 한 번 저장되면 상수처럼 영원히 값을 변경할 수 없다고 한다.

 

 

 그러나 , 자바스크립트는 함수형 언어가 아니니  C, 자바와 같이 변수, 상수의 개념이 명확하다. 그렇다면 변수는 무엇일까? 변수는 값을 저장하는 저장소이다.  프로그래밍을 배운 사람들은 보통 변수를 값을 수시로 바꿔서 저장할 수 있는 것으로, 상수를 한 번 저장하면 그 값은 영원히 바꿀 수 없는 것으로 알고 있다.

 

 

 당신이 알고 있는 그 개념이 맞다. 자바스크립트도 그 개념이 똑같이 적용된다. 그리고 자바스크립트에서는 변수를 선언할 때 let이라는 예약어를 사용한다. 예약어는 일단 문법이라고 생각하면 된다. 밑의 코드는 변수 선언 예시이다.

/* (1) 변수 선언 예시 */
let message; 

/* (2) 문자열 데이터를 변수에 저장 */
let message = "Hello World!";

/* (3) 변수를 함수에 사용 */
let message = "Hello world!"
alert(message); //알림 창

 

 위 코드는 변수를 한 개만을 선언 했을 때의 예시이다. 그런데 변수를 여러 개 선언해야 한다면? 다음과 같은 방법들이 있다.

/* (1) 한줄 씩 선언하기 */
let name = "Javascript";
let age = 30;
let gender = null;
let message = "Hello World!"


/* (2) 콤마 사용하기, 마지막에만 세미클론(;)을 붙인다. */
let name = "Javascript", age = 30, gender = null, message = "Hello world";


/* (3) 콤마 사용하기 2, 마지막에만 세미콜론(;)을 붙인다. */
let name = "Javascript"
    ,age = 30
    ,gender=null
    ,message="Hello World";

 

(1), (2), (3) 방법 중엔 무엇이 정답이라고 할 수는 없다. 본인 선택이기 때문이다. 하지만 변수의 이름을 짓는 경우에는 카멜 표기법이라는 작성 방식을 따라야 한다. 카멜 표기법이란, 이름 그대로 낙타의 등을 닮은 표기법을 말한다. 보통 우리는 단어와 단어 사이를 구분하기 위해 띄어쓰기라는 방식을 적용한다. 하지만 카멜표기법은 모두 소문자를 쓰되, 첫단어를 제외하고 다른 단어의 첫 글자에만 대문자를 표기한다. 밑의 그림을 보면 어떤 표기방식인지 바로 이해할 수 있을 것이다.

 

 

[그림 1] 카멜 표기법 일러스트, 낙타 대문자(위키백과)

 

 따라서 자바스크립트의 다음과 같은 규칙을 따라서 변수를 작명해야 한다.

• 라틴어어와 숫자를 조합해서 사용할 것

• 카멜 표기법을 이용할 것 

• 예약어를 변수명으로 사용하지 말 것

• 첫 글자를 숫자로 쓰지 말 것

• 기호는 '$'와 '_' 만 사용할 것

 또한 변수명은 간결하고 명확해야한다. 왜냐하면 우리는 컴퓨터가 아니기 때문이다. 코드는 사람이 작성하고 사람이 보기 때문에 우리는 사람이 보기 쉽도록 변수를 작명해야한다. 다음 코드는 올바른 변수 선언 예시를 보여준다.

let supermarketName = "한라마트"; 
let stdNum = "3" //학생 수(Student's number)를 나타낸다.
let _ = 3;
let $ = 4;

console.log(_ + $); //7이 출력된다.



/* 올바르지 않은 선언 예 */

let 1test = 3; //첫 글자는 숫자 X

/* 다른 나라 사람들이 내 코드를 본다 생각하고 장기적인 안목으로 라틴어를 사용하자. */
let 코불어터진당 = "코불어터진당"; 

/* 예약어를 변수 이름으로 작성하지 말것 -> 오류 */
let return;
let Number = 3;
let let = 3;
let var = 2;

 

2. 상수

 상수를 변화하지 않는 수를 말한다. 이것을 선언하기 위해서는 const라는 예약어를 사용한다. 상수는 재할당하려고 하면 다음과 같은 에러 메세지가 출력된다.

/* 상수 재할당 에러 발생시키기 */

const num = 3;
num = 7; 에러 발생
console.log(num);

[그림 2] 브라우저에서 F12(개발자 도구)를 누르면 다음과 같은 에러메세지가 나온다.

 

 상수를 표기하는 방법은 변수와 크게 다를 게 없다. 하지만 대문자 표기법이라는 방식도 존재한다. 대문자 표기법은 상수에서만 적용되는 것이며 기억하기 힘든 값을 상수에 할당해 별칭으로 사용하는 것을 말한다.

const SUN_FLOWER = #f1c40f; // SUN FLOWER COLOR CODE
const CAROT = #e67e22; // CAROT COLOR CODE

 

 만약 CAROT이라는 대문자 표기법을 사용하지 않고 #e67e22이라는 값을 넣어준다면, 이 값을 찾아서 일일히 복사를 해야하는 불편한 점 이 생긴다. 이러한 이유로 대문자 표기법을 쓰며, 이는 다음과 같이 세 가지 장점이 있다.

 

1. 기억하기가 훨씬 쉽다.

2. 오타 확률이 적다.

3. 가독성을 높인다.

 

그리고 간혹 오래된 자바스크립트의 경우 변수를 선언할 때 var라는 예약어를 사용하는 경우가 있다. 이는 다음에 포스팅을 따로 하도록 하겠다.

3. 변수의 재사용

 개발자 중에는 변수를 재사용하는 것을 좋아하는 사람이 있다. 물론 나는 재사용보다는 선언을 주로하는 편이다. 변수를 재사용한다면, 변수 선언에 쏟는 노력을 덜 순 있겠지만 이를 사람이 해독하는데 있어서는 더 많은 시간을 쏟아야 한다. 위에서 언급했듯이 작성된 코드는 컴퓨터가 알아서 해독하지만, 코드를 작성하고 수정하는 것은 사람이 작업한다. 따라서 우리는 사람이 보기 쉽게 코드를 짜야한다. 그래서 변수를 재사용하는 것보다는 필요한 변수가 생기면 추가하는 것이 좋다. 

 

 

 모던 자바스크립트는 코드 최적화를 잘해주기 때문에 변수를 추가한다고해서 성능 이슈가 생기지 않는다. 따라서 상황에 따라서 재사용은 할 수는 있겠지만, 되도록이면 변수를 추가해주는게 좋다. 

 

4 . 참고자료

1. 코어 자바스크립트 - 변수와 상수

2. let, const, var - Nomard Coder

3. 낙타 대문자 - 위키백과

4. https://flatuicolors.com/