변수에 저장할 수 있는 자료형
우리가 컴퓨터에게 일을 시킬 때는 '10'이 숫자이고 '안녕하세요'는 문자라는 것을 각각 알려줘야 처리할 수 있다. 이처럼 컴퓨터가 처리할 수있는 자료의 형태를 자료형이라고한다. 즉 자료형(Data type)이란 '데이터의 형태'를 뜻한다.
var 변수명 = Data type
자바스크리브의 자료형은 숫자, 문자열, 논리형과 같은 기본 유형과 배열,객체를 다루는 복합 유형 그리고 undefined,null 같은 특수 유형이 있다.
📖자료형의 기본유형
변수에 담을 수 있는 자료형의 기본유형으로는 문자형(string),숫자형(Number),논리형(Boolean),빈데이터(Null, undefined)가 있다.
1.문자형 데이터(string)
문자형 데이터는 문자나 숫자를 ""큰 따옴표나 ''작은 따옴표로 감싸고 있으면 문자형데이터이다.
[기본형]
var 변수명="문자 또는 숫자";
예시)
🔍위와 같이 문서에 변수명의 값을 확인하고 싶을 때는 document.write로 출력해본다.
br태그를 함께 넣어주면 띄어쓰기를 사용할 수있다.
문자형 데이터에 HTML태그를 포함하여 출력하면 태그로 인식한다. 이때 쉼표(,)로 변수명과 구분한다.
2.숫자형 데이터(Number)
숫자형 데이터는 단어 의미 그대로 숫자를 뜻한다. 만약'100'과 같이 큰 따옴표가
숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터이며,
🔍문자형 숫자를 숫자형 데이터로 바꾸고싶을 경우,
*Number('문자형 숫자')를 이용하거나 또는 parseInt('문자형 숫자')를 사용하면 문자를 숫자로 바꿀 수 있다.
[기본형]
var 변수명 = 숫자;
var 변수명 = Number('문자형 숫자')
위의 이미지에서 변수 num2는 숫자 15를 콘솔창에 출력한다.
3.논리형 데이터(Boolean)
논리형 데이터는 불린유형이라고도 하며, true(창)이나 false(거짓)의 값을 표현하는 자료형이다. 어떤 조건을 확인해서 그 조건이 맞으면 true 맞지않으면 false의 결괏값을 나타낸다. 이 데이터는 주로 두 개의 데이터를 비교할때 사용한다.
그래서 결과값은 무조건 true아니면 false값이 나온다.
Boolean()메서드에 데이터를 입력하면 논리형 데이터인 true 또는 false를 반환한다.
Boolean()메서드에서는 0,null,undefined,""(빈문자)를 제외하고 모든 값을 true로 반환한다.
[기본형]
var 변수명 = true or false;
var 변수명 = 숫자 > 숫자;
var 변수명 = Boolean(문자 또는 숫자)
예를들어 회원가입시에 연도비교를 할 때 사용한다.
*console 창에서는 숫자와 문자형 데이터를 쉽게 구분할 수있는데 숫자형 데이터의 경우 파란색으로 나온다.
*콘솔창의 오른쪽을 보면 html에 위치를 알 수있다.
4.빈데이터 null & undefined
undefined는 변수에 값을 할당하기 이전에 들어있는 기본값. 변수값이 지정되지 않은 상태
null은 변수에 저장된 값이 null이라는 뜻이며, 기존의 값을 비우기위해 사용한다. (휴지통)
[기본형]
var 변수명; => undefined가 할당된 상태.
var 변수명 = null =>기존 데이터 비움
✔typeof
지정한 데이터 또는 변수에 저장한 데이터의 자료형을 알고싶을때
사용한다.
[기본형]
typeof 변수명 또는 자료형;
*변수 이름 지을 때 주의사항
- 변수명의 첫 글자로는 $,_,영문자만 올 수 있다.
- 변수명의 첫 글자 다음으로는 영문자, 숫자, $,_만 올 수 있다.
- 변수명으로는 예약어(document,string,number...)를 사용할 수 없다.
예약어란 이미 자바스크립트에서 사용중인 키워드를 말한다. - 변수명을 지을때에는 되도록이면 의미를 부여해서 짓는것이 좋다.
- 변수명을 사용할때에는 대/소문자를 구분해야한다.
배열
위에서 설명한 기분유형 자료형과 달리 배열은 하나의 변수에 값을 여러개 저장할 수있다. 배열은 여러 개의 데이터 값을 하나의 배열 이름으로 묶어서 선언한다.
기본형
배열명["값1","값2',...]
배열명[]>빈 배열선언
이때 데이터 옆에는 번호0~3이 표시되는데 이 번호를 인덱스라고 하며 각 요소의 번호를 가리킨다.
연산자
초등학교때 배웠던 +,-,*(곱하기),/(나누기),%(나머지)를 이용해서 연산을
할 수 있다. 자바스크립트에서는 여러 연산자가 있는데 산술,문자결합, 대입(복합대입),
증감,비교,논리,삼항 조건 연산자가 있다.
산술연산자
산술 연산자는 사칙연산과 같다. +,-,*(곱하기),/(나누기),%(나머지)가 바로 산술 연산자다.
산술연산을 하기 위해서는 반드시 연산 대상 데이터(=피연산자)가 반드시 두 개 있어야 한다.
var num1 = 1;
var num2 = 10;
var sum1 = num1 + num2;
document.write(sum1);
문자결합연산자
문자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터이다. 여러 개의 문자를 하나의 문자형
데이터로 결합할 때 사용한다. 기호는 +(더하기)를 사용한다.
문자 결합 연산자는 피 연산자로 문자형데이터가 한 개라도 포함되면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 변환되고 문자 결합이 이루어지면서 하나의 문자형데이터로 반환된다. 그래서 중간에 숫자나 boolean데이터가 들어있어도 문자형으로 반환된다.
+연산기호는 앞에 있는 데이터 순서대로 더해진다.
즉, 피연산자가 숫자이고 숫자가 여러 개 있으면 숫자끼리 먼저 더해진 후
문자를 만나면 그 다음부터 문자결합이 이루어진다.
숫자형데이터가 포함되어 있어도 문자데이터 이후부터 문자형으로 반환된다.
대입연산자(=할당연산자)
할당연산자는 연산자(또는 연산식) 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자로 대입연산자라고도 한다.
대입 연산자는 연산된 데이터를 변수에 저장할 때 사용하며 '오른쪽에 있는 값을 변수에 넣는다.'라는 의미이다.
[기본형]
A=B
복합대입연산자(+=,-=,*=,/=,%=)
산술연산자와 대입연산자가 복합적으로 적용된 것을 말한다.
[종류]
1. A += B => A = A + B (A는 A와B를 더한 값이다.)
2. A -= B => A = A - B (A는 A와B를 뺀 값이다.)
3. A *= B => A = A B (A는 A와B를 곱한 값이다.)
4. A /= B => A = A / B (A는 A와B를 나눈 값이다.)
5. A %= B => A = A % B (A는 A에서 B를 나눈 나머지 값이다.)
var num1 = 10;
var num2 = 3;
num1 += num2; // 10+ 3 => num1 =13;
num1 -= num2; // 13 - 3 =>num1 =10;
num1 *= num2; // 10 * 3=>num1 =30;
num1 %= num2; // 30/3=10...0=> num1 = 0;
num1의 값은 계속 바뀌고 있다.