[Javascript] 자료형

📌 참고 사이트

자료형 (javascript.info)

자료형

 

 

 

📋 자료형

➡️ 자바스크립트에서 변수에 할당되는 값은 항상 특정한 자료형(문자열, 숫자형 등)에 속한다.

➡️ 그러므로 자바스크립트에서 변수는 자료형에 관계없이 모든 데이터일 수 있다.

➡️ 자료의 타입(자료형)은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 '동적 언어' 라고 한다.

 

let message = "hello";     // message 변수 선언하며 문자열 "hello" 할당
message = 123456;     // message에 숫자 123456로 값 재할당
// 다른 자료형의 값을 할당했는데 오류 발생 X

 

 

 

📋 숫자형 (number type)

📍 숫자형의 특징

➡️ 숫자형은 정수 및 부동소수점 숫자 (floating point number)를 나타낸다.

➡️ 숫자와 관련된 연산에서는 곱셈(*), 나눗셈(/), 덧셈(+), 뺄셈(-) 등이 대표적이다.

➡️ 숫자형에는 일반적인 숫자 외에도 Infinity, -Infinity, NaN 같은 특수 숫자 값이 포함된다. 

→ Infinity : 그 어떤 숫자보다도 더 큰 특수 값인 무한대를 나타낸다. 어느 숫자든 0으로 나누면 무한대의 값이 나온다. Infinity는 직접 참조하는 것도 가능하다.

→ NaN : 계산 중 에러 발생을 나타내주는 값이다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 NaN이 반환된다.

➡️ JS에서는 이례적인 연산 (ex) 0으로 나누기, 문자열을 숫자로 취급하기) 이 가능하고, 불가한 수학 연산을 하더라도 위의 특수 숫자 값 덕분에 스크립트가 에러를 내뿜지 않고 NaN을 반환하며 연산이 종료되게 된다.

 

// number
let num = 123;     

// float
num = 12.345;     

// 어떤 수를 0으로 나누면 무한대
alert(1 / 0)     // Infinity

// 오류가 발생하는 연산 (문자열 / 숫자)
alert('숫자가 아님' / 2);     // NaN

 

* 부동소수점

아래 게시물을 참고하자.

고정 소수점 방식과 부동 소수점 방식 (tistory.com)

고정 소수점 방식과 부동 소수점 방식

 

📍 BigInt

내부 표현 방식 때문에 자바스크립트에서는 (2^53 - 1)(9007199254740991)보다 큰 값 혹은 -(2^53-1)보다 작은 정수는 일반적인 숫자형을 이용해 나타내는 것이 불가하다.

그러한 숫자들을 표현하기 위해 BigInt라는 자료형을 이용한다.

정수 리터럴 끝에 n을 붙이면 만들 수 있고, 이것은 길이에 상관없이 정수를 나타낼 수 있다.

 

// 정수 끝에 n을 붙여 BigInt 자료형 만들기
const bigInt = 1234567890123456789012345678901234567890n;

 

대부분의 상황에서는 일반적인 숫자형을 이용해 수를 나타낼 것이지만 암호 관련 작업에서 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때 등 이 BigInt를 사용한다. 

 

 

 

📋 문자형 (String)

📍 문자형의 특징

➡️ 문자열은 따옴표로 묶어 표현한다.

➡️ 큰따옴표 (" ")와 작은따옴표 (' ')는 기본적인 따옴표로 JS에서는 이 둘에 차이를 두지 않는다.

➡️ 역 따옴표(백틱, ` `)으로 변수나 표현식을 감싼 후 ${...} 안에 넣어주면 원하는 변수나 표현식을 문자열 중간에 넣을 수 있고, 결국 이들은 문자열의 일부가 된다. (큰 따옴표나 작은 따옴표로는 불가)

➡️ JS에서는 C나 JAVA 등에 존재하는 글자 하나를 저장할 때 쓰이는 자료형인 글자형(character, char)을 지원하지 않는다. 단지 문자형(string)만 있고, 글자가 한개든 여러개든 들어갈 수 있다.

 

// 일반적인 문자형 (큰따옴표 or 작은따옴표 사용)
let name = 'Lily';

