앞선 포스팅에서는 실제로 프로그램을 만들면서 변수와 상수에 대한 개념을 익혔다. 이번 포스팅에서부터는 자료형에 대해 심층적으로 알아보자.
[변수와 자료형] #2-2. 변수를 사용한 예제(2)
[실습] 나이 계산 프로그램 만들기(1) 실제로 변수를 이용하여 출생 연도를 입력하면 나이를 계산하는 프로그램을 작성해보자. 아래 코드는 필자가 직접 작성한 코드이다. <!DOCTYPE html> Document 나
udangtangtang-cording-oldcast1e.tistory.com
자료형과 자료형의 종류
자료형
자료형(data type)이란 저장되는 데이터의 종류에 따른 형태로, 저장되는 값의 종류와 범위에 따라 다르게 표현된다.
자료형의 종류
자료형은 컴퓨터가 처리하는 자료의 형태를 말하는 것으로, 자바스크립트는 이를 기본형과 복합형으로 구분한다.
인간은 하나의 자료를 해석함에 있어 한 문장을 읽을 때, 바로 자료형을 분리하여 읽을 수 있으나 컴퓨터는 자료형을 구분하여 해석할 수 없으므로 이러한 자료형을 잘 이용해야 한다.
| 자료형 | 설명 | ||
| 기본형 | number | 숫자 | 따옴표 없이 숫자를 나타낸다. |
| string | 문자열 | 작은 따옴표나 큰 따옴표로 묶어 나타낸다. | |
| boolean | 논리 | 참(true)와 거짓(false) 두 가지 값만 가지고 있는 유형이다. | |
| undefined | 자료형을 지정하지 않았을 때의 유형이다. | ||
| null | 값이 유효하지 않을 때의 유형이다. | ||
| 복합형 | array | 배열 | 하나의 변수에 여러 값을 저장하는 유형이다. |
| object | 객체 | 함수와 속성이 함께 포함된 유형이다. | |
자료형의 확인: typeof 연산자
자바스크립트는 변수에 저장하는 값에 따라 자료형이 결정된다.
예를 들어 value라는 변수에 10을 저장하면 숫자가 되고, "10"을 저장하면 문자열이 된다. 하지만 여러 값의 연산자 설정을 하게 되면 해당 변수의 자료형을 한눈에 파악하기 힘든 경우가 발생하는 데, 이때 사용할 수 있는 것이 typeof 연산자이다.
typeof 자료형을 알고자 하는 값;
typeof 연산자는 자바스크립트에서 사용하며 파이썬은 type(), C언어는 sizeof()와 같은 연산자를 이용한다.
숫자형
자바스크립트에서 숫자는 정수와 실수로 나누어 구분한다.
| 정수형 | 정수는 소수점 없는 숫자를 가리킨다. 정수는 표현 방법에 따라 10진수, 8진수, 16진수의 세가지 유형으로 나누어진다. |
| 실수형 | 실수는 소수점이 있는 숫자를 가리킨다. typeof 연산자로 확인하면 실수와 정수 모두 숫자형으로 취급한다. |
문자형
문자형은 작은따옴표나 큰 따옴표로 묶은 자료를 의미한다. 이 말은 즉, 숫자로 작은따옴표나 큰 따옴표로 묶어 표현한다면 문자형으로 인식한다는 것을 의미한다.
논리형
논리형은 참과 거짓이라는 값을 표현하는 자료형이다. 주로 프로그램에서 조건을 확인할 때 많이 사용한다.
undefined와 null
undefined은 자료형이 정의되지 않은 상태이다. 자바스크립트에서는 변수를 선언할 때 미리 자료형을 지정하지 않고 값을 할당할 때 그 값에 따라 결정한다. 즉 변수가 undefined 하다는 것은 처음부터 변수에 값이 할당되지 않았다는 것을 의미한다.
null 자료형은 처음에 할당된 값이 더 이상 유효하지 않음을 의미한다.
배열
자바스크립트에는 하나의 변수에 여러 값을 저장할 수 있는 배열 유형이 있는데, 이를 배열이라고 지칭한다.
C언어에서의 배열은 다음과 같다.
#include <stdio.h>
int main(){
int N[10];//크기가 10인 배열 선언
for(int i=0;i<10;i++){//10번 반복하여
scanf("%d",&N[i]);//입력을 받음
}
for(int i=0;i<10;i++){//10번 반복하여
if(N[i]%2==0)//해당 요소가 2로 나눠떨어지면(짝수이면)
printf(" %d",N[i]);//출력
}
return 0;
}자바스크립트는 C언어와 다르게 자료형에 있어 구분이 없다. 따라서 var 선언자를 이용하여 배열의 요소를 선언한다. 배열을 이용하면 다음과 같은 코드를 짧게 줄일 수 있다.
C언어는 변수를 선언할 때 변수의 자료형을 미리 지정해야 한다. 그리고 그 유형에 맞는 값만 변수에 저장해야 컴파일이 가능하다.
이러한 C언어의 특징은 프로그래밍의 불편함을 가져오기도 하나, 프로그래머가 직접 자료형을 제한하는 방식은 프로그램의 오류를 미연에 방지할 수 있다는 장점이 크다.
이러한 방식의 프로그래밍을 "강력한 자료형 체크"라고 한다.
이때, C언어와는 다르게 배열 요소 초기화에 있어 중괄호가 아닌 대괄호임을 유의하자.
<!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>
<style>
body{
font-size: 10;
text-align: center;
}
</style>
<h1>배열 실습</h1>
</head>
<body>
<script>
var arr = ["봄","여름","가을","겨울"];
for (let index = 0; index < arr.length; index++) {
document.write((index+1) + " 번째 계절은 " + arr[index] + " 입니다.<br>");
}
</script>
</body>
</html>배열 선언
<script>
var arr = ["봄","여름","가을","겨울"];
for (let index = 0; index < arr.length; index++) {
document.write((index+1) + " 번째 계절은 " + arr[index] + " 입니다.<br>");
}
</script>위 코드는 배열을 선언한 후 반복문을 이용하여 배열의 요소값을 출력한 코드이다.
해당 코드를 살펴보면, var arr = ["봄","여름","가을","겨울"]; 로 배열과 배열의 요소를 초기화한 것을 확인할 수 있다.
배열 안에 저장할 요소는 쉼표로 구분하여 선언하며 대괄호를 이용하여 배열의 범위를 선언할 수 있다. 이때 배열은 꼭 요소가 있어야만 하는 것이 아닌 배열만 선언할 수 있다.
반복문을 보게되면 배열의 인덱스를 이용하여 배열의 요 솟값에 접근하는 것을 볼 수 있다. 배열의 이름과 대괄호 안에 요소의 인덱스를 사용하여 배열의 요소에 쉽게 접근할 수 있다.
객체
객체는 사용방법이 조금 독특하다. C언어로 생각하면 구조체와 비슷하다.
객체는 여러 자료를 중괄호로 묶을 수 있으며, 여러 자료를 묶는다는 것은 배열과 비슷하지만 하나의 구조로써 사용하다는 점에서 차이점이 있다.
<!DOCTYPE html>
<html lang="kr">
<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>
var people = {
name : "old_cast1e",
age : 21,
school : "Sejong Univ"
}
</script>
</body>
</html>객체의 선언
아래 코드를 함께 보며 객체의 선언에 대해 알아보자.
<script>
var people = {
name : "old_cast1e",
age : 21,
school : "Sejong Univ"
}
</script>먼저 객체 선언에 있어 var 선언자를 이용한다.
선언자를 이용하여 객체를 선언하면 객체의 요소를 중괄호 안에서 선언할 수 있다. 이는 앞서 이야기한 C 언어의 구조체와 상당히 유사하다.
#include <stdio.h>
#include <string.h>
struct student {//구조체 정의
char name[10];//멤버 선언
int score;
}stu[5],*sp;//구조체 선언
단, C 언어와 자바스크립트의 객체(구조체) 선언에 있어 중괄호로 변수(혹은 요소 또는 멤버)를 선언할 수 있는 것은 동일하나 자바스크립트에서는 " : " 기호를 이용하여 요소를 선언함에 주의하자.
또한 자바스크립트에서 이미 자료형을 선언한 객체에서 변수의 자료형은 선언하지 않아도 된다. 이는 추후 포스팅에서 상세히 다루도록 한다.
'JavaScript > [theory]' 카테고리의 다른 글
| [제어문] #1. if문과 if-else문 (0) | 2022.09.29 |
|---|---|
| [변수와 자료형] #4. 연산자 (0) | 2022.09.26 |
| [변수와 자료형] #2-2. 변수를 사용한 예제(2) (0) | 2022.09.25 |
| [변수와 자료형] #2-1. 변수를 사용한 예제(1) (0) | 2022.09.25 |
| [변수와 자료형] #1. 변수와 <meta> 태그 (1) | 2022.09.21 |
