JavaScript 자료형

자바스크립트의 자료형

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

자바스크립트의 자료형은 8가지 종류가 있으며, 다음과 같습니다.

• 숫자형 - 정수, 부동 소수점 숫자 등 수를 나타낼 때 사용합니다.
• BigInt - 길이 제약 없이 정수를 나타낼 수 있습니다.
• 문자형 - 빈 문자열이나 글자로 이루어진 문자열, 단일 문자를 나타내는 별도의 자료형은 없습니다.
• 불린형 - true, false 참과 거짓을 나타낼 때 사용합니다.
• null - null 값만을 위한 독립 자료형입니다. null은 미지의 값을 의미합니다.
• undefined - undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 의미합니다.
• 객체 - 복잡한 데이터 구조를 표현할 때 사용합니다.
• 심볼 - 객체의 고유 식별자를 만들 때 사용합니다.

숫자(Number) 자료형

let n = 123;
n = 123.456;

숫자형은 정수 및 부동소수점 숫자를 표현할 수 있습니다.

숫자형과 관련된 연산에는 대표적으로 곱셈, 나눗셈, 덧셈, 뺄셈이 있습니다.

숫자형에는 일반적인 정수와 부동소수점 숫자 이외에도 Infinity, -Infinity, NaN과 같은 특수 숫자 값이 포함됩니다.

• Infinity는 무한대를 의미합니다.
  어떤 숫자던 0으로 나누면 무한대를 얻을 수 있습니다.

  // 아래 두 코드는 결과적으로 동일한 값을 가집니다.
  inf = Infinity;
  inf = 1/0;​

• NaN은 계산 중에 에러가 발생했다는 것을 나타냅니다. 부정확하거나 정의되지 않는 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환됩니다.

BigInt 자료형

내부 표현 방식 때문에 자바스크립트에서는 (2^53-1) (9007199254740991)보다 큰 값 혹은 -(2^53-1)보다 작은 정수는 숫자형으로 나타낼 수 없습니다.

BigInt형은 표준으로 체택된 지 얼마 안 된 자료형으로, 길이에 상관 없이 정수를 나타낼 수 있습니다.

BigInt형 값은 점수 리터럴 끝에 n을 붙이면 만들 수 있습니다.

const bigInt = 1234567890123456789012345678901234567890n;

문자(String) 자료형

자바스크립트에서 문자열을 표현할 때는 따옴표를 사용합니다.

let str = "Apple"
let str2 = "Banana"
let res = `${str} and ${str2}`;

자바스크립트에서 문자열을 나타내는 따옴표의 종류는 3가지가 있으며 다음과 같습니다.

