자바스크립트 변수네이밍 규칙

자바스크립트 변수 네이밍 규칙에 대하여 정리해보자 !

변수(variable)

자바스크립트에서 사용하는 변수에는 var,let,const 가 있다.
각 변수 선언 방식에는 범위(Scope), 재할당 가능 여부, 호이스팅(Hoisting) 등의 차이가 있다.

var

• ES6 이전에 사용되었던 변수 선언방식으로 현재는 더이상 사용하는 것을 권장하지 않는다.

비권장이유

1. 변수를 선언하기도 전에 값이 저장이 가능하다. 아래의 코드로 예시를 들어보겠다.

   		console.log(name) // undefined
   		var name ='DongEun';
   
   		console.log(name) // ReferenceError 출력
   		let name = 'DongEun';
   

   위와 같이 난타나는 이유는 호이스팅(Hoisting)으로 인해 변수 선언이 최상단으로 올라가기 때문이다.
   반면 let을 사용하면 호이스팅은 발생하지만 초기화되지 않은 상태(TDZ, Temporal Dead Zone)에 있기 때문에 ReferenceError 가 발생한다.
   이처럼 var는 예상하지 못한 동작을 유발할 수 있기 때문에 사용을 지양하는 것이 좋다.호이스팅(Hoisting)에 대해서는 나중에 다시 다뤄 보도록 하겠다.
   

2. 블록 스코프(Block Scope)를 무시한다.

    {
        var name = 'DoongEun';
    }
    console.log(name) // DongEun"

	{
      let name = 'DongEun';
	}
	console.log(name) // ReferenceError: name is not defined

var로 선언한 변수는 블록 스코프를 따르지 않고 함수 스코프를 따른다.
즉, {}(중괄호) 내부에서 선언해도 해당 블록을 벗어나 접근 가능하므로 예상치 못한 값이 출력될 수 있다.
반면 let을 사용하면 블록 스코프가 적용되어 {} 내부에서만 변수를 사용할 수 있어 보다 안전한 코드 작성이 가능하다.

앞서 설명한 두 가지 이유(호이스팅으로 인한 예상치 못한 동작, 블록 스코프 무시)로 인해 현대적인 자바스크립트 개발에서는 var를 사용하지 않는 것이 일반적이다.

ES6를 사용하는 환경인데도 불구하고, var로 변수를 선언한다면 혼줄을 ...

let

• 블록 스코프(Block Scope) 적용 → {} 내부에서만 접근 가능하다.
• 재할당이 가능
• 중복 선언이 불가능하다.
• 호이스팅이 발생하지만 초기화 되지 않는다.

let name = "Dongeun";
console.log(name); // "Dongeun"

name = "DongEunLee"; // 재할당 가능
console.log(name); // "DongEunLee"

let name = "Foo"; // SyntaxError (중복 선언 불가)

{
    let currentYear = 2025;
    console.log(currentYear); // 2025 (블록 내부에서 접근 가능)
}
console.log(currentYear); // ReferenceError (블록 외부에서 접근 불가능)

const

• 블록 스코프(Block Scope) 적용 → {} 내부에서만 접근 가능
• 재할당 불가능
• 선언과 동시에 초기화 필수이다.
• 객체(Object)와 배열(Array)의 경우에는 내부 값 변경 가능하다. (단, 참조 주소 변경 불가능)

const TEST_NUMBER = 3;
console.log(TEST_NUMBER) // 3
TEST_NUMBER = 10; // TypeError 재할당 불가

const user = { name: "Foo", age: 25 };

// 객체의 속성 변경 가능
user.age = 30; 
console.log(user); // { name: "Foo", age: 30 }

// user = { name: "Bar" }; // TypeError (객체 자체 재할당 불가능)

변수 선언 규칙

선언 규칙

1. 영문, 숫자, _(언더스코어), $(달러)만 사용 가능

	let name, _name, $name; ✅

2. 숫자로 시작할 수 없다

	let 1stUser = "foo"; ❌ Error 발생

3. 자바스크립트 예약어(Reserved Words)는 변수명으로 사용 할 수 없다.

	let let = "test"; ❌ Error 발생
	let const = "helloConst"; ❌ Error 발생

4. Kebab-case는 선언할 수없다.

	let my-name = "Dongeun"; //  ❌ 연산자로 해석된다

네이밍 컨벤션(Naming Convention) 이란?

네이밍 컨벤션(Naming Convention)이란 코드에서 변수, 함수, 클래스 등의 이름을 정하는 일관된 규칙을 의미한다.
일관된 네이밍 규칙을 따르면 가독성, 유지보수성, 협업 효율성이 향상된다.

자바스크립트에서 사용하는 주요 네이밍 컨벤션

camelCase (자바스크립트에서 기본적으로 사용)

• 첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자는 대문자로 작성
• 변수명, 함수명에서 주로 사용
• 권장 ✅

이번 주제로 포스팅하는 이유 중 하나가 camelCase가 권장되고 뒤에 설명할 SnakeCase는 비권장한다는 것을 보고 SnakeCase보다 camelCase 사용을 지향하기위해서이다.

let userName = "Dongeun";  // 변수
function getUserData() {...} // 함수

PascalCase(클래스 및 생성자 함수)

• 모든 단어의 첫 글자를 대문자로 작성.
• 클래스명, 생성자 함수명에서 주로 사용.
• 권장 ✅

class UserAccount {}  // 클래스
function CreateUser() {}  // 생성자 함수 (잘 사용되지 않음)

UPPER_SNAKE_CASE(상수)

• 모든 글자를 대문자로 작성하고, 단어를 _(언더스코어)로 구분.
• 변하지 않는 상수 값에 사용.
• 권장 ✅

const MAX_VALUE = 100;
const API_URL = "https://api.example.com";

snake_case (자바스크립트에서는 사용하지 않음)

• 모든 글자를 소문자로 작성하고, 단어를 _(언더스코어)로 구분.
• Python, SQL에서는 일반적이지만, JavaScript에서는 잘 사용되지 않음.
• 비권장 ❌

let user_name = "dong_eun"; // JS에서는 사용을 권장하지 않는다.