자바스크립트에서 변수 vs 프로퍼티

자바스크립트를 공부하다보면, 변수, 함수, 객체, 프로퍼티 와 같은 단어를 많이 사용하고 접하게 된다. 처음 접할때는 변수 == 프로퍼티 라고 이해를 하게 되지만, 시간이 지나고 조금더 고민하다보면 뭔가 미묘한 차이들이 있다.

그래서 누군가 이 함수에서 변수는 무엇이고 프로퍼티는 무엇이냐 ? 라고 물어보게 된다면 더욱 더 헷갈리게 된다. 그래서 이번기회를 통해 조금 정리해보았다.

예를들어 아래와 같은 코드가 있다고 하자.

var a = "test";

일반적으로 변수는 var 로 선언을 하게 된다. 여기서 a 는 해당 스코프 안의 변수 이다. 절대 해당 스코프에서 프로퍼티라고는 하지 않는다.

하지만 만약에 다음과 같이 작성한다고 하자.

this.b = "test";

this를 통해서 b를 선언하게 되면, b 는 해당 객체의 프로퍼티가 되게 된다. 단순하게 var로 선언하면 변수, this 로 선언하면 프로퍼티 라고한다.

설명을 좀더 자세히 하기 위해 전체 코드를 작성해보겠다.

var setMyName = function( value ){
  var name = value;
  this.name = value;
};
var setName = new setMyName( "kazikai" );
console.log( setName.name ); //kazikai

위 코드에서 발생하는 name 은 var name 으로 저장된 값일까? this.name 으로 저장된 값일까?

정답은 this.name 으로 저장된 값이다.  이유는 setName 이란 변수는 setMyName의 인스턴스를 통해 만들어진 객체이며, 해당 객체에서 this.name 이라고 선언된 name은 인스턴스로 만들어진 객체의 프로퍼티가 된다.

조금 더 추가 설명을 하자면,

JavaScript에서는 private public 의 개념이 따로 존재하지 않는다.

Public이 외부에서 접근 가능하고 private이 내부에서만 접근가능한 변수라고 한다면,

this 는 public 이고, var는 private 한 변수라고 할 수 있다.

아래는 더글라스 크락포트가 작성한 private 에 관한 개념. 이 개념을 이해하면, 변수와 프로퍼티의 차이점을 더욱 더 자세히 이해할 수 있다.

http://javascript.crockford.com/private.html

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>