• 큰 따옴표 "
• 작은 따옴표 '
• 역 따옴표(백틱) `

큰 따옴표와 작은 따옴표는 문자열을 나타내는 기본적인 따옴표입니다.
자바스크립트에서는 큰 따옴표와 작은 따옴표 둘 사이에 별다른 차이를 두지 않습니다.

역 따옴표(백틱)으로 변수나 표현식을 감싼 후 ${...} 안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 Formatting 할 수 있습니다.

let name = "Xeros";
console.log(`Hello, ${name}`); // Hello, Xeros
console.log(`2+3 = ${2+3}`); //2+3 = 5

${...} 안에는 변수나 수학 관련 표현식 혹은 이보다 복잡한 코드 표현식을 넣을 수도 있습니다.

이렇게 문자열 중간에 들어간 변수나 표현식은 연산 처리과정이 끝난 후 문자열로 치환됩니다.

큰 따옴표나 작은 따옴표를 사용하면 중간에 표현식을 넣을 수 없습니다. 표현식을 사용하기 위해서는 반드시 문자열을 역 따옴표(백틱)을 사용하여 감싸주어야합니다.

JavaScript에 Char 자료형은 없습니다.

Java나 C언어같은 일부 프로그래밍 언어는 한 글자를 저장할 때 사용하는 자료형인 Char형이 존재합니다.
다만 JavaScript에는 이러한 Char 데이터형이 존재하지 않습니다.

불린(Boolean) 자료형

불린형(논리 타입)은 오직 true와 false 두 가지 값만 존재하는 자료형입니다.

불린형은 긍정이나 부정을 나타내는 값을 저장할 때 사용합니다. true는 긍정, false는 부정을 의미합니다.

let nameFieldChecked = true;
let ageFieldChecked = false;

또는 비교 결과를 저장할 때도 사용합니다.

let isGreater = 4 > 1; // (4가 1보다 크기 때문에 true가 반환되어 저장됨)
console.log(isGreater); // true

null

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

let name = null; // name을 알 수 없거나, name이 비어있음을 의미함

자바스크립트의 null은 자바스크립트 이외 언어의 null과는 특성이 다릅니다. 다른 언어에서의 null은 "존재하지 않는 객체에 대한 참조"나 "널 포인터(null pointer)"를 나타낼 때 사용합니다.

하지만 자바스크립트의 null은 "존재하지 않는 (nothing) 값", "비어 있는(empty) 값", "알 수 없는(unknown) 값"을 의미합니다.

undefined

undefined 역시 null과 같이 undefined 자신만의 자료형을 의미합니다.

undefined는 "값이 할당되지 않은 상태"를 의미합니다.

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

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

하지만 undefined를 수동으로 직접 할당할 수도 있습니다.

let name = "Xeros";
console.log(name); // Xeros
name = undefined;
console.log(name); // undefined

하지만 이러한 방식은 권장하지 않습니다. 변수가 비어있거나 알 수 없는 상태라는것을 나타내기 위해서는 undefined보다 null을 사용하는것이 바람직합니다.

undefined와 null의 차이

undefined와 null은 얼핏보면 비슷해보여서 혼동할 수 있습니다.
undefined는 값이 아예 할당되지 않은 아무것도 없는 공허한 상태를 의미하고 null은 무언가 존재하지 않는다는 것을 나타냅니다.
아래 이미지를 살펴보면 보다 이해하기 수월합니다.

객체(Object) 자료형과 심볼(Symbol) 자료형

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

객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라고 부르는 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다.

이러한 특징 때문에 자바스크립트에서 객체는 조금 더 특별한 취급을 받습니다.

아래는 객체에 대한 예시입니다.

var person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

심볼(Symbol) 자료형은 객체의 고유한 식별자(unique indentifier)를 만들 때 사용합니다.

객체와 심볼은 추후 조금 더 공부 하고 작성하도록 하겠습니다.

typeof 연산자

typeof 연산자는 인수로 받은 값의 자료형을 반환합니다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다.

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

• 연산자 : typeof x
• 함수 : typeof(x)

연산자 형태를 사용하던, 함수 형태를 사용하던 반환되는 결과는 동일합니다.

console.log(typeof (undefined)); // undefined
console.log(typeof (0)); // number
console.log(typeof (10n)); // bigint
console.log(typeof (true)); // boolean
console.log(typeof ("xeros")); // string
console.log(typeof (Symbol("id"))); // symbol

console.log(typeof (Math)); // object           (1)
console.log(typeof (null)); // object           (2)
console.log(typeof (console.log)); // function  (3)

위 코드에서 마지막 3줄은 특수한 값을 반환합니다. 이유는 다음과 같습니다.

1. Math는 수학 연산을 제공하는 내장 객체이므로 "object"가 출력됩니다. 내장 객체는 객체(Object)형으로 인식됩니다.
2. typeof null의 결과는 "object"입니다. null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 이미 작성된 코드들, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황입니다. JavaScript 언어 자체의 오류이므로 null은 객체가 아님에 유의하시기 바랍니다.
3. typeof는 피연산자가 함수일 경우 "function"을 반환합니다. 그러므로 typeof console.log는 "function"을 출력합니다.
   하지만 사실 "함수형"은 따로 없습니다. 함수는 객체형에 속합니다. 이런 동작 방식이 형식적으로는 잘못되었지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태입니다. 하지만 이러한 특징이 반대로 유용하게 사용되기도 합니다.