[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] JavaScript (3)

Today I Learn : 2024-05-29

* code structure (코드 블록을 만드는 방법)

참고 📚 ) https://ko.javascript.info/structure

코드 구조

① 문(statement)

- 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미

② 세미콜론(semicolon , ;)

- 마침표 같은 존재

- 줄바꿈이 있다면 세미콜론을 생략할 수 있다.

- 자바스크립트는 줄 바꿈이 있으면 이를 암시적 세미콜론으로 해석 → 세미콜론 자동 삽입이라 부른다.

- 대부분의 경우, 줄 바꿈은 세미콜론을 의미 (항상X)

// 줄바꿈이 세미콜론을 의미하는 경우
alert('Hello')
alert('World')

// 줄바꿈이 세미콜론을 의미하지 않는 경우
alert(3 +
1
+ 2);
// 자동 삽입이 일어나지 않았기 때문에 6 출력

- 줄 바꿈으로 문을 나눴더라고, 문 사이엔 세미콜론을 넣는 것을 권장

③ 주석 (comment)

-  스크립트 어느 곳에서나 작성할 수 있음

- 자바스크립트 엔진은 주석을 무시하기 때문에 주석의 위치는 실행에 영향을 주지 않음

- 단축키 : ctrl + /

- 1줄 주석 : // 로 시작

- 여러 줄 주석 : /* 주석 내용 */

// 코드 주석하기 : 한 줄 주석
console.log('Hello JavaScript');
/* 
  코드 주석하기
  console.log('Hello World');
  여러 줄 주석
*/

---

* 변수 (Variable)

참고 📚 ) https://ko.javascript.info/variables

변수와 상수

 

정리 ✏️ ) https://hyesom.tistory.com/entry/JavaScript-%EB%B3%80%EC%88%98-Variables

[JavaScript] 변수 (Variables)

---

 

JS 1. 객체중심 (어렵, web component -> Lit) 2. 함수중심 (쉬움)

 

함수중심설계

 

 

---

자바스크립트가 돌아가는 런타임 과정

 

name에 밑줄이 있는 이유 : 윈도우객체(전역객체)에 함수가 있는데 거기에 name가 있기 때문

console.log()도 window의 일부! window.console.log() > window가 생략된 것

 

var로 선언을 하면 window에 종속되지만 let은 window의 자식으로 들어가지 않는다.

 

자바스크립트 특징 중 하나로 선언하지 않아도 

ccc = 10;

ccc 하면 10 이 출력된다 > window.ccc 하면 10이 나온다.

 

런타임중에도 실행되지않고 그전에도 이미 알고있는가 센 대문자로 써도 된다.

고정된 값이기 때문에

 

const a = [];

a = 10;

[] 안에서 지지고 볶고는 되는데 []를 벗겨내고 다른걸로 맹그는건 안된다는 말 같아요!

 

---

엄격모드

 

usestrict 를 취소할 방법은 없다

쓸때는 개행해서 쓰자!

 

 

---

global this 

 

node에서의 전역 객체와 웹에서의 전역객체는 다르다.

node환경에서는 global

웹환경에서는 window

 

오래된 var (레거시 바~)

https://ko.javascript.info/var

오래된 var

var는 let, const로 선언한 변수와는 다른 방식으로 동작한다.

 

{  } 하나의 블록

{

  let a = 10; // 블록

}

 

const a = {}; // 객체

 

~~문 {  } (중괄호가 열리고 중괄호가 닫힌 모양 단, 함수는 예외)

ex) 문(statement)

if (조건) {  }

for ( ) {  }

 

**** var도 스코프가 존재함!!! -> 어떻게?? 함수로!!!

 

var는 블록스코프는 존재하지않지만 함수스코프는 가진다

 

환경이 설정이되면 Global Execution Context가 구축됨

눈으로 보이지 않는 환경들

1. lexical(어휘적, 말로 표현할수 있는 환경) environment  2. variable environment로 나뉘어져 구축됨

 

var x = 2; 선언되면 var x의 삶은

> var로 선언이 된 것은 Obejct Environment로 : (window Object로)

> Binding(꼭꼭묶음) Object : 객체(window)랑 묶음

> window.x가 가능해짐 (윈도우의 자식으로 들어감)

선언부만 끌어올림 (var x까지만) -> 호이스팅(hoisting)

호이스팅 후 바인딩이 일어남!!! 

console.log(x);

var x = 10; 의 경우

console.log(x);

호이스팅 되어서 > x가 undefined로 초기값 할당됨

그래서 undefined가 나오고 10이 나옴

 

 

---

let y = 1;

예 var x = 10;

     let y = 5;일 때

> let은 호이스팅될 떄 선언만 되고 x는 undefined가 할당된다. .

그래서

예) console.log(y);

         let y = 5;일경우 y에는 선언만되어서 안에 할당된 값이 없기 때문에 error발생

var의 문제점이 선언 전에 사용이 가능한 점이었는데 이걸 해결하려고 let, const가 나왔고 그래서 얘네는 호이스팅 때 초기화가 되지 않는다.

 

Temporal Dead Zone (TDZ 탄 단 지) 코딩앙마 추천

 

const c = 10;

 

참고 ) null = 의도해서 비워둔 것  //  undefined = 의도하지않았는데 비워진 것

참고)

https://www.frontendinterviewhandbook.com/kr/javascript-questions

---

JS가 파싱할 때 구조트리를 그리려고 해당 정보들을 hosisting한다는 것인데, 이때 hoisting 된 것들은 메모리에 공간 할당 위해 undefined나 TDZ에 선언되는 것.

---

자바스크립트를 공부 할 때 항상 ***** 암시적 vs 명시적 ***** 을 꼭 생각해야된다. 

프로덕션 서버에 배포하기 전에 코드를 압축해주는 도구(vite)