자바스크립트의 데이터 타입에는 다음과 같은 7가지 타입이 존재합니다.
- Number
- String
- boolean
- null
- undefined
- Symbol
- Object
이번 글에서는 7가지 타입에 대해 가볍게 알아보겠습니다.
Number
let num = 1
console.log(typeof num) // number
let pInf = 10/0 // 양의 무한대
console.log(pInf) // Infinity
let nInf = 10 / -0 // 음의 무한대
console.log(nInf); // -Infinity
Number 타입은 흔히 알고 있는 그 숫자 타입과 동일합니다.
각종 수에 대한 연산이 가능하며 부등호를 이용하여 크고 작음을 비교할 수 있습니다.
String
let str = "abcdef"
console.log(typeof str) // string
// .length : 문자열의 길이를 리턴
console.log(str.length) // 6
// 배열 선언 없이 인덱스 사용가능
console.log(str[2]) // c
String는 문자 데이터를 표현하는데 사용하는 타입입니다.
length 메소드로 문자열의 길이를 리턴 받을 수 있으며
인덱스를 사용하여 0부터 시작하는 문자열 중 문자의 위치를 리턴 받을 수 있습니다.
Boolean
let t = true
let f = false
t = 3 > 1 // true
Boolean은 참/거짓을 나타내는 논리형 타입입니다.
위의 코드처럼 비교 연산자를 사용해 boolean 값을 할당하는 것도 가능합니다.
조건문에서 기본적으로 true/false를 리턴하는 요소들은 아래와 같습니다.
null
let n = null
console.log(typeof n) // object
console.log(typeof n === null) // false
console.log(n === null) // true
null은 의도적으로 변수에 값이 없음을 명시할 때 사용됩니다.
간단한 타입이지만 2가지 주의하실 점이 존재합니다.
1. JavaScript는 대소문자를 구별하므로 null은 Null,NULL 등과 다릅니다.
2. 자바스크립트 설계적 오류로 인해 typeof 연산자 사용시 object를 리턴합니다.
그렇기 때문에 타입을 비교할 때 typeof를 생략하고 일치 연산자(===)를 사용해야 합니다.
undefined
let a // 할당되지 않은 변수
console.log(a) // undefined
console.log(typeof a) //undefined
undefined는 단어의 의미대로 정의되지 않은
즉, 변수에 값이 할당되지 않았는데 그 변수가 사용되었을 때 대신 상태를 나타내줍니다.
Symbol
const name = Symbol('LasBe')
console.log(name.description) // "LasBe"
console.log(name.toString()) // "Symbol(LasBe)"
심볼은 변경 불가능한 원시 타입의 값이며, 다른 값과 중복되지 않는 고유한 값입니다.
심볼 값은 충돌 위험이 없는 오브젝트의 유일한 프로퍼티 키를 만들기 위해서 사용할 수 있습니다.
하위호환성을 유지하면서 표준을 확장하거나, 이름의 충돌 위험이 없는 유일한 상수값을 만드는 데 사용할 수 있습니다.
Object
const LasBe = {
name : "LasBe",
age : 26,
camera : "lx100m2",
// 객체의 메소드 정의
hi : function(){
console.log("i am lasbe")
}
}
LasBe.hi // i am lasbe
객체(Object)는 프로퍼티와 메소드를 포함할 수 있는 타입입니다.
프로퍼티는 키 : 값 으로 구분되며, 키는 중복될 수 없습니다.
const로 선언했어도 객체를 통째로 재할당하는 것이 아니라면 프로퍼티는 수정할 수 있습니다.
객체의 프로퍼티에 대한 접근 방법은 다음과 같습니다.
객체이름.프로퍼티이름 or 객체 이름["프로퍼티 이름"]
'Web > JS & TS' 카테고리의 다른 글
[Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) (0) | 2023.01.10 |
---|---|
[Javascript/자바스크립트] innerHTML, innerText, textContent의 차이 (0) | 2022.02.07 |
[Javascript/자바스크립트] CSS 선택자를 사용하는 querySelector, querySelectorAll를 통해 요소 선택하기 (0) | 2022.02.04 |
[Javascript/자바스크립트] 나머지 매개변수(rest parameter), 전개 연산자(Spread syntax) (0) | 2022.02.03 |
[Javascript] 변수 선언 var, let, const 차이점과 호이스팅 (0) | 2022.01.29 |
댓글