개발 공부 일지/JavaScript

[JS] 자바스크립트의 자료형

dev-hpk 2024. 9. 12. 19:10

안녕하세요! 이번 포스팅에서는 자바스크립트(JavaScript)에서 다루는 자료형에 대해 다뤄 볼게요. 자바스크립트는 동적이고 느슨한 타입의 언어라서 변수에 어떤 값이 들어오느냐에 따라 자료형이 결정됩니다. 개발할 때 엄청 유연하게 쓸 수 있다는 뜻이죠! 하지만 너무 자유로워서 가끔은 예상치 못한 결과가 나올 수도 있어요.

 

 

 

커버 이미지 - 자바스크립트 자료형

 

 

자바스크립트(JavaScript)의 자료형

자바스크립트의 자료형

 

1. 원시 자료형(Primitive Types)

2. 객체 자료형(Object Types)

3. typeof 연산자

4. 마무리

 

 

원시 자료형 (Primitive Types)

  1. Number
    자바스크립트의 Number는 정수와 실수를 모두 포함합니다. intfloat으로 나누지 않고 모두 Number로 처리합니다. (-253-1 ~ 253-1 범위의 값만 오류 없이 안전하게 표현할 수 있습니다.)
    let a = 10; // 정수
    let b = 10.5 // 실수
    let notNumber = NaN // NaN(Not a Number) : 숫자가 아닌 값 
    let infinity = Infinity
  2. BigInt
    Number 타입으로 안전하게 처리할 수 없는 범위의 큰 수를 저장하고 연산할 수 있습니다.
    let bigIntVal1 = 9007199254740991n;
    let bigIntVal2 = BigInt(9007199254740991);
  3. String
    텍스트 형식의 데이터는 모두 String 타입입니다. 작은따옴표('), 큰따옴표("), 백틱(`)을 사용해서 표현할 수 있습니다.
    let str1 = '작은 따옴표';
    let str2 = "큰 따옴표";
    let str3 = `백틱`;
  4. Boolean
    참(true) 또는 거짓(false)를 나타내는 자료형입니다.
    let isTrue = true;
    let isFalse = false;
  5. Undefined
    변수를 선언만하고 값을 할당하지 않았을 undefined 상태가 됩니다. 의도적으로 undefined를 할당하는 것은 권장하지 않습니다.
    let item;
    console.log(item) // undefined 출력
  6. Null
    null은 값이 없음을 명시적으로 나타낼 때 사용합니다. undefined와 비슷하지만, 의도적으로 "값없음"을 나타냅니다. 명시적으로 값이 없음을 나타내고 싶다면 undefined가 아닌 null을 사용하면 됩니다.
    let empty = null
  7. Symbol
    Symbol은 이름의 충돌 위험이 없는 고유한 값을 만들기 위해 사용합니다. 주로 객체의 고유한 키를 만들기 위해 사용합니다. Symbol은 다른 어떤 값과 비교해도 같을 수 없는 고유한 값입니다.
    const symbolA = Symbol('a');
    const symbolA2 = Symbol('a');
    
    symbolA === 'a' // false
    symbolA === null // false
    symbolA === undefined // false
    symbolA === symbolA2 // false


객체 자료형 (Object Types)

  1. Object
    Object키-값 쌍 형태로 데이터를 저장하는 자료형입니다..
    const user = {
    	name: 'A', // key: name & value: 'A'
    	age: 20 // key: age & value: 20
    }
  2. Array
    Array는 여러 값을 순서대로 저장할 수 있는 리스트 형식의 자료형입니다.
    let arr = [1, 'a', true]
  3. Function
    Function도 자바스크립트의 객체입니다. 함수를 변수에 담거나 다른 함수의 인수로 넘길 수 있습니다.
    function add(x, y) {
    	return x + y;
    }


typeof 연산자

typeof 연산자는 우리가 사용하는 값의 데이터 타입을 확인하고 싶을 때 사용합니다.

typeof "타입 확인" // typeof 연산자 뒤에 공백을 한칸 두고 사용 가능
typeof("타입 확인") // typeof()에 확인하려는 값을 입력해 사용 가능

 

typeof 연산자에는 한 가지 주의할 점이 있습니다. null이 object 타입을 리턴한다는 것입니다.

typeof null // object


https://developer.mozilla.org/ko/docs/Glossary/Null

 

Null - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

컴퓨터 과학에서, null 값은 일반적으로 존재하지 않거나 유효하지 않은 object 또는 주소를 의도적으로 가리키는 참조를 나타냅니다. null 참조의 의미는 언어의 구현에 따라 다양합니다.

developer.mozilla.org

 

 

 

 

 

자바스크립트에서 다루는 자료형은 크게 기본 자료형객체 자료형으로 나뉩니다. 동적 타입 언어라는 특성 덕분에 자유롭게 변수를 사용할 수 있지만, 때로는 타입 오류를 조심해야 합니다.

이번 포스팅이 자바스크립트 자료형에 대해 좀 더 친숙하게 이해하는 데 도움이 되었길 바라요! 😊

 

'개발 공부 일지 > JavaScript' 카테고리의 다른 글

[JS] 자바스크립트 함수 - 스코프  (3) 2024.09.13
[JS] 자바스크립트 함수  (1) 2024.09.12
[JS] Input 이벤트  (9) 2024.09.11
[JS] 키보드 이벤트  (1) 2024.09.11
[JS] 마우스 이벤트  (1) 2024.09.11