-
자바스크립트의 변수, 자료형, 연산자 - Do It 자바스크립트 기본편프론트엔드 2019. 12. 25. 07:00
자바스크립트가 데이터를 어떻게 저장하고 관리하는지, 처리하는지 알아보자.
변수
변수(Variable) : 변하는 값을 저장할 때 사용
상수(Constant) : 변하지 않는 값
변수 선언 규칙
-
변수의 의미를 잘 나타낼 수 있는 이름으로 짓는다(무의미한 이름x)
-
낙타 표기법(Cammel Case)
-
첫 글자는 문자나 밑줄(_), 달러($)로 시작해야 한다. (그 후에는 문자, 밑줄, 달러, 숫자 사용가능)
◆ [ES6] : 변수를 선언할 때 var 예약어 외에 let(블록 안에서만 사용), const(상수) 예약어도 사용 가능.
자료형(데이터 타입)
자바스크립트는 변수를 선언할 때 데이터타입을 지정하지 않고 값을 할당할 때 그 값에 따라 데이터 타입이 결정됨.
→ 느슨한 자료형 체크(Weak Data Type Check)
C언어, 자바 등 강한 자료형 체크(Strong Data Type Chek) 언어는 변수를 선언할 때 데이터 타입을 미리 지정해야함.
이렇게 데이터 타입을 프로그래머가 제한하면 프로그램의 오류를 미리 방지할 수 있다.
따라서 자바스크립트와 같은 Weak Data Type Check 언어를 사용할 때는 오류가 발생하지 않도록 변수에 의도한 값이 정확하게 들어갔는지 꼭 확인해야 한다.
*타입스크립트(Typescript) : 자바스크립트에 Strong Type을 추가한 언어로, 자바스크립트가 웹 문서에 동적인 효과를 추가하기 위해 등장한 '가벼운 언어'에서 큰 규모의 웹 사이트나 애플리케이션도 만들 수 있는 언어가 되면서 Strong Type Check의 필요성이 커져서 등장한 언어이다.
1) 데이터 타입의 종류
기본형 : 하나의 변수에 하나의 값 저장
number : 35
string : 'a', "abc", "35"
boolean : true, false 두 가지 값만 가짐
undefined : 데이터 타입을 지정하지 않았을 때
null : 값이 유효하지 않을 때
복합형 : 하나의 변수에 여러 개의 값 저장
array(배열), object(객체)
2) 데이터 타입 확인 - typeof 연산자
console.log(typeof 1990); > "number"
데이터타입
1) 정수(number)
표현 방식에 따라 10진수, 8진수, 16진수로 나누기도 함.
8진수 : 0~7로 표현. 10진수와 구별하기 위해 숫자0을 맨 앞에 붙임. ex) 012(10), 013(11), 02000(512)
16진수 : 0~9와 A~F(a~f)로 표현. 10진수와 구별하기 위해 0x(0X)를 맨 앞에 붙임.
2) 실수(number)
실수를 계산할 때는 정밀도에 주의해야 함. ex) 0.1 + 0.2 = 0.30000…4
2진수로 변환해 계산하는 과정에서 0.1과 0.2가 자릿수가 많은 소수로 변환되고, 그 상태에서 연산을 하기 때문
3) 문자(string)
: 작은 따옴표(')나 큰 따옴표(")로 묶은 데이터.
큰 따옴표(작은 따옴표)의 중복 X
"<span class="num">" X
"<span class='num'>" O
4) 논리형(Boolean)
true / false 두 가지 값만 가지는 데이터 타입.
5) undefined와 null
자바스크립트는 변수를 선언할 때 데이터타입을 지정하지 않고 값을 할당할 때 그 값에 따라 데이터 타입이 결정된다.
undefined : '처음부터 변수에 값이 할당되지 않았다'(값이 할당된 적이 없다)는 뜻. (변수가 undefined라는 데이터타입을 가진다는 의미가 아님.)
null : '처음에 할당된 값이 더는 유효하지 않다'는 뜻. 보통 변수를 초기화할 때 많이 사용.
6) 배열(array)
배열의 선언
var addValue = [];
var seasons = ["봄", "여름", "가을", "겨울"];
배열의 인덱스
seasons[0]
배열의 길이
seasons.length
7) 객체(object)
var book = { title : "Do It! 자바스크립트", writer : "고경희", price : 18,000 }
연산자
1) 기초 산술 연산자
+, -, *, / 사칙 연산자
% 나머지 연산자
++, — 증감 연산자
※증감 연산자는 사칙 연산자, 나머지 연산자(피연산자의 개수 최소 두 개 이상)와 달리 피연산자의 개수가 하나이며,
다른 연산자와 함께 사용할 수 있는 연산자이다.
2) 할당 연산자(Assignment Operator, =)
y += x; y = y + x; //두 식은 같은 의미이다.
3) 더하기 연산자(숫자를 더할 때) / 연결 연산자(문자열을 연결할 때)
문자열과 숫자의 연산 :
자바스크립트에서는 서로 다른 데이터 타입의 피연산자를 연산하면
자동으로 데이터타입을 변환하여 피연산자들의 데이터 타입을 통일하고,
결괏값의 데이터 타입을 지정해 준다.
◆ [ES6] : '템플릿 문자열' 도입.
`원래 가격은 ${originPrice}원 입니다.`;
` : 백 쿼트, 백 틱, 그레이브 등으로 부름.
4) 비교 연산자
== 연산자와 === 연산자의 차이
== 연산자 : 자동으로 데이터타입 변환해 비교. 데이터 타입이 달라도 값이 같으면 (ex- 10과 '10') true
=== 연산자 : 데이터타입의 변환 허용X. 값과 데이터 타입이 모두 일치해야 true
*문자와 문자의 크기를 비교할 경우, 각 문자의 아스키 값으로 비교한 결과값을 얻게 된다.
5) 논리 연산자
true, false를 피연산자로 하는 연산자.
&& (AND 연산자), || (OR 연산자), ! (NOT 연산자)
6) 연산자의 연산 순서
단항 연산자(!, ++, --) → 산술 연산자 → 비교 연산자 → 논리 연산자 → 할당 연산자
*단항 연산자 중 ++, -- 의 경우 피연산자 앞에 오면 다른 연산자보다 먼저 연산하고, 피연산자 뒤에 오면 다른 연산을 끝낸 후 연산한다.
a++ 전체 수식의 처리가 끝난 후 적용
++a 전체 수식을 처리하기 전에 적용
※ 출처 : Do It 자바스크립트 기본편, 3장 변수와 자료형 그리고 연산자
'프론트엔드' 카테고리의 다른 글
자바스크립트 함수, 스코프, 이벤트 - Do It 자바스크립트 기본편 (0) 2019.12.31 자바스크립트 제어문 - Do It 자바스크립트 기본편 (0) 2019.12.26 자바스크립트 소스 작성하고 실행하기 - Do it 자바스크립트 기본편 (0) 2019.12.24 자바스크립트와 웹 프로그래밍 - Do it 자바스크립트 기본편 (0) 2019.12.19 레이아웃 따라 만들기 - HTML/CSS (0) 2019.12.18 -