자바스크립트 변수 선언, 자료형, 연산자

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

변수 알아보기

변수
프로그램을 실행하는 동안 바뀔 수 있는 데이터를 말한다.

변수 선언 규칙

변수를 사용하기 위해서는 구별할 수 있도록 이름을 선언해야하고, 이를 변수 선언이라 말한다.

 

1. 변수 이름은 영어, 언더스코어(_), 숫자를 사용
첫 글자에는 숫자가 들어갈 수 없고, 단어 사이에 띄어쓰기는 사용이 불가하다.

 

2. 예약어는 변수 이름으로 사용 불가
var와 같은 예약어는 변수 이름으로 사용할 수 없고, 영어 대소문자를 구별하여 인식한다.

 

3. 두개 이상 단어를 연결할 때는 중간에 대문자를 섞어 사용
두 단어 이상인 이름은 var totalArea =처럼 중간에 대문자를 섞어 사용한다

필수는 아니지만, 많은 개발자들이 이 방법을 사용한다.

 

4. 변수 이름은 의미있게 작성

코드를 작성할 때 수 많은 변수를 지정하기 때문에 헷갈릴 수 있다. 따라서 변수 이름만 보고 어느정도 유추할 수 있도록 작성해야한다.

변수 선언

변수 선언 방법에는 var 예약어를 사용한다. 또한 '='기호를 통해 값을 할당한다.
선언과 값 할당은 같이 할 수 있고 따로 할 수도 있다.

var birthYear ;
birthYear = 1996 ;  // 따로 선언

var birthYear = 1996 ; // 한 번에 선언

자료형

컴퓨터가 처리할 수 있는 자료의 형태를 자료형이라 말한다. 예로 1000은 숫자이고 '하이'는 문자라는 것을 알려줘야 하는 것이다.

1. 기본 유형

종류	설명
숫자형	따옴표(' , ")없이 숫자로만 표기
문자열	따옴표(' , ")로 묶어서 표기
논리형	true, false라는 2가지 값만 있는 유형

숫자열
다른 언어와 다르게 자바스크립트에서는 실수와 정수 둘다 숫자열로 구분한다.

다만 실수를 계산하는 값은 정확하지 않기 때문에 주의해야 한다.

 

문자열

따옴표(' , ")로 묶은 데이터를 말한다. 숫자도 따옴표(' , ")로 묶었다면 문자열로 인식한다.
만일 큰따옴표( "" )안에 입력한다면 작은따옴표( '' )를 사용한다.

 

논리형

불린(boolean)유형이라고도 말하며, 참과 거짓 값을 표현하는 자료형이다.

 

 

2. 복합 유형

종류	설명
배열	하나의 변수에 여러 값을 저장
객체	함수와 속성을 함께 포함

배열

하나의 변수에 여러 값을 저장할 수 있다. 이때 데이터 값을 쉼표(,)로 구분하여 대괄호로 묶는다.

var season = ["봄", "여름", "가을", "겨울"]

이때 앞에 나열한 순서부터 0번을 부여받는다.
season[0] = "봄"
season[2] = "가을"

 

 

3. 특수 유형

종류	설명
undefined	자료형이 지정되지 않았을 때 상태
null	값이 유효하지 않는 상태

연산자

연산자는 프로그램에서 특정항 동작을 하도록 지시하는 기호이다.
크게 산술 연산자, 할당 연산자, 연결 연산자, 비교 연산자 등이 있다.

 

 

1. 산술 연산자
   우리가 흔히 수학 계산에 사용하는 연산자이다. 기호 양 옆에 있는 값을 피 연산자라 하며 숫자나 변수가 위치한다.

종류	설명
+ , - , * , /	수학 계산이랑 동일하다
%	첫 번째 값을 두 번째 값으로 나눈 나머지
++	피연산자를 1씩 증가
--	피연산자를 1씩 감소

==, - - 연산자는 위치에 따라 값이 달라질 수 있다.
var a = 10 ; var b = a++ + 5여기서 b = 15값이 나온다. 반면
var a = 10 ; var b = ++a + 5여기서는 b = 16값이 나온다.
연산자가 앞에 있을 경우에는 값을 계산한 후 식을 진행하고 변수나 숫자 뒤에 나올 경우 계산식을 진행한 후 a 변수를 다시 지정하는 것이다.

 

 

2. 할당 연산자

오른쪽 식을 왼쪽 변수에 할당하는 연산자를 말한다.

종류	예시 설명
=	y = x + 3 오른쪽 값을 y 변수에 할당
+=	y = y + x 와 동일
-=	y = y - x 와 동일
*=	y = y * x 와 동일
/=	y = y / x 와 동일
%=	y = y % x 와 동일

3. 연결 연산자

둘 이상의 문자열을 합쳐 하나의 문자열로 만드는 연산자. 기호는 +를 사용한다.
document.write (birthYear + "년에 태어난 사람의 나이는" + age + "세입니다.");

 

 

4. 비교 연산자

피연산자 2개를 비교해서 참이나 거짓으로 결괏값을 나타내는 연산자

종류	예시 설명
==	같으면 true
===	자료형까지 같으면 true
!=	같지 않으면 true
!==	자료형까지 같지 않으면 true
<	오른쪽보다 작으면 true
<=	오른쪽보다 작거나 같으면 true
>	오른쪽보다 크면 true
>=	오른쪽보다 크거나 같으면 ture

== vs === , != vs !==

둘다 비슷해 보이지만, === 경우 문자열까지 비교를 한다.

3 == "3" //true
3 === "3" // false

비교 연산자에서는 문자열도 비교가 가능하다. 비교 방법은 문자열을 아스키값으로 변환하여 비교한다.

 

 

5. 논리 연산자

true, false값을 처리하는 연산자이다.

종류	예시 설명
|| (or연산자)	피연산자 중 하나만 true여도 true
&& (and연산자)	피연산자 모두 true일 경우 true
! (not연산자)	피연산자의 반댓값을 지정