// 변수를 문자열 중간에 삽입 (백틱과 ${} 이용)
alert(`Hello, ${name}!`);     // Hello, Lily!

// 표현식을 문자열 중간에 삽입
alert(`the result is ${1 + 2}`);     // the result is 3

 

 

 

📋 불린형 (Boolean)

📍 불리언형의 특징

➡️ true (참)와 false (거짓) 두 가지밖에 없는 자료형이다.

➡️ 그냥 단순히 true, false 값 저장용으로도 쓰이지만 비교 결과에 대해 참인지 거짓인지를 저장할 때에도 쓰인다.

 

// 불리언값을 변수에 저장
let t = true;
let f = false;

// 비교 결과를 저장하기
let isGrater = 4 > 1;     // 4 > 1은 참이므로 true값이 isGrater에 저장
alert(isGrater)     // true

 

 

 

📋 null 값

➡️ 위에서 소개한 어느 자료형에도 속하지 않고, null 자체가 자료형이다. (오로지 null 값만 포함하는 별도의 자료형을 만든다.)

➡️ 다른 언어에서는 null을 존재하지 않는 객체에 대한 참조나 널 포인터를 나타낼 때 사용하지만, JS에서는 존재하지 않는, 비어 있는, 알 수 없는 값을 나타내는 데 사용한다.

 

let age = null;     // 나이를 알 수 없거나 비어 있음을 알려준다.

 

 

 

📋 undefined 값

➡️ undefined 역시 자신만의 자료형을 형성한다.

➡️ 값이 아직 할당되지 않은 상태를 나타낸다. 즉, 변수를 선언하였지만 값을 할당하지 않았을 때 해당 변수에 undefined가 자동으로 할당된다.

➡️ 개발자가 변수에 직접 undefined를 할당하는 것도 가능하지만 권장되지 않고, 변수가 비어있거나 알 수 없는 상태라는 것을 나타내려면 null을 사용하는 것이 좋다.

 

let age;     // 변수 age 선언만 하기
alert(age)     // undefined (값을 할당하지 않았으므로)

 

💡 undefined는 사용자가 실수로 값을 지정하지 않을 때의 값이고, null은 사용자가 일부러 유효하지 않은 값을 지정한 것이라고 생각하면 쉽다.

 

 

 

📋 객체 (Object)와 심볼(Symbol)

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

➡️ 반면 객체는 여러 자료형이 모아진 데이터 컬렉션이나 복잡한 개체(entity) 표현이 가능하다.

➡️ 심볼형은 객체의 고유한 식별자(identifier)를 만들 때 사용된다.

 

 

 

📋 typeof 연산자

➡️ 인수의 자료형을 반환하는 역할을 한다.

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

➡️ 다음 두 가지 형태의 문법을 사용할 수 있다.

→ 연산자 : typeof x;

→ 함수 : typeof(x);

 

typeof undefined     // "undefined"
typeof 0     // "number"
typeof 10n     // "bigint"
typeof true     // "boolean"
typeof "foo"     // "string"
typeof Symbol("id")     // "symbol"

// 아래에 설명!
typeof Math     // "object" 1.
typeof null     // "object" 2.
typeof alert     // "object" 3.

 

1️⃣ Math : 수학 연산을 제공하는 내장 객체이므로 "object" 출력

2️⃣ null : 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 "object"라고 함. (오류가 아니고 null이 객체인 것도 아니다.)

3️⃣ 피연산자가 함수 : typeof의 피연산자가 함수일 경우 "function"을 반환한다. 함수형이라는 자료형이 존재하지 않음에도 불구하고 결과가 위와 같이 나오는 것은 아주 오래전에 만들어진 규칙이므로 하위 호환성 유지를 위해 남겨져 있다. (함수는 객체형에 속한다.)

 

 

 

✏️ 과제

📍 문자열 따옴표

아래 스크립트의 결과를 예측해 보세요.

 

let name = "Ilya";

alert(`hello ${1}`);     // hello 1

alert(`hello ${"name"}`);     // hello name

alert(`hello ${name}`);     // hello Ilya