데이터 타입의 종류
- 기본형(원시 타입, Primitive Type)
숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol) - 참조형(Reference Type) : 객체(Object)
배열(Array), 함수(Function), 날짜(Date), 정규표현식(RegExp), Map, WeakMap, Set, WeakSet
1. 객체(Object)
null과 undefined를 제외한 모든 데이터 타입은 객체(Object)이다.
const obj = {};
obj.text = 'hello';
obj[1230] = 1230;
obj['text' + 1230] = true;
console.log(obj);
<output>
{ 1230: 1230, text: 'hello', text1230: true }객체는 프로퍼티(Property)에 접근해서 값을 변경할 수 있다.
( ↔ 기본형은 불변값이기 때문에 값을 변경할 수 없다.)
...
obj['text'] = 'hi';
console.log(obj);
<output>
{ 1230: 1230, text: 'hi', text1230: true } 객체 안에 특정 프로퍼티가 있는지 in을 사용하여 알 수 있다.
또한, for을 사용해서 객체 순회가 가능하다.
...
console.log('text' in obj); // true
console.log('sum' in obj); // false
for(let property in obj) {
console.log(property, obj[property]);
}
<output>
1230 1230
text hi
text1230 true2. 배열(Array)
Array.of()
인자의 수나 유형에 관계 없이 배열을 만들어준다.
일반 Array는 인자값 길이(length) 만큼의 배열이 만들어지고, Array.of는 인자값 자체가 요소가 된다.
let arr1 = Array(3);
let arr2 = Array.of(3);
let arr3 = Array.of(1, 2, 3);
console.log(arr1);
console.log(arr2);
console.log(arr3);
<output>
[undefined, undefined, undefined]
[3]
[1, 2, 3]Array.from()
유사 배열 객체 또는 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만든다.
<html>
<head>...</head>
<body>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</body>
</html>const buttons = document.getElementByClassName('btn');
console.log(buttons);
buttons 는 마치 배열처럼 보이지만, 배열이 아니다. 이를 유사 배열 객체(Array-like Object)라고 한다.
따라서 배열에 사용하는 forEach()와 같은 함수를 사용할 수 없다.
이를 해결할 수 있는 방법이 Array.from() 이다.
buttons.forEach(element => {
console.log('button');
}); - (1)
Array.from(buttons).forEach(element => {
console.log('button');
}); - (2)
<output>
(1) ReferenceError: forEach is not defined
(2) button button button button button 3. Map과 WeakMap
Map
Map 객체는 Object와 유사하다.
Object와 달리 넣은 순서가 기억되고, 키가 문자열이 아니어도 된다.
let map = new Map();
map.set(1, 'hello');
map.set('text', 'hi');
console.log(map);
<output>
Map(2) {1 => "hello", "text" => "hi"}new 생성자를 통해 Map을 생성하고 set으로 값을 넣는다.
let map = new Map([['fruit', 'apple']]);
map.set('vegetable', 'tomato');
console.log(map);
<output>
Map(2) {"fruit" => "apple", "vegetable" => "tomato"}set으로 설정한 후 get으로 가져올 수 있으며, has로 해당 키 값이 있는지 확인 할 수 있다.
keys()는 키만 values()는 값만 entries()는 키: 값 쌍을 돌려준다.
삭제는 delete로 한다.
...
map.get('fruit'); // apple
map.size; // 2
map.has('vegetable'); // true
map.has('snack'); // false
map.keys(); // MapIterator {"fruit", "vegetable"}
map.values(); // MapIterator {"apple", "tomato"}
map.entries(); // MapIterator {"fruit" => "apple", "apple" => "vegetable"}
map.delete('fruit'); // Map(1) {"vegetable" => "tomato"}WeakMap
WeakMap은 key 값이 객체인 Map이다.
WeakMap은 keys(), values(), entries()를 사용할 수 없다.
let mapObject = { 'homework' : 'math' };
let map = new WeakMap();
map.set(mapObject, 'first');
console.log(map);
console.log(map.get(mapObject));
<output>
Map(1) {{...} => 'first'}
first4. Set과 WeakSet
Set
Set 객체는 Array와 유사하다.
Array와 달리 값이 중복될 수 없다.
let set = new Set([1, 2, 3, 4, 5, 5, 5]);
let arr = [1, 2, 3, 4, 5, 5, 5];
console.log(set);
console.lot(arr);
<output>
Set(5) {1, 2, 3, 4, 5}
(7) [1, 2, 3, 4, 5, 6, 7]new 생성자를 통해 Set을 생성하고 add로 값을 넣는다.
Map과 비슷하게 has, size, keys(), values(), entries(), delete 등을 사용할 수 있다.
let set = new Set(['apple']);
set.add('orange'); // Set(2) {"apple", "orange"}
set.size; // 2
set.has('apple'); // true
set.keys(); // SetIterator {"apple", "orange"}
set.values(); // SetIterator {"apple", "orange"}
set.entries(); // SetIterator {"apple" => "apple", "orange" => "orange"}
set.delete('apple'); // Set(1) {"orange"}WeakSet
WeakSet은 WeakMap과 마찬가지로 객체만을 값으로 받는다.
let setObject = { 'homework' : 'english' };
let set = new WeakSet();
set.add(setObject);
console.log(set);
<output>
Set(1) {{...}}참고 사이트
https://www.zerocho.com/category/ECMAScript/post/576cad515eb04d4c1aa35077
