[React] 자바스크립트 - 기본(변수,상수,자료형)

1. 변수와 상수

* 변수 생성의 3단계 : 선언 → 초기화 → 할당 

 

- 선언 : 실행 컨텍스트에 변수 객체를 등록 

- 초기화 : 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보

- 할당 : 초기화된 변수에 실제 값을 할당 

 

예르들어, var a = 2;

var : 선언

a = 2 : 할당 

 

 

* 종류

1) var

- 가급적 사용하지 않는게 좋다.

- 블록스코프가 아닌 함수 수준 스코프를 가진다. (스코프란 이변수를 어디까지 사용할수 있는지 , 범위라고 보면된다.)

- 선언과 초기화를 한번에 한다.

- 재선언이 가능하다.

- 선언하기 전에도 사용할 수 있다.

 

// var는 이런 식의 사용도 가능합니다.

// var name은 선언! name = "perl"은 할당!

function cat(){

    name = "perl";

    alert(name);

    var name;

}

 

cat();

 

- 코드 블럭을 무시한다. 

   var는 함수의 최상위로 호이스팅 되는데 선언은 호이스팅 되고 할당은 호이스팅 되지 않는다. 

 

- 호이스팅이란?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

언제 최상단으로 끌어올리냐면 자바스크립트가 파일을 읽어올 당시에 끌어올린다.

(읽어 온다 : 파일 전체 내용을 확인한다. / 실행한다 : 하나하나 확인해서 동작하게 만든다.)

 

즉, 페이지를 열면 딱 파일을 로드를 하는데 이때, 파일을 한번 쭉 훑어보고 

변수, 함수 등등 확인하면서 실행할 환경을 미리 준비를 해놓는다. 이를 실행 컨텍스트 라고 한다. 

 

자바스크립트 엔진이 변수를 쓰기위해서 실행컨텍스트에 등록을 해둔다.

var 키워드로 선언을 해두면 아래에 선언을 해도 문서를 맨위로 가져와서 한줄한줄 동작할때 맨밑에 있어도

맨 위에 있는것처럼 읽히고 동작을 한다. 그래서 선언을 밑에다가 해도 동작을 한다. 

var name; 이 친구를 실제로 훑어보고 실행 컨텍스트 만들때 애를 위에다가 가지고 와서 위에 있는것처럼 동작을 하기때문에

이미 선언이 되었고 console에 navi라고 잘 뜨는걸 볼수있다. 

 

 

2) let

- 자바스크립트에서 변수를 생성할 때 쓰는 키워드 (변수는 변하는 값 재할당이 가능)

- block-scope를 갖는다. (중괄호를 블록이라고 하며, 블록을 벗어나면 변수를 쓸수없다고 이해하면됨) 

- {} 안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸수없다.

- 재선언은 불가, 재할당은 가능

 

3) const

- 자바스크립트에서 상수를 생성할 때 쓰는 키워드 ( 상수 : 재할당이 불가능 값)

- block-scope를 갖는다.

- {} 안에서 선언하면 {}안에서만 쓰고 바깥에선 쓸수없다.

- 재선언 불가, 재할당도 불가하고 선언과 동시에 할당한다.

4) TDZ(Temporal Dead Zone) = 일시적 사각지대

일시적 사각지대란, let 과 const은 변수가 선언되기 전에 호출하면 ReferenceError가 발생한다. 

- 원인 : 초기화 단계에서 메모리에 공간을 확보하는데, 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없기때문에 

             변수를 참조할 수 없어서 에러가 발생한다. 

            변수를 실행컨텍스트에 등록을 할때 var는 선언과 초기화를 동시에 하므로 메모리에 공간이 생기므로 오류가 안나는데

            let ,const는 호이스팅이 됬어도 메모리안에는 공간이 없어서 ReferenceError 가 발생하게 된다.

 

- 해결안 :

   스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이 변수가 있는 실제 위치에 도달할 때 까지 엑세스를 못할뿐!

   

 

※ 참고로, 변수명은 숫자로 시작할수 없고, _와 $를 제외한 특수문자를 쓸수없고 그외의 모든 것은 가능하다. (한글도 가능)

 

2. 자료형

- 객체를 제외한 나머지 7자리를 원시형이라고 한다. (typeof 연산자로 자료형을 알수있다)

- 정수, 부동 소수점을 저장하는 숫자형 : -(2^53-1) ~ (2^54-1) 까지 지원 

- 아주 큰 숫자를 저장하는 BigInt형 

- 문자열을 저장하는 문자형

   ("" 따움표로 감싸서 사용, 숫자를 감싸도 문자로 인식)

- 논리 값(true/fasle) boolean형

- 값이 할당되지 않음을 나타내는 독립 자료형  undefined

- 값이 존재하지 않음을 나타내는 독립 자료형 null

- 복잡한 자료구조를 저장하는 데 쓰는 객체형

   (숫자,문자 등등 여러가지 자료형을 한번에 넣는 것)

- 고유 식별자를 만들 때 쓰는 심볼형 

  (같은거 2개는 만들 수 없다.)