변수와 상수

프로그래밍에서 데이터를 처리하려면 데이터를 저장할 공간이 필요합니다.
자바스크립트에서는 데이터를 저장하는 공간을 변수(variable)와 상수(constant)라고 합니다.

변수

변수는 변하는 수를 뜻합니다.
자바스크립트에서는 값이 바뀔 수 있는 데이터를 저장하고 관리하기 위한 공간으로 변수를 사용합니다. 변수를 만들기 위해서는 자바스크립트 문법에 따라 코드를 작성해야 합니다.

예시

var num = 5 + 10;
// 키워드 식별자 연산자 표현식 값 세미콜론

• 위 코드는 변수 선언과 초기화를 함께 한 예시이며, 여기에는 여러 가지 중요한 요소가 포함되어 있습니다.

변수 구성 요소 상세 설명

1. 키워드 (Keyword)

• 자바스크립트에서 특별한 기능이나 역할이 정해진 단어
• 예: var, let, const, if, for, function 등
• 예약어(reserved word)라고도 불리며, 변수명으로 사용할 수 없습니다

2. 식별자 (Identifier)

• 변수, 함수, 객체 등에 이름을 붙이기 위한 구분자
• 자바스크립트에서 변수를 만들 때 사용하는 이름이 바로 식별자
• 키워드 다음에 위치하며, 사람이 이해하기 쉽게 메모리 공간에 이름을 붙이는 것
  • 예를 들어 var num = 10;에서 num이 식별자입니다.
• 식별자 작성 규칙
  • 영문자, 숫자, $, _ 사용 가능
  • 숫자로 시작할 수 없음
  • 키워드는 사용할 수 없음

3. 연산자 (Operator)

• 코드에서 연산(계산 또는 대입)을 수행하는 기호
• 예: =, +, -, *, / 등
• 예시: num = 5 + 10에서 =는 할당 연산자, +는 산술 연산자

4. 표현식 (Expression)

• 하나의 값을 평가하고 반환하는 식
• 변수 선언 시 우변에 오는 5 + 10은 하나의 표현식이며, 이 표현식의 결과는 15

5. 값 (Value)

• 실제로 저장되는 데이터 자체
• 10, "hello", true, [1,2,3] 등과 같은 리터럴 값

6. 세미콜론 (;)

• 명령문의 끝을 표시하는 기호
• 자바스크립트에서는 세미콜론 생략이 가능하지만, 명시적으로 붙이는 것을 권장합니다

변수 선언, 할당, 초기화

선언(Declaration)

변수를 처음 만들 때 var, let, const 등의 키워드와 식별자를 사용하는 것을 변수 선언이라고 합니다.

var num; // 변수만 선언 (값은 없음)

할당(Assignment)

선언된 변수에 = 기호를 통해 값을 대입하는 행위를 할당이라고 합니다.

num = 20; // 변수 num에 20을 할당

초기화(Initialization)

변수를 선언하면서 동시에 값을 할당하는 것. 즉, 선언 + 할당 = 초기화입니다.

var num = 10 + 20; // num 변수를 초기화

새로운 변수 선언 키워드 let

자바스크립트에서 변수를 선언하는 키워드는 var만 있는 것이 아닙니다.
let은 ES6(ECMAScript 2015)에서 새롭게 도입된 변수 선언 키워드로, var의 여러 단점을 보완해 등장했습니다.

현재 실무나 교육에서는 거의 대부분 var보다 let 혹은 const를 사용합니다.

1. 변수명 중복 선언 불가

var 키워드로 선언한 변수는 같은 스코프 안에서 중복 선언이 가능합니다.
하지만 이는 실수로 같은 이름을 두 번 선언하는 버그를 유발할 수 있기 때문에 문제가 됩니다.

var num = 10;
var num = 50; // 에러 없음

반면, let 키워드는 같은 스코프 안에서 동일한 이름의 변수를 중복 선언할 수 없습니다.

let num = 10 + 20;
let num = 50; // ❌ 에러 발생!

Uncaught SyntaxError: Identifier 'num' has already been declared

• 이처럼 let은 변수명이 중복될 가능성을 차단하여, 실수로 같은 이름을 두 번 선언하는 버그를 막을 수 있습니다.

2. 호이스팅이 다르게 동작함

호이스팅(hoisting)이란, 변수 선언이 코드 상에서 위로 끌어올려지는 것처럼 동작하는 현상입니다.

예시 1

console.log(num);
var num = 10; 

위 코드의 실행 결과는 undefined입니다. 변수를 선언하고 할당하는 초기화 전에 num이라는 변수를 출력하고 있는데도, 오류가 아니라 undefined라는 값을 출력합니다. 이는 호이스팅 때문입니다.
위 코드는 실제로는 호이스팅에 의해 다음 코드처럼 작동합니다.

var num; // 선언이 최상위로 올라옴
console.log(num);
num = 10; // 할당은 원래 자리에 있음

• 호이스팅에 의해 선언부가 최상위로 올라갑니다. 그래서 num이라는 변수를 출력할 때는 값이 없을 뿐, 선언은 된 상태라서 오류가 발생하지 않습니다.

예시2

console.log(num);
let num = 10;

그런데 let 키워드는 호이스팅이 일어나지 않습니다. 그래서 같은 코드를 작성하고 실행하면 num 변수가 정의되지 않았다는 오류가 발생합니다.

Uncaught ReferenceError: num is not defined

• 즉, let은 선언 전에 해당 변수에 접근하려고 하면 에러가 발생합니다. 이런 동작은 변수의 잘못된 사용을 사전에 막아줍니다.

3. 스코프의 범위가 다름

var 키워드와 let 키워드는 스코프의 범위가 다릅니다.

구분	var	let
스코프	함수 스코프	블록 스코프

