변수(variable)

변수는 데이터를 담기 위한 메모리 공간을 의미합니다.
쉽게 생각하면, 어떤 값을 담기 위한 상자나 그릇이라고 비유할 수 있습니다.

1. 변수 선언 및 할당

자바스크립트에서는 var 키워드로 변수를 선언하며, 선언함과 동시에 값을 할당할 수 있습니다. 또한 쉼표(,)를 통해 여러 개를 한 문장으로 선언할 수 있습니다.
지정된 초깃값 없이 선언된 변수는 undefined 값을 갖습니다.

✍ example

// var 변수 이름;
// var 변수 이름 = 할당할 값;

var sum; // 변수 sum을 선언. undifined
var a = 3; // 변수 a를 선언함과 동시에 3을 a에 할당
var b, c, d;
var e = 1,
    f = 2,
    g = 3; // 여러 변수를 한 번에 선언 및 초기화 가능

2. 변수 선언 생략

선언되지 않은 변수를 읽으려고 하면 참조 오류가 발생합니다.
변수를 선언하지 않고 사용하는 행위는 버그의 원인이 될 수 있으니, 반드시 선언하고 사용하는 것이 좋습니다. Strict 모드를 활용하면 선언하지 않은 변수에 값을 대입했을 때 오류가 발생합니다. 자세한 설명은 👉 Strict mode 참고!

📌 선언되지 않은 변수에 값을 대입하면?

var 문으로 선언되지 않은 변수에 값을 대입하면 오류가 발생하지 않습니다.
그 이유는 자바스크립트 엔진이 해당 변수를 자동으로 전역 변수로 선언하기 때문인데, 이는 변수의 유효 범위와 관련이 있습니다. 후에 작성하는 글에서 다루도록 하겠습니다!

✍ example

// 선언되지 않은 변수를 읽으려고 할 때
console.log(x); // ➡ ReferenceError: x is not defined(오류 메세지)

// var 문으로 선언되지 않은 변수에 값을 대입할 때
y = 2;
console.log(y); // ➡ 2

3. 변수 끌어올림(호이스팅, hoisting)

hoist의 사전적 정의를 살펴보면, 들어올리다/끌어올리다 라는 뜻을 갖고 있습니다.
프로그램은 작성 순서에 따라 차례대로 실행되지만, 변수 선언은 이 원칙을 따르지 않고 범위에 따라 선언과 할당을 분리시켜 위로 끌어올립니다.

✍ example : 호이스팅 전

console.log(x);
var x;

✍ example : 호이스팅 후

var x;
console.log(x);

📌 선언과 동시에 대입하면?

선언과 동시에 대입하는 코드는 끌어올리지 않습니다.
정확히는 선언부var x는 끌어 올려지지만, 대입부x = 5는 끌어 올려지지 않는다고 설명할 수 있습니다.

✍ example

console.log(x); // ➡ undefined
var x = 5;
console.log(x); // ➡ 5

위와 같은 코드를 다시 구성해보면,

✍ example

var x;
console.log(x); // ➡ undefined
x = 5;
console.log(x); // ➡ 5

로 작성할 수 있습니다.

호이스팅은 다른 언어에는 없는 자바스크립트만의 고유한 특징이나, 이해하기 쉬운 코드 작성을 위해서는 반드시 시작부에 변수를 선언하는 것이 좋습니다.

4. 변수의 이름

📎 식별자

변수, 함수, 라벨 이름 등 사용자가 정의하는 이름을 식별자(identifier)라고 합니다. 식별자는 다음과 같은 규칙을 따라야 합니다.

• 알파벳(A~Z, a~z), 숫자(0~9), 언더바(_), 달러 기호($) 사용 가능
• 첫 글자로는 숫자를 사용할 수 없음. 숫자를 제외한 위의 나머지 중 하나를 사용
• 예약어를 식별자로 사용할 수 없음 (예약어는 아래에서 다뤄요!)

✍ 사용 가능한 예
sum newValue width result

✍ 사용 불가능한 예
1st ❌ (첫 글자 숫자) / new-value ❌ (하이픈은 사용불가) / new ❌ (예약어)

📎 변수 이름 짓기

변수의 이름은 식별자 규칙에 어긋나지 않는다면 자유롭게 지정할 수 있습니다.
그러나 일반적으로는 다른 사람도 변수의 의미를 알 수 있도록 일정한 표기법을 사용하며, 다음의 세 가지 표기법을 많이 사용합니다.

• 캐멀 표기법(camelCase)
• 파스칼 표기법(PascalCase)
• 스네이크 표기법(snake_case)

✔ 캐멀 표기법(camelCase)

캐멀 표기법이란, 두 번째 이후 단어의 대문자 부분이 낙타의 혹처럼 보인다고 해서 지어진 이름입니다.
두 번째 이후 단어의 첫 글자를 대문자로 하며 나머지는 소문자로 표기합니다.

✍ example
newName createLifeGame

✔ 파스칼 표기법(PascalCase)

파스칼 표기법이란, 프로그래밍 언어인 파스칼(Pascal)에서 사용된 표기법입니다.
각 단어의 첫 글자를 모두 대문자로 표기합니다.

✍ example
NewName CreateLifeGame

✔ 스네이크 표기법(snake_case)

모든 단어를 소문자로 표기하며, 단어 사이사이에 언더바(_)를 넣어 표기합니다.

✍ example
new_name create_life_game

변수의 이름을 지을 때는 일반적으로 아래와 같이 작성합니다. (모던 자바스크립트 입문 발췌)

• 캐멀 표기법이나 스네이크 표기법을 사용하여 변수의 의미를 파악할 수 있게 함
• 기본적으로 영어 단어 사용
• 루프 카운터 변수 이름으로는 i, j, k 등을 사용
• 상수는 대문자로 표현 ex) MAX_SIZE
• 논리값 표현 시에는 이름 앞에 is를 붙임 ex) isMouseDown
• 생성자 이름을 붙일 때는 파스칼 표기법을 사용

5. 예약어

예약어란, 자바스크립트 문법을 규정짓기 위한 특수 키워드를 말합니다.
예약어로 지정된 키워드들은 식별자나 프로퍼티 이름으로 사용하지 않으며, 미리 정의된 전역 변수와 전역 함수 역시 사용하지 않는 편이 좋습니다. 사용하더라도 오류는 발생하지 않지만, 본래의 기능을 사용할 수 없게 됩니다.
또한 Window 객체의 이름과 DOM에서 사용하는 객체 이름도 사용하지 않습니다.

자세한 설명은 👉 mdn 키워드 참고!

마치며

긴 글을 작성한 경험이 많지 않아 글 하나를 작성하는데도 많은 시간이 걸리네요😅
혹시나 잘못 작성된 부분이나 빠진 부분이 있다면 댓글로 알려주세요! 읽어주셔서 감사합니다😊

ES6와 관련된 부분은 다른 시리즈를 따로 만들 예정입니다. 참고해주세요🙏

🧐 참고

▪ [mdn JavaScript] : (https://developer.mozilla.org/ko/docs/Web/JavaScript)
▪ [tcpschool] : (http://tcpschool.com/javascript/js_datatype_variable)
▪ 모던 자바스크립트 입문