[JavaScript] 03. 데이터 타입_원시타입

출처 : https://poiemaweb.com/js-data-type-variable

🟡 1. 데이터 타입 (Data Type)

- 데이터 타입이랑 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말합니다. 데이터 타입이 있는 이유는 데이터(변수)가 메모리에 저장이 될 때 메모리 공간을 얼마큼 확보를 해야 하는 지를 판단하기 위해서입니다. 그러하여 한정된 메모리 공간을 효율적으로 사용할 수 있게 됩니다. 쉽게 예시를 들면 택배 창고에 택배들이 들어오는데, 창고의 공간은 한정되어 있기 때문에 많은 택배를 넣기 위해서는 효율적으로 택배를 쌓아야 합니다. 그리고 나중에 찾기도 쉬워야 합니다. 그래서 랙이라는 아주 큰 서랍장을 만들어서 크기별, 종류별, 지역별 등으로 나눕니다. 저런 식으로 차곡차곡 쌓으면 많은 양의 택배를 보관할 수 있고, 찾기도 쉽게 되겠죠. 결국 데이터를 많이 잘 보관하기 위해서 데이터 타입을 사용합니다.

랙

자바스크립트에서 데이터 타입은 크게 2가지 타입으로 나뉘는데 원시 타입(primitive type)과 객체 타입(object type)으로 구분 지어집니다.

 

 

🟡 1.1 원시 타입

 - 원시 타입은 말 그대로 원시적인 타입을 말하는데, 원시 타입의 값은 변경 불가능(immutable)합니다.

 처음에 apple이라는 변수에 '사과'라는 값을 저장을 했습니다. 그때 메모리에 '사과'가 저장이 되고 apple의 값은 사과가 됩니다. 그 후에 apple에 '복숭아'라는 값을 넣게 되면, 메모리에 있던 '사과'가 '복숭아'로 변하는 것이 아니고 새롭게 저장이 됩니다. 그리고 apple은 복숭아를 가리키게 됩니다. 즉, 원시 타입의 값은 변경이 불가능하고, 값을 직접적으로 가리키게 됩니다. (값을 직접적으로 가리킨다는 말은 다음장에서 객체 타입 설명하면서 다시 설명할게요~ 😊)

- 원시 타입의 종류에는 숫자 타입(number), 문자열 타입(string), null, boolean, undefined, symbol이 있습니다.

 

🟣 1.1-1 숫자 타입(number)

  - 기존 프로그래밍 언어들은 숫자 타입을 int, long, float, double 등으로 세부적으로 표기했지만, 자바스크립트에서는 number타입으로 표현합니다. 

let int = 10; // 정수
let float = 3.14; // 실수
let negative = -17; // 음의 정수
let binary = 0b01000001; // 2진수
let octal = 0o101; // 8진수
let hex = 0x41; // 16진수

 - 위 예시를 보면 2진수, 8진수, 16진수를 저장한 변수가 있는데 자바스크립트에선 10진수만 이용을 하고 있어서 다른 진수들의 값을 10진수로 변환하여 저장하게 됩니다.

console.log(`2진수 : ${binary}`); // 65
console.log(`8진수 : ${octal}`);  // 65
console.log(`16진수 : ${hex}`);    // 65

2진수, 8진수, 16진수를 저장한 변수의 값 -> 10진수로 자동 저장

 

- number에서 특별한 3가지 값이 있습니다. 

let a = 1 / 0;
console.log(a); // Infinity - 양의 무한대

let b = 1 / -0;
console.log(b); // -Infinity - 음의 무한대

let c = 1 * '문자';
console.log(c); // NaN - not a number

특별한 숫자 표현

 

 

🟣 1.1-2 문자 타입 (string)

- 텍스트 데이터를 나타낼 때 사용하고, 작은따옴표 '' 또는 큰 따옴표 "" 안에 텍스트를 넣어서 생성합니다. 일반적으로는 작은따옴표를 사용합니다. (문자열 표시는 회사마다 차이가 있는 거 같아요.)

let str1 = '문자열 입니다.'; // 작은 따옴표
console.log(typeof(str1)); //string

let str2 = "문자열2 입니다."; // 큰 따옴표
console.log(typeof(str2)); //string

let str3 = `문자열3 입니다.`; // 백틱
console.log(typeof(str3)); //string

 

 

🟣 1.1-3 boolean

- boolean 타입이 값은 true(참), false(거짓) 뿐입니다.

let a = true;
let b = false;
let c = 10 > 2; // true;
let d = 1 == 2; // false;


