Sass 리팩토링을 진행하면서 변수 앞에 $를 사용하자는 의견이 나왔다. const 변수명을 사용해도 되는데 왜 달러($) 기호를 사용해야하는지에 대한 의문이 들어 알아보았다.

달러($) 기호의 의미

JS에서 $는 변수명 혹은 식별자의 일부로 사용되는 특수 문자이다. 주로 라이브러리나 프레임워크에서 선택자를 나타내는데 많이 사용된다. 주로 jQuery 라이브러리에서 CSS 선택자를 사용할 때 사용하는 것이 일반적이다.

const $element = $("#myElement"); // $를 사용하여 jQuery 객체를 나타냄
const $total = 100; // $를 사용하여 변수에 명시적인 의미 부여

라이브러리를 사용하지 않는 JS의 경우

라이브러리를 사용하지 않는 경우에도 $를 사용할 수 있다.
$를 사용한 해당 식별자는 단일한 변수임을 나타내기 위해 사용한다. 이를 통해 다른 변수와 충돌이 일어나지 않도록 한다.

const $uploadButton = document.querySelector('#upload-btn'),
    $writerImg = document.querySelector('.user-profile img'),
    $contentInp = document.querySelector('textarea'),
    $imglist = document.querySelector('.upload-imgs-list'),
    $imgInp = document.querySelector('#input-file');

Sass에서 $의 의미는?

내가 맡은 부분은 Sass 리팩토링 작업이다. Sass의 변수를 선언할 때도 $를 사용하는데 Sass에서는 어떤 의미를 가지고 있는지 궁금해서 알아보았다.
Sass에서 $는 js에서 const와 같이 변수를 선언할 때 사용하는 기호로 Sass 변수임을 명확하게 알 수 있게 해준다. let과 같이 재사용성이 가능하다.

//Sass
$gray300-color: #767676;

border: 1px solid $gray300-color;
color: $gray300-color;

프로젝트에서 사용하지는 않았지만 $는 변수의 스코프를 제어할 수도 있다.

// 전역 스코프
$global-variable: #ecf0f1;

.container {
  // 지역 스코프
  $local-variable: #3498db;
}