몽탁이의 개발일기
Javascript의 데이터 타입 본문
var
let
const
위와 같이 크게 3가지로 구분됩니다.
var 은 ES5가 등장하지 않았을 때 사용되었던 타입입니다.
현재는 let과 const를 사용하기 때문에 var는 잘 사용되지 않으며 사용하면 안 되는 이유가 있습니다.
그 이유는
1) hoisting
hoisting 이란 어떤 위치에서 선언을 하였어도 자동으로 맨 위로 올려서 선언되는것 입니다.
예를 들면
console.log(age); // undefined 출력
age = 28;
console.log(age); // 28 출력
var age;
age를 밑에서 선언하였어도 위에서 해당 변수를 호출하여 출력하는 결과를 얻을수 있게 되는 것이 hoisting 입니다.
처음 출력은 변수의 값이 초기화를 하기 전에 호출한 것이기 때문에 undefined라는 값이 출력이 됩니다.
2) no has scope block
scope는 범위를 뜻합니다. 프로그래밍 언어는 {} 안의 변수를 선언하게 되면 해당 블록 안에서만 사용이 가능하고
그 이후로는 변수가 할당된 메모리를 회수하여 사용할 수 없게 됩니다.
하지만 Javascript에서의 var는 블록 안에 선언을 하여도 global 하게 사용할 수 있습니다.
위와 같은 2가지 이유는 var가 데이터를 안전하게 보호할 수 없는 것을 보여줍니다.
그러면 let과 const를 알아보겠습니다.
let과 const의 큰 차이는 변수의 값을 변경을 할 수 있느냐 없느냐에 차이가 있습니다.
let 은
let name='kim';
console.log(name); // kim 출력
name='park';
console.log(name); // park 출력
var의 단점을 커버하며 중간에 값을 변경하여 사용할 수 있습니다.
const 는
const name='kim';
console.log(name); // kim 출력
name='park'; // <-- 에러 발생
console.log(name);
값을 중간에 변경하게 되면 에러 발생하여 밑의 문장이 실행이 되지 않습니다.
const를 사용하게 되면 좋은 점은
- 데이터를 안전하게 보호할 수 있습니다. (외부에서 데이터 값을 강제로 변경이 불가)
- 동시에 작업이 진행되는 쓰레드 환경에서 데이터를 안전하게 보호할 수 있습니다.
이 두 가지를 사용해야 할 상황이 다르기 때문에 적재적소에 맞게 사용하는 것이 중요합니다.
마지막으로 Javascript는 동적으로 데이터 타입을 정하게 됩니다.
사용자가 넣어준 값에 따라 정수인지, 실수인지, 문자형인지 등 자동으로 타입이 지정됩니다.
여기서 나오는 치명적인 에러가 있습니다.
let text = 'hello';
console.log(text.charAt(0)); // h
console.log(`value : ${text}, type : ${typeof text}`); // value : hello, type : string
text=1;
console.log(`value : ${text}, type : ${typeof text}`); // value : 1, type : number
text='7'+5;
console.log(`value : ${text}, type : ${typeof text}`); // value : 75, type : string
text = '8'/'2';
console.log(`value : ${text}, type : ${typeof text}`); // value : 4, type : number
console.log(text.charAt(0)); // Uncaught TypeError 에러 출력
사용자가 넣어주는 값에 따라 타입이 바뀌기 때문에 text라는 변수명으로 string일거라고 예상을 하고 사용하는 중
중간에 값의 타입이 number로 바뀌는 경우가 생기게 되면 에러가 될 수 있는 경우입니다.
이런 상황을 막기 위해 Typescipt라는 언어가 개발되었습니다.
아직은 Typescript에 대해 배운 것이 없으니 이러한 문제점에서 탄생되었다는 점을 알았다는 것에 만족하겠습니다.
'Javascript 정리' 카테고리의 다른 글
use strict 를 사용하는 이유 (0) | 2020.09.01 |
---|---|
script 태그 속성 async와 defer의 차이점 (0) | 2020.08.31 |
Wrapper 객체 (0) | 2020.07.02 |
Object 객체 (0) | 2020.07.02 |
표준 내장 객체 (0) | 2020.07.02 |