기본 타입

2022. 12. 27. 16:52ㆍJavascript/TCP school

기본 타입

타입(data type) - 프로그램에서 다룰 수 있는 값의 종류를 의미

기본 타입 - 자바스크립트에서 여러 가지 형태의 타입을 미리 정의하여 제공하는 것

 

자바스크립트의 기본 타입

1. 원시 타입

2. 객체 타입

 

원시 타입(primitive type)

1. 숫자(number)

2. 문자열(string)

3. 불리언(boolean)

4. 심볼(symbol) : ECMAScript 6부터 제공됨

5. undefined

 

객체 타입(object type)

6. 객체(object)

 

var num = 10;          // 숫자

var myName = "홍길동"; // 문자열

var str;               // undefined

 

 

숫자(number)

모든 수를 실수 하나로만 표현

매우 큰 수나 매우 작은 수를 표현할 경우 - e 표기법을 사용

var firstNum = 10;     // 소수점을 사용하지 않은 표현

var secondNum = 10.00; // 소수점을 사용한 표현

var thirdNum = 10e6;   // 10000000

var fourthNum = 10e-6; // 0.00001

 

 

문자열(string)

큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합

큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음

작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript DataType</title>
</head>

<body>

	<h1>문자열 타입</h1>    
	<p id="str"></p>

	<script>
		var firstStr = "이것도 문자열입니다.";		// 큰따옴표를 사용한 문자열
		var secondStr = '이것도 문자열입니다.';		// 작은따옴표를 사용한 문자열
		var thirdStr = "나의 이름은 '홍길동'이야."	// 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.
		var fourthStr = '나의 이름은 "홍길동"이야.'	// 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.

		document.getElementById("str").innerHTML = 
			firstStr + "<br>" + secondStr + "<br>" + thirdStr + "<br>" + fourthStr + "<br>";
	</script>
	
</body>

</html>
JavaScript DataType

문자열 타입

자바스크립트에서는 숫자와 문자열을 더할 수도 있음

이럴 경우에 자바스크립트는 숫자를 문자열로 자동 변환하여, 두 문자열을 연결하는 연산을 수행함

 

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript DataType</title>
</head>

<body>

	<h1>숫자와 문자열의 덧셈</h1>
	<p id="result"></p>

	<script>
		var num = 10;
		var str = "JavaScript";
		
		document.getElementById("result").innerHTML = (num + str);
	</script>
	
</body>

</html>
JavaScript DataType

숫자와 문자열의 덧셈

 

불리언(boolean)

참(true)과 거짓(false)을 표현

예약어인 true와 false를 사용하여 나타낼 수 있음

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript DataType</title>
</head>

<body>

	<h1>불리언 타입</h1>
	<p id="result"></p>

	<script>
		var firstNum = 10;
		var secondNum = 11;
		
		document.getElementById("result").innerHTML = (firstNum == secondNum);
	</script>
	
</body>

</html>
JavaScript DataType

불리언 타입

 

심볼(symbol)

ECMAScript 6부터 새롭게 추가된 타입

유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있음

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript DataType</title>
</head>

<body>

	<h1>심볼 타입</h1>
	<p id="result"></p>

	<script>
		var sym = Symbol("javascript");		// 심볼 타입
		var symObj = Object(sym); 			// 객체 타입
		
		document.getElementById("result").innerHTML = 
			(typeof sym) + "<br>" + (typeof symObj);
	</script>
	
</body>

</html>

 

JavaScript DataType

심볼 타입

 

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>
JavaScript DataType

typeof 연산자

 

null과 undefined

자바스크립트에서

null - object 타입, 아직 '값'이 정해지지 않은 것

undefined - null과는 달리 '타입'이 정해지지 않은 것

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>
JavaScript DataType

null과 undefined

null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결괏값이 다르다!!!!!!!!

null과 undefined는 타입을 제외하면 같은 의미, 타입이 다르므로 일치하지는 않는다!!!

null ==  undefined; // true

null === undefined; // false

 

객체(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>
JavaScript DataType

객체 타입

자바스크립트의 객체에 대한 더 자세한 사항은 자바스크립트 객체 수업에서 확인할 수 있다.

자바스크립트 객체 수업 확인 =>

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

 

 

참고

http://www.tcpschool.com/javascript/js_datatype_basic

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

'Javascript > TCP school' 카테고리의 다른 글

변수  (0) 2022.12.28
타입 변환  (0) 2022.12.28
자바스크립트 적용  (0) 2022.12.27
자바스크립트 출력  (0) 2022.12.27
자바스크립트 문법  (1) 2022.12.26

관련글

티스토리툴바