이롭게 현명하게
[JavaScript] 자바스크립트 데이터 타입 본문
목차
기본타입
null과 undefined
타입변환
변수
[기본타입]
타입(type) : 프로그램에서 다룰 수 있는 값의 종류
<자바스크립트의 기본타입 종류>
- 원시 타입(primitive type)
- 객체 타입(object)
<원시 타입 (primitive type) >
- 숫자(number) : 정수, 실수
- 문자열(string) : "" , ''
- 불리언(boolean) : true or false
- 심볼(symbol) : ECMAScript 6부터
typeof : 피연산자의 타입을 반환하는 비연산자가 단 하나뿐인 연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript DataType</title>
</head>
<body>
<h1>typeof 연산자</h1>
<p id="result"></p>
<script>
document.getElementById("result").innerHTML = (typeof 10) + "<br>";
document.getElementById("result").innerHTML += (typeof "문자열") + "<br>";
document.getElementById("result").innerHTML += (typeof true) + "<br>";
document.getElementById("result").innerHTML += (typeof undefined) + "<br>";
document.getElementById("result").innerHTML += (typeof null);
</script>
</body>
</html><결과>
<객체 타입 (object) >
자바스크립트의 기본타입은 객체이다.
객체(object) : 실생활에서 우리가 인식할 수 있는 사물
여러 프로퍼티(property)나 메서드(method)를 같은 이름으로 묶어놓은 일종의 집합체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript DataType</title>
</head>
<body>
<h1>객체 타입</h1>
<p id="result"></p>
<script>
var dog = { name: "해피", age: 3 }; // 객체의 생성
// 객체의 프로퍼티 참조
document.getElementById("result").innerHTML =
"강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";
</script>
</body>
</html>
<결과>
[null과 undefined]
null : object의 타입, 아직 '값'이 정해지지 않은 것
undefined : 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환, 아직 '타입'이 정해지지 않은 것
- 동등 연산자(==) : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함
- 일치 연산자(===) : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript DataType</title>
</head>
<body>
<h1>null과 undefined</h1>
<p id="result"></p>
<script>
var num; // 초기화하지 않았으므로 undefined 값을 반환함.
var str = null; // object 타입의 null 값
// 정의되지 않은 변수에 접근하면 undefined 값을 반환함.
document.getElementById("result").innerHTML =
(typeof num) + "<br>" + (typeof str) + "<br>" + (typeof secondNum);
</script>
</body>
</html>
<결과>
null과 undefined는 동등연산자와 일치 연산자로 비교할 때 그 결괏값이 다르므로 주의해야 한다.
null과 undefined는 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지는 않는다.
[타입변환]
자바스크립트는 타입 검사가 매우 유연한 언어이다.
자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다.
- 묵시적 타입 변환 (implicit type conversion)
- 명시적 타입변환 (explicit type conversion)
- 숫자를 문자열로 변환
- 문자열을 숫자로 변환
- 불리언 값을 문자열로 변환
- 불리언 값을 숫자로 변환
- 날짜를 문자열이나 숫자로 변환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Type Conversion</title>
</head>
<body>
<h1>같은 변수에 다른 타입의 값 대입</h1>
<p id="result"></p>
<script>
var num = 20; // 변수의 선언과 함께 초기화
document.getElementById("result").innerHTML = num + "<br>";
num = "이십"; // 문자열 대입
document.getElementById("result").innerHTML += num + "<br>";
var num; // 한 변수를 여러 번 초기화할 수는 있으나, 재선언은 할 수 없습니다.
document.getElementById("result").innerHTML += num;
</script>
</body>
</html>
<결과>
<묵시적 타입 변환 (implicit type conversion) >
자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환하여 사용한다.
즉, 문자열값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Type Conversion</title>
</head>
<body>
<h1>묵시적 타입 변환</h1>
<p id="result"></p>
<script>
var result = 10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
document.getElementById("result").innerHTML = result + "<br>";
result = "3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
document.getElementById("result").innerHTML += result + "<br>";
result = 1 - "문자열"; // NaN
document.getElementById("result").innerHTML += result;
</script>
</body>
</html><결과>
묵시적 타입 변환
10문자열
15
NaN
1-"문자열"은 뺄셈 연산을 위해 문자열이 숫자로 변환되어야 하지만, 문자열은 숫자로 변환할 수 없는 문자열이다.
그러므로 의미에 맞게 자동으로 타입을 변환할 수 없으므로, 자바스크립트는 NaN 값을 반환한다.
*NaN : Not a Number의 축약형, 정의되지 않은 값이나 표현할 수 없는 값이라는 의미
number 타입의 값으로 0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환되는 읽기 전용 값이다.
<명시적 타입 변환 (explicit type conversion) >
| 전역함수 | 설명 |
| Number() | 문자열을 정수로 변환 |
| String() | 값을 문자열로 반환 |
| Boolean() | 값을 boolean으로 반환 |
| Object() | 값을 객체로 반환 |
| parseInt() | 값을 정수로 반환 |
| parseFloat() | 값을 실수로 반환 |
<숫자를 문자열로 변환>
String() 함수 사용
null과 undefined를 제외한 모든 타입의 값이 가지고 있는 toString() 메서드 사용 가능
숫자(Number) 객체는 숫자를 문자열로 변환하는 메서드를 별도로 사용 가능하다.
- toExponential()
- toFixed()
- toPrecision()
| 메소드 | 설명 |
| toExponential() | 정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환함. |
| toFixed() | 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환함. |
| toPrecision() | 입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환함. |
* 메서드(method) : 객체의 프로퍼티 값으로 함수를 갖는 프로퍼티를 의미
<문자열을 숫자로 변환>
문자열을 숫자로 변환하는 가장 간단한 방법은 Number() 함수를 사용한다.
자바스크립트는 문자열을 숫자로 변환해 주는 두 개의 전역 함수를 별도로 제공한다.
| 함수 | 설명 |
| parseInt() | 문자열을 파싱하여 특정 진법의 정수를 반환함 |
| parseFloat() | 문자열을 파싱하여 부동 소수점수를 반환함 |
<불리언 값을 문자열로 변환>
String() 함수와 toString() 메서드 사용
<script>
String(true); // 문자열 "true"
false.toString(); // 문자열 "false"
</script>
<불리언 값을 숫자로 변환>
불리언 값을 숫자로 변환하는 방법에는 Number() 함수를 사용하는 방법이 있다.
<script>
Number(true); // 숫자 1
Number(false); // 숫자 0
</script>
<날짜를 문자열이나 숫자로 변환>
날짜를 문자열로 변환하는 방법에는 String() 함수와 toString() 메서드를 사용하는 방법이 있다.
자바스크립트에서 날짜(Date) 객체는 문자여로가 숫자로 모두 변환할 수 있는 유일한 타입이다.
날짜(Date)객체는 날짜를 숫자로 변환하는 메서드를 별도로 사용 가능하다.
| 메소드 | 설명 |
| getDate() | 날짜 중 일자를 숫자로 반환함. (1 ~ 31) |
| getDay() | 날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일 : 6) |
| getFullYear() | 날짜 중 연도를 4자리 숫자로 반환함. (yyyy년) |
| getMonth() | 날짜 중 월을 숫자로 반환함. (1월 : 0 ~ 12월 : 11) |
| getTime() | 1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환함. |
| getHours() | 시간 중 시를 숫자로 반환함. (0 ~ 23) |
| getMinutes() | 시간 중 분을 숫자로 반환함. (0 ~ 59) |
| getSeconds() | 시간 중 초를 숫자로 반환함. (0 ~ 59) |
| getMilliseconds() | 시간 중 초를 밀리초(millisecond) 단위의 숫자로 반환함. (0 ~ 999) |
[변수]
[JavaScript] 자바스크립트 변수(let,const,var)
목차 let const var [let] 변수를 선언할 때 사용한다. // index.js // let value = 1; console.log(value); // 1 let value = 3; // 에러 발생 [const] 상수를 선언할 때 사용한다. 상수 : 한번 값을 설정하고나면 변경이 불가
devyihyun.tistory.com
https://devyihyun.tistory.com/158
[JavaScript] 자바스크립트 연산자
목차 연산자 목록 산술 연산자 대입 연산자 증감 연산자 비교 연산자 논리 연산자 비트 연산자 기타 연산자 [연산자 목록] 우선순위 연산자 설명 결합 방향 1 () 묶음(괄호) - 2 . 멤버 접근 왼쪽에
devyihyun.tistory.com
잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊
댓글과 좋아요는 큰 힘이 됩니다!
'웹 개발 > JavaScript' 카테고리의 다른 글
| [Javascript] 자바스크립트 제어문 (0) | 2023.12.01 |
|---|---|
| [JavaScript] 자바스크립트 연산자 (1) | 2023.11.30 |
| [JavaScript] 자바스크립트 출력하기 (1) | 2023.11.28 |
| [JavaScript] 자바스크립트 시작하기 / 개발환경 (1) | 2023.11.27 |
| [JavaScript] 자바스크립트 시작하기 (1) | 2023.11.24 |
