#1 지역변수(Global Variable)와 전역변수(Local Variable)
ES6를 사용하면 더는 전역 변수를 사용할 수 없다. 전역 변수(Global Variable)란 '함수의 외부에서 선언된 변수'를 의미한다. 프로그램의 어디서나 접근 가능하고, 프로그램이 종료가 되어야만 메모리에서 사라진다.
이러한 전역 변수는 메모리 상의 데이터(data) 영역에 저장 되며, 직접 초기화 하지 않아도 0으로 자동 초기화 된다.
또 다른 의미로 지역 변수(Local Variable)가 있다. 지역변수는 '함수 내부에서 선언된 변수'다. 함수가 종료되면 소멸하는 변수다. 함수 외부에서는 접근할 수 없다.
예를 들어 보면:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
var jbVar = 'Ipsum';
}
document.write( jbVar );
</script>
</body>
</html>
변수 jbVar의 값을 함수 외부에서는 Lorem으로, 함수 내부에서는 Ipsum으로 정한 상태이다. 함수 외부에서 jbVar을 불러 왔기 때문에 전역 변수의 값
Lorem으로 출력이 된다.
또 다른 예시로:
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
var jbVar = 'Ipsum';
document.write( jbVar );
}
jbFunc();
</script>
</body>
</html>이런 경우는 함수 내부에서 값을 불러왔기 때문에 지역 변수의 값
Ipsum으로 출력이 된다.
마지막 예시로:
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
jbVar = 'Ipsum';
document.write( jbVar );
}
jbFunc();
document.write( jbVar );
</script>
</body>
</html>함수 내부에서 var을 사용하지 않고 변수의 값을 정하면 전역 변수의 값으로 변경을 하는 방식으로 코드가 형성 되어 있기 때문에
IpsumIpsum을 출력하게된다.
#2 어트리뷰트 attribute
따라서, ES6 모듈 안에서 var키워드로 선언한 변수는 더는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
모던 브라우저(Chrome 61, FF 60, SF 10, Edge 16 이상)에서는 ES6 모듈을 사용할 수 있다. script태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.
(모듈의 파일 확장자는 mjs를 권장한다.) :
<script type="module" src="lib.mjs></script>
<scirpt type="module" src="app.mjs></script>
HTML 문서의 구성요서인 HTML 요소는 여러개의 어트리뷰트attribute(속성)을 가질수 있다. HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작태그[start/opening tag]에 '어트리뷰트 이름="어트리뷰트 값" 형식'으로 정의한다.
<input id="user" type="text" value="ungmo2>
'글로벌 어트리뷰트'(id, class, style, title, lang, tabindex, draggable, hidden 등)와 '이밴트 핸들러 어트리뷰트'(onclick, onchange, onblur, oninput, onkeypress, onkeyup, onmouseover, onsubmit, onload 등)는 모든 HTML 요소에서 공통적으로 사용할 수 있지만, 특정 HTML 요소에만 한정적으로 사용 가능한 어트리뷰트도 있다.
예를 들어, id, class, style 어트리뷰트는 모든 HTML 요소에 사용할수 있지만, type, value, checked 어트리뷰트는 input 요소에만 사용할 수 있다.
HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트(이하 HTML어트리뷰트)는 어트리뷰트 노드로 변환되어 요소 노드와 연결된다. 이때 HTML 어트리뷰트당 하나의 어트리뷰트 노드가 생성된다. 즉, 위 input 요소는 3개의 어트리뷰트가 있으므로 3개의 어트리뷰트 노드가 생성이 된다.
이때 모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NameNodeMap 객체의 담겨서 요소 노드의 attribute 프로퍼티에 저장된다.
따라서 요소 노드의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attribute 프로퍼티로 취득 할 수 있다. attribute 프로퍼티는 getter만 존재하는 읽기 전용 접근자 프로퍼티이며, 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NameNodeMap 객체를 반환한다.
<!DOCTYPE html>
<html>
<body>
<input id="user" type="text" value="ungmo2">
<script>
//요소 노드의 attribute 프로퍼티는 요소 노드의 모든 어트리뷰트 노드가 참조가 담긴
// NameNodeMap 객체를 반환한다.
const { attributes } = document.getElementById('user');
console.log(attributes);
// NameNodeMap {0: id, 1:type, 2: value, id: id, type: type, value: value, length:3}
// 어트리뷰트 값 취득
console.log(attribute.id.value); // user
console.log(attribute.type.value); // text
console.log(attribute.value.value); // ungmo2
</script>
</body>
</html>'TIL S2 - Today I Learned S2' 카테고리의 다른 글
| 006. TIL - Today I Learned 20220921 (0) | 2022.09.21 |
|---|---|
| 005. TIL - Today I Learned 20220920 (2) (2) | 2022.09.20 |
| 004. TIL - Today I Learned 20220920 (1) (0) | 2022.09.20 |
| 003. TIL - Today I Learned 20220918 (0) | 2022.09.18 |
| 001. TIL - Today I Learned 20220916 (0) | 2022.09.16 |