JavaScript(자바스크립트) - 데이터타입과 let,var,hoisting 에 대해서 알아보기

 

위의 코드를 한 번 보면 let 을 이용해서 name 이라는 변수안에 처음에는 david 라는 값을 넣었고

그걸 console.log 를 통해 name을 출력하니 david 라는 값이 나온 것을 볼 수 있다.

그리고 그 밑에 name 이라는 변수에 다시 hello 라는 값을 넣었고 다시 console.log를 통해서 name 출력하니

david가 아닌 hello가 나온 것을 볼 수 있는데 각 변수마다 한개의 값을 가질 수 있는 데이터 박스가

존재한다고 생각하면 쉽다.

​

맨 처음에 name 이라는 변수 안에 david 를 넣었을 때 박스에 david 라는 물건을 넣었고

당연히 그걸 열어봤을 때에는 david가 들어있는거라고 생각하면 되는데

그 박스에 david를 빼고 hello 라는 물건을 다시 넣었다고 생각하면 쉽다.

 

 

 

 

자 그럼 여기에서는 위와 차이가 있다면 맨 위와 맨 아래에 {} 를 쓴 것을 볼 수 있다.

이것을 block scope 라고 하는데 이 block scope 안에 작성한 코드를 작성하면

그 밖에서는 block scope 안에 작성한 코드를 볼 수가 없다.

즉, 다시 변수를 정해주지 않는 이상 같은 변수 이름으로 출력만 하면 출력이 안된다.

그 예는 오른쪽 사진을 보면 아는데 block scope 안에 let name = 'hello' 라고 변수에 값을

넣어줬지만 block scope 밖에서 이 name 을 출력하려고 하니까 에러가 떴다.

위와 같이 block scope 안에 작성한 코드들을 그 밖에서는 출력을 하려고 해도 못한다고 보면 된다.

(block sope 안에 쓴 console.log(globalName)은 무시하자.... 있는지도 몰랐다...)

 

 

 

 

(codepen 에서는 아무것도 없는 것을 출력하게 되면 빈 화면이 아닌 CodePen이 나온다.)

근데 여기에서 global scope 라는 것도 있게 되는데 ​global scope는 block을 안쓰고

파일 안에 바로 정의해서 쓰는 변수들을 global scope 라고 부른다.

global scope는 어느 곳에서나 접근이 가능하다.

그렇기 때문에 block 안에서나 밖에서나 출력이 되는 모습을 볼 수 있는데 이것이 무한으로

사용할 수 있는 변수면 좋겠지만 그건 아니다.

​

어플리케이션이 실행되는 순간부터 끝나는 순간까지 항상 메모리에 탑제가 되어있기 때문에

최소한으로 사용하는게 좋고 가능하면 class 나 함수 if 나 for 등 필요한 부분에서만

정의해서 사용하는게 좋다고 한다.

 

---

 

 

자바스크립트에서 변수를 정의할 수 있는 것은 딱 하나 let 이라고 한다.

let 은 ES6에 추가가 되었다고 한다.

이전에는 var를 사용을 했는데 var를 사용하면 안좋은 이유는

대부분 프로그래밍에서는 변수를 선언하고 나서 값을 할당하는게 정상적이지만

var 에서는 선언전에 값을 할당을 할 수 있고 그 값을 할당하기 전에도 출력이 가능하다고 한다.

 

 

예를 들면 위의 사진과 같다.

undefined 라고 뜬 건 age = 4; 위에 console.log 로 출력된거고

그 밑에 4라고 뜬건 age = 4; 라고 정해줬기 때문에 age값인 4가 출력이 된거다.

근데 우리가 일반적으로 알고 있는 변수 선언 후 값 할당 후 출력과는 순서가 상당히 다른 것을

알 수 있는데 이게 var 로 선언하게 되면 이렇게 출력이 가능하다.

이것을 var hoisting 이라고 하는데 이 hoisting은 어디에 선언했냐에 상관 없이 항상

제일 위로 선언을 끌어올려주는 것을 뜻하는 것이라고 볼 수 있다.

​

그리고 var는 {} 인 block scope 를 무시하는 친구라고 하는데 원래 block scope를 쓰면

그 밖에서 출력을 요청 했을 때 출력이 되면 안되는데 var를 쓰게 되면 block scope를 무시하고

출력이 된다고 한다.