[javascript] 변수 선언 방식의 차이 : var name / $name

javascript에서 변수를 선언하고자 할 때 기본적으로 'var 변수명' 의 형태를 많이 사용한다.

뭐 그마저도 귀찮다면 var 도 생략하고 변수명에 값을 할당하는 방식을 쓰기도 하는데, 종종 보이는 '$변수명' 의 형태로 정의한 내용에 대해 차이점을 알아보고자 한다.

 

[javascript] 변수 선언 방식의 차이 : var name / $name

 

다들 아시다시피 변수 선언 시 사용되는 예약어인 var는 variable의 약자로 선언하는 위치에 따라 global scope, function scope로 사용된다. 간단하게 변수 범위에 대해서 짚고 넘어가자.

 

function 내부에서 선언한 변수는 지역 변수(function scope)로 해당 함수 내에서만 접근 및 호출가능하다.

정의한 함수 밖에서 호출하려고 하는 경우, 정의되지 않은 변수를 참조하려고 하여 Reference Error가 발생한다.

 

function 밖에서 선언한 변수는 모두 전역 변수(global scope)로 사용되며, 해당 페이지 내의 어떤 함수에서든 접근 및 호출할 수 있다.

또한 function 내부에서 선언하는 변수인 경우라도, 선언 명령어 var를 생략하고 변수를 선언하는 경우, 전역 변수로 사용되어 진다. 그렇기 때문에 지역 변수를 선언하는 경우는 반드시 변수를 선언하는 명령어를 써서 전역 변수와 구분해 주는 것이 좋다.

물론 전역 변수와 다른 이름을 쓰는 것이 가장 좋지만, function 내부에서만 사용하는 지역 변수라는 것을 나타낼 수 있으므로 명령어를 항상 표기하는 게 좋다고 생각된다.

 

 

 

오늘 포스팅하고자 한 내용에서 조금 벗어났지만, 변수 선언에 따른 범위에 대해 알아봤고

이제 본론으로 들어가서 변수명에 '$' 를 붙여주는 것과 붙이지 않는 것의 차이를 알아보자.

 

우리가 알고있는 일반적인 형태로 var name = "ojava"; 와 같이 선언한 변수는 일반 변수다.

그렇다면 var $jqvar의 형태로 선언한 값은 어떨까?

 

 

해당 변수도 일반 변수처럼 문자열이나 숫자를 담아서 사용할 수도 있겠지만, $가 일반적으로 jquery를 대표하는 문자로 사용된다는 것을 생각해보면 해당 변수에는 jquery object를 담는 변수임을 유추해 볼 수 있다. 

 

아래와 같이 아주 간단한 형태의 HTML과 script를 구현해보자.

물론 jsfiddle도 제공하니 코딩할 필요는 없다. https://jsfiddle.net/ojava/dsm0cb3q/1/

 

<div id="blog">
  <p>ojava</p>
  <div class="info">
    ojava.tistory.com
  </div>
</div>

<div id="print">
  <p>1111</p>
  <p class="result">2222</p>
</div>

var $jqvar = $("#blog");

// var $jqvar가 가진 값 확인
$("#print p:first").text($jqvar);

// var $jqvar에서 jquery 기능 사용
$("#print p.result").text(($jqvar.find("div.info").text()));

 

jquery 변수가 참조할 수 있는 blog라는 아이디값을 가지는 간단한 div 영역을 구성했고,

결과값을 보여줄 print라는 이름의 영역도 생성하였다.

 

jquery selector를 통해 $("#blog") 영역을 설정해두고 해당 변수가 어떤 값을 가지는 지 뿌려보았다.

[object Object]

 

javascript에서 jquery object를 뿌려주려고 하면 나오는 object Object가 띄워지는 것을 알 수 있다.

일단 일반 변수가 아닌 객체를 담을 수 있는 것은 확인하였고, 해당 객체에서 jquery 함수를 이용하여 객체에 접근하여 데이터 조회 등이 가능한지도 확인해보자.

 

 

$("#blog") 객체 하위의 info라는 class값을 가진 div의 text 값을 읽어오려고 한다.

해당 데이터는 $("#print p.result")에 입력되며, 코드를 실행하면 아래와 같은 값을 반환한다.

ojava.tistory.com

 

 

 

jquery selector 혹은 새롭게 선언한 객체를 담아두고 변수를 통해 참조해야 하는 경우,

변수명 앞에 $를 붙여서 jquery 변수로 사용하면 보다 쉽게 객체 사용이 가능하다는 점!

 

다음에는 javascript hoisting에 관한 내용 및 함수 생성 방식에 대한 포스팅 예정이다.