함수 스코프 (var)

function test() {
	if (true) {
    	var num = 123;
    }
  	console.log(num); // ✅ 123 (if 블록 바깥에서도 접근 가능 - 함수 스코프)
}

블록 스코프 (let)

function test() {
  if (true) {
    let num = 123;
  }
  console.log(num); // ❌ ReferenceError (if 블록 바깥에서 접근 불가 - 블록 스코프)
}

• let은 선언된 블록 내부에서만 유효하기 때문에 불필요하게 변수 범위가 확장되는 일을 막을 수 있어, 예측 가능한 코드 작성에 유리합니다.

상수

변수를 선언할 때 사용하는 키워드는 var, let 외에도 const가 있습니다.
const는 let과 마찬가지로 ES6(ECMAScript 2015)에서 새롭게 도입된 키워드입니다.

기본적으로 const는 let과 다음 세 가지 점에서 동일합니다.

1. 변수명 중복 선언 불가
2. 호이스팅 시 일시적 사각지대(TDZ) 발생
3. 블록 스코프(block scope) 사용

그러나 const는 let과 달리 값을 한 번 할당한 이후에는 변경(재할당)할 수 없습니다.
이 점이 가장 큰 차이이며, 이 때문에 const는 주로 상수(Constant)를 선언할 때 사용됩니다.

const num = 10;
num = 30; // ❌ 에러 발생
console.log(num);

Uncaught TypeError: Assignment to constatn variable.

• const로 선언한 변수는 재할당 자체가 금지되므로, 값을 바꾸는 모든 시도는 TypeError를 발생시킵니다.

변수는 보통 “선언 → 할당”의 과정을 나누어 처리할 수 있습니다.
let은 이를 허용하지만, const는 반드시 선언과 동시에 초기화를 해야 합니다.

const num; // ❌ 선언만 하면 에러
num = 10;

Uncaught SyntaxError: Missing initializer in const declaration

• 즉, const는 “선언만” 하거나 “나중에 값 할당”하는 것이 불가능합니다. 초기화하지 않으면 문법 오류(SyntaxError)가 발생합니다.
• const는 재할당을 금지하여 예측 가능한 코드를 작성할 수 있게 해줍니다.

참고: 객체나 배열도 const로 선언할 수 있음

const는 변수 자체를 재할당하지 못하는 것이지, 객체나 배열의 내부 값은 변경할 수 있습니다.

const user = { name: "Tom" };
user.name = "Jerry"; // ✅ 가능 (속성 변경은 허용)

const arr = [1, 2, 3];
arr.push(4); // ✅ 가능 (배열 조작은 허용)

하지만 아래와 같이 전체를 다른 객체로 바꾸는 건 불가능합니다.

user = { name: "Jerry" }; // ❌ 에러 (재할당 금지)

식별자 명명 규칙

자바스크립트에서 변수나 상수의 이름(식별자)을 지을 때는 반드시 지켜야 할 명명 규칙(Naming Rules)이 있습니다.

이 규칙은 크게 강제 규칙과 관용적(권장) 규칙으로 나뉘며, 프로그래밍의 가독성과 오류 방지를 위해 중요하게 다뤄집니다.

강제적 식별자 명명 규칙

다음 규칙은 자바스크립트 언어 차원에서 반드시 지켜야 하며, 위반 시 문법 오류가 발생합니다.

규칙	불가능 예
식별자에 키워드 사용 불가	var, let, const
식별자에 공백 포함 불가	my School, like food
식별자의 첫 글자는 영문소문자, _(언더스코어), $ 기호만 사용	*name, #age, @email

관용적 식별자 명명 규칙

다음 규칙은 자바스크립트 문법상 오류는 발생하지 않지만, 코드의 가독성과 협업 효율성을 높이기 위해 지켜야 할 코딩 스타일 가이드입니다.

규칙	좋은 예	나쁜 예
식별자는 영문으로만 작성	name, age	이름, 나이
식별자는 의미 있는 단어로만 작성	userName, birthYear	a, x1, temp

• 변수명에는 의미를 담아야 코드를 처음 읽는 사람도 쉽게 이해할 수 있습니다.

식별자 표기법

자바스크립트에서 식별자를 표기하는 방법은 대표적으로 카멜 표기법, 언더스코어 표기법, 파스칼 표기법이 있습니다.

표기법	설명	예
카멜 표기법	변수명과 함수명 작성 시 사용	firstName, totalPrice
언더스코어 표기법	상수명 작성 시 사용	MAX_LENGTH, user_id
파스칼 표기법	생성자 함수명, 클래스명 작성 시 사용	UserProfile, ProductList

카멜 표기법

카멜 표기법은 마치 낙타의 혹처럼 글자 높이가 내려갔다가 올라간다고 해서 이름지어진 표기법입니다.

첫 글자는 영문 소문자로 시작하고, 2개 이상의 단어가 조합되면 각 단어의 첫 글자는 대문자로 표기합니다.
주로 변수명이나 함수명, 객체의 속성명을 지을 때 사용합니다.

let userName = "Tom";
function getUserAge() {}

언더스코어 표기법

언더스코어 표기법은 2개 이상의 단어가 조합될 때, 각 단어를 _ 기호로 연결해 표기하는 방법입니다.
일반적으로 상수의 식별자를 지을 때 사용합니다.
const와 함께 자주 쓰이며, 모두 대문자로 표기하는 대문자 스네이크 케이스가 대표적입니다.

const MAX_COUNT = 100;
const API_KEY = "abc123";

파스칼 표기법

파스칼 표기법은 모든 단어의 첫 글자를 대문자로 작성하는 방법입니다.
주로 클래스명이나 생성자 함수명을 지을 때 사용합니다.

class UserInfo {}
function ProductList() {}