console.log(typeof(a)); // boolean
console.log(typeof(b)); // boolean
console.log(typeof(c)); // boolean
console.log(typeof(d)); // boolean

 - 제어문에서 null, undefined, 0 은 false로 간주합니다.

let bool = '';
if(bool){
	console.log(1);
}

let bool2; //undefined
if(bool2){
	console.log(1);
}

let bool3 = 0; 
if(bool3){
	console.log(1);
}

// 아무것도 출력되지 않음

 

 

🟣 1.1-4 undefined

- undefined 타입의 값은 undefined 하나입니다. 변수를 선언하고 값을 할당을 해주지 않으면, undefined라는 값이 할당이 됩니다. 

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

 - 만약 개발자가 어떠한 변수에 '값이 없다' 혹은 '비어있다'라고 표현을 하고 싶으면 undefined를 할당하는 것이 아닌 null 값을 할당해주면 됩니다. 그 이유는 undefined는 자바스크립트 엔진에서 자동적으로 할당을 하는 것이고, 이를 개발자가 임의로 undefined를 할당하게 된다면 개발하는 부분에서 혼란을 초래할 수 있습니다.

 

 

🟣 1.1-5 null

- null 타입의 값은 null로 유일합니다. 자바스크립트에서는 대소문자를 구별하므로 null은 Null, NULL 등과 다르다는 것을 유의해야 합니다.

let n = 'data';
n = null;
console.log(n) // null

- null은 개발자가 변수에 임의로 값이 없다는 것을 표시하기 위해 사용하는 타입입니다. 결국 변수에 null 값을 할당한다는 것은 변수가 아무 값도 참조하고 있다는 뜻이 되고, 만약 어떠한 변수도 그 값을 참조하고 있지 않다면 가비지 컬렉션이라는 청소부가 메모리에서 그 값을 제거합니다.

 

- 함수를 실행해서 유효한 값이 없는 경우 null 값을 반환합니다.

let element = document.getElementById('element');
// document.getElementById는 html에서 id를 기준으로 요소를 찾아서 반환해주는 함수
// 요소가 없다면 null을 반환
console.log(element); // null

 

- null 값을 통해서 자바스크립트의 오류를 찾을 수 있는데, typeof 함수에 null을 넣으면 null이 아닌 object가 나옵니다. 그래서 null 타입인 것을 확인하고 싶으면 ===(일치 연산자)를 이용해서 확인해야 합니다.

console.log(typeof(null)) // object

let a = null;
console.log(null === a); // true

 

 

🟣 1.1-6 symbol

- symbol은 ES6에 새로 추가된 원시 타입입니다. 심볼은 유일한 식별자를 만들고 싶을 때 사용합니다. 다른 말로는 객체의 프로퍼티 키를 고유하게 설정을 하고 싶을 때 사용합니다. 
symbol 타입은 Symbol함수를 통해서 생성합니다.

- Symbol 함수의 전달 인자가 같더라도 생성되는 값은 같은 값이 아닙니다. (새로운 symbol이 생성되기 때문에)

let sym1 = Symbol();
let sym2 = Symbol('apple');
let sym3 = Symbol('banana');
let sym4 = Symbol('banana');

console.log(sym1) // Symbol()
console.log(sym2) // Symbol(apple)
console.log(sym3) // Symbol(banana)
console.log(sym4) // Symbol(banana)

console.log(sym3 === sym4) // false

 

 - symbol 타입을 쓰는 이유는 객체의 프로퍼티 키로 사용하기 위해서입니다. 

let obj = {
	a : 'banana',
    c : 'cherry'
};

let b = Symbol('apple');

obj[b] = 'apple2';

console.log(obj); // {a: 'banana', c: 'cherry', Symbol(apple): 'apple2'}
console.log(obj[b]) // 'apple2'

 

 

 

📝 정리

• 자바스크립트에서 데이터 타입은 원시 타입과 객체 타입으로 구분된다.
• 원시 타입에는 number, string, boolean, null, undefined, symbol 가 있다.
• number은 모든 숫자 (정수, 실수, 음의 정수, 2진수 등)를 표현할 때 사용된다.
• string은 모든 텍스트 데이터를 표현할 때 사용된다.
• boolean은 참, 거짓을 표현할 때 사용된다.
• null은 변수의 값이 없음을 표현할 때 사용된다.
• undefined는 변수가 선언은 되었지만, 값이 할당이 안됐음을 표현할 때 사용된다.
• symbol은 고유의 키를 표현하고 싶을 때 사용된다.

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~