[javaScript] 값의 타입에 대하여

개념/javaScript

[javaScript] 값의 타입에 대하여

칠뎁 2022. 6. 24. 11:37

🦎type은 변화무쌍하다

mdn에서는 다음과 같은말로 자바스크립트의 변화무쌍한 타입을 설명하고 있다.

JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다.

다시 말해서, 어떤 변수에 어떤 타입이 할당되었든, 그것은 또 다른 타입으로 할당이 가능하다는 이야기이다.

//1️⃣
let chillDev = 'entry developer';
console.log(chillDev);
// 결과 : entry developer

//2️⃣
chillDev = 29;
console.log(chillDev);
// 결과 : 29

//3️⃣
chillDev = '29';
console.log(chillDev);
// 결과 : 29

1️⃣2️⃣3️⃣은 모두 chillDev이란 변수에 값을 할당하고 있다. 이전 할당을 해제하는 별도의 과정 없이, =를 사용하면 새로운 값으로 재할당된다.

이렇게 1️⃣2️⃣3️⃣의 값이 다르게 할당되면 당연히 그 값의 type도 업데이트가 될 수 있다.
1️⃣번의 값은 문장, 2️⃣ 값은 숫자, 그렇다면 똑같이 숫자가 찍히는 3️⃣의 값도 숫자일까?
답은 '아니다'이다.

🏷️type은 다양하다

왜 아닌지를 설명하기 전에 자바스크립트의 타입은 어떤것들이 있는지, 간단히 정리해보자면 아래와 같다.

💙bollean = true 나 false 값이 튀어 나오는 판정문
💙null = 값이 (의도적으로) 비어있음
💙undefined = 값이 할당되지 않음
💙number = 숫자 , NaN도 포함
💙string = 문장
bigInt = 엄청 큰 숫자
symbol = 고유하고 변경불가능한 로고같은 값

💙표시가 되어 있는 것들이 가장 많이 접하게 되는 값이다.
※이 값들은 모두 원시 값(primitive, 또는 원시 자료형)이다. 원시 값은 객체, 배열, 함수와는 달리 변형할 수 없는 것들이며, 다른 경우 참조형(reference type, 또는 참조 자료형)이 있다. 이에 대해서 일단은 이 글을 첨부. 기회가 있다면 따로 포스팅해보겠다.

🔍type은 typeof로 확인한다.

typeof 연산자를 사용하면 값의 타입을 확인할 수 있다.

console.log(typeof 29);
// 결과: "number"

console.log(typeof '아무문장');
// 결과: "string"

console.log(typeof true);
/// 결과: "boolean"

console.log(typeof iDidntDefine);
// 결과: "undefined"

이 typeof는 직접적으로 사용하기 보다는 하다가 원하는 대로 출력이 안될때 확인하는 용도로 많이 사용했던것 같다.

🤦‍♀️type은 보이는게 다가 아니다.

숫자 29가 우리가 인식하는대로 '숫자'라는 타입만이 가능하다면 사실 typeof로 확인해볼 일도 없겠지만, 그게 아니니까 있는거다.

일단 string, 즉 문장 타입은 아래의 세가지로 값을 할당하면 된다.

"" (큰따옴표 double quote)
''(작은따옴표 single quote)
``(백틱 backtik)

위 친구들을 사용해서 값을 할당하면 아무리 그 안에 들어있는 것이 숫자의 모양새를 하고있더라도 그 값의 타입은 문자가 된다.
반면 number, 즉 숫자 타입은 '"`들을 사용하지 않고 그냥 숫자만 적어 할당한다.

그럼 앞서 나왔던 코드에서 2️⃣3️⃣의 타입이 다른게 이해가 간다.

//1️⃣
let chillDev = 'entry developer';
console.log(chillDev);
// 결과 : entry developer

//2️⃣
chillDev = 29;
console.log(chillDev);
// 결과 : 29

//3️⃣
chillDev = '29';
console.log(chillDev);
// 결과 : 29

2️⃣는 숫자, 3️⃣은 문자인 것이다.

😒undefined와 null, 미분양 신축과 공실

이 둘의 차이가 헷갈려 검색해보니 잘 정리되어 있는 글이 있다.

말하자면 undefined가 미분양 신축이라면, null은 현재 입주자가 빠진 공실이랄까..
공실은 입주자를 내보내면 만들수 있지만, 미분양 신축은 집을 새로 만들어야 가능한 상태!

이 둘은 string이나 number 같은 타입과 다르게 타입이 다양하게 옷을 입고 ('칠뎁','chilldev','CHILLDEV' 등) 등장하는 게 아니라, 항상 undefined와 null이라는 모양새로만 등장한다는 것이 공통점이다.
코드스테이츠 부트캠프 중간 퀴즈 문제에서 "Null타입은 null하나의 값만 가질 수 있다" 라는 지문이 헷갈렸었는데, 이런 뜻이었다.

이밖에도 이 둘에 대해서도 뭐가 많다.

🔢Number('문장') === NaN, Number('29') === 29

값을 숫자로 바꾸는 Number() 표준 내장 객체는 안에 string이 들어올땐 NaN을 반환하지만, 문장인척하는 숫자 '29'가 들어올때에는 숫자로 바꾸어서 29가 들어온다.

※NaN 은 Not A Number를 뜻한다.

🆒String(29) === 29

값을 문장으로 바꾼다. 숫자 29를 넣으면 '29', 즉, 문장이 되서 나온다.

🙄typeof Null 은 object?

Null을 typeof로 찍어보면 object(객체)가 나온다. 띠용??
결론부터 말하자면 Null은 원시자료형이며, 참고자료형인 객체가 아니다.

그런데 초기 자바스크립트 typeof 구현코드에서 Null에 대한 대응이 적절히 되어 있지 않아서, 이제와서 바꾸긴 너무 늦었다고....(수정 의견을 낸 사람들이 많았으나 받아들여지지 않았다고 한다.)

그래서 null을 판명할때는 typeof가 아니라 boolean으로 판정문을 써야 한단다.

let chillDev = null;
console.log(typeof chillDev) // ❌ object 출력
console.log(chillDev === null) // ⭕ true 출력