[JavaScript] 자바스크립트 기초 문법: 자료형

[JavaScript] 자바스크립트 기초 문법 : 변수와 상수

우리는 지난 포스팅에서 자바스크립트의 변수와 상수에 대해 알아보았다. 

이러한 변수와 상수가 어떤 자료형에 속하는 지, 어떤 자료형으로 선언하고 싶은지에 대해 알아보기 위해 자료형에 대해 자세히 알아보겠다!

 

자바스크립트 자료형(타입) 

자바스크립트에는 총 8가지 자료형이 있고  그 중 7가지가 원시형, 나머지 객체형이 있다 .

원시형	Number 타입, String 타입, BigInt타입, Boolean 타입, Null 타입, Undefined 타입, Symbol 타입
객체형	객체형 (속성의 컬렉션)

 

원시형 (Primitive)

객체를 제외한 모든 타입은 변경할 수 없는 값을 정의한다 ! 이런 일련의 타입을 '원시 값'이라고 부른다 

원시형은 single item이라고도 표현된다. 객체도 아니면서 메서드도 가지지 않는 값인데 .. 

조금 더 쉽게 표현해보자면 '하나'의 정보(데이터)를 가지고 있다. 객체나 메서드에서는 여러개의 값이 들어가고 그 안에서 정의되는 경우가 많다. 하지만 이 원시 자료형은 단 하나의 데이터를 담을 수 있는 작은 상자라고 볼 수 있다! 

 

숫자형 (number type)

: 숫자형은 정수 및 부동소수점 숫자를 나타낸다 ! 

숫자형은 연산(*, / , +, - )을 할 수 있으며 

special numeric values를 가진다는 특징이 있다. 

const number = 23;
const height = 200;
console.log(`value: ${number}, type : ${typeof number}`);  //value: 23, type : number
console.log(`value: ${height}, type : ${typeof height}`);  //value: 200, type : number

** special numeric values → Infinity, -Infinity, NaN (not a number) 

***  Infinity : 무한대 ∞ !

***  - Infinity : 음의 무한대 ∞ ! 

*** NaN : 부정확하거나 정의되지 않은 수학 연산(ex. string을 num로 나누는 등 .. )을 사용하면 계산중에 에러가 발생하며 이때 NaN이 반환

연산에서는 그 값이 항상 valuable한 값인지 확인을 해야한다 → 이러한 special numeric values가 중요함 

const infinity = 1/0 ;            //Infinity
const negativeInfinity = -1/0;    //-Infinity
const nAn = 'not a number'/2;     // NaN

number에서 설명한 두 코드를 출력한 콘솔창을 나타낸 것이다.

 

BigInt 

: 아주 큰 숫자를 나타내는 자료형 

사실 BigInt는 JS에 새로 추가된 지 얼마 되지 않은 자료형이다. IE에서는 지원하지 않는다는 호환성 이슈또한 존재한다. 그래서 포스팅에서는 간략하게 설명하고 넘어가보도록 하겠다. 

// 숫자 끝에 n이 붙으면 BigINt
const bigInt = 10000000000000000000000000000000n;
console.log(`value:${bigInt}, type:${typeof bigInt}`);

혹시 BigInt에 대해 자세히 아시고 싶으시다면 여기를 클릭하세요 ~ ! 

 

 

문자형(String)

: 빈 문자열이나 글자들로 이루어진 문자열을 나타낼 때 사용한다 ! JS에서는 단일 문자를 나타내는(문자 자료형) 별도의 자료형은 없음 

const char = 'c';
const J = 'J';
const greeting = 'hello' + J;
console.log(`value : ${char}, type : ${typeof char}`);  
//value : c, type: string 
const helloJ = `hi ${J}! `; 
console.log(`value: ${helloJ}, type: ${typeof helloJ}`);
//value : hi J!, type : string

 

불린형(Boolean)

: 참(true), 거짓(false)를 나타낼 때 사용함  

 false : 0, null, nudefined, NaN
 true : false를 제외한 다른 값 

const isTrue = 1<3;
const isFalse = 1>3;
console.log(isTrue); // True
console.log(isFalse); // False

'null' 값

: null 값만을 위한 독립 자료형 

자바스크립트에서의 null → 존재하지 않는(nothing) 값, 비어있는(empty)값, 알 수 없는(unknown)값 

let NULL = null;
console.log(`value: ${null}, type: ${typeof NULL}`);

 

'undefined' 값 

: undefined 값만을 위한 독립 자료형 

변수는 선언했지만 값이 할당되지 않은 상태 → undefined라고 정의해도 undefined이고 아무런 값을 할당해주지 않아도 undefined ! 

let n;
console.log(`value: ${n}, typeof:${typeof n}`);

 

심볼(symbol)

: 객체의 고유 식별자(id)를 만들 때 사용된다. 클래스나 객체 형식의 내부에서만 접근할 수 있도록 전용(private)객체 속성의 키(key)로 사용된다 ! 

const symbol1 = Symbol('id')
const symbol2 = Symbol('id')
console.log(symbol1===symbol2);
const gsymbol1 = Symbol.for('id');
const gsymbol2 = Symbol.for('id');
console.log(gsymbol1 === gsymbol2);
console.log(`value: ${symbol1.description}, typeof: ${typeof symbol1}`)

객체형

객체형(object)

: 복잡한 데이터 구조를 표현할 때 사용 , 여러가지 변수, 메서드(함수)를 담고있는 데이터 구조 

const person = {name : 'eunju', age : 29};
person.age = 21;
console.log(person);

const cat = {name: 'jaekyong', age : 7};
cat.name = 'pompom';
console.log(cat)

 

---

 

[참고 및 출처]

https://it-eldorado.tistory.com/149

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics