1 변수(식별자)란?

일반적으로 메모리 공간에 저장된 값을 식별할 수 있는 각각의 고유한 이름을 변수(variable) 라고 부릅니다. 그리고 이 변수에 저장된 실제하는 값을 변수 값(value) 이라고 부르며, 변수가 소지하고 있는 변수의 값 자체나 그 주소를 읽어오는 작업을 참조(reference)라고 합니다.

하지만 변수의 단어적 의미 자체에서도 알 수 있듯이 변수(變數, Variable)는 변할 수 있는 값을 의미하며, 변수 뿐만 아니라 상수(常數, invariable) 또한 식별자의 범위 안에 포함되기 때문에 올바른 표현으로는 식별자 라고 하는 것이 맞을 것입니다. 하지만 관행적으로 식별자를 통칭 '변수' 라고 부르는 것이죠.

정리하자면 사용자의 요청에 의해 자바스크립트 엔진은 변수의 이름으로 매핑 되어있는 메모리 주소를 참조해 공간에 접근하여 저장된 값을 읽거나, 복사하는 작업을 수행하게 되는데, 조작을 하는 사용자 쪽에서는 직접 복잡한 메모리 주소를 일일이 적을 필요 없이 변수(식별자)로 자바스크립트 엔진에 지시를 내릴 수 있는 셈이 되는 것이죠.

2. 변수 선언

변수 선언(variable declaration)은 이러한 변수를 사용자가 생성하는 작업을 의미하며 정확히는 값을 저장하기 위해 메모리의 특정 공간을 확보하고, 변수 이름과 메모리 공간의 주소를 연결하면서 값을 저장할 수 있도록 준비하는 작업을 의미합니다.

그리고 이렇게 확보 된 메모리 공간은 어떠한 메모리 공간에 확보했느냐에 따라 사용자가 메인 작업이 끝날 때 일일이 메모리 공간의 정리를 신경 쓸 필요 없이 자동으로 해제가 되거나(stack), 사용자가 직접 해제를 해주어야 하는 경우(heep)로 나뉘는데요.

이러한 경우 자바스크립트에서는 가비지 컬렉터(garvage collector)에 의해 자동으로 관리되고 있기 때문에 사용자 입장에서는 메모리의 최적화 부분에 집중 할 수 있습니다.

3. 변수 선언 방법

자바스크립트는 기본적으로 다른 언어와는 달리 따로 자료형을 변수 앞에 값에 대한 타입을 네이밍하지 않습니다. 즉 변수를 선언 할때 할당하는 값에 따라 해당 변수의 타입이 동기적으로 바뀐다는 점에서 다른 정적 프로그래밍 언어와는 차별화를 보이는 동적 프로그래밍 언어인데요.

이러한 자바스크립트에서 변수를 선언할 때에는 대표적으로 세 가지 키워드인 var, const, let 중 하나를 사용하게 됩니다. 각각의 키워드에 대한 설명은 다음과 같습니다.

var

자바스크립트의 초기 때부터 변수를 선언할 시 사용되던 기본 키워드 입니다. ES6 이전 까지는 식별자를 선언할 때 var 키워드를 사용했으나, 여러가지 이슈로 ES6부터는 let과 const가 사용되게 되면서 지금은 거의 사용되는걸 찾아 보기 힘든 키워드가 되었습니다.

이 키워드를 사용함에 있어서 발생되는 대표적인 문제를 잠깐 거론해 보자면, 함수 레벨 스코프 방식을 따르고 있는 해당 키워드의 특성상 인한 기존 데이터의 덮어쓰기 이슈로 인한 현업에서의 부적합성을 예로 들수 있겠습니다.

① function example() {
  if (true) {
    var x = 10;
  }
  console.log(x); // var 키워드로 선언된 x는 블록 스코프 레벨이 아니라 함수 스코프레벨을 따르므로 if문 내에서만 x를 사용하려는 사용자의 의도와는 반대로 함수 내에서 언제든지 x를 사용 가능합니다.)
}

② var name1 = "이거는 A의 식별자 입니다." // 최초 변수를 선언한 후
  var name1 = "이 키워드는 이제 B꺼 입니다." // 같은 키워드로 다시 재선언이 가능합니다.

let

var이 가지는 치명적인 단점을 보완하고자 const와 함께 등장한 키워드 입니다. let 키워드는 한번 선언한 변수의 이름은 다른 변수에서 같은 키워드의 이름으로 다시 선언하는 것이 불가능하며, 이 키워드는 블록 레벨 스코프의 개념이 적용되므로보다 보다 편리하게 변수의 유지 및 관리가 가능합니다.

① let name1 = "이것도 A꺼 입니다." // 최초 변수 선언 후 
  let name1 = "이건 이제 B가 차지하겠습니다만?" // X 중복으로 변수를 선언하는 것은 불가.

② name1 = "뭐래, 이건 A 꺼인데 ㅋㅋ" // 이미 선언 된 변수에 다른 값으로 초기화 하는 것은 얼마든지 가능.

③ let name2; // 변수를 선언만 해주고 초기화를 하지 않을 경우 default 값으로 undefined로 초기화되며
  name2 = "이거라도 B 껄로... ㅜㅜ" // 이후에 다른 값으로 할당하는 것이 가능합니다.

