[혼공JS📒] Chapter02. 자료와 변수

이제부터라도 열심히 자바스크립트 공부를 해야겠다는 생각이 드는 사진이다. 빠빠샤!

02-1. 기본 자료형

• 자료(data) : 프로그래밍에서 프로그램이 처리할 수 있는 모든 것
• 자료형(data type) : 자료 형태에 따라 나눠 놓은 것

1. 문자열 자료형

# 작은 따옴표 사용
> '안녕하세요'
"안녕하세요"

# 큰 따옴표 사용
> "안녕하세요"
"안녕하세요"

# 이스케이프 문자(\)사용
> "This is \"string\""
"This is "string""

> 'This is \'string\''
'This is 'string'"

# \n : 줄바꿈 의미
> '동해물과 백두산이\n마르고 닳도록'
"동해물과 백두산이
마르고 닳도록"

# \t : 탭 의미
> '이름\t나이\t지역'
"이름	나이	지역"

# \\ : 역슬래시(\) 그 자체 의미
> " \ "
" " -> 역슬래시를 인식하지 않아 빈 문자열 출력

> "\" 
오류 -> \"를 이스케이프 문자로 인식해 문자열이 닫히지 않았다고 오류 출력

> "\\ \\ \\ \\"
"\ \ \ \"

# 문자열 사이 덧셈 기호(+) : 문자열 연결 연산자
> '가나다' + '라마' + '바사아' + '자차카타' + '파하'
"가나다라마바사아자차카타파하"

# 문자열[숫자] : 문자 선택 연산자
> '안녕하세요'[0]
"안"

> '안녕하세요'[1]
"녕"

> '안녕하세요'[2]
"하"

# .length : 문자열 길이 
> "안녕하세요".length
5

> "자바스크립트".length
6

> "".length
0 -> 빈 문자열로 문자열

2. 숫자 자료형

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

# 자바스크립트는 소수점이 있는 숫자와 없는 숫자를 모두 같은 자료형으로 인식
> 273
273

> 52.273
52.273

# 자바스크립트는 숫자 자료형을 연산할 때 "연산자 우선순위" 고려
> 5 + 3 * 2
11 -> 곱셈 먼저 게산 후 덧셈 계산

> (5 + 3) * 2
16 -> 덧셈 먼저 계산 후 곱셈 계산

# 나머지 연산자 : 좌변을 우변으로 나눈 나머지 출력
> 10 % 2
0

> 10 % 3
1

> 10 % 4
2

3. 불 자료형

-불 자료형은 true와 false 2가지이다.

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

> 52 > 273
false

> 52 < 273
true

> '가방' > '하마'
false -> 문자열 자료형은 사전의 앞쪽에 있을수록 값이 작다.

# ! : 논리 부정 연산자, 참을 거짓으로, 거짓을 참으로
> !true
false

> !false
true

연산자	설명
&&	논리곱 연산자 : 양쪽 변의 값이 모두 true일 때 true를 결과로 출력
II	논리합 연산자 : 양쪽 변의 값 중 하나만 true여도 true를 결과로 출력

# && : 두 변이 모두 true일 때 true
> true && true
true

> true && false
false

> false && true
false

>false && false
false

# || : 두 변 중 하나라도 true이면 true
> true || true
true

> true || false
true

> false || true
true

>false || false
false

4. 자료형 검사

-typeof 연산자 : 숫자, 문자열, 불 같은 자료형 확인할 때 사용

typeof(자료)

> typeof('문자열')
"string" -> 문자열 의미

> typeof(273)
"number" -> 숫자 의미

> typeof(true)
"boolean"

# typeof 연산자 뒤에 괄호 없어도 상관 없음
> typeof '문자열'
"string"

# 문자열과 비교해서 자료형 확인
> typeof 10 === 'number'
True

👍 좀 더 알아보기

백틱 기호로 감싸고 문자열 내부에 ${...}기호를 사용하여 코드 간단하게 작성

> console.log(`표현식 273 + 52의 값은 ${273 + 52}입니다...!`)
표현식 273 + 52의 값은 325입니다...!

=== 연산자와 !== 연산자는 값과 자료형이 같은지를 비료하는 연산자
= 연산자와 !=연산자는 값이 같은지를 비교하는 연산자

> 1 == '1'
true

> fale == "0"
true

> "" == []
true

> 0 == []

👍 02-1 마무리

1. 다음 연산자들의 피연산자가 어떤 자료형인가?

연산자	피연산자 자료형
+(문자열 연결 연산자)	문자열
+(덧셈 연산자)	숫자
&&	불
-	숫자
*	숫자
II	불

2. 다음 프로그램 실행 결과 예측

