본문 바로가기
매일 해내는 개발/자바스크립트

[자바스크립트] 기본 자료형, 형변환

by 해야지 2022. 11. 9.
반응형

자바스크립트의 기본 자료형 정리

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

자바스크립트에는 여덟 가지 기본 자료형이 있다.
자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다.
따라서 변수는 어떠한 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다.

//no error
let message = "hello";
message = 123456;

1. 숫자형
정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용, 정수의 한계는 ±2의 53승이다.
일반적인 숫자 외에 Infinity, -Infinity, NaN 같은 특수 숫자 값이 포함된다.
Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대를 나타내고
NaN은 계산 중에 에러가 발생했다는 것을 나타낸다.

2. bigInt 
길이 졔약 없이 정수를 나타낼 수 있다.
 암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요하다.
숫자 끝에 'n'이 붙으면 BigInt형 자료이다.
*IE 브라우저에서는 지원하지 않는다

const bitInt = 1234567890123456789012345678901234567890n;

3. 문자형
따옴표로 묶는다. 글자형(char)은 없다.
*따옴표의 종류
  1) 큰따옴표: "Hello"
  2) 작은따옴표: 'Hello'
  3) 역따옴표(백틱): `Hello`

큰따옴표와 작은따옴표는 기본적인 따옴표로 자바스크립트에서는 이 둘에 차이를 두지는 않는다.
역따옴표는 백틱 안에 ${...}을 넣어 원하는 변수나 표현식을 문자열 중간에 손 쉽게 넣을 수 있다.

let name = "John";

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

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

4. 불린형(논리 타입)
true, false를 나타낼 때 사용합니다.

5. null
null 값만을 위한 독립 자료형이다. null은 알 수 없는 값을 나타낸다.

6. undefined
undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 나타냅니다.

7. 객체형
복잡한 데이터 구조를 표현할 때 사용한다.

8. 심볼형
객체의 고유 식별자를 만들 때 사용한다.


자바스크립트 형변환

1. 문자형으로 변환하는 방법
String() 함수 사용

let value = true
console.log(typeof value); //boolean

value = String(value);
console.log(typeof value); //string


2.  숫자형으로 변환
  1) 수학과 관련된 함수와 표현식에서 자동으로 일어난다.

console.log("6"/"2"); //3

  2) Number() 함수 사용

let str="123";
console.log(typeof str); // string

let num = Number(str);
console.log(typeof num); // number

만약 숫자 이외의 글자를 숫자로 형변환 하려고 한다면

전달받은 값형 변환 후

전달받은 값 형 변환 후
undefined NaN
null 0
true and falsue 1과 0
string 문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 된다.
alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) );        // 1
alert( Number(false) );       // 0

 

3. 불린형으로 변환
논리 연산을 수행할 때 발생한다. Boolean()를 호출하면 명시적으로 형 변환을 수행할 수 있다.

전달받은 값 형 변환 후
0, null, undefined, NaN, "" false
그 외의 값 true
alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)

alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)

 

형변환 시 예외 사항

  • 숫자형으로 변환 시 undefined는 0이 아니라 NaN이 됩니다.
  • 문자열 "0"과 " "같은 공백은 불린형으로 변환 시 true가 됩니다.
반응형

댓글