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