Console 객체
브라우저(또는 Node.js)가 제공하는 "디버깅 도구"
👉 개발자가 코드 흐름이나 값을 확인하려고 출력하거나,
경고하거나, 에러를 볼 때 쓰는 거야❗
✅ 찍어보면 이렇게 많은 메서드들이 있음
log
table
error
warn
time - timeEnd
console log들이 다 출력될 거 출력하고
hello 부터 hello 까지 얼마나 걸렸는지
( 얼마나 걸렸는지 알고 싶으면 똑같은 텍스트를 써줘야함🤩 )
안그럼 이렇게 됨
clear
콘솔 창이 깨끗하게 지워지는 걸 볼 수 있음
var, let, const
👉 자바스크립트에서 변수 선언할 때 사용
var➡중복 선언 & 재할당⭕, 마지막에 할당된 값이 변수에 저장됨✔
let➡중복 선언❌
재할당⭕
const➡중복 선언❌
재할당도 불가❌
👉 [배열], {객체}의 값은 변경 가능❗
var, let, const 참조 범위 [scope]
var➡함수 레벨 스코프
let & const➡블록 레벨 스코프
var는 함수 내부에 있는 것만 유효해서 함수 외부는 참조 불가능❌
let & const는 var와 달리 블록 레벨 스코프기에 if 안에 있는 요소만 출력⭕
🎣var let const 호이스팅 [Hoisting]
👉 무언가를 들어올리는 것
먼저 생성한 담에 출력해야하는게 맞는 것 같은데..❓
🤔왜 에러 안 나고 undefined로 잘 출력되는지 알아보자❗
console.log(greeting);
var greeting = 'hello';✅ 실행 흐름 설명
JS는 변수 선언 호이스팅(끌어올림) 하는데
var는 선언만 끌어올리고 값 할당은 끌어올리지 않음❌
1️⃣ 선언 단계 (Hoisting)
- JS 엔진이 코드 해석할 때 var greeting; 맨 위로 끌어올려짐
2️⃣ 초기화(할당) 단계
greeting = 'hello' 나중에 실행되니까
console.log(greeting); 이땐 아직 값이 없고 초기값인 undefined 상태✔
var greeting; // 선언만 호이스팅됨 (이때 값은 undefined)
console.log(greeting); // undefined 출력
greeting = 'hello'; // 값 할당
함수도 호이스팅이 됨
const도 호이스팅 된다는데 왜 error가 뜨는걸까❓
var와 달리 const랑 let은 선언 단계에서 undefined 할당 하지 않음🙅♀️
그래서 할당 단계도 아무런 값이 할당되지 않기에
선언~할당 사이 구간을 TDZ [Temporal Dead Zone] 이라고 함☠
결론, var 사용❌
다 const로 하고 재할당 필요할 때만 let 사용⭕
안녕하세요! 퍼블리싱 & 프론트엔드 개발 공부 블로그 입니다!