6. undefined와 null
둘다 없음을 나타냄.
-
undefined
값이 있어야 하는데 없는 경우
ex)
-변수에 값이 지정되지 않은 경우
-return문이 없는 함수
-.이나[]로 접근시 해당 데이터가 없는경우
사용자가 직접 선언 할수도 있지만 일반적으로는 지양. Null을 씀 -
Null
없다를 명시적으로 표현할때
typeof Null => Object로 나옴 .자바스크립트 버그
실행 컨텍스트(스코프,변수,객체,호이스팅)
자바스크립트 코드가 실행되는 환경 또는 범위
1. 실행 컨텍스트란?
- 스택(LIFO : Last in,first out) vs 큐(FIFO : First in, first out)
이미지 출처https://pg-titannia.tistory.com/54
스택은 최근에 입력된 값 부터 빠져 나오고 ,큐는 입력된 순서대로 출력
추가된 요소들의 제거되는 순서 차이.
- 콜 스택
함수가 호출 될때 그 함수의 실행 컨텍스트가 콜스택에 push.
함수의 실행이 완료되면 pop.
-함수에서 컨텍스트의 구성
var a = 1;
function outer() {
function inner() {
console.log(a); //undefined
var a = 3; // 호이스팅으로 인해 실제 var a; 변수선언은 콘솔위에서 선언된 상태지만
//선언만 될뿐 값을 할당하는건 원래위치라 언디파인드가 출력.
}
inner(); // ---- 2번
console.log(a);
}
outer(); // ---- 3번
console.log(a);outer 들어감 => inner 들어감 => 실행후 => inner 나옴 => outer나옴
특정실행 컨텍스트 생성된후 콜스택 맨위에 쌓이는 순간 해당 컨텍스트가 실행.
-
실행 컨텍스트 객체의 실체(=담기는 정보)
-VariableEnvironment*현재 컨텍스트 내의 식별자 정보(=record)가지고 있음
var a = 3; //여기서 식별자는 var a를 의미.
*외부 환경 정보(=outer)를 갖고 있음
해당 실행 컨텍스트가 생성될 때 참조하는 외부 스코프
*선언 시점 LexicalEnvironment의 snapshot
함수나 블록이 실행될 때가 아니라 선언될 때의 스코프 정보를 저장.
-LexicalEnvironment
*VariableEnvironment랑 똑같지만 코드 실행 중에 발생하는 스코프 및 식별자 정보의 변경사항을
실시간으로 반영
-ThisBinding
*this 식별자가 바라봐야할,참조해야할 객체
전역 컨텍스트에서 this는 전역 객체,
객체의 메소드로 함수가 호출될 때 this는 해당 메소드를 호출한 객체,
new 키워드를 사용하여 함수를 생성자로 호출할 때, this는 새로 생성되는 객체,
apply, call, bind 메소드사용하여 함수를 호출할 때, 첫 번째 인자로 전달된 객체를 this
#과제해설영상 짤팁
- js파일을 html body안 마지막 줄에 넣어도 되지만, type="module" 추가후 head안에 넣을수있음
<script type="module" src="js/index.js"></script>
//협업시 모듈화 하면 변수병이 겹치는 걱정 할 필요없음 , 엄격모드도 적용- js파일안에 쓰고싶은 특정부분을 export해서 다른 js파일에서 쓸수 있음.
//js1번파일
export let abc = function(){return [1,2,3]}
//js2번파일
import {abc} from "./index.js"
console.log(abc()) // [1,2,3]
- css도 변수선언후 사용이 가능한 함수가 있다.
:root는 css커스텀속성을 선언하는데 사용됨, 색상 글꼴크기등
:root{
--header-color: #8076b8;;
--searchBox-color: #6a5d7a;
--main-color: #1c1a29;
}
.contents{
background-color: var(--header-color);
}- form 태그는 기본실행 동작이 새로고침이다.
event.preventDefault();// 기본동작을 막아주는 메서드