Do it : JS -3.변수, 자료형, 연산자

변수

-변하는 값을 저장할 때 사용한다

-상황에 따라 다른 값을 입력받아야 할 때 사용한다

ex. 나이=올해 연도 - 태어난 연도 +1

-변수(Constant) : 나이, 올해 연도, 태어난 연도

-상수(Variable): 1

 

변수를 선언하는 규칙 3가지

-변수에 이름을 붙이는것 = 변수를 선언한다

-var 키워드 뒤 + 변수 이름 적기  ex. var apple;

 

규칙 1. 이름은 의미 있게 짓는다 ex. 올해 연도 currentYear

규칙 2. 여러 단어 연결한 이름 : 낙타 표기법(Camel Case) : 두 번째 단어부터는 대문자로 시작

규칙 3. 선언 불가한 이름 있음 = 변수의 첫글자 : 문자, 밑줄(_), 달러($)로 시작해야한다

 

변수에 값 | 식 지정하기

-변수를 선언하면서 저장  var apple="yummy";

-변수를 선언한 다음에 저장  var banana;  banana="long and yummy";

-변수에 식을 지정할 경우, 식에 변수는 미리 선언해야 함

  var apple=2000;  var banana=10000;

  var total=apple+banana

 

나이 계산 프로그램 만들기

변수 선언하기

-태어난 연도, 올해 연도, 계산할 나이를 저장할 변수 선언

-변수에 값 | 식 저장

-계산한 나이 출력하기 = 문서(document)에서 선택자를 사용하여(querySelector) id 값이 result인  태그("#result")를 선택하고 HTML에 삽입한다(innerHTML).

 

사용자 입력값 변수에 할당하기

-태어난 연도를 입력받을 수 있도록 prompt() 함수를 지정한다

prompt()함수로 값을 입력받아 변수에 할당한다 = 사용자가 값을 입력하게 한다

 

 

[ES6] let rhk const 예약어

-let 으로 선언한 변수는 블록{}으로 묶은 범위를 벗어나면 사용할 수 없다

-const 는 상수 값을 선언할 때 사용한다

 

---

자료형=데이터 타입

-변수에 저장하는 값의 형태

-컴퓨터가 처리하는 자료의 형태

-종류 : 기본형(값이 하나), 복합형(여러값을 한꺼번에 담는다)

기본형	number (숫자)	따옴표X
	string (문자열)	작은 따옴표, 큰 따옴표
	boolean (논리형)	참, 거짓 2가지 값
	undefined	자료형 지정 안했을 때 유형, 변수를 선언만 하고 정의하지 않을 때
	null	값이 유효X
복합형	array (배열)	하나의 변수에 여러값
	object (객체)	함수와 속성 함께

 

자료형 확인 방법 : typeof 연산자

-자바스크립트는 변수에 저장하는 값에 따라 자료형이 결정됨

 

 

숫자형 - 정수

-소수점 없는 숫자가 정수임

-유형: 10진수, 8진수, 16진수

8진수 (0을 맨 앞에 붙인다) : 012, 013  [10, 11]

16진수 (0x를 맨 앞에 붙인다,대소문자 모두 가능) : 0xfff [4095? 65535?]

 

숫자형 - 실수

-소수점 있는 숫자가 실수임

-정수, 실수 모두 number

-2진수로 변환해서 계산하는데 자릿수가 많은 소수로 변환된다 (0.1+0.2=0.30000000000000004)

-정밀하게 숫자를 계산하는 프로그램을 만들 때는 항상 주의한다

 

문자형=스트링

-작은 따옴표, 큰 따옴표로 묶은 자료

-큰 따옴표 안에 큰 따옴표로 묶은 문장을 넣는 방법 : 작은 따옴표로 바꾸어준다.

 

논리형

-참, 거짓으로 표현하는 자료형

-조건을 확인할 때 많이 사용한다

ex. age 변수에 담긴 값이 20보다 크다면 성인이고 작다면 미성년자 : age>20 조건

 

undefined 와 null

-처음부터 변수에 값이 할당되지 않았다 =undefined

-처음에 할당된 값이 더는 유효하지 않다 =null

-second는 할당한 값이 10에서 null로 변한다. 기존값 10이 더는 유효하지 않다.

-null은 변수를 초기화할 때 많이 사용한다.

 

배열

-하나의 변수에 여러 값을 저장

-자료를 쉼표로 구분해서 대괄호로 묶는다

-빈 배열도 배열을 선언한 것이다

인덱스

-배열의 특정 값을 가져온다

