티스토리 뷰

javascript

자바스크립트에서의 Variable, Attribute, Property 차이

Hoon93 2021. 2. 19. 17:56

자바스크립트를 공부하다 보면 프로퍼티(Property)라는 개념이 등장하는데,

대충 넘겨짚고만 있었다가 상황마다 불리는 용어가 구분되는 등

미묘한 차이가 있음을 깨닫고 이번에 정리해봤습니다.

 

변수와 속성 두 개념과 각각 비교되는데, 어떠한 차이가 있는지 보겠습니다.

 

실행 컨텍스트와 변수객체(VariableObject)

우선 자바스크립트에서 코드는 크게 Global Context(전역)와 Function Context(함수 영역)에서 실행된다. Global Context란 브라우저의 window 객체와 같이 전체 코드에서 1개만 생성되며, Function Context는 각각의 함수 호출마다 생성된다. 이렇게 실행된 컨텍스트들은 각각 변수객체(VariableObject, VO)를 가지는데, 여기에 우리가 선언한 변수나 함수에 대한 정보가 담기게 된다. 다시 말해, 변수 or 함수를 선언하는 것은 VO에 프로퍼티를 만드는 것이다.

 

전역 컨텍스트와 함수 컨텍스트는 참조하는 변수객체가 다르다.

AbstractVO
|
|→ GlobalContextVO // Global Context의 변수객체(VO)는 전역객체이다.
|    ( VO === this === global )
|
|→ FunctionContextVO // Function Context의 변수객체(VO)는 Activation Object(AO, 활성화 객체)이다.
|    ( VO === AO )

VO 자체는 코드상에서 접근이 불가능하지만, 전역 컨텍스트의 VO에 있는 변수는 참조가 가능하다(아래 예제의 a와 b).

var a = "Hi";

function b(){
	var c = "Bye";
}

console.log(a); // VO(globalContext)의 변수에 직접 접근.
console.log(window.a); //전역 객체 === VO(globalContext)인 점을 이용해 간접적으로 접근.
console.log(a === window.a); //true

 

 

 

변수(Variable)와 프로퍼티(Property) 정리

1) 변수

var a = "Global Context";

function func(){
	var a = "Function Context";
	console.log(window.a); //Global Context
	console.log(a); //Function Context
}
func();

변수란 실행 컨텍스트에 포함되어 있는 이름과 값 사이의 연결을 의미한다. 다시 말해, 변수가 선언돼있는 Context 또는 Scope 관점에서의 이름과 값 사이의 연결을 의미한다.

 

2) 프로퍼티

var a = "Hi";
window.a; //Hi

프로퍼티란 객체 내에 포함(선언)되어있는 변수(멤버변수 라고도 함)를 의미한다. 그리고 위 예제의 변수 a는 전역(Global Context) 변수이면서, 동시에 전역객체의 프로퍼티다. 왜냐하면 위 코드의 실행 컨텍스트는 브라우저이기에 변수 a는 window의 프로퍼티라고도 할 수 있는 것이다.

 

3) 변수와 프로퍼티의 상호작용

//define as property, access as a variable
window.a = "1";
a; //1

//define as variable, access as a property
var b = "2";
window.b; //2

VO가 전역 객체일 경우에는 위와 같은 상호작용이 가능하지만, 함수 컨텍스트와의 상호작용은 에러가 날것이다.

 

 

 

속성(Attribute)과 프로퍼티(Property)

1) 브라우저는 웹페이지(즉, Html)을 읽어(파싱(parsing)) DOM객체를 생성한다.

※DOM(document Object Model) : 말그대로 DOM 또한 자바스크립트 객체이다.

 

2) 이때 브라우저는 HTML 표준 속성(attribute)을 인식하고, 이 표준 속성을 사용해 DOM 프로퍼티(property)를 만든다. 따라서 요소가 id, class 같은 표준 속성으로만 구성되어 있다면, 이에 해당하는 DOM객체의 프로퍼티(property)가 자연스레 만들어진다. 하지만 HTML에서 태그는 복수의 속성(attribute)을 가질 수 있으며, 사용자가 만든 속성도 있을 수 있는데, 이처럼 표준이 아닌 속성일 때는 상황이 달라진다.

 

좀 더 설명하자면, 태그 <body id="page">가 있을 때, DOM 객체에서 body.id="page"를 사용할 수 있다. 그런데 속성-프로퍼티가 항상 일대일로 매핑되지는 않는다. 따라서 속성과 프로퍼티는 다를 수 있다. 또한 한 요소에선 표준인 속성이 다른 요소에선 표준이 아닐 수 있다는 점에도 주의해야 한다. 예) "type"은 <input> 요소(HTMLInputElement)에선 표준이지만, <body>(HTMLBodyElement)에선 아님.

  속성(Attribute) 프로퍼티(Property)
용도 HTML 내에 쓰인다. DOM 객체 내에 쓰인다.
타입(key) 대·소문자를 구분하지 않는다.
(HTML내에서는 모두 소문자)		 자바스크립트 영역으로, 대·소문자를 가린다.
이름(value, 값) 문자열 DOM 프로퍼티의 값은 항상문자열이 아니다.
예) checkbox에 사용되는 input checked 프로퍼티의 경우 boolean값을 가짐.

모든 타입이 가능하며, 각 표준 프로퍼티의 타입은 명세서에 설명되어 있음.

 

저작자표시 비영리 변경금지

'javascript' 카테고리의 다른 글

serialize()사용 시 checkbox값 전송 안되는 문제해결방법  (0) 2021.02.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함