🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Lang
JavaScript
03-데이터 타입-Primitive

1. 데이터 타입(Data Types) 종류

JavaScript의 데이터 타입(Data Type)은 크게 primitive(기본, 원시)reference(참조)으로 구분합니다.

js-3-1


2. 원시타입

2.1 숫자 타입(number)

1
let integer = 123 // 정수
2
let negative = -123 // 음수
3
let double = 1.23 // 실수
4
5
console.log(integer) // 123
6
console.log(negative) // -123
7
console.log(double) // 1.23
8
9
let binary = 0b1111011 // 2진수
10
let octal = 0o173 // 8진수
11
let hex = 0x7b // 16진수
12
13
console.log(binary) // 123
14
console.log(octal) // 123
15
console.log(hex) // 123
16
17
console.log(0 / 123) // 0
18
console.log(123 / 0) // Infinity
19
console.log(123 / -0) // -Infinity
20
console.log(123 / 'text') // NaN (Not a Number)
21
22
// 참고 : 정말 큰 수를 표현할 떄는 뒤에 n을 붙여야 함
23
let bigInt = 1234567890123456789012345678901234567890n
24
console.log(bigInt)

💡Infinity에 대해

cf. TED - 0으로 나누면 안되는 이유, 자막있음

0은 역수를 가질 수 없음


2.2 문자열 타입(string)

1
// 문자열 타입
2
let string = '안녕하세요'
3
string = `안녕!`
4
console.log(string)
5
6
// 작은 따옴표 표현
7
string = "'안녕!'"
8
console.log(string)
9
10
// 특수문자 출력하는 법 : 이스케이프 표현
11
string = '안녕!\n나야!\t\t 내 이름은\\\u09AC'
12
console.log(string)
13
14
let id = '메시'
15
let greetings = "'안녕!, " + id + "🖐️\n즐거운 하루 보내요!'"
16
console.log(greetings)

2.2.1 템플릿 리터럴(Template Literal)

1
// 템플릿 리터럴(Template Literal) ``
2
greetings = `'안녕, ${id}🖐️
3
즐거운 하루 보내요!'`
4
console.log(greetings)

백틱으로 문자를 만드시면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있습니다.

  • 문자 중간 엔터키 입력이 가능
  • 문자 중간에 변수를 집어넣을 때 편리
  • 자바스크립 문자로 HTML을 작성하실 때도 유용

2.3 불리언 타입(boolean)

1
// 불리언 타입
2
let = true
3
let 거짓 = false
4
console.log() // true
5
console.log(거짓) // false
6
7
// 활용 예:
8
let isFree = true
9
let isActivated = false
10
let isEntrolled = true
11
console.log(isActivated) // false
12
13
console.clear()
14
15
// Falshy 거짓인 값
16
console.log(!!0) // false
17
console.log(!!-0)
18
console.log(!!'')
19
console.log(!!null)
20
console.log(!!undefined)
21
console.log(!!NaN)
22
23
// Truthy 참인 값
24
console.log(!!1) // ture
25
console.log(!!-1)
26
console.log(!!'text')
27
console.log(!!{})
28
console.log(!!Infinity)

2.4 null과 undefined 타입

  • undefined : 값이 있는지 없는지 모름
  • null : 값이 없음
1
// null, undefined
2
let variable
3
console.log(variable) // undefined : 값이 있는지 없는지 모름
4
5
variable = null
6
console.log(variable) // null : 값이 없다
7
8
let activeItem // 아직 활성화된 아이템이 있는지 없는지 모르는 상태!
9
activeItem = null // 활성화된 아이템이 없는 상태!
10
11
console.log(typeof 123) // number
12
console.log(typeof '123') // string
13
14
console.log(typeof null) // object : null을 표현하기 위해 만든 object가 할당됨
15
console.log(typeof undefined) // undefined

2.5 symbol 타입

map과 set을 배운 후에 symbol을 이해합니다. symbol(심벌)은 유일한 값을 나타날 떄, 유용하게 사용할 수 있습니다.

  • Symbol은 Symbol() 함수로 생성합니다.
  • 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시 타입의 값입니다.
1
let mySymbol = Symbol()
2
3
let mySymbol2 = Symbol('something')
4
// Symbol()에 문자열을 줄수 있는데 별다릇 뜻은 없고 주석 같은 개념이다.
5
// 디버깅할때 이 심볼이 어느 심볼인지 구분하기 편하게 하기 위한 장치
6
7
console.log(mySymbol) // Symbol()
8
console.log(typeof mySymbol) // symbol

심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다릅니다.

1
let id1 = Symbol('id')
2
let id2 = Symbol('id')
3
4
alert(id1 == id2) // false

2.5.1 Symbol.keyFor()

Symbol() 은 고유한 심볼을 반환합니다. 하지만 Symbol.for() 는 전역으로 존재하는 global symbol table 의 목록을 참조합니다. 때문에 Symbol.for(token string) 으로 정의할때, token string 으로 정의 된 심볼이 있다면, 해당 심볼을 반환하게 됩니다.

1
// 전역 Symbol 레지스트리에 foo라는 키로 저장된 Symbol이 없으면 새로운 Symbol 생성
2
const s1 = Symbol.for('foo')
3
4
// 전역 Symbol 레지스트리에 foo라는 키로 저장된 Symbol이 있으면 해당 Symbol을 반환
5
const s2 = Symbol.for('foo')
6
7
console.log(s1 === s2) // true

2.5.2 Symbol.keyFor()

Symbol.keyFor은 global symbol table로부터 존재하는 Symbol의 token string을 반환합니다.

1
var token = Symbol.for('tokenString')
2
console.log(Symbol.keyFor(token) === 'tokenString') // true

2.5.3 Symbol.description

일반 심볼 이름을 반환합니다.

1
const shareSymbol = Symbol.for('myKey')
2
console.log(Symbol.keyFor(shareSymbol)) // myKey
3
4
const unsharedSymbol = Symbol('myKey')
5
console.log(Symbol.keyFor(unsharedSymbol)) // undefined
6
console.log(unsharedSymbol.description) // myKey
1
// Symbol(심벌) : 유일한 키를 생성할 수 있음 🔑
2
const map = new Map()
3
// const key1 = 'key';
4
// const key2 = 'key';
5
const key1 = Symbol('key')
6
const key2 = Symbol('key')
7
map.set(key1, 'Hello')
8
console.log(map.get(key2)) // undefined
9
console.log(key1 === key2) // false
10
11
// 동일한 이름으로 하나의 키를 사용하고 싶다면, Symbol.for
12
// 전역 심벌 레지스트리(Global Symbol Registry) = 전역적으로 심벌을 관리하고 재사용하는 곳
13
const k1 = Symbol.for('key')
14
const k2 = Symbol.for('key')
15
console.log(k1 === k2) // true
16
17
console.log(Symbol.keyFor(k1)) // key
18
console.log(Symbol.keyFor(key1)) // undefined
19
20
// 보안을 위해 외부에서 접근을 막는 Symbol
21
// 결론 : 문자열이 같아도 유니크한 키값을 만들고 싶을 떄, Symbol을 사용
22
const obj = { [k1]: 'Hello', [Symbol('key')]: 1 }
23
console.log(obj) // { [Symbol(key)]: 'Hello', [Symbol(key)]: 1 }
24
console.log(obj[k1]) // Hello
25
console.log(obj[Symbol('key')]) // undefined