const

ES6에서 let과 등장하였으며, 큰 틀에서는 let과 별 차이가 없으나 가장 강력한 점을 꼽자면, 한번 대입한 원시값은 추후 변경 불가능한 값이 되며 재할당 또한 금지되어 결과적으로 해당 변수의 값을 상수로 설정할 수 있습니다. 또 const 키워드는 식별자의 선언과 초기화를 동시에 진행해 주어야 하며
선언만 진행하려는 경우 에러가 발생됩니다.

한가지 알아두면 좋을 점은, const 변수가 객체일 경우에는 객체를 아예 다른 객체로 할당하는 것은 불가능하나, 객체 안에 있는 프로퍼티의 의 키나 값을 수정 및 삭제, 추가하는 것은 작업은, 배열 또한 배열 자체를 재할당 하는 것은 불가능하나 배열 안의 원소들을 수정 및 삭제, 추가하는 것은 가능합니다.

① const name1 = "이거슨 A의 것이여" // const로 선언된 식별자는 초기화 또한 동시에 진행이 되어야 합니다.
  name1 = "다른 값으로 바꾸고 싶지만..." // X 한번 할당 된 값은 다른 값으로 재할당이 불가능하며
② const name2; // X let과 달리 변수를 선언하면서 동시에 값을 할당(초기화) 해주어야 합니다.
③ const iAm = {
  name : "Re_Go",
  age : 30,
  marriage : false
}; // 객체를 선언한 후 

iAm = {
  identify : undefined
}; // 객체 자체를 새로운 객체로 재할당 하는 할 경우 대입연산자에 대한 에러로 TypeError: Assignment to constant variable. 가 출력됩니다.

iAm.newName = iAm.name; // 키의 이름을 바꿀 경우 직접 바꾸는 것은 불가하며, 기존의 키 이름을 새로운 키 이름에 할당하거나, delete 키워드를 사용해 기존의 키를 삭제하고 새로운 키를 네이밍 하는 방법으로 변경 가능합니다.
iAm.name = "신원 불명" // 반면 값을 바꾸는 경우에는 통상적으로 닷 노테이션이나 브라켓 노테이션으로 접근하여 바꾸는 것이 가능합니다.

★ 참고로 let, const 키워드로 선언된 변수는 var 키워드와는 다르게 블록 스코프의 방식이 달라 전역 객체(window)의 프로퍼티가 되지 않는다는 점에서도 var와의 차이점을 확인할 수 있습니다.

4. 식별자 네이밍 규칙

식별자 네이밍(Naming) 규칙은 변수명이나 함수명 등의 식별자의 이름을 지정할 때 지키도록 권장되는 통상적인 규칙으로, 복잡한 개념 없이 간단한 규칙들로 구성되어 있습니다.

이러한 네이밍 규칙을 지키며 식별자의 이름을 지정해야
자바스크립트의 오류를 최소화 할 수 있습니다.

① 식별자는 첫글자는 기호나 숫자를 제외한 문자로 해야합니다. (관례)
② 식별자는 문자, 숫자, 밑줄, 달러 기호($)를 포함할 수 있습니다. (필수)
③ 변수의 대소문자를 구분합니다. 즉 name과 Name을 다르게 봅니다. (필수)
④ 이미 예약되어 있는 키워드(예약어)는 식별자 이름으로 지정할 수 없습니다. (필수)
⑤ 식별자의 이름은 저장되는 값이나 목표하고자 하는 작업, 혹은 변수나 함수, 클래스나 객체 등의 개념에 연관있는 의미 있는 이름으로 네이밍 할 것을 권장합니다. (관례)

// 식별자 네이밍 규칙에 따른 변수의 선언
var myVariable;
function calculateTotal() { /* ... */ }
class Customer { /* ... */ }
let user1;
const _privateVar;
let $specialVar;

// 규칙을 지키지 않은 변수의 선언
let Object = {}; // 예약어인 Object를 식별자로 사용하였으므로 규칙 위반입니다.
let %thisName = "Re_Go" // 식별자의 이름 처음 문자가 문자, 숫자, 밑줄, 달러 기호를 제외한 나머지 기호로 구성되어 있으므로 규칙 위반입니다.
let nfqjofnwodn = function (){}; // 무슨 역할을 수행하는 함수인지를 식별자로만 봐서는 판단할 수 없기 때문에 사용은 가능하나 권장 되지 않은 규칙입니다.

5. 네이밍 케이스 종류

식별자의 네이밍 규칙 중에는 대소문자를 구분하여 네이밍을 짓게 되는 케이스의 종류로는 카멜 케이스, 파스칼 케이스, 스네이크 케이스 등이 존재하는데,

변수나 함수, 객체나 클래스의 식별자를 선언할 경우 카멜 케이스(Camel Case)를, 생성자 함수나 클래스를 생성할때는 파스칼 케이스(Pascal Case)가 권고됩니다.

let korean FamousePlace = "Seoul" // 카멜 케이스 예시(식별자의 이름이 낙타 등처럼 생겼습니다.)

function Course () {
  console.log("swimming pool")
}; //파스칼 케이스 예시 (첫 머리글이 대문자 입니다.)