Javascript Dollar Sign에 대해

2023-02-07 942 words 2 minutes

Contents

자바스크립트를 사용하다 보면 $ 기호를 종종 보게 될 때가 있다. $event와 같은 것이 그 예시인데, 이 $ 기호는 언제, 어떻게, 왜 사용하는 것일까?

달러 식별자로의 `$`

$ 달러 식별자는 자바스크립트의 식별자 중 하나로, 간단하게 변수의 이름을 나타날 때 사용되는 경우가 대부분이다. 변수, 함수, 속성, 이벤트, 객체 모두가 $ 식별자로 구분될 수 있다.

그렇기 때문에, $ 심볼은 다른 특수 목적 심볼들처럼 다뤄지지는 않는다. 자바스크립트가 $를 알파벳 문자처럼 취급하지만 그렇기 때문에 $가 변수 이름으로 사용될 수 있는 이유이기도 하다.

$ 기호는 종종 함수 document.getElementById()를 의미한다. $는 해당 함수가 DOM 엘리먼트를 id 값으로 참조하기 때문에 alternative하게 많이 사용되어 왔었다.

이 목적으로 사용하기 위해서는 $ 기호가 필수는 아니다. 하지만 자주 사용하기 때문에 컨벤션이 되었다.

자바스크립트 커뮤니티에서는 $() 함수가 이미 의미하는 바가 관례적으로 굳어졌기 때문에 충돌을 피하기 위해 해당 함수의 정의를 막기도 한다.

function $(x) {
    return document.getElementById(x);
}

처럼 구현해서 별도의 라이브러리를 (jQuery 등) 사용하지 않고도 $()를 함수로 사용할 수도 있다.

$ 기호는 ES6부터 템플릿 리터럴을 나타낼 수 있다. 파이썬에서 {}를 사용한 f-string들처럼 ${}를 자바스크립트에서 변수들의 placeholder를 나타내기 위해 사용할 수 있다.

자바스크립트에서의 $ 기호는 3가지 용법이 있다.

자바스크립트에서 $ 사인은 변수의 이름으로 사용될 수 있는 유효한 식별자이고, 아무런 문법적인 의미를 가지지 않는다. 변수나 함수의 이름의 시작, 중간, 끝 아무 곳이나 들어갈 수 있다.

다만 앵귤러에서는 (!) $event가 앵귤러JS에서부터 전해내려온 컨벤션으로써 사용된다.

앵귤러 JS에서는 $가 프레임워크에 의해 노출된 내부 변수들은 $로 prefix를 가진다.

이 때문에 event와 $event가 혼재되어 사용되는 것이다.

사용하지 말자는 시도도 있었지만, 결과적으로 없어지지는 않았다.

스타일이나 컨벤션에 따른 것이기 때문에 개인이나 프로젝트의 컨벤션에 맞춰서 event를 사용할지, $event를 사용할지를 정하면 된다고 한다.