변수의 기본

변수란 데이터를 식별할 수 있는 고유 식별자를 의미합니다.
자바스크립트에서 사용하는 변수의 정의와 왜 사용하는지 등 기초 개념에 대해 이해하기 쉽게 다룹니다.

변수의 필요성

자바스크립트에서는 다양한 데이터를 다룹니다.
일반적으로 생각하기 쉬운 문자열이나 숫자도 있지만, 배열과 객체 등도 모두 데이터입니다.

이러한 데이터들을 반복적으로 다루거나 계산, 혹은 변형하는 경우가 대부분입니다.
다루는 데이터는 짧을 수도 있고, 매우 길고 복잡할 수도 있습니다.

이때 다루는 데이터를 간단한 식별자, 쉽게 말하자면 데이터의 닉네임으로 정하고 이 닉네임을 데이터 대신 사용해서 반복적으로 다루거나 계산 혹은 변형하면 개발자 입장에서 매우 편리할 것입니다.

즉, 변수는 이 데이터의 닉네임, 정확한 용어로 데이터와 함께 식별할 수 있는 '고유 식별자'를 의미하며, 데이터를 쉽게 다루기 위해 사용합니다.

다음은 변수를 사용하지 않았을 경우와 변수를 사용했을 경우를 비교한 예제입니다.

JavaScript 
/* 변수를 사용하지 않았을 때 - 반복적인 문자열 작성해야 하는 번거로움이 있다. */
console.log("내가 가장 좋아하는 과일은 바나나입니다.");
console.log("내가 가장 좋아하는 과일은 사과입니다.");
console.log("내가 가장 좋아하는 과일은 체리입니다.");
console.log("내가 가장 좋아하는 과일은 포도입니다.");

/* 변수를 사용했을 때 - 반복적인 문자열을 작성해야 하는 번거로움이 없다. */
let favorite = '내가 가장 좋아하는 과일은 '; // 반복되는 문자열을 변수로 사용

console.log(favorite + "바나나입니다."); // '내가 가장 좋아하는 과일은 바나나입니다.'
console.log(favorite + "사과입니다.");  // '내가 가장 좋아하는 과일은 사과입니다.'
console.log(favorite + "포도입니다.");  // '내가 가장 좋아하는 과일은 포도입니다.'
console.log(favorite + "체리입니다");   // '내가 가장 좋아하는 과일은 체리입니다.'

코드 부연설명
consol.log()는 브라우저 콘솔과 Node.js 환경에서 메시지를 출력하는 기본 내장 함수입니다.

위 예제를 보면 알 수 있듯이, 반복되는 문자열을 하나의 변수로 사용하면 코드가 훨씬 간단해지고, 반복되는 내용을 쉽게 확인할 수 있어 편리합니다.

변수를 사용하는 또다른 이유 중 하나는 변수를 사용했을 때 데이터를 일괄적으로 변경하고 관리하기 쉽다는 점입니다.
만약 코드에서 동일한 데이터가 여러 곳에 사용되는데, 이 데이터를 나중에 바꿔야 한다고 가정하겠습니다. 아래의 예제처럼 말이죠.

JavaScript 
/* 변수를 사용하지 않았을 때 - 모든 줄을 하나씩 수정해야 하는 번거로움이 있다. */
console.log("홍길동이 가장 좋아하는 과일은 바나나입니다.");
console.log("김철수가 가장 좋아하는 과일은 바나나입니다.");
// ... 만약 '바나나'를 '사과'로 바꾸려면 모든 4줄을 다 수정해야 함

/* 변수를 사용했을 때 - 변수 선언부 한 줄만 수정하면 모든 값이 바뀐다. */
let favoriteFruit = '바나나'; // 핵심 데이터를 변수로 사용

console.log("홍길동이 가장 좋아하는 과일은 " + favoriteFruit + "입니다.");
console.log("김철수가 가장 좋아하는 과일은 " + favoriteFruit + "입니다.");
// ... '바나나'를 '사과'로 바꾸려면 let favoriteFruit = '사과'; 만 수정하면 됨

만약 이 예제에서 '바나나'를 '사과'로 바꾸어야 한다면, 변수를 사용하지 않은 코드는 등장하는 모든 '바나나'를 하나하나 수정해야 합니다. 하지만 favoriteFruit 변수를 사용한 코드는 변수를 선언한 단 한 줄만 수정하면 되기 때문에 실수를 줄이고 작업 속도를 크게 높일 수 있습니다.

변수 만들기

변수를 만들려면, 변수로 사용할 고유한 식별자, 즉 변수명을 정하고 var 또는 let, const 중 하나의 키워드를 변수 이름 앞에 붙입니다. 그 다음 오른쪽에 할당(Assign) 연산자로 불리우는 =과 할당할 데이터, 즉 값을 작성하면 됩니다.

JavaScript 
var favorite = "내가 가장 좋아하는 과일은 ";

/* 또는 */

let favorite = "내가 가장 좋아하는 과일은 ";

/* 또는 */

const favorite = "내가 가장 좋아하는 과일은 ";

