404 page not found : 기록장

[Javascript] 자료형 본문

JAVASCRIPT

[Javascript] 자료형

Hannah_J 2023. 3. 13. 11:47

자료형

자바스크립트는 동적 언어로, 변수의 자료형을 지정하지 않아도 됩니다. 그러나 자료형에 대한 이해는 프로그래밍에 매우 중요합니다.

자바스크립트에서는 명시적으로 형 변환을 해주지 않아도 자동으로 형 변환이 이루어집니다. 이는 동적 언어의 특징 중 하나입니다. 예를 들어, 숫자와 문자열을 더하는 경우 자동으로 문자열로 변환됩니다. 하지만 때로는 명시적으로 형 변환을 해주어야 하는 경우도 있습니다.

자료형에 대한 이해는 프로그래밍에서 매우 중요합니다. 자바스크립트의 기본 자료형에는 숫자(Number), 문자열(String), 불리언(Boolean), null과 undefined이 있으며, 참조 자료형에는 객체(Object)와 배열(Array)이 있습니다.

기본 자료형

숫자(Number)

숫자 자료형은 정수와 실수를 모두 포함합니다. 예시 코드는 다음과 같습니다.

let num1 = 10; // 정수
let num2 = 3.14; // 실수

BigInt

BigInt는 자바스크립트에서 정수를 나타내는 새로운 자료형입니다. 이 자료형은 기존 숫자 자료형(Number)으로 표현할 수 없는 매우 큰 정수를 다룰 때 사용됩니다.

BigInt는 정수 뒤에 "n"을 붙여서 나타냅니다. 예시 코드는 다음과 같습니다.

let bigInt = 1234567890123456789012345678901234567890n;

위 코드에서는 10의 30승을 넘는 매우 큰 정수를 BigInt로 나타내고 있습니다. BigInt는 숫자와 함께 연산할 때에는 명시적으로 형 변환을 해주어야 합니다. 예시 코드는 다음과 같습니다.

let bigInt = 1234567890123456789012345678901234567890n;
let num = 123;
let result = bigInt + BigInt(num); // 1234567890123456789012345678901234568013n

문자열(String)

문자열 자료형은 문자들의 집합입니다. 예시 코드는 다음과 같습니다.

자바스크립트에선 문자열(string)을 따옴표로 묶습니다.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

따옴표는 세 종류가 있습니다.

  1. 큰따옴표: "Hello"
  2. 작은따옴표: 'Hello'
  3. 역 따옴표(백틱, backtick): Hello

큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않습니다.

역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.

let name = "John";
// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

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

글자형은 없습니다.

일부 언어는 글자 하나를 저장할 때 쓰이는 자료형, '글자(character)'형을 따로 지원합니다. C 언어와 Java의 char가 대표적인 예입니다.

자바스크립트는 글자형을 지원하지 않습니다. 문자형만 있을 뿐입니다. 여기엔 글자가 하나 혹은 여러 개 들어갈 수 있습니다.

불리언(Boolean)

불리언 자료형은 참과 거짓을 나타내는 자료형입니다. 예시 코드는 다음과 같습니다.

let bool1 = true; // 참
let bool2 = false; // 거짓

null과 undefined

null과 undefined는 값이 없음을 나타내는 자료형입니다. null은 의도적으로 값이 없음을 할당한 경우, undefined는 값이 할당되지 않은 변수를 참조한 경우에 사용됩니다. 예시 코드는 다음과 같습니다.

null

null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값입니다.

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

let age = null;

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

하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.

let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.

let nullValue = null;
let undefinedValue;

Undefined

undefined 값도 null 값처럼 자신만의 자료형을 형성합니다.

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.

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

`let age;

alert(age); // 'undefined'가 출력됩니다.`

개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 합니다.

`let age = 100;

// 값을 undefined로 바꿉니다. age = undefined;

alert(age); // "undefined"`

하지만 이렇게 undefined를 직접 할당하는 걸 권장하진 않습니다. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하세요. undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둡시다.

참조 자료형

객체(Object)

객체 자료형은 여러 개의 속성(property)을 가지고 있는 복합적인 자료형입니다. 예시 코드는 다음과 같습니다.

let person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

배열(Array)

배열 자료형은 여러 개의 값을 순서대로 나열한 자료형입니다. 예시 코드는 다음과 같습니다.

let arr = [1, 2, 3, 4, 5];

형 변환

자바스크립트는 동적 언어이기 때문에 자동으로 형 변환이 이루어집니다. 예를 들어, 숫자와 문자열을 더하는 경우 자동으로 문자열로 변환됩니다. 하지만 때로는 명시적으로 형 변환을 해주어야 하는 경우도 있습니다. 예시 코드는 다음과 같습니다.

let num = 10;
let str = '20';
let result1 = num + parseInt(str); // 30
let result2 = String(num) + str; // '1020'

typeof 연산자

JavaScript에서는 변수의 자료형을 명시적으로 지정하지 않아도 됩니다. 대신, typeof 연산자를 사용하여 변수의 자료형을 확인할 수 있습니다.

let num = 10;
let str = 'Hello, world!';
let bool = true;
let obj = {
  name: 'John',
  age: 30
};
let arr = [1, 2, 3, 4, 5];

console.log(typeof num); // 'number'
console.log(typeof str); // 'string'
console.log(typeof bool); // 'boolean'
console.log(typeof obj); // 'object'
console.log(typeof arr); // 'object'
console.log(typeof undefinedVariable); // 'undefined'
console.log(typeof nullVariable); // 'object'

typeof 연산자는 변수의 자료형을 문자열로 반환합니다. 다음은 각 자료형에 대한 예시입니다.

  • number: 숫자 자료형
  • string: 문자열 자료형
  • boolean: 불리언 자료형
  • object: 객체 자료형 (배열, 객체 모두 포함)
  • undefined: 값이 할당되지 않은 변수
  • null: 값이 null인 변수 (자바스크립트의 버그로, typeof null은 'object'를 반환합니다.)

typeof 연산자를 사용하여 변수의 자료형을 확인하면, 변수가 어떤 값을 가지고 있는지 더욱 확실하게 알 수 있습니다.

요약

자바스크립트에는 여덟 가지 기본 자료형이 있습니다.

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

typeof 연산자는 피연산자의 자료형을 알려줍니다.

  • typeof x 또는 typeof(x) 형태로 사용합니다.
  • 피연산자의 자료형을 문자열 형태로 반환합니다.
  • null의 typeof 연산은 "object"인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.