이번에는 변수와 기본 자료형에 대해서 알아보겠습니다.
변수란?
✔️ 변수 (Value)
: 자료형을 담을 수 있는 공간
변수는 컵과 같다고 생각하시면 됩니다.
무언가를 담을 수 있는 곳이며, 만약 새로운 것을 담고 싶다면 이전에 있던 것을 들어내야 합니다.
만약 물을 마셨다가 커피를 마시고 싶다면 물을 버리고나서 컵에 커피를 담아야 겠지요.
변수도 이와 마찬가지로 새로운 것을 담으려면 새롭게 갱신을 해야합니다.
이러한 JavaScript 변수에는 몇 가지의 규칙이 있습니다.
1. 언더스코어 (_) , 달러 기호 ($), 문자가 첫글자로 와야한다.
2. 키워드 (keyword) 를 사용하면 안된다.
3. 공백 문자를 포함할 수 없다.
그리고 보기 좋고 이해하기 쉬운 변수를 만들기 위해서 JavaScript 프로그래머간의 몇 가지의 약속도 존재합니다.
1. 의미가 있으며 이해하기 쉽게 쓸 것.
2. 변수나 함수의 이름은 항상 소문자로 시작할 것.
3. 낙타 기법을 사용할 것. ex) addClick
위의 약속은 지켜도 되고 지키지 않아도 되지만 지키면 아무래도 좋겠죠. 😁
변수의 선언과 할당
변수를 사용하려면 우리는 2가지의 단계가 필요합니다.
1. 변수를 선언하기
2. 변수에 값을 할당하기
var name; // 변수를 선언하다.
name = "허난설헌"; // 변수를 할당하다.이렇게 변수를 생성하여 변수를 사용할 수 있습니다.
변수를 만드는 것을 '선언하다' 라고 표현합니다. 또한, 변수에 값을 담는 것을 '할당하다' 라고 표현합니다.
변수의 초기화
프로그래밍 언어를 배우면서 변수를 초기화한다는 말을 많이들 들어보셨을 겁니다.
변수의 선언과 동시에 할당하는 것을 '초기화하다' 라고 말합니다. 예를 들면 아래와 같습니다.
var name = "허난설헌"; // 변수를 초기화하다.
여러 변수 한번에 선언하기
JavaScript 에서는 여러 변수를 한번에 선언할 수도 있습니다.
var name, age;
name = "허난설헌";
age = "30";이와 같이 변수에는 여러가지 자료형이 담길 수 있으며 이는 문자, 숫자, 객체 등등이 있습니다.
아래에서 변수의 자료형에 대해서 알아보도록 하겠습니다.
JavaScript 자료형
자료형이란 컴퓨터가 처리하는 데이터의 형태를 이릅니다.
| 분류 | 자료형 | 설명 |
| 기본형 | number (숫자) | 정수, 실수 표기 가능 (복소수 x) |
| string (문자) | ' ' 혹은 " " 와 같은 따옴표 사이에 문자를 넣어 표기 가능 | |
| boolean (논리) | true, false 의 논리형 표기 가능 | |
| undefined | 값이 없음을 표기 (묵시적) | |
| null | 값이 없음을 표기 (명시적) | |
| 복합형 (참조형) | array (배열) | 여러 자료형을 함께 저장할 수 있는 리스트 형식 표기 가능 |
| object (객체) | 함수와 속성이 함께 포함된 유형 |
숫자형 (Number)
var num1 = 20;
var num2 = 1.835;
console.log(typeof(num1));
console.log(typeof(num2));number
number정수와 실수를 표현할 수 있습니다. (JavaScript 에서는 복소수는 표시하지 못합니다.)
문자형 (String)
var str1 = "h";
var str2 = '안녕하세요';
console.log(typeof(str1));
console.log(typeof(str2));string
string'' (작은 따옴표) 와 "" (큰 따옴표) 를 사용하여 문자/문자열을 나타낼 수 있습니다.
문자는 한글, 알파벳, 숫자, 유니코드, 특수문자, 이스케이프 문자 등 여러가지 문자들이 들어올 수 있습니다.
논리형 (Boolean)
var bool1 = true;
var bool2 = false;
console.log(typeof(bool1));
console.log(typeof(bool2));
console.log(true == 1);
console.log(false == 0);boolean
boolean
true
truetrue 나 false 같은 논리형을 변수에 담을 수 있습니다. 대문자 True 가 아닌 소문자로 시작하는 true 여야 인식합니다.
또한 논리값은 1과 0 숫자에도 상응합니다. true 는 1과 동일하며 false 는 0과 동일합니다.
따라서 만약 while 문을 사용해서 무한루프를 돌린다면 while (true) 부분에 1 을 넣어 사용해도 됩니다.
console.log(25 < 26);
console.log(25 > 26);
console.log('가방' > '나무');
console.log('二' == '二')true
false
false
true논리형을 사용할 수 있으니 값을 비교할 수 있으며 특수문자도 비교가 가능합니다.
또한 한글도 가나다 순으로 비교하여 논리값을 표현할 수 있습니다.
가나다순으로 보자면 가방 보다 나무가 뒤에 오는 한글이므로 나무가 가방보다 크게 됩니다.
undefined 형
var val1 = undefined;
console.log(typeof(val1));
console.log(val1);undefined
undefined이는 아직 변수에 값이 없음을 뜻합니다. 하지만 이는 묵시적으로 행해집니다.
그 이해는 아래와 같습니다.
// 선언하지 않은 변수
console.log(val1);
// 선언했지만, 초기화하지 않은 변수
var val2;
console.log(val2);undefined
undefined이렇듯 선언하지 않은 변수 혹은 변수를 선언했지만 초기화하지 않았을 때 해당 변수의 값은 undefined 로 초기화 됩니다.
즉, 변수를 선언만 하더래도 undefined 자료형을 얻게 되는 것입니다.
null 형
var val1 = null;
console.log(typeof(val1));objectnull 형도 undefined 와 같이 값이 없음을 나타내지만, 이는 명시적으로 값이 없음을 뜻합니다.
typeof() 함수로 확인해보면 object 값이 뜨지만 null 형도 자료형입니다.
이는 여담으로 자바스크립트 typeof() 함수의 초기 버전의 버그라고 합니다. 하지만 고치치 않는 이유는 여타 많은 기존의 웹사이트 들이 typeof() 함수를 사용하고 있기 때문에 고치면 위험하기 때문이라고 합니다.
따라서 null 형식을 알아보기 위해서는 일치 연산자를 사용해야 합니다.
var val1 = null;
console.log(val1 === null);true확인해보면 true 값이 뜹니다.
배열형 (Array)
var arr = [1, '한글', 'a', 10, [1,2,3]]
console.log(arr);
console.log(typeof(arr));(5) [1, '한글', 'a', 10, Array(3)]
object[] (대괄호) 안에 여러가지 자료를 담아 배열로 표기할 수 있습니다. 또한 배열 안에 배열도 넣을 수 있습니다.
타입을 확인하면 object 형으로 나타내집니다.
객체형 (Object)
var ob1 = {'key1': 1,
20: 'value2',
'key3' : [1,2,3]};
console.log(ob1);
console.log(ob1['key1']);
console.log(typeof(ob1));{20: 'value2', key1: 1, key3: Array(3)}
1
object{} (중괄호) 를 사용하여 키-값 쌍으로 자료를 담을 수 있습니다. json 파일로 자주 사용합니다.
다음과 같이, object[키] 이렇게 키를 사용하면 값을 꺼내올 수 있습니다.
기본 예제
나이 계산 하는 프로그램
<!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>
<style>
body {
font-size: 1.3rem;
text-align: center;
}
.btn {
background-color: darkcyan;
color: white;
padding: 10px;
}
</style>
<body>
<h1>2.변수와 기본 자료형</h1>
<!-- 버튼 클릭 시 calc() 함수 호출 -->
<button class="btn" onclick="calc()">나이 계산</button>
<p id="result"></p>
</body>
<script>
// calc() 함수 구현
function calc() {
// 올해 년도 변수에 저장
var currentYear = 2022;
// 사용자로 부터 나이를 입력받아 birthYear 변수에 저장
// prompt() 함수 사용
// prompt(입력메세지, 디폴트 문자)
var birthYear = prompt(
"태어난 연도를 입력하세요.",
"YYYY" // YYYY 라고 입력창에 뜬다.
);
var age; // 사용자의 나이
age = currentYear - birthYear + 1; // 한국형식 나이 계산
// docuemnt 는 웹 브라우져 페이지를 의미한다.
// querySelector() 는 선택자(selector) 를 찾는다.
// 웹 브라우져 내의 id 선택자 값이 result 인 요소를 찾는 것이다.
// innerHTML 은 대입한 값으로 html 문서에 대체한다.
// #result 에 표시한다.
document.querySelector("#result").innerHTML =
"당신의 나이는 " + age + "세 입니다.";
}
</script>
</html>
#자바스크립트 변수
#자바스크립트 자료형
#JavaScript 변수 자료형
'🧑💻 𝗣𝗿𝗼𝗴𝗿𝗮𝗺𝗺𝗶𝗻𝗴 > JavaScript' 카테고리의 다른 글
| JavaScript 특정 키, 값 찾기 - 검색 기능 (0) | 2022.03.30 |
|---|---|
| JavaScript var, let, const 변수 (0) | 2022.02.20 |
| JavaScript 기초 입력 및 출력 (0) | 2022.01.29 |