<script>
      	console.log("# 연습문제");
        console.log("\\\\\\\\");
</script>

답
# 연습문제, \\\\

3. 다음 프로그램 실행 결과를 예측

<script>
  	console.log("안녕하세요"[1]);
  	console.log("안녕하세요"[2]);
	console.log("안녕하세요"[2]);
	console.log("안녕하세요"[2]);
</script>

답
녕하세요

4. 다음 프로그램 실행 결과를 예측

<script>
  	console.log(2 + 2 - 2 * 2 / 2 * 2);
  	console.log(2 - 2 + 2 / 2 * 2 + 2);
</script>

답
0, 4

02-2. 상수와 변수

• 상수 : 항상 같은 수 라는 의미로 값에 이름을 한 번 붙이면 값을 수정할 수 없다.
• 변수 : 변할 수 있는 수 로 값을 수정할 수 있다.

1. 상수
선언 : 상수를 만드는 과정
상수 선언 방법 : const 이름 = 값

> const pi = 3.141592 -> pi라는 이름의 상수 선언 후 3.141592라는 값 할당
undefined

> pi -> 앞서 선언한 상수 이름을 입력하면 해당 값 사용 가능
3.141592

2. 변수
변수 선언 방법 : let 이름 = 값

> let pi = 3.141592 -> pi라는 이름의 변수 선언 후 3.141592라는 값 지정
undefined

> pi -> 변수 이름을 입력하면 해당 값 사용 가능
3.141592

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

-복합 대입 연산자

복합 대입 연산자	설명	사용 예
+=	기존 변수의 값에 값 더함	a += 1
-=	기존 변수의 값에 값을 뺌	a -= 1
*=	기존 변수의 값에 값 곱합	a *= 1
/=	기존 변수의 값에 값 나눔	a /= 1
%=	기존 변수의 값에 나머지를 구함	a %= 1

> let value = 10 -> value라는 변수를 10으로 선언
undefined

> value += 10 -> value에 10 더함
20

> value -> vlaue의 값은 10 + 10 = 20이 됨
20

-증감 연산자

증감 연산자	설명
변수++	기존 변수의 값에 1더함(후위)
++변수	기존 변수의 값에 1더함(전위)
변수--	기존 변수의 값에 1뺌(후위)
--변수	기존 변수의 값에 1뺌(전위)

> let number = 10
> number++
> alert(number)
11

> let number = 10
> alert(number++)
> alert(number++)
> alert(number++)
10
11
12

4. undefined 자료형

-상수와 변수로 선언하지 않은 식별자의 자료형을 확인하면 undefined가 나온다.

👍 02-2 마무리

1. 상수 선언 시 사용하는 키워드는?

const

2. 값을 할당할 때 사용하는 연산자는?

=

3. 오류 발생하는 것 찾고 어떤 오류가 발생하는지 적으시오

<script>
  const r
  r = 10

  console.log(`넓이 = ${3.14 * r * r}`)
  console.log(`둘레 = ${2 * 3.14 * r}`)
</script>

답
상수는 선언과 동시에 할당하여야 하는데 그러지 않았기 때문에 오류 발생

4. 다음 프로그램 실행 결과 예측

<script>
  const number = 10

  console.log(++number)
  console.log(number++)
  console.log(+number)
  console.log(number--)
</script>

답
오류 : 증감 연산자는 상수에 사용할 수 없다.

02-3. 자료형 반환

1. 문자열 입력
-문자열 자료형을 입력할 때 사용하는 함수 : prompt()
-사용방법
prompt(메시지 문자열, 기본 입력 문자열)

2. 불 입력
-문자열 외에 불 자료형도 값으로 입력받을 수 있다.
-confirm()함수 사용
-사용방법
confirm(메시지 문자열)

3. 숫자 자료형으로 변환하기
-다른 자료형을 숫자 자료형으로 변환할 때 Number() 함수 사용
-사용방법
Number(자료)

> Number("273")
273

> typeof(Number("273"))
"number" -> 자료형은 숫자

4. 문자 자료형으로 변환하기
-다른 자료형을 문자열 자료형으로 변환할 때 String() 함수 사용
-사용방법
String(자료)

> String(52.273) -> 숫자 자료형이 문자열 자료형으로 변환
"52.273"

> String(true) -> 불 자료형이 문자열 자료형으로 변환

5. 불 자료형으로 변환하기
-다른 자료형을 불 자료형으로 변환할 때 Boolean() 함수 사용
-사용방법
Boolean(자료)
-0, NaN, '...', "..."(빈 문자열), null, undefined -> false로 변환

> Boolean(0)
false

> Boolean(NaN)
false

>Boolean("")
false

> Boolean(null)
false

> let 변수
undefined