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 |