숫자형
- 정수 - 소수점이 없는 숫자 , 표현 방법에 따라 8진수, 10진수, 16진수
- 실수 - 소수점이 있는 숫자, (! 자바스크립트에서는 정밀한 실수 계산을 못 함)
부동소수점 방식으로 숫자를 표현하는 이진법의 한계 때문에 발생하는 문제입니다.
부동소수점 방식은 소수점 위치가 고정되어 있지 않고, 이진법으로 숫자를 표현하기 때문에
무한 소수의 경우 근사값으로 표현되어 오차가 발생할 수 있습니다.
무한 소수(infinite decimal)란, 소수점 이하의 자리수가 무한히 반복되는 소수를 말합니다.
예를 들어, 1/3을 소수로 나타내면 0.3333...과 같이 소수점 이하가 무한히 반복됩니다.
이러한 소수는 유한한 자리수로 정확히 표현할 수 없기 때문에, 근사값으로 표현하거나,
무한 반복되는 자리수를 생략하여 유한한 자리수로 표현해야 합니다.
문자형 - 홑따옴표,쌍따옴표로 표기 한다.
논리형 - true, false
undefined - 자료형이 정의 되지 않았을때의 상태
null - 처음에 할당 된 값이 더이상 유효 하지 않다는 의미
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let first;
console.log(first);
let second = 100;
console.log(second);
second = null;
console.log(second);
</script>
</body>
</html>
배열 - 하나의 변수에 여러 값을 저장, 인덱스 0 부터시작, [] 대괄호를 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let store = ["바지","상의",100, true];
console.log(store);
console.log(store[3]);
console.log(store[2]);
console.log(store[1]);
console.log(store[100]);
</script>
</body>
</html>
객체 - 여러 자료형 을 중괄호 { } 로 묶는 것 , 키(key), 값(value)을 한 쌍으로 여러 자료형을 저장한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let student = {
firstName : "홍아",
lastName : "항아",
age : 30,
address : "부산"
};
console.log(typeof student);
console.log(student.firstName);
</script>
</body>
</html>
자바스크립트 자료형의 특징
느슨한 자료형 체크(weak datatype check) 자바스크립트는
미리 변수의 자료형을 지정하지 않음 변수를 지정하고 원하는 값을 할당만 하면 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<label for="">원래 가격: </label>
<input type="text" id="originPrice"> 원
</div>
<div>
<label for="">할인율: </label>
<input type="text" id="rate"> %
</div>
<button onclick="showPrice()">할인된 가격 계산</button>
<br>
<div id="showResult"></div>
<script>
function showPrice(){
let originPrice = document
.querySelector("#originPrice").value;
let rate = document.querySelector("#rate").value;
let calcPrice = originPrice * (rate/100);
let resultPrice = originPrice - calcPrice;
//백틱 ``
document.querySelector("#showResult")
.innerHTML = `상품의 원래 가격은 ${originPrice} 이고,
할인율은 ${rate}% 입니다. 할인된 금액 ${calcPrice}을 적용하여,
${resultPrice} 입니다`;
}
</script>
</body>
</html>