[17일차] Scope / 호이스팅 / 문서 객체 / Event

728x90

20220811(목)

목차
- Scope
- 호이스팅
- 문서 객체
- Event

< 스코프 - Scope >

개념
- 변수가 유효성을 가지는 범위
- 스코프는 기본적으로 프로세스 메모리 맵의 구조에 의존적.
- 선언된 위치에 따라 스코프가 결정
- 같은 이름으로 변수가 선언된 경우 스코프가 겹칠 수 있음.
- 스코프가 겹칠 때 어떤 변수가 우선권을 가지는지 판단하는 기능이 필요하며
이러한 기능을 식별자 해석(identifier resolution)이라고 함

1. 모든 변수는 메모리에 올라간다.	2. 식별자 결정
global 영역에 변수가 할당되면 어디서나 접근이 가능하다. 전역 변수에서 지역변수로는 접근 불가능 지역변수에서 전역 변수로는 접근 가능 만약, 지역변수와 전역 변수의 이름이 같다면? 가까운 것을 먼저!	가장 가까운 스코프를 우선으로 한다. ES5의 var는 함수 내에서 유효 ES6의 const나 let은 블록내에서만 유효

스코프의 종류

구분	전역 스코프	지역 스코프
변수의 의미	전역 변수	지역 변수
선언위치	코드의 가장 바깥부분	함수의 내부
유효영역	전역 영역과그 하위 영역	함수 자신과 그 하위 영역
특징	Var와 같은 선언자를 생략시 전역스코프	ES5(var)는 함수 레벨 스코프 지원 ES6(let, const)는 블록 레벨 스코프 지원
** 블록레벨 스코프 : C++, JAVA언어 등에서 지원하는 스코프. if, for, try/catch등이 스코프영역으로 판단된다.

호이스팅
v8엔진이 var로 선언된 것이 있는지 미리 봄 ➡ 메모리를 미리 할당해주는 것
근데 왜 undefined라고 찍혔지?
➡ 메모리를 할당을 하되, 초기화시키진 않는다. var가 나올 때 초기화시킨다.

console.log(v); // undefined
초기화하기 전 접근 불가능
console.log(l); // error : initialization 하기 전에 접근 불가능
var v = 10;
let l = 20;

//-------------------------------------

f1(); // ES5-f1()

f2(); // error : (ES6의 방식은 호이스팅의 방식이 아님)

// ES5의 함수는 호이스팅의 대상이다.

function f1()

{

console.log('ES5-f1()');

}

// ES6 버전은 만들기 전에 호출하지 못해.

const f2 = function()

{

console.log('ES6-f2()');

}

주의해! 스코프 체인으로 코딩을 하라는 게 아냐!
1. 혹시라도 모르는 에러에 대한 대응
2. 클로져

< 문서 객체 >

window 안에 document 객체 밑에 body 객체 body가 가져야 할
1) attribute : <body> ~ <body> 안에 있는
2) method : body 제어할 수 있는 각종 함수들
3) prototype : body의 element

< Event >

click event : 사용자 관점으로 발생된 사건(행위)
event (사건) : message1 : down / message2 : up / message3 : 클릭됨 (가상 메시지, Virtual Message)
message (선물)

Event Driven Architecture < 시스템 >
Event object	Message	Callback Function
로그인 버튼	클릭	f4( )
DOM 객체
document	DOMContentLoad	f1( )

<head>

<title>Document</title>

<style>

.cls-div {

width : 200px;

height : 200px;

background-color: cadetblue;

}

</style>

</head>

<body>

</div>

const aaa = function(){

let divElement = document.querySelector('div');

// divElement를 클릭하면 메시지 박스가 뜬다.

const onClick = function()

{

alert("응 눌렀어~");

}

// 등록하기 click은 약속된 명령이야! // 제일 중요

divElement.addEventListener('click', onClick);

}

// DOMContent를 다 읽었을 때 어떤 함수를 호출해라.

document.addEventListener('DOMContentLoaded', aaa);

</script>

</body>

</html>

728x90

저작자표시 (새창열림)

'🏫 Open API_JAVA' 카테고리의 다른 글

[19~20일차] DOM / 프로젝트 기획안 (0)	2022.08.17
[18일차] 알고리즘 / 버블 정렬 (0)	2022.08.17
[16일차] new 연산자 / prototype / JSON / Math.@ (0)	2022.08.10
[15일차] 객체지향 이론 / 객체형 / Object literal / JS 데이터타입 (0)	2022.08.10
[14일차] 콜백함수 (forEach / map / filter) / arrow / time (0)	2022.08.09

< 스코프 - Scope >

< 문서 객체 >

< Event >

'🏫 Open API_JAVA' 카테고리의 다른 글

티스토리툴바