JS #2-자바스크립트 기초 개념2 (전역 실행 환경, TDZ)

자바스크립트 사용 방식

1. 내부방식 (스크립트 자체를 html 파일 내에 넣어서 사용한다) 

2. 외부 방식 (html과 js 파일을 따로 주어 불러주기하여 사용한다.) 

2번 방식으로 사용한다. 

과거에 레거시했던 js 태그 방식 다만 모듈형 제작 떄는 type=module 쓴다.

 

 

캐시

외부 방식으로 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하므로, 성능상의 이점이 있으나

바로 수정 반영이 안될 때가 있다. 

->강력 새로고침으로 해결해줄 수 있다. 

 

 

---

코드 구조

 

문 -> 값을 반환하지 않는다.

식 -> 값을 반한한다. 

 

 

암시적 세미콜론

자바스크립트는 '암시적'으로 세미콜론으로 인식하여 실행이 된다. 

다만 불완전하게 줄바꿈이 일어나는 경우는 예외

대괄호 앞에서는 세미콜론이 있다고 인식하지 않기 때문에

위와 같은 상황에서는 처리가 되지 않는다. 

 

---

 

변수 : 변할 수 있는 수

상수 : 변하지 않는 수

 

 

변수 생성
let 

변수 선언

할당

변수 사용

 

let 대신 var 변수 선언 방식은 레거시!

 

 

변수 복사는 가능, 변수를 두번 선언하는 것은 불가
*const는 애초에 불가

let a = 30;

let a = 50; //불가능

let a = 30;

a = 50; //가능

 

const는 선언과 할당이 동시에 일어나야한다.

const는 재할당이 불가하다. 

const  a; // 불가

const a = 10 //가능

 

 

변수 선언 예시

// - 갯수 별 상품 가격 계산하기

let calcEachPrice;

// - 구매 결제 여부

let purchaseCondition;

let isPayment = true | false; //T or F 값을 가지고 있는 변수는 보통 is를 접두어로 쓴다.

// - 구매 제품 가격의 총 합

let purchaseSum;

// - 구매 결제 내역

let purchaseList;

let paymentList;

// - 오늘의 운세

let todayFortune;

let fortuneOfToday;

// - 상품 정보

let prodInfo;

const productInfo = '';

/* constant variables -------------------------------------------------- */

// - 1년 기준 일(day)자 수

let YEARDAY = 365;

// - 브랜드 접두사

let BRAND_PREFIX = 'COCO';

뜻에 따라 변수의 이름 작성하는 훈련을 해보자. 

영어로 작성하기 어려운 점 은 translator 확장 기능을 install하여서 사용한다. 

alt+shift+T 가 단축키

 

 

 

const가 객체인 경우, 객체임은 변함이 없지만 객체 내부의 값은 변경이 가능하다!! 

const b의 경우, 객체임은 불변하지만

b.name = 'chaeyoung' 이 된다면 이 name의 값은 변경이 된다. 

 

 

primitive data  : 원시값 ★

문자, 숫자, boolean값 ...

객체는 원시값이 아님!

 일반 변수들은

const a = b; 

a에도 b의 값이 할당되고 그 만큼의 공간이 할당되지만, 

 

객체 user의 경우에는

const user2 = user;

user2에 user 복사는 하지만 '참조에 의한 복사' 가 일어난다. 

따라서 온전한 데이터 공간이 할당되는 것이 아니고 값의 '주소' 즉, 참조가 변경되는 것이다. 

이는 원시값이 아니기 때문이다. 

 

엄격모드 : 자바스크립트를 '모던한'방식으로 동작하도록 엄격하게 제한하는 것

'use strict';

// #1

jujeob = '심선범 넌 뭐랄까.. 마치 베를린 같아. 왜냐하면 치명적인 독일 수도.';

console.log(jujeob);

//#2

console.log(this);

#1, 2 모두 엄격모드에서는 동작되지 않는다.

 

 

전역객체
브라우저 환경 : window
node.js 환경 : global
최근 통합되어 : globalThis 로 명시되긴 했지만, 현업에서 관습탓에 활발하게 사용하지 않는 경우가 종종 있다.

 

index.js 의 전역변수를 window로 설정하고 node환경에서 실행한 경우

전역변수를 global로 변경하고 node 환경에서 실행한 경우

 

 

브라우저에서 var 선언한 객체(함수), 변수 들도 window와 전역변수 바인딩이 된다.

다만, let이라는 모던 자바스크립트 변수를 사용하면 바인딩 되지 않는다. 

 

폴리필 : 브라우저에서는 지원하지 않는 기능을 직접 구현하여 만들어주는 것

 

 

★★★ 여기부터 조금 더 어려움 주의 ★★★

레거시한 변수 var

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

 

var는 블록 스코프가 없습니다. 
스코프 : 변수를 열거할 수 있는 유효 범위 (쳐다볼 수 있는)!
블록은 울타리 같은 느낌! 

 

중괄호 열고 닫고 = 블록!

if라는 블록 안에 var test를 선언했다. 

블록 안에 갇혀있음에도 블록 바깥에서 test로 접근이 가능하다!!!

 

 

동일한 예제를 let을 이용해서 선언한다면

let은 절대 블록을 벗어날 수 없다. 

전역을 오염시키지 않고 안전한 코딩을 가능하도록 만든다.

 

 

var는 변수의 중복 선언을 허용합니다. 

 

 

Global Execution Context : 전역 실행 환경

개발자가 사용한 var, let/const, function 들을 전역 실행 환경에서 나누게 된다.

 

전역 실행 환경의

Lexical Environment : 어휘적으로. 말로 표현할 수 있는 (눈에 보이지 않는 환경인 셈)

var 시나리오 )  var x;를 선언했다면? 

Lexical E -> Environment Record -> Object Environment -> Binding Object

--> Binding Object에서 글로벌 객체인 window와 결합하게 된다. window.x!!!! 

 

let시나리오 )  let y;를 선언했다면? 

Lexical E -> Environment Record -> Declarative Environment -> let, const (윈도우와는 절대 바인딩XXXX)

-->  const도 동일함!

 

함수 시나리오 )  함수 sum을 선언했다면? 

Lexical E -> Environment Record -> Object Environment -> Binding Object

--> Binding Object에서 글로벌 객체인 window와 결합하게 된다. window.sum

 

 

 Binding Object 로 가서 window와 binding 되는 애들은 "초기값을 할당 받는다."

아무것도 안쓰고 var a; 만 선언해도 'undefined'를 할당받는다!! 

반면에 let과 const 는 "그 어떤 것도 할당 받지 않는다."

 

 

자바스크립트의 환경은 모든 변수의 선.언.부 를 찾아서 코드의 최상단으로 이동을 시킨다. : 호이스팅

이런 현상을 호이스팅이라고 한다.

코드의 최상단에 선언부인 var x 가 있기 때문에 Object Environment에 위치하게 되었고 초기값 undefined를 할당 받게 되는 것이다. 

var x 에 준 10 할당 자체는 호이스팅 되지 않는다.

-  할당 값은 호이스팅 XXX

-  블럭 안에 있으면 호이스팅 XXX

 

 

let으로 x를 선언한 경우에는 호이스팅은 일어나지만

x에는 그 어떠한 값도 할당되지 않는다. (빈 공간) 

그렇기 떄문에 할당되기 전에 x를 출력하려고 하면 오류가 일어난다. 

=> 이 상태를 'TDZ'라고 한다. 호이스팅 되어 올라갔지만, 할당되지 않는 상황이다.