JavaScript 변수에 $ 표시하는 이유

JavaScript에서 변수 이름에 $ 기호를 사용하는 것은 일반적인 관례 중 하나입니다.

특별한 문법적인 제한이 있는 것은 아니지만, 특정한 목적을 가지고 $를 사용하는 경우가 많습니다. 이번 포스팅에서는 그 이유를 정리해 보겠습니다.

1. jQuery 객체를 구별하기 위해 사용

$는 jQuery 라이브러리에서 기본적으로 사용하는 기호입니다. 따라서 jQuery 객체를 나타내는 변수에 $를 붙이면 가독성을 높일 수 있습니다.

예제:

var $element = $('#myElement'); // jQuery 객체
var element = document.getElementById('myElement'); // 일반 DOM 요소

위와 같이 $element는 jQuery 객체이고, element는 일반 JavaScript DOM 요소라는 차이를 명확하게 알 수 있습니다.

2. 특수한 의미를 가지는 변수임을 강조

JavaScript에서는 $가 변수명에 포함될 수 있지만 특별한 의미는 없습니다. 하지만 $를 사용하면 해당 변수가 일반적인 변수와 다르다는 것을 강조할 수 있습니다.

예제:

var $config = { apiUrl: 'https://api.example.com', timeout: 5000 }; // 설정 변수

위 코드에서 $config라는 변수명은 설정과 관련된 객체라는 점을 강조하는 역할을 합니다.

3. 프레임워크 및 라이브러리에서의 사용

다양한 JavaScript 프레임워크나 라이브러리에서 $를 사용합니다.

• jQuery: $ 자체가 jQuery의 식별자로 사용됨
• AngularJS: $scope, $http 등의 내부 서비스에서 사용됨
• Vue.js: $data, $refs 등 내부 속성에서 사용됨
• React: 일반적으로 $는 사용되지 않지만, 특정 코드 스타일에서 사용할 수 있음

예제 (Vue.js에서 $ 사용):

this.$refs.inputField.focus(); // Vue의 참조 시스템에서 사용

4. 템플릿 리터럴과의 구별

백틱(``)을 사용하는 템플릿 리터럴에서 ${}는 변수를 삽입하는 구문이므로, 변수명에 $를 사용하면 혼동을 줄일 수 있습니다.

예제:

var $username = 'Alice';
console.log(`Hello, ${$username}`); // 템플릿 리터럴에서 사용 가능

5. 특정한 규칙을 따르는 변수명

일부 개발자들은 $를 접두사로 사용하여 특정 유형의 변수를 나타내는 규칙을 따릅니다.

• $globalVar: 전역 변수
• $privateVar: 내부적으로만 사용하는 변수
• $store: 상태 관리 관련 변수

예제:

var $store = { user: 'Alice', loggedIn: true }; // 상태 관리 객체

결론

JavaScript에서 $는 변수명에 포함될 수 있는 일반적인 문자이지만, 다음과 같은 이유로 자주 사용됩니다.

✅ jQuery 객체를 구별하기 위해
✅ 특수한 의미를 강조하기 위해
✅ 프레임워크나 라이브러리에서의 관례
✅ 템플릿 리터럴과 구별하기 위해
✅ 특정한 규칙을 따르는 변수명으로 사용

꼭 사용해야 하는 것은 아니지만, 가독성을 높이고 유지보수를 편리하게 하기 위해 적절하게 활용하는 것이 좋습니다. 😊