코드 부연설명
할당 연산자인 = 앞뒤의 공백은 시각적으로 편리하게 구별하기 위해 사용한것으로, 공백이 있거나 없거나 아무런 상관이 없습니다.

이렇게 변수를 만드는 것을 "변수를 선언(Declare)한다" 또는 "변수를 정의한다"라고 말합니다. 좀 더 세부적으로 말하자면 '변수를 선언"함으로써 "변수를 정의"하게 됩니다.

변수의 초기화

변수를 선언할 때 값을 할당하는 것을 변수의 초기화(Initialization)라고 합니다.
반면에 변수를 선언할 때 값을 할당하지 않는 것을 "변수의 초기화를 하지 않았다"라고 합니다. ' 초기화(Initialization)'라는 용어는 자바스크립트에서 많이 사용되는 용어입니다.

JavaScript 
// 초기화한 변수
var a = 1;

// 초기화하지 않은 변수
var b;

변수의 선언 방식과 규칙

자바스크립트에서는 변수의 선언 방식에 따라 변수를 다루는 방법과 특징이 달라집니다.
변수를 만들때(선언할 때) 변수로 사용할 고유한 식별자, 즉 변수명을 정하고 var 또는 let, const 중 하나의 키워드를 변수 이름 앞에 붙인하고 했습니다.

변수의 종류

자바스크립트에서는 변수명 앞에 붙는 var 또는 let, const 중 어떤 키워드를 사용해서 변수를 선언하느냐에 따라 변수의 종류를 구별합니다.
또한, 이 세 가지 키워드로 선언되는 변수의 구문 형식(Statement)을 각각 'var 선언문', 'let 선언문', 'const 선언문'이라고 합니다. 자바스크립트는 이렇게 세 가지 종류의 변수 선언문이 있습니다.

변수 선언문의 종류에 따라 변수를 사용하는 방식의 규칙이 정해져 있으며, 변수에 데이터, 즉 값을 할당하는 방식도 규칙이 정해져 있습니다.

변수 선언문에 따른 변수의 종류와 선언 방식, 특징에 대해서는 각각의 링크되는 페이지를 참고하세요.

변수명 규칙

자바스크립트에서 변수로 사용할 고유한 식별자, 즉 변수명을 정할 때는 몇 가지 규칙을 지켜야 합니다.

  • 변수명은 특수 문자를 제외한 문자, 숫자, 언더스코어(_), 또는 달러 기호($)를 사용할 수 있습니다. 공백(띄어쓰기)은 사용할 수 없습니다.
  • 단, 변수명의 첫 글자에는 숫자가 올 수 없습니다.
  • 자바스크립트에서 사용되는 예약어(Reserved Words)는 사용될 수 없습니다.
  • 변수명의 대소문자를 각각 구분합니다. 대문자 A와 소문자 a 소로 다른 변수명입니다.

예약어(Reserved Words)란?
자바스크립트가 특별한 기능을 수행하도록 이미 정해 놓은 단어들입니다. 예를 들어, 변수를 선언할 때 사용하는 let, const, 함수를 정의하는 function, 조건을 나타내는 if 등이 있습니다. 자바스크립트는 이 단어들을 변수명으로 사용하면 해당 단어의 본래 목적을 잃어버리고 충돌이 발생할 것을 방지하기 위해 사용을 금지합니다.

변수명의 가독성을 위한 제안(Naming convention, 네이밍 컨벤션)
  • 변수명으로 알파벳, 한국어 등 유니코드 문자셋이면 모두 사용할 수 있습니다.
    하지만, 가독성을 위해 문자의 경우에는 알파벳을 사용하는 것이 좋습니다.
  • 자바스크립트 명세서 등에서는 카멜 표기법(camel case 카멜 케이스)을 사용합니다. 이것은 관례이며, 가급적 이 관례를 따르는 것이 무난합니다.

카멜 표기법(camel case, 카멜 케이스) 또는 낙타 표기법은 프로그래밍에서 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위하여 따르는 관례입니다. 이름의 시작은 항상 소문자로 합니다. 이어지는 각 단어의 첫 글자만 대문자로 표기하고 나머지는 소문자로 씁니다. 단어 사이에 공백이나 밑줄은 사용하지 않습니다.

JavaScript 
// 카멜 표기법(camel case, 카멜 케이스)
var firstName
let calculateTotalPrice

하지만, 코드를 작성하는 개발자가 일관성을 유지한다면 카멜 표기법이 아니더라도 좋습니다.

자바스크립에서 생성자 함수나 클래스의 경우에는 카멜 표기법이 아닌 파스칼 표기법을 사용하는 것이 관례입니다.

파스칼 표기법(PascalCase, 파스칼 케이스)에서 이름의 시작은 항상 대문자로 합니다. 이어지는 각 단어의 첫 글자만 대문자로 표기하고 나머지는 소문자로 씁니다. 단어 사이에 공백이나 밑줄은 사용하지 않습니다.

JavaScript 
// 파스칼 표기법(PascalCase, 파스칼 케이스)
var FirstName
let FalculateTotalPrice

같이 보기