⭐JavaScript 기본적으로 Single thread
브라우저의 내부에는 총 3개의 엔진이 동작한다
- hyml을 Docoment라고 부름 →Docoment를 처리하는 DOM엔진 브라우저 엔진 이라고도 함
- style엔진
- script엔진은 →DOM엔진이 처리불가 →자바스크립트 엔진이 처리
✌자바스크립트는 2번 읽는다
1번 문자열을 읽어서 프로그램을 실행시킬수있는 구조를 만든다
2번 실행하는 과정
<script>
doA()
function doA(){
console.log("AAA")
}
</script>이게 실행되는 이유
실행하면 doA()실행 이기에 skip 하고 function을 만난다 그럼 메모리상에 doA를 만들고 그게 function을 가리키게 하고 2번째 읽는 과정에서는 doA가 있으니까 실행이 된다
이런 건 어떨까? 이건 읽을 수 있을까?
<script>
doA()
</script>
<script>
function doA(){
console.log("AAA")
}
</script>이건 읽지 못한다 그 이유는 자바 스클 비트는 script 단위로 던지기 때문에
실행해보면 not defined 가 나온다
Window의 이해
<script>
function doA(){
console.log("AAA")
}
</script>
<script>
doA()
</script>위 예시와는 반대의 상황이다 하지만 이 코드는 실행이 된다 그 이유는 무엇일까??
이유는 script 공간에 먼저 doA가 만들어졌기 때문이다 그렇다는 건 script 이 같은 메모리 공간을 사용하고 있다는 뜻인데 브라우저에서는 그 공간을 Window라고 한다
😒not defined과 undefiend
not defined
함수가 존재 안 할 때
undefiend
변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined) 않은 상태
console.log(userName)
var userName = "...."이렇게 값이 없는 경우를 undefiend라고 한다
😱무서운 alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("어허")
</script>
<h1>안녕</h1>
</body>
</html>실행시켜보자
❗alert 밑에 있던 “<h1> 안녕 </h1>” 는 못 나왔다... 왜 이럴까?
브라우저는 Single thread 이기에 브라우저가 처리하지 못하는 script태그를 만나니 멈춘다 그렇기 때문에 뒤에 코드가 나오지 못하는 것이다
'JavaScript' 카테고리의 다른 글
| JavaScript 이벤트 (0) | 2022.04.25 |
|---|---|
| JavaScript preventDefault() , target (0) | 2022.04.24 |
| ⭐ JavaScript 버블링 , 캡쳐링 (0) | 2022.04.24 |
| 객체야 어디 있니~ 객체 검색 방법 (0) | 2022.04.24 |
| JavaScript 로 검색 키워드 만들기 (0) | 2022.04.24 |