변수란 변하는 값을 저장할 수 있는 메모리 공간을 말한다. 데이터를 담을 수 있는 그릇이라고 생각하면 된다. 이 변수라는 그릇에는 오직 한개의 데이터만 저장할 수 있다. 만약 새로운 데이터가 들어오려고 한다면 기존에 있던 데이터를 없애고 마지막에 들어온 데이터만 남긴다.
// 예시
var num = 3;
var num = 10; // var로 다시 선언하면 앞전의 변수를 완전히 삭제한 것과 같다.
num = 10; // 변수값만 바꾸는 것이라면 var로 다시 부를 필요가 없다.
변수에 담을 수 있는 데이터 종류로는 '문자형 데이터(=string data)', '숫자형 데이터(=number data)', '논리형데이터(=bollean data)', '빈데이터(null datat)', 'undefined data' 가 있다.
변수 선언
변수를 사용할 준비를 하는 과정을 '변수 선언'이라고 하며, var 라는 키워드를 변수 앞에 붙여서 선안한다. 변수를 선언할 때에 변수명을 짓게 되는데 java script에서는 변수명을 짓는 규칙이 존재한다.
변수명 작성 시 주의사항
1
변수명에는 영문과 숫자, 일부 특수문자($_)만 쓸 수 있으며 한글은 사용할 수 없다.
2
첫 글자로는 $ _ 영문자만 올 수 있으며 숫자는 첫 글자로 쓸 수 없다.
3
변수명으로는 예약어(document, string, number...)를 사용할 수 없다.
** 예약어란 이미 자바스크립트에서 사용중인 키워드를 말한다.
4
첫글자로 대문자를 쓸 수 있는 변수명은 정해져 있다.
** 임의로 변수명의 첫 글자를 대문자로 적으면 오류가 발생할 확률이 높다.
5
단어와 단어의 조합으로 변수명을 지을 때에는 뒷 단어의 첫 글자를 대문자로 쓴다.
** 이 모양이 낙타 등과 비슷하다고 해서 '카멜 표기법' 이라고 한다. ex) userName
6
변수 명을 지을 때에는 최대한 의미에 맞는 이름을 짓는 것이 좋다.
변수를 선언할 때 기본형은 아래와 같다.
// 기본형
var 변수명;
var 변수명 = '값';
변수선언 기본형
var 변수명;
변수만 만든 상태로 아무런 값이 없는 상태.
var 변수명 = 값;
변수 안에 초기값을 넣어 초기화 한 상태.
var 변수명 = '값';
var 뒤에 변수명만 적었을 경우에는 변수만 만든 상태로, 그릇만 존재하는 경우이다. 그릇에 담을 데이터는 대입연산자(=)를 넣어 선언할 수 있다.
이때, 들어가는 데이터는 따옴표의 유무에 따라 숫자 혹은 문자로 판별한다. 콘솔창이 숫자와 문자를 구분하지 못하기 때문에 발생하는 상황인데, 만약 따옴표 안에 숫자가 들어가면 콘솔창은 이를 문자로 판단한다.
위의 규칙을 따라 선언된 변수명의
변수에 저장할 수 있는 자료형(data type)
자료형(data type)이란 데이터의 형태를 말한다. 변수에 담을 수 있는 자료형의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈 데이터(Null, undefined)가 있다.
1. 문자형 데이터 (String data)
문자나 숫자를 "큰따옴표"나 '작은따옴표'로 감싸고 있으면 문자형 데이터이다. 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식한다. 문자형 데이터에 숫자가 들어 있으면 이것을 '문자형 숫자'라고 부르며, 연산이 불가능하다.
// 기본형
var 변수명 = "문자/숫자"
// 예시
var str1 = "hello world";
document.write(str1, "<br/>");
var num = "1000";
document.write(num, "<br/>");
var tag = "<h2>제목입니다</h2>";
document.write(tag);
2. 숫자형 데이터 (Number data)
숫자형 데이터는 단어 의미 그대로 숫자를 뜻한다. 만약 '100'과 같이 따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터이다. 문자형 숫자를 다시 숫자로 변환하고 싶다면 Number('문자형 숫자')나 parseInt('문자형 숫자')를 이용하면 문자를 숫자로 바꿀 수 있다.
// 기본형
var 변수명 = 숫자;
// 예시
var num1 = 100;
console.log(num1);
var num2 = Number("100");
console.log(num2);
결과 값은 브라우저의 개발자도구(f12)안의 콘솔(Console)창에서 확인할 수 있다.
문자형 데이터와 숫자형 데이터를 구분하는 방법은 여러가지가 있는데 두가지를 소개해 보겠다.
// 예시
var num1 = 100;
console.log(num1);
var num2 = "100";
console.log(num2);
논리형 데이터에는 값이 두가지 밖에 없다. 이 두가지 값은 true(참) 또는 false(거짓)인데 이 데이터는 주로 두 개의 데이터를 비교할 때 사용한다. 결과값은 무조건 true 아니면 false 값이 나온다. Boolean() 메서드에 데이터를 입력하면 논리형 데이터인 true/false값을 반환한다. Boolean()메서드에 숫자0, null, undefined, 빈문자는 false값으로 그 이외의 모든 값을 true 값으로 반환한다.
//기본형
var 변수명 = true or false;
var 변수명 = 숫자 > 숫자;
var 변수명 = Boolean(문자 또는 숫자);
// 예시
// 변수값에 직접 true나 flase 값 입력하기
var bool = true;
console.log(bool);
bool = false;
console.log(bool);
// 10은 100보다 크지 않으니 false값이 나온다.
var bool2 = 10 > 100;
console.log(bool2);
// 일반 문자 값이 들어오면 true가 나온다.
var bool3 = Boolean("hello");
console.log(bool3);
// 빈문자가 들어오면 false가 나온다.
var bool3 = Boolean("");
console.log(bool3);
4. 빈 데이터( null & undifined data)
undifined는 변수에 값을 할당하기 이전에 들어있는 기본값이다. null은 변수의 저장된 값이 null이라는 뜻이며, 기존의 값을 비우기 위해서 사용한다.
// 기본형
var 변수명; // undefined가 할당된 상태.
var 변수명 = null // 기존 데이터를 비우는 것.
