JavaScript $(dollor)와 _(underScore) 의미
오늘은 $와 _의 의미를 자세하게 알아보려고 합니다.
이전에 제이쿼리를 사용하면서 $는 자주 볼 수 있었는데요.
_는 조금 생소하기도 하고, 정확한 의미를 정리해두는 게 좋을 것 같아서 내용을 찾아 보았습니다.
요즘 많은 부분에서 공부가 필요하다고 느낍니다.. 😂
$와 _는 둘 다 자바스크립트의 식별자입니다.
식별자는 이름과 같은 방식으로 객체를 식별한다는 의미를 가지고 있습니다.
여기서 객체는 변수, 함수, 속성, 이벤트 및 객체 등이 포함됩니다.
$와 _는 다른 특수기호와 같은 방식으로 처리되지 않습니다.
대신 알파벳 문자처럼 취급됩니다.
그리고 두 식별자 모두 강요가 아닌 일종의 관례로 사용되고 있습니다.
$, _의 후속 문자에는 숫자도 포함될 수 있습니다.
$(doller) 식별자
$ 식별자의 용도는 크게 2가지로 나눌 수 있습니다.
document.getElementById()함수의 바로가기- 템플릿 스트링
$ 식별자는 일반적으로 document.getElementById() 함수의 바로가기로 사용됩니다.
함수의 이름이 매우 길고 자주 사용되기 때문에 바로 가기로 사용 됐습니다.
document.getElementById()함수는HTML요소에서id를 알아내는 함수입니다.
$ 식별자를 사용할 때는 별도의 라이브러리를 사용하지 않아도 됩니다.
하지만 $를 document.getElementById() 함수의 바로가기로 사용하기 위해서는 별도의 $() 함수 정의가 필요합니다.
function $(id) {
return document.getElementById(id);
}<div id="myDiv">
Hello World!!
</div>const element = $(myDiv); // == document.getElementById('myDiv')$() 함수가 정의되고 나면 위와 같이 사용할 수 있습니다.
추가적으로 $ 식별자를 이용해서 템플릿 스트링으로 사용할 수 있습니다.
백틱을 사용할 때 $ 식별자를 이용해서 변수명을 그대로 보여줄 수도 있습니다.
const name = "aiden";
const age = 20;
console.log(`이름은 ${name}이고, 나이는 ${age}입니다.`)바닐라 자바스크립트, 제이쿼리를 거쳐서 리액트를 사용하고 난 뒤부터는 아무래도 $ 식별자를 사용하는 일이 매우 줄어든 것 같습니다.
그나마 템플릿 리터럴에 많이 사용했던 것 같네요 😁
_(underScore) 식별자
_ 식별자는 변수나 함수 앞에 접근제어자 private 특성이 적용되어야 될 때 명시하는 역할로 사용됐습니다.
그래서 public과 private를 즉시 식별할 수 있는 가장 빠르고 쉬운 방법입니다.
자바스크립트에서는 별도의 public, private가 없기 때문에 일종의 코딩 컨벤션으로 사용 됐습니다.
그래서 public, private 키워드 없이 필드나 메소드를 식별할 때 유용하게 사용할 수 있었습니다.
ES2019
이전의 자바스크립트 클래스에서는 기본적으로 접근지정자 키워드가 존재하지 않았습니다.
그래서 모든 필드와 메소드는 public으로 설정되어 있어서 쉽게 접근할 수 있었습니다.
하지만 ES2019부터 # 기호를 추가해서 클래스 내부에서 private하게 메소드와 필드를 선언할 수 있습니다.
그리고 _ 기호를 이용해서 protected 필드를 모방해서 사용합니다.
마무리
_ 식별자를 찾아보면서 ES2019 스펙에 대해서도 공부가 필요하다고 느꼈습니다! 📚
Class에 대한 정리를 하려고 했는데 해당 스펙을 기준으로 어떠한 차이점이 있는지 자세하게 보는 것도 좋을 것 같습니다.
본인이 _ 식별자를 이용해서 Class 문법을 작성하고 있다면 자바스크립트 스펙을 확인하고 정식 기능을 사용할지에 대한 고민을 해보는 것도 좋을 것 같습니다.
코딩 컨벤션처럼 관용적인 내용보다는 정식으로 지원하는 기능을 사용하는 것이 더 좋을수도 있지 않을까? 라는 생각도 드네요!
