본문 바로가기

웹/JavaScript

[JS] 4. 기초 문법: 자료형과 형 변환

1. 자료형

 

자료형(Data Type): 값을 성질에 따라 분류한 것. 

 

 

자바스크립트에서는 값을 크게 Primitive와 Non-Primitive 2개, 작게는 Primitive 5개와 Non-Primitive 3개로 나누어

총 8개의 자료형으로 분류합니다.

 


[Primitive Type과 Non-Primitive Type]

 

Primitive Type(원시 타입): 한 번에 하나의 값만 가질 수 있고 하나의 고정된 저장 공간을 사용.
내장형 타입 또는 기본형 타입이라고도 합니다. 

 

let num = 10;

 

Non-Primitive Type(비 원시 타입): 한 번에 여러 개의 값을 가질 수 있고 여러 개의 고정되지 않은 동적 공간 사용. 

 

let array = [1,2,3,4];

 


[Primitive Type Data 종류] : number, string, boolean, undefined, null

 

① Number (숫자형)

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

let num3 = Infinity;  //양의 무한대

let num4 = -Infinity;   //음의 무한대

let num5 = NaN;   // 연산이 잘못되었을 경우, 수학적 연산 실패의 결과값

 

숫자형 데이터는 사칙 연산을 제공합니다.

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

console.log(num1 + num2);  // 20.02

 

 

String(문자열)

 

문자열은 큰 따옴표( " ), 작은 따옴표( ' ), 백틱( ` ) 으로 감싸 표현합니다.

let name1 = "별안간 공대생";
let name2 = '별안간 공대생';
let name3 = `별안간 공대생`;

 

이중에서 백틱을 이용하는 경우, '$'와 중괄호를 사용하여 문자열 안에 변수값을 삽입할 수 있습니다.  

이 문법을 템플릿 리털럴이라고 합니다. 

let string1 = "안녕하세요";
let string2 = "입니다.";
let string3 = ` ${string1} 별안간 공대생${string2}`;

console.log(string3);   // 안녕하세요 별안간 공대생입니다.

 

 

③ Boolean: 논리값 (참, 거짓)

let bool1 = true;
let bool2 = false;

console.log(bool1);   // true 출력

 

 

④ Undefined: 변수를 선언하고 아무런 값을 할당하지 않은 경우, 자동으로 가지게 되는 값.

let a;

console.log(a);   // undefined 출력

 

 

⑤ Null: 의도적으로 변수가 아무런 값을 가지지 않음을 나타내기 위해 사용.

let a = null;

console.log(a);   //null 출력

 


2. 형 변환 

 

형 변환: 값은 유지하면서 자료형만 바꾸는 것.

 

형 변환은 묵시적 형 변환과 명시적 형 변환이 있습니다. 

 

묵시적 형 변환: 자바스트립트 엔진이 자동적으로 실행하는 형 변환.  
명시적 형 변환: 프로그래머가 의도적으로 하는 형 변환. 

 

자바스크립트 엔진은 숫자가 아닌 자료형을 포함하는 산술 연산 시에 자동으로 그 자료형을 숫자로 변환합니다. 

그런데 예외적으로 덧셈 연산의 경우에는 명시적 형 변환이 필요합니다. 덧셈 연산자는 산술적인 더하기 기능뿐만 아니라 문자열을 이어 붙이는 기능도 수행하기 때문입니다.

 

let a = 10;    //숫자
let b = "2";   //문자열

console.log(a * b);  //숫자 '20' 출력
console.log(a / b);  //숫자 '5' 출력
console.log(a - b);  //숫자 '8' 출력

console.log(a + b);  //문자열 '102' 출력

 

위 코드에서 'a+b'의 값이 12가 되도록 하려면 어떻게 하면 될까요?

 

덧셈 연산을 위한 명시적 형 변환은 parseInt 함수를 이용하면 됩니다. parseInt 함수는 문자열 값을 받아 숫자형 값으로 반환합니다. 

let a = 10;
let b = "2";

console.log(a + parseInt(b)); //숫자 '12' 출력

 

' > JavaScript' 카테고리의 다른 글

[JS] 6. 기초 문법: 조건문  (0) 2022.07.15
[JS] 5. 기초 문법: 연산자  (0) 2022.07.15
[JS] 3. 기초 문법: 변수와 상수  (0) 2022.07.14
[JS] 2. 자바스크립트 개발 환경  (0) 2022.07.14
[JS] 1. JavaScript & React 개념  (0) 2022.07.14