프론트엔드

자바스크립트의 변수, 자료형, 연산자 - Do It 자바스크립트 기본편

seomoon 2019. 12. 25. 07:00

자바스크립트가 데이터를 어떻게 저장하고 관리하는지, 처리하는지 알아보자.

 

변수

변수(Variable) : 변하는 값을 저장할 때 사용

상수(Constant) : 변하지 않는 값

변수 선언 규칙

  1. 변수의 의미를 잘 나타낼 수 있는 이름으로 짓는다(무의미한 이름x)

  2. 낙타 표기법(Cammel Case)

  3. 첫 글자는 문자나 밑줄(_), 달러($)로 시작해야 한다. (그 후에는 문자, 밑줄, 달러, 숫자 사용가능)

◆ [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장 변수와 자료형 그리고 연산자

 

저작자표시