<초보자를 위한 JavaScript 200제>와 MDN 등을 참고한 글입니다.

JavaScript의 타입과 자료구조
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#%EA%B0%9D%EC%B2%B4

자료형
https://ko.javascript.info/types#ref-2215

전에 자바스크립트의 자료형(= 타입_Type)에 대해 간략히 정리하였다.
(JS) 반복문(for, while) 참고)
오늘은 자바스크립트의 자료형 8가지를 전보다 상세히 다뤄보자.

✔ 들어가기에 앞서...
위에 걸어둔 MDN을 보면,

JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능합니다.

라고 한다.

let foo = 42 // foo가 숫자
foo = 'bar' // foo가 이제 문자열
foo = true // foo가 이제 불리언

이제 정리해 볼 자료구조를 잘 알아두면
다른 자료 구조 개발에 유용하게 사용할 수 있을것이라고도 한다.

나는 자바스크립트 자료형에 대해 처음 들었을 때
'이게 왜 필요하지?' 또는 '이걸 어디다가 쓰지?' 싶었다.
하지만 점점 코드가 복잡해지고 명확한 타입이 필요할 때 'any'를 보게 되니.. 😭
정리하면서 제대로 머리에 넣을 필요성을 느끼기 시작했다.

🔎 JavaScript의 타입

---

1. 원시 타입

1) Number
2) BigInt
3) String
4) Undefined | 값
5) Null | 값
6) Boolean
7) Symbol

2. 참조 타입

8) 객체

1) Number

---

'Number type' 또는 '숫자형'이라고도 부른다.
숫자형은 정수 및 부동소수점 숫자를 나타낸다.

MDN에서는 'Number 는 37이나 -9.25와 같은 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체입니다.'라고 표현하고 있는데, 여기서 원시 래퍼 객체는 원시 값을 말한다.

원시 값(primitive, 또는 원시 자료형): 객체가 아니면서 메서드도 가지지 않는 데이터. 모든 원시 값은 변형할 수 없다(=불변성). 또한 원시 값의 종류로는 위에서 소개한 7가지 원시 타입이 있다.

123; // 백 이십 삼
123.0; // 동일
123 === 123.0; // 참

Number('123'); // 숫자 123을 반환
Number('123') === 123; // 참

Number('unicorn'); // NaN
Number(undefined); // NaN
//NaN = Not-A-Number(숫자가 아님)

2) BigInt

ECMAScript는 Number와 BigInt 두 가지의 내장 숫자 타입을 가지고 있다.
(그래서 Number Type과 BigInt를 연달아 정리하는 중이다)
JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어로, ECMAScript와 JavaScript가 헷갈린다면 🔗해당 블로그를 참고하면 된다.

---

BigInt 타입은 임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값으로, 정수 끝에 n을 추가하거나 생성자를 호출해 생성할 수 있다.

const bigInt = 1234567890123456789012345678901234567890n;

❗ BigInt는 Number와 혼합해 연산할 수 없다.

3) String

---

'문자형'이라고도 한다.
문자형은 텍스트 데이터를 나타낼 때 사용한다.

'String은 16비트 부호 없는 정수 값 "요소"로 구성된 집합으로, 각각의 요소가 String의 한 자리를 차지합니다. 첫 번째 요소는 인덱스 0에, 그 다음 요소는 인덱스 1, 그 다음은 2, ...입니다. String의 길이는 그 안의 요소 수와 같습니다.'

즉!

var str = "HELLO" //변수에 따옴표를 사용하여 String "HELLO"를 넣어주고
console.log(str.length) //변수 str의 길이를 확인하면?
//5
//변수 str(string)의 길이(length)는 5다.


//index
console.log(str[0]) //H
console.log(str[1]) //E
console.log(str[2]) //L
console.log(str[3]) //L
console.log(str[4]) //O

4) Undefined

Undefined와 후술할 Null은 '값'이다. 그래서 Undefined와 Null은 숫자형이나 문자형과는 맥락이 조금 다르다.

---

선언한 후 값을 할당하지 않은 변수 혹은, 값이 주어지지 않은 인수에 자동으로 할당되는 값이다.
즉, 아무 값도 할당 받지 않은 상태를 말한다.
그리고 console에서 되도록 보고싶지 않다.

var x; // 값을 할당하지 않고 변수 선언

console.log("x's value is", x) // "x's value is undefined" 출력

물론 개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하다고 한다.
하지만 할당한다면 undefined보다는 후술할 Null이 적당하다.

5) Null

---

Null은 존재하지 않거나 유효하지 않은 object 또는 주소를 의도적으로 가리키는 참조를 말한다.

Null은 비어있다는 뜻이며 의도적으로 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 넣어뒀다고 이해하면 편하다. 값이 '없다'는 것을 알리는 것이다!

let age = null;
console.log(age); //null

6) Boolean

---

Boolean 타입 = 논리 요소(논리 타입)
true(참)와 false(거짓) 두 가지 값을 가질 수 있다.

console.log(7 > 3); //true
console.log(7 < 3); //false

7) Symbol

심볼형은 거의 처음듣다싶이 해서 javascript.info의 코드를 정말 많이 참조했다.

---

심볼형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용되며 디버깅시 유용하다.

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

let user = { // 서드파티 코드에서 가져온 객체
  name: "John"
};

let id = Symbol("id");

user[id] = 1;

alert( user[id] ); // 심볼을 키로 사용해 데이터에 접근할 수 있습니다.

8) 객체(Object)

---

앞서 정리한 1) ~ 7) 원시 자료형은 오직 하나의 데이터만 담을 수 있다.
그런데 객체는 원시형과는 달리 다양한 데이터를 담을 수 있다.

let user = { //변수 user 안에 중괄호{}를 사용하여
  name: "John",// key(키): "name", value(값): "John" -하나의 프로퍼티(property)
  age: 30      // key(키): "age", value(값): 30 -하나의 프로퍼티(property)
}; //선언 완료함
//user에는 두 개의 프로퍼티가 있음.

//객체의 프로퍼티에 접근하기
console.log(user.name) //John
console.log(user.age) //30

//속성 변경
user.name = "penguin"
console.log(user.name) //penguin

//속성 추가
user.state = "cute"
console.log(user.state) //cute

//속성 확인
console.log(user) //{name: 'penguin', age: 30, state: 'cute'}
				 //[[Prototype]]: Object

//속성 삭제
delete user.age;

//속성 확인
console.log(user) //{name: 'penguin', state: 'cute'}

역시 직접 글로 정리하는게 엄청 도움되는 듯하다.
(✿◠‿◠)