1일차 JavaScript 챕터 2

자료와 변수

프로그램이 처리할 수 있는 모든 것을 자료라고 부르며, 자료 형태에 따라 나눠 놓은 것을 자료형이라고 한다.

 

String, Number, Boolean, undefined, null 등이 있다.

 

문자열 (String)

문자열 자료형

자바스크립트는 따옴표를 사용해서  문자열을 만들며, 큰 따옴표(""), 작은 따옴표('') 둘다 사용가능하다. 만약 문자열 안에 따옴표를 사용해야한다면 2가지 따옴표를 쓰면 된다. "This is 'example'"

 

따옴표를 문자 그대로 쓰고싶다면 \ (이스케이프)를 사용하면된다. "This is \"example\" or "This is `"`example"

그외에도 \ 는 다양한 기능이 있다.

• \n : 줄바꿈, \t : 탭 , \\ : / 그 자체를 의미한다.

문자열 연산자

자바스크립트에서는 문자열도 기호를 사용해서 연산 처리가 가능하다. 

'가나다' + '라마' = '가나다라마'

'가나다'[0] = '가'

 

문자열 길이는 .length 속성을 사용하면 된다. 

'가나다라'.length = 4

 

숫자(Number)

숫자 연산자

연산자	설명	연산자	설명
+	더하기 연산자	*	곱하기 연산자
-	빼기 연산자	/	나누기 연산자

숫자 연산자는 연산자의 우선순위를 고려해야한다.

연산자	설명
%	나머지 연산자

 

불린(Boolean)

 

연산자	설명
===	양쪽이 같다
!==	양쪽이 다르다
>	왼쪽이 더 크다
<	오른쪽이 더 크다
>=	왼쪽이 더 크거나 같다
<=	오른쪽이 더 크거나 같다

문자열의 자료형에서는 사전의 앞쪽에 있을수록 값이 작다.

 

가방> 하마 -> false

 

불린 부정 연산자

!true -> false, !false -> true이며, &&는 그리고, ||는 또는 이다.

 

자료형 검사

typeof(자료)을 이용하며 단항 연산자이다. typeof 연산자 뒤에 괄호가 없어도 되지만, 가급적 사용하는 것이 좋다.

 

typeof(true) -> 'boolean', typeof('123') -> 'string' typeof 10 === 'number' -> True

 

템플릿 문자열

과거에 자바스크립트는 문자열 내부에 표현식을 삽입할 때 다음과 같이 문자열 연결 연산자를 이용했어야했다.

console.log("This is" + (22+333) + "!!")

 

템플릿 문자열을 사용하면 다음과 같이 표현할 수 있다.

 

console.log(`This is ${22+333}!!`)

 

==연산자와 != 연산자

연산자	설명
==, !=	값이 같은지 비교
===, !==	자료형과 값이 같은지 비교

예를 들어 1 == "1" 은 Number와 String으로 자료형이 다르지만, ==은 자료형은 신경쓰지않기에 true값이 나온다.

 false == "0" 또한 false는 0이므로, true 값이 나오며, 0 == []은 0은 false로 변환, [] 또한 false로 변환되어 true값이 나온다.

=== 연산자를 사용하여 코드 가독성을 높이는 것을 추천한다

 

상수와 변수

상수는 항상 같은 수라는 의미로 값을 선언하면 변경이 불가하다. - const

변수는 변할 수 있는 수로 값을 수정할 수 있다. - let.   

 

var도 변수를 생성할 수 있으나 변수를 중복해서 선언할 수 있다는 위험성, 변수가 속하는 범위가 애매하다는 이유로 let으로 대체되었습니다.

 

만약, 변할 가능성이 있으면 변수를 쓰면 되고, 변할 가능성이 없으면 상수를 사용하면된다.

 

변수에 적용할 수 있는 연산자

 

복합 대입 연산자

복합 대입 연산자	설명	사용 예	의미
+=	기존 변수의 값에 값을 더합니다	a += 1	a= a+1
-=	기존 변수의 값에 값을 뺍니다	a- = 1	a= a-1
*=	기존 변수의 값에 값을 곱합니다	a *= 1	a = a * 1
/=	기존 변수의 값에 값을 나눕니다	a /= 1	a = a / 1
%=	기존 변수의 값에 나머지를 구합니다.	a %= 1	a = a % 1

이런식으로도 이용이 가능하다.

 

증감 연산자

증감 연산자	설명
변수++	기존의 변수 값에1을 더합니다(후위)
++변수	기존의 변수 값에 1을 더합니다(전위)
번수--	기존의 변수 값에 1을 뺍니다(후위)
--변수	기존의 변수 값에 1을 뺍니다(전위)

후위는 해당 문장을 실행한 후 값을 더 하고 전위는 해당 문장이 실행되기 전에 값을 더한다.

 

undefined 자료형

상수와 변수로 선언하지 않는 식별자의 자료형을 확인해보면 undefined가 나온다. 변수를 선언하면서 값을 지정하지 않는 경우 해당 식별자는 undefinded 자료형이 되지만 상수는 선언할 때 반드시 값을 지정해야 하므로 값이 없는 상수는 존재하지않는다.

 

자료형 변환

 

문자열 입력

문자열 자료형을 입력할 때 사용하는 함수는 prompt()이며 prompt(메세지 문자열, 기본 입력 문자열) 형태로 사용한다.

 

input을 실행하면 사용자에게 입력을 요구하는 입력창이 나타나며, 입력창에는 기본으로 나온다. 내용을 테스트로 바꾸면 const input = '테스트' 가 되기에 테스트가 알림창을 나온다.

 

불 입력

불 자료형 또한 값으로 입력 받을 수 있다. confirm() 함수를 사용하며, confirm(메시지 문자열) 형태로 사용하면된다.

알람창으로 취소 확인이 뜨고 취소는 flase, 확인은 true값을 가진다.

 

자료형 변환하기

숫자형으로 변환할려면 Numer()을 사용하면 된다. 주의할점은 다른 문자가 들어가있어 숫자형으로 변환할 수 없으면 NaN값을 나타내는데 Not a Number이며 자료형은 숫자이지만 숫자로 나타내지못해 출력된다.

 

불과 숫자를 + 연산자로 연결하면 불이 숫자로 변한된 뒤 뒤에 더 해진다.

 

> 1 + true -> 2

 

문자열으로 변환할려면 String을 사용하면된다. 또한 연결 연산자 +와 ""을 이용해서 또한 변환할 수 있다.

 

> 273 + "" -> "273"

 

불로 변환할려면 Boolean()함수를 사용하면된다. 대부분의 자료는 불로 변환했을 때 true로 변환되지만 0, NaN, "", null, undefined는 false로 변환되니 외워서 기억하는걸 추천한다.

 

또한 Boolean()함수를 사용하지않고 논리 부정 연산자(!)를 두번 사용해서 다른 자료를 불 자료형으로 변환할 수 있다. 

 

> !!273 -> true, !!'안녕하세요' -> true, !!'' -> false