[JavaScript] 자료형(Data type)

SUYA·2025년 6월 30일

📒 JavaScript

목록 보기
2/14
post-thumbnail

✅ 자료형(Data type)이란?

프로그래밍 언어로 조작 할 수 있는 값의 유형.

자바스크립트에는 총 8개의 자료형이 존재한다.


✅ 기본 자료형(Primitive Type)

원시 타입은 값이 생성된 후에 그 값을 변경 할 수 없다.

📄숫자형(Number)

정수, 실수를 따로 구분하지 않고 모든 수를 실수 하나로 표현한다.

let num = 123;

📄문자열(String)

문자열을 표현할 때는 따옴표를 사용한다. '', "", ``

let str = 'apple'
let str2 = "orange"
let result = `과일 ${str}${str2}`

📄불린형(Boolean)

true , false 값으로만 나타내는 자료형
자바스크립트에서는 빈 문자열, 0, null, undefined, NaN 등의 값들은 false로 간주하게 된다.

console.log(2>1); // true
console.log(2<1); // false

📄Undefined

값을 할당하지 않은 변수는 undefined 값을 가진다.
타입이 정해지지 않은 것. 즉, 변수 선언은 했지만 값을 할당하지 않은 상태

let name;
console.log(name); // undefined

📄Null

null 하나의 값만 가질 수 있다.
존재하지 않는 값, 비어있는 값, 알수 없는 값을 의미한다.
* 의도적으로 값이 없음을 명시하기 위해 할당하는 값

let name = null;
console.log(name); // null
console.log(typeof name); // object

📄Symbol

ES6 이후 새롭게 추가된 원시 타입
Symbol은 이름의 충돌 위험이 없는 고유한 값을 만들기 위해 사용하는 자료형.
객체의 숨겨진 속성 키 를 만들 때 사용한다.

const id1 = Symbol("id");
const id2 = Symbol("id");

console.log(id1 === id2); // false

📄BigInt

아주 큰 정수를 표현하기 위한 자료형
BigInt를 쓰면 훨씬 큰 정수도 정확하게 표현할 수 있다.

// 뒤에 n을 붙이면 BigInt 자료형으로 인식
const bigNumber = 123456789012345678901234567890n;
console.log(bigNumber); // 123456789012345678901234567890n



✅ 참조 자료형(Reference Types)

원시 타입을 제외한 거의 모든 것(객체, 배열, 함수 등)을 참조 타입으로 볼 수 있다.
참조 타입은 프로퍼티를 추가, 변경, 삭제가 가능하다는 특징이 있다.
기본 자료형: 값 자체를 저장
참조 자료형: 값이 있는 주소를 저장

📄객체(Object)

객체는 속성과 메소드를 가질 수 있다.

객체 구문

// e.g.
let user = new Object();
let user = {};
let user = {
	name : "미지",
  	age: 30,
  	...
}

let obj1 = { name: "미지" };
let obj2 = obj1;

obj2.name = "호수";

console.log(obj1.name); // "호수"



🌠 typeof 연산자

위의 자료형을 확인할 수 있는 연산자.
변수나 값 앞에 typeof를 붙이면 그 값의 타입을 문자열(String)로 알려준다.

console.log(typeof 123);       // "number"
console.log(typeof "hello");   // "string"
console.log(typeof true);      // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object"
console.log(typeof {});        // "object"
console.log(typeof []);        // "object"
console.log(typeof function(){}); // "function"

연산자 우선순위 | MDN

🌠 형 변환

자동 형 변환

  1. 산술연산자
    + 연산자는 숫자보다 문자열이 우선시 되기 때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산된다.
number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number
50 + 50; //100
100 + “점”; //”100점”100+ “점”; //”100점”10+ false; //”100"
99 + true; //100

//다른 연산자(-,*,/,%)
string * number // number
string * string // number
number * number // number
string * boolean //number
number * boolean //number2* false; //0
2 * true; //2
  1. 동치비교
null == undefined // true 0 == 00== 0 // true 0 == 0
0 == false // true 0 == 00== false // true 0 == 0

명시적 형 변환

직접 자료형으로 바꾸는 경우

1. 숫자로 변환

Number("123"); // 123
Number(true); // 1
Number(false); // 0
Number("hello"); // NaN
Number(2*2); //4

1-1. parseInt()
parseInt()는 정수형의 숫자로 변환한다.

parseInt(27) //27
parseInt(0033); //27
parseInt(0x1b); //27
parseInt(2); //2
parseInt(2ㅎ”); //2
parseInt(“ ㅎ2); //NaN

🌠 parseInt()는 문자열로 된 부분에서 숫자(정수)만 뽑아서 변환해주는것이 특징이고, Number()은 문자열 전체가 숫자일때 소수점까지 숫자타입으로 가져올 수 있다.

2. 문자열로 변환

String(123); // "123"
String(true); // "true"
String(null); // "null"
123 + ""; // "123"

2-1. toFixed()
toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어오며 '0'으로 길이를 맞춘 문자열을 반환한다.

var trans = 123.456789;
var roundOff = 99.987654;
trans.toFixed(); //”123"
trans.toFixed(0); //”123"
trans.toFixed(2); //”123.46"
trans.toFixed(8); //”123.45678900"
roundOff.toFixed(2); //”99.99"
roundOff.toFixed(0); //”100"

3. 불린으로 변환

Boolean(100); //true
Boolean(1); //true
Boolean(true); //true
Boolean(Object); //true
Boolean([]); //true
Boolean(0); //false
Boolean(NaN); //false
Boolean(null); //false
Boolean(undefined); //false
Boolean( ); //false

const numb1 = 0;
Boolean(numb1); // false
!!numb1; // false
!numb1; // true


참고자료

자바스크립트 기본 | 자료형

profile
기술 블로그

0개의 댓글