자바스크립트 데이터 - 자료형

 

안녕하세요 찐망고입니다.

오늘은 자바스크립트에 데이터 형식을 좀 알아볼까요?

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다.

8가지 기본 자료형이 있고, 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다.

let memo = "hello";
memo = 0123456789;

 

변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는데 이를 '동적 타입(dynamically typed)' 언어라고 부릅니다.

 

 

1. 문자열

문자는 영문자, 숫자, 마침표나 공백 등을 반드시 따옴표 안에 들어가야 하고,

큰따옴표나 작은따옴표든 상관없습니다.

let mood = "happy"; //큰따옴표
mood = 'happy'; //작은따옴표
mood = `happy`; //역따옴표(백틱, backtick)

 

큰따옴표와 작은따옴표는 기본적인 따옴표로 둘의 차이는 크지 않고,

백틱 같은 경우는 변수나 표현식을 감싼 후 ${...} 안에 넣어주면,

원하는 변수나 표현식을 문자열 중간에 쉽게 넣을 수 있습니다.

let age = '50';

// 변수를 문자열 중간에 삽입
console.log(`그의 나이가 벌써, ${age}!!`) // 그의 나이가 벌써, 50!!

// 표현식을 문자열 중간에 삽입
console.log(`transform: translateX(${30 + 10}px)`) //transform: translateX(50px)

 

 

아 자연스럽게 여러 줄의 문자열도 만들 수 있어요

// 문자열을 여러줄로 작업 할 수 있음
let foodList = `
소불고기
김치볶음밥
닭갈비
`;
alert(foodList);

 

작은따옴표 안에 작은따옴표 큰따옴표 안에 큰따옴표를 사용할 수가 없습니다.

let speek1 = "don't ask";
// let speek2 = 'don't ask';  //error

// 백틱 사용
let speek3 = `don't ask`;

 

역슬래시를 사용하여 작업할 수 있는데 이를 이스케이프(escaping)라 합니다.

let speek1 = "don't ask";
let speek2 = 'don \'t ask';

 

큰따옴표나 작은따옴표를 이용해서도 여러 줄로 만들 수 있습니다.

let foodList = "소불고기\n 김치볶음밥 \n 닭갈비";
alert(foodList);

 

 

2. 숫자

변수 값에 숫자를 사용할 수 있고 숫자 종류에 대해서는 어떤 제약 사항도 없습니다.

자바스크립트에서는 소수를 포함해 어떤 숫자도 자유롭게 표시할 수 있는데

이를 실수형(floating-point numbers)이라고 합니다.

음수도 사용 가능하고, 음수이면서 소수인 숫자도 모두 표현이 가능합니다

 

이외에도 Infinity, - Infinity,  NaN 같은 특수 숫자값이 포함됩니다.

숫자형으로 분류되지만, 일반적인 숫자와는 조금 다른 역할을 수행하는데

수학적으로 무한대를 의미하는 Infinity는 다른 어떤 수보다 가장 큰 수를 뜻하고,

Infinity로 나누면 무슨 값이든 0이 됩니다.

어느 숫자든 0으로 나누면 무한대를 얻을 수 있습니다.

 

NaN이란 "Not a number"라는 뜻으로,

산술 연산의 결과가 유효하지 않은 값 또는 숫자가 너무 커서 표현할 수 없는 값을 때 NaN으로 표현됩니다.

연산과정 어디에선가 NaN이 반환되었다면, 이는 모든 결과에 영향을 미칩니다.

let million = 100000000;
million = 1e8; // 1억, 1과 10의8제곱

alert(6.3e8) // 6억3천

 

0을 많이 사용하는 경우 잘못입력하기 쉽기 때문에 숫자 옆에 'e'를 붙여 사용할 수 있습니다.

오른쪽 수만큼의 10의 거듭제곱하는 효과가 있습니다.

1e4 === 1 * 10000
1.24e6 === 1.24 * 1000000

let ms = 0.000001;
ms = 1e-6; //1에서 왼쪽으로 6번 소수점 이동

 

자바스크립트에서 지원하는 진법은 16진수, 2진수, 8진수 3개입니다.

 

 

3. 불린 값

불린 형(논리타입) 값은 참(true)과 거짓(false)으로 나뉘는데,

true는 긍정, false는 부정을 의미합니다.

여기서 중요한 것은 항상 두 값 중 하나라는 것입니다.

 

 

4. null과 undefined 

null과 undefined를 보이는 그대로 해석하면 '빈 값, 없는 값'을 의미하는 것처럼 보이지만,

사실 큰 차이점이 있습니다.

 

null은 비어있는, 존재하지 않는 값을 의미합니다.

즉, null은 값의 부재를 의미하며, 원시자료형 null로 분류됩니다.

null값은 오로지 null값만 포함하는 별도의 자료형을 만듭니다.

 

undefined는 변수가 정의되었지만, 값이 할당되지 않은 상태를 나타냅니다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

값의 할당과 상관없이 해당 변수엔 undefined가 자동으로 할당 되고, 

값을 할당한 경우엔 해당값으로 재할당합니다.

 

변수가 비어있거나 알 수 없는 상태라는 걸 나타내려면 null을 사용하세요

 

 

 

 

5. 객체와 심벌

객체형은 특수한 자료형입니다.

객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시자료형이라 부릅니다.

심벌형은 객체의 고유한 식별자를 만들 때 사용합니다.

따로 포스팅하겠습니다.

 

 

6. typeof연산자

typeof 연산자는 인수의 자료형을 반환하는데 자료형에 따라

처리방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다.

 

typeof연산자는 두 가지 형태의 문법을 지원합니다.

 - 연산자: typeof x

 - 함수: typeof(x)

괄호가 있든 없든 결과는 동일합니다.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"