[Javascript] 자료형과 형변환
목차
1. 자료형 (Data Type)
① Number (숫자형)
② String (문자형)
③ Boolean (논리형)
④ null / undefined
2. 형변환 (Type Casting)
① 묵시적 형변환
② 명시적 형변환
0. 개요
let num = 20;
console.log(typeof num); //"number"
num = "Hello";
console.log(typeof num); //"string"
//typeof 연산자는 피연산자의 자료형을 나타내는 문자열을 return하는 연산자이다.
//처음에 변수 num의 자료형이 number, 숫자형으로 나왔고
//이후 num의 값을 "Hello"로 바꿨더니 해당 변수의 자료형이 string, 문자형으로
//변경된 것을 확인할 수 있다.
상단의 소스코드를 구글 크롬 개발자 콘솔에서 실행한 결과를 통해서 알 수 있는 것은
변수 num의 자료형이 저장된 값에 따라 달라진다는 점이다.
저장된 값이 숫자이면 해당 변수의 자료형도 숫자형(number)이 되고
문자열이면 해당 변수의 자료형이 문자형(string)이 되는 것을 통해서 파악할 수 있었다.
그렇다면 왜 변수에 저장된 값에 따라 변수의 자료형이 바뀌는 것일까?
이는 자바 스크립트라는 언어가 변수를 선언할 때 자료형을 명시하지 않는 동적 언어라는 점 때문이다.
예전에 배웠던 Java와 같이 변수 선언 시 자료형도 같이 명시해야 하는 정적 언어와는 사뭇 다른 모습을 보여준다.
자바 스크립트에서 변수를 선언할 때 자료형을 명시하지 않아도 된다는 점이
어떤 이에게는 장점이 될 수도 있고, 또 다른 이에게는 단점이 될 수도 있다.
동적 언어와 정적 언어의 차이, 자바 스크립트에서 변수 선언 시 자료형을 명시하지 않는 점의 장, 단점에 대해서는
Javascript라는 언어에 대한 이해도, 더 나아가 프로그래밍에 대한 지식이 더 깊어졌을 때 다뤄보도록 하겠다.
바로 본론으로 넘어가자.
1. 자료형 (Data Type)
자바 스크립트에서 사용되는 자료형은 총 7개가 존재한다.
그중 6개가 원시 타입 자료형이고 나머지 하나는 비 원시 타입 자료형인 객체이다.
이번엔 원시 타입 자료형, 그중에서 5개만 다루도록 하겠다.
원시 타입 자료형은 프로그램 실행 중에는 단 한 개의 값만 가지는 자료형으로
객체가 아닌 자료형이고, 메서드를 가지고 있지 않다.
원시 타입에 포함되는 자료형으로는 프로그래밍을 배우면서 자주 봤던
Number(숫자형), String(문자형), Boolean(논리형) 세 가지와
null, undefined, symbol형 세 가지까지 해서 총 6개의 자료형이
원시 타입 자료형에 해당된다.
(이번 장에서 symbol형은 다루지 않는다.)
① Number (숫자형)
- 정수, 실수 등의 숫자를 다루는 자료형
- '+', '-', '*', '/'와 같이 기본적인 사칙연산이 가능한 자료형
//Number (숫자형)
let A = 10;
let B = 5;
let C = 5.5;
let D = 0;
let E = "Hello";
console.log(A + B); //15
console.log(A - C); //4.5
console.log(B * C); //27.5
console.log(A / B); //2
console.log(B / D); //Infinity
console.log(C - E); //NaN
예제 소스코드를 실행했을 때 출력되는 값들 중 Infinity와 NaN이라는 처음 보는 값이 나왔다.
이 두 개의 값은 숫자형에서 사용되는 값 중 하나로
Infinity는 숫자를 0으로 나누려고 했을 때 반환되는 값이고
NaN은 Not a Number의 약어로 이는 "숫자가 아니다."로 해석할 수 있다.
이는 문자열과 같이 숫자가 아닌 값과 '+' 외의 사칙 연산자를 사용해서 연산을 시도했을 경우
즉, 잘못된 연산을 시도했을 때 반환되는 값이라는 것을 알 수 있다.
(왜 '+' 외의 연산자를 사용했을 때 이러한 값이 반환된 이유에 대해서는
바로 다음 장인 형변환에서 확인할 수 있다.)
② String (문자형)
- 문자열을 다루는 데이터 타입
- ""(큰 따옴표), ''(작은따옴표), ``(백틱)을 통해서 문자열을 표현할 수 있다.
(``은 숫자 키 옆에 있는 [~] 키를 통해서 입력할 수 있다.)
- ``(백틱)은 문자열 내부에 변수를 표현하려고 할 때 주로 사용되며
'${변수 명}'을 통해서 문자열 내부에 변수를 표현할 수 있다.
//String (문자형)
let Name = "홍길동";
let Address = '서울';
let Age = 25;
console.log(`이름: ${Name}`);
console.log(`나이: ${Age}`);
console.log(`주소지: ${Address}`);
③ Boolean (논리형)
- 참과 거짓을 나타내는 자료형
자바 스크립트에서 참은 true, 거짓은 false로 표현된다.
//Boolean (논리형)
//결혼 여부 확인
let PaulisMarried = true;
let AndrewisMarried = false;
console.log(`Paul의 결혼 여부: ${PaulisMarried}`);
console.log(`Andrew의 결혼 여부: ${AndrewisMarried}`);
//두 수 비교
let numA = 10;
let numB = 15;
console.log(numA == numB); //numA와 numB의 값이 같다. => ?
console.log(numA < numB); //numA는 numB 보다 작다. => ?
④ null / undefined
- null은 변수를 선언하고 빈 값을 할당한 것으로 의도적으로 변수에 빈 값을 채워 넣은 상태이다.
- undefined는 변수를 선언하고 값을 할당하지 않은 것으로, 변수의 자료형이 명시되지 않은 상태이다.
(undefined => 정의하지 않다.)
//null과 undefined
let numA;
let numB = null;
console.log(numA); //undefined
console.log(typeof numA); //undefined
console.log(numB); //null
console.log(typeof numB); //object
변수 numA에 값을 할당하지 않았기에 자동으로 undefined라는 값이 들어갔고
해당 변수가 undefined형의 변수인 것을 확인할 수 있다.
이제 변수 numB를 확인해 보자.
변수 numB에 null 값을 할당했기에 이를 출력 시 동일하게 null 값이 출력된다.
그리고 typeof 연산자로 numB의 자료형을 확인했을 때 object라는 값이 출력되었다.
왜 이런 결과가 나왔을까?
그것은 null이 변수가 아무런 객체를 참조하고 있지 않을 때, 빈 참조를 나타낼 때 사용되고
null은 관련된 객체가 없을 때 대신 사용하기도 하기 때문에
이는 null은 원시 타입 자료형이지만, 관련 객체가 없을 때 대신 사용하기도 한다.
그러므로 null은 일종의 객체라고 볼 수 있기에 typeof 연산자를 사용했을 때
object, 객체라는 값이 출력된 것이다.
2. 형변환 (Type Casting)
형변환이란 변수의 자료형을 다른 자료형으로 변환하는 것을 말한다.
자바 스크립트에서 형변환은 묵시적 형변환과 명시적 형변환이 존재한다.
① 묵시적 형변환
- 변환하려는 타입을 명시하지 않아도 자료형이 자동으로 변환되는 형변환 (자동 형변환이라고도 한다.)
//묵시적 형변환 예시
console.clear();
let num = 10 + "5"; //"105"
//숫자 10이 문자열로 자동형변환, "10" + "5" = "105"
let str = "Hello_" + true; //"Hello_true"
//논리값 true가 문자열로 자동형변환, "Hello_" + "true" = "Hello_true"
let bol = true * 20; //20
//논리값 true가 숫자 1로 자동형변환, 1 * 20 = 20
/* Boolean형 값을 number, 숫자형으로 형변환하면
true => 1 / false => 0
*/
console.log(typeof num); //string
console.log(typeof str); //string
console.log(typeof bol); //number
② 명시적 형변환
자바 스크립트에서 함수, 연산자에 전달되는 값은 자동으로 적절한 값으로 형변환되지만
전달되는 값의 타입을 명시해 주는 것으로 우리가 원하는 자료형으로 변환하는 것도 가능하다.
이러한 형변환을 명시적 형변환이라고 한다. (수동형변환이라고도 한다.)
(1). 숫자형으로 변환
Number(Value) 함수를 통해 주어진 값을 숫자형으로 변환할 수 있다.
//숫자형으로 형변환
let Value1 = Number("15"); //15
let Value2 = Number(true); //1
console.log(typeof Value1);
console.log(typeof Value2);
(2). 문자형으로 변환
String(Value) 함수를 통해 주어진 값을 문자형으로 변환할 수 있다.
//문자형으로 형변환
let Value1 = String(555);
let Value2 = String(false);
console.log(Value1); //"555"
console.log(typeof Value1); //"string"
console.log(Value2); //"false"
console.log(typeof Value2); //"string"
(3). 논리형으로 변환
Boolean(Value) 함수를 통해 주어진 값을 논리형으로 변환할 수 있다.
이때 값이 null, undefined, 0, "", NaN과 같이 값이 비어있다고 느껴지는 것들은
논리형으로 변환 시 값이 false로 변환되고, 그 외의 나머지 값들은 true로 변환된다.
//논리형으로 변환
let Value1 = Boolean("Hello World");
let Value2 = Boolean(789);
let Value3 = Boolean(null);
let Value4 = Boolean(0);
console.log(Value1);
console.log(Value2);
console.log(Value3);
console.log(Value4);
2023.06.04 본문 작성 완료
2023.06.05 목차 - 본문 간 하이퍼 링크 추가