-배열 이름만 = 배열 내용 전체 가져옴

-배열 이름+대괄호 안에 0~정수 = 해당 위치 값만 가져옴

-이때 사용한 0,1,2를 인덱스라고 한다

객체

-여러 자료를 중괄호{ }로 묶을 수 있다.

-키(key) : 값(value) 한 쌍으로 짝짓는다.

-여러줄을 입력할 땐 shift+enter

 

 

자바스크립트 자료형의 특징

-C언어 : 변수 사용할 때 자료형 미리 지정, 유형에 맞는 값만 변수에 저장

-강력한 자료형 체크 : 오류를 미리 방지

-자바스크립트 : 미리 변수의 자료형 지정하지 않는다.

-느슨한 자료형 체크 : 변수에 의도한 값이 정확하게 들어갔는지 확인

 

타입스크립트

-자바스크립트에 강한 유형(Strong Typing)을 추가한 것이다.

 

---

연산자

기초 산술 연산자

사칙 연산자	더하기	+	더한다
	빼기	-	뺀다
	곱하기	*	곱한다
	나누기	/	나눈다
나머지 연산자	나머지	%	나눈 나머지 값
증감 연산자	증가	++	변숫값을 1만큼 증가
	감소	--	변숫값을 1만큼 감소

연산자와 피연산자

-연산자: + - / * 등

-피연산자: 연산의 대상

 

나머지 연산자

15%2;    1

 

증감 연산자

-피연산자 뒤에 있을 때 : 전체 수식의 처리가 끝난 다음 적용

-피연산자 앞에 있을 때 : 전체 수식을 처리하기 전에 적용

 

할인 가격 계산 프로그램- 연산자 활용

'원래 상품의 가격은 10000원이고, 할인율은 25%입니다' 문구가 출력된다.

 

할인 가격 계산 프로그램 - 입력한 값 받아오기

-원래가격, 할인율을 입력하는 입력상자(<input>)는 사용하자

-HTML문서에서 선택자로 id가 oPrice 태그를 선택하여(document.querySelector("#oPrice")) 그 안의 값(value)을 가져와 각각의 변수에 할당한다

-할인 가격, 할인된 가격을 출력하는 변수와 식을 입력한다

---

연산자 응용

 

할당 연산자 (=)

-산술 연산자(+ - * / %)와 조합해서 사용 가능하다

-변수(x,y)를 사용하여 산술 연산자(+)를 한 번 더 사용

+=	y+=x	y=y+x
-=	y-=x	y=y-x
*=	y*=x	y=y*x
/=	y/=x	y=y/x
%=	y%=x	y=y%x

 

더하기 연산자 vs. 연결 연산자 구별

-연결 연산자 : 문자열을 더할 때 사용

 

[ES6] 템플릿 문자열

-연결X 문자열 안에 값을 끼워 넣는다O

-문자열은 백 쿼트( ` )로 묶고, 값이 들어가는 부분은 ${ }사이에 표시한다.

문자형 과 숫자형 연산

+ : 연결 연산자

- * / % : 산술 연산자

 

비교 연산자

-true 나 false로 결과값

-조건문에서 많이 사용

 

==와 != 연산자

== : 두 수(변수)가 같은지 확인

!= : 두 수(변수)가 다른지 확인

 

< 와<=,  >와>= 연산자

더 작은지(작거나 같은지) 확인

더 큰지(크거나 같은지) 확인

 

==와 === 연산자

== : 자동으로 자료형을 변환

=== : 자료형의 변환 허용X

문자끼리 비교 - 아스키 값

-컴퓨터에서 문자형을 숫자형에 일대일 대응한 값

-A (65) != a (97) : 대소문자 다른 값이다

 

 

논리 연산자

-true, false를 처리하는 연산자

=부울 연산자, 불리언 연산자

 

OR 연산자

||

하나만 참이면 true

 

AND 연산자

&&

모두가 참인 경우에만 true

 

NOT 연산자

!

true와 false를 반대로 뒤집는다

서로 다른 연산자를 계산하는 순서

-연산자 우선순위

다른 분류일 때 계산 순서

단항 연산자 → 산술 연산자 → 비교 연산자 → 논리 연산자 → 할당 연산자

 

같은 분류일 때 계산 순서

	1st	2nd	3rd	4th	5th	6th	7th
단항 연산자	!	++	--
산술 연산자	*	/	%	+	-
비교 연산자	<	<=	>	>=	==	!=	===
논리 연산자	&&	||
할당 연산자	=	+=	-=	*=	/=	%=