📝 4주차 위클리 페이퍼 미션

📌4주차에는 JS의 이벤트 속성들과 모던자바스크립트에 대해 집중적으로 학습하였다.
  4주차 커리큘럼을 마치고 느낀점은 "정말 다양한 프로퍼티들이 있고 학습 외에도 접해보지 못한 
  수 많은 프로퍼티들이 존재하고 있고 꾸준히 업데이트를 하고있네." 라는걸 알게되었고,
  "꾸준히 업데이트 하는 만큼 꾸준히 따라가야겠구나."
   라는 생각을 했다. 
   서론이 길었다.. 4주차는 아래와 같은 2가지 주제를 받았다.

var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요.

위 내용을 통해 var let const 에 대해 비교를 해보자.

📌 중복 선언 허용

 <script>
var name = "code-it";

console.log(name); // code-it

var name = "pjw";

console.log(name); //pjw
</script>

위의 예제와 같이 name을 중복해서 선언해도 에러가 발생하지 않는다.
이는 개발자가 의도치 않게 변수명을 똑같이 선언하고
값을 재할당할 수 있게 되고 문제가 발생할 수 있다.
let과 const는 같은 스코프 내에 중복 선언이 불가능하다.
let과 const로 선언된 변수는 중복선언을하면 참조에러가 발생한다.

📌 함수레벨 스코프

var : 함수 레벨 스코프
let 과 const : 블록 레벨 스코프
var로 선언된 변수는 함수의 코드 블록만 지역 스코프로 인정된다.

 <script>
var i = 10;

for (var i =0; i<3; i++){
    console.log(i) // 0 1 2
}

console.log(i); // 3
</script>

for문 안에서도 var 키워드는 전역 변수가 되어 기존의 값을 업데이트한다.
var 키워드가 아닌 let이나 const 키워드로 선언을 한다면
Uncaught SyntaxError : Identifier 'i' has already been declared 에러가 발생한다.

📌 변수 호이스팅

호이스팅이란?
변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라한다. - 모던 자바스크립트 Deep Dive, p43
var 키워드는 변수 호이스팅에 의해 선언문이 스코프의 위쪽으로 끌어올려진 것처럼 동작한다.
에러를 발생시키지는 않지만 프로그램의 흐름에 맞지 않고 가독성을 떨어뜨리고 오류를 발생할 여지를 남긴다.

let으로 선언된 변수는 참조에러가 발생한다.

버전 문제가 없다면 var는 사용하지 않는 걸 권장한다.
변수의 재할당이 필요한 경우에만 let을 사용한다.
변수 선언 시에는 변수가 재할당이 필요한지 모르는 경우가 많아 그냥 const를 쓰고 재할당이 필요하면 그때 let으로 바꿔도 늦지 않다.

브라우저가 어떻게 동작하는지 설명해 주세요.

👨🏻‍💻 브라우저 동작 원리 요약

1️⃣ 입력 받기: 웹 주소를 입력
2️⃣ DNS 확인: 주소를 IP 주소로 변환
3️⃣ 서버에 요청: 웹 페이지를 서버에 요청
4️⃣ 서버 응답: 서버가 페이지 데이터 전송
5️⃣ HTML 해석: 받은 HTML 코드 해석
6️⃣ 화면에 표시: HTML을 시각적으로 화면에 표시
7️⃣ CSS 스타일링: 스타일 적용해서 스타일링
8️⃣ JavaScript 실행: 동적 콘텐츠를 위한 스크립트 실행
9️⃣ DOM 만들기: 페이지의 객체 모델 생성
🔟 화면에 보여주기: 최종적으로 웹 페이지 표시

👍🏻 Reference

var 키워드를 권장하지 않는 이유

브라우저는 어떻게 작동하는가