document는 HTML에 관한것을 담당하는 객체이며 태그를 선택하고 조작하는데 사용합니다.
window 객체가 브라우저 창이라면 document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체입니다.
자주 사용하는 document 객체를 적어보겠습니다
let ex1 = document;
console.log(ex1);
let ex2= document.querySelector('#hi');
console.log(ex2);
let ex3= document.querySelector('.hello');
console.log(ex3);
let ex4= document.getElementById('hi');
console.log(ex4);
let ex5= document.querySelectorAll('p');
console.log(ex5);
console.log(ex5[0]);
console.log(ex5[1]);
console.log(ex5[2]);
querySelector 의 경우 css 선택자로 선택합니다.
아이디는 # , 클레스는 . (점) ,태그명은 그대로입니다.
부모 > 자식, 부모 자손 등 다양하게 사용가능합니다.
getElement~ 의 경우 앞에 Id, ClassName, Name, TagName등은 별도의 선택자없이 클레스, 이름, 태그를 직접 적습니다
getElementById를 제외한 나머지는 getElementsBy~ 들은 Elements로 여러개가 선택이 됩니다 배열의 형태를 하고있습니다. querySelectorAll 도 같습니다
결과
이외에도
document.haed , body, title 등 html의 head, body에 접근하고, 문서의 제목에 접근하고 바꿀수 있습니다.
function func(){
if(true){
var a = 'a'
console.log(a);
}
console.log(a);
}
func();
console.log(a);
결과
콘솔창 결과
var은 함수 레벨 스코프로써 함수 내에서 선언된 변수는 함수 내에서만 유효합니다
블록 내/외부 상관 없이 유효합니다
함수 외부에서는 참조 불가능합니다
let, const
function func(){
if(true){
let a = 'a'
console.log(a);
}
console.log(a); // ReferenceError: a is not defined
}
func();
console.log(a); // ReferenceError: a is not defined
결과
콘솔창 결과
함수, if문, for문 등 모든 코드 블록 내부에서 선언된 변수는 블록 내에서만 유효합니다
블록 외부에서 참조할 수 없습니다.
호이스팅(Hoisting)
Hoist의 뜻은 무언가를 들어 올리거나 끌어 올리는 동작을 설명하는 단어입니다.
JavaScript에서 호이스팅이란 코드가 실행되기 전에 변수 및 함수 선언이 맨 위로 끌어 올려지는것을 말합니다
var 호이스팅
JavaScript는 인터프리터 방식의 프로그래밍 언어입니다.
인터프리터는 변수 생성의 선언 (var greeting) , 할당(= 'hello') 을 분할하여 적용합니다
선언 부분의 코드가 실행되기 전에 현재 범위의 맨위로 호이스팅이 되고
var은 호이스팅시 초기에 undefined값이 할당이 됩니다
즉, 초기화 전 변수를 사용할 수 있습니다
아래의 코드를 예시로 동작 순서를 알아보겠습니다.
console.log(greeting);
var greeting = 'hello';
console.log(greeting);
콘솔창 결과
//var greeting; // 1. 호이스팅에 의해 선언부가 올라옴
//greeting = undefined; , // 2. undefined 할당
console.log(greeting); // 3. greetring 출력 (undefined 출력)
var greeting = 'hello'; // 4. 재선언 및 재 할당
console.log(greeting); // hello 출력
호이스팅 동작 설명
var greeting = 'hello'; 에서 먼저 선언 부분인 var greeting이 맨 위로 호이스팅이 됩니다.
선언된 greeting 변수에 undefined가 할당됩니다.
그 후 첫번재 console.log(greeting)으로 undefined출력이 됩니다. (이때 greeting 변수는 undefined가 할당 되어있습니다)
var greeting = 'hello';로 재선언 및 재할당을 하게 됩니다.
마지막으로 두번째 console.log(greeting); 이 동작하며 hello가 출력됩니다.
함수 호이스팅
선언전 호출시에도 문제없이 작동합니다.
함수또한 선언이 호이스팅이 되어 맨 위로 끌어 올려집니다.
그 후 동작하게됩니다.
func();
function func(){
console.log('hoisting test');
}
결과
let, const 호이스팅
console.log(greeting);
const greeting = 'hello';
let 또는 const로 변수를 선언할 경우 var과 동일하게 호이스팅이 됩니다
하지만 차이점이 있는데, var은 실제 값이 할당 되기전에 undefined가 할당 되지만
let , const는 어떠한 값도 할당되지 않습니다.
이 경우 변수에 값이 할당되기 전에 console.log가 동작하며 아래와 같은 오류가 발생합니다
