자바스크립트 typeof 연산자로 변수타입 확인하기

문도연·2022년 4월 30일

자바스크립트

😈 자바스크립트 typeof 연산자

typeof 연산자는 변수의 데이터 타입을 반환하는 연산자이다.

❗️용법

typeof variable

typeof (variable)

😈 타입

자바스크립트에는 타입(Type)이라는 개념이 있다.
타입이란 변수에 할당할 수 있는 데이터 형태를 말한다. ex)숫자, 문자
즉, 변수에는 숫자나 문자 등 다양한 형태의 데이터 타입을 담을 수 있다.
데이터 타입에 따라 할 수 있는 일이 다르다.
즉, 타입마다 다른 속성과 메서드가 있다.

😈 자바스크립트의 데이터 타입

원시 타입 (Primitive Type)

Number
String
Boolean
Undefined
Null
Symbol(ES6에 추가, 객체 속성을 만드는 데이터 타입)

참조타입(Object/Reference Type)

객체(Object)
배열(Array)
함수(Fuction)

😈 원시타입(Primitive Type)

원시 타입이 할당될 때는 변수에 값(value) 자체가 담긴다.(메모리 참조가 아닌 값의 복사)

메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관하므로 불변적이다.

Number

모든 숫자를 실수로 처리

let num_1 = 99;
let num_2 = -99;
console.log(typeof num_1); //Number
console.log(typeof num_2); //Number

String

UTF-16으로 구성된 문자열

작은따옴표(''), 큰따옴표(""), 템플릿 리터럴(``)로 문자열을 할당
템플릿 리터럴은 줄바꿈, 공백 모두 적용됨
\t :탭(수평), \n:줄바꿈 문자 (: 이스케이프 시퀀스_프로그래밍 언어 특성상 표현할 수 없는 기능, 문자를 표현)

let str_1 = 'Hi'; //Hi
let str_2 = "Hi"; //Hi
let str_3 = `Hi, Hello 안녕?		내가 		누군지




			아니? `; // 'Hi, Hello 안녕?\t\t내가 \t\t누군지\n\n\n\n\n\t\t\t아니? '
console.log(typeof str_1); //string
console.log(typeof str_2); //string
console.log(typeof str_3); //string

Boolean(불리언)

true, false

let bool_1 = true; 
let bool_2 = 2>3;
console.log(typeof bool_1); //boolean
console.log(typeof bool_2); //boolean

Undefined

변수를 선언만 하고 값을 할당하지 않았을 때 들어가는 값

값도 타입도 undefined

let maBoyFriend;
console.log(yrBoyFriend); 		 //undefined
console.log(typeof yrBoyFriend); //undefined

Null

의도적으로 '값이 없음'을 명시하기 위해 할당하는 값

Null의 값 체크를 위해서는 일치연산자(===)를 사용
typeof 연산결과는 초기 자바스크립트의 버그로 수정하면 파장이 클까봐 그냥 두고있다 함.

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

Symbol

변경 불가능한 유일한 값을 생성할 때 사용, 값 자체의 확인이 불가하여 외부로 노출되지 않음.

let sym_1 = Symbol('key');
console.log(typeof sym_1); //Symbol

let sym_1 = Symbol('key');
let sym_2 = Symbol('key');
console.log(sym_1 === sym_2); // flase

let sym_3 = Symbol('hi');
console.log(sym_3); // Symbol(hi)
sym.description; // 'hi'
	sym.description = 'hi hi hi';	
console.log(sym_3);	// Symbol(hi)

5 + 'abc' //'5abc'
let sym_4 = Symbol('hi')
sym_4 + 'abc' // Uncaught TypeError: Cannot convert a Symbol value to a string

특1. 항상 유일하다 -> 고유한 식별자를 가지게 된다.
특2. 읽기전용(description)으로 새로운 값을 할당해도 변하지 않는다.
특3. String 값으로 자동 변환되지 않는다.
*Symbol 값은 Symbol 함수를 호출하여 생성한다.

😈 참조타입(Refenece Type)

원시타입이 아닌 모든 것

참조타입은 원시타입 데이터의 집합이다.

참조 타입은 고정된 크기의 보관함이 아니다.

참조 타입을 변수에 할당할 때는 값이 아닌 데이터의 주소를 저장한다.

객체(Object) : {}

let obj = {};
console.log(typeof obj); //object

배열(Array) : []

배열은 'object'의 특수한 한 형태이기 때문에 typeof만으로는 객체가 배열인지 확인할 수 없음
객체가 배열인지 확인하기 위해서는 'isArray()' 함수를 사용해야 함

let arr = [1,2,3,4];
console.log(typeof arr); //object

console.log(Array.isArray(arr)); //true
console.log(Array.isArray({}));  //false

함수(Fuction) : function(){}

let func = function(){};
console.log(typeof func); //function

😈 참고

문도연

중요한건 꺾이지 않는 마음이 맞는 것 같습니다

이전 포스트

4.[JavaScript] 기초제어문_반복문

다음 포스트