[혼공학습단 10기 - 자바스크립트] 1주차 / Chapter 02. 자료와 변수

02-1 기본 자료형

자바스크립트에서는 큰 따옴표와 작은 따옴표의 의미가 같다

but, 하나로 통일해 사용하는 걸 추천

 

자바스크립트의 자료형 : 숫자, 문자열, 불 자료형

 

문자열 자료형

- 문자들의 집합

- 자바스크립트는 문자 하나 자료형이 따로 없음

- 문자열 안에 따옴표를 사용하고 싶으면 이렇게!!

console.log('this is "String"')
> this is "String"
console.log("this is 'String'")
> this is 'String'

이스케이프 문자(\) 

console.log("응애\n응애")
> 응애
  응애

\n : 줄바꿈

\t : 탭(tab)

\\ : 역슬래시 ( \  이걸 나타내고 싶을 때, 2개 사용해야 함)

\' or \" : 따옴표를 문자 그대로 사용하고 싶을 때 사용

 

문자열 연산자

문자열 연결 연산자 (+) : 문자열 사이에 덧셈 기호를 사용해서 문자열 연결 가능!

문자 선택 연산자 : 문자열[인덱스] 형태로 사용, 인덱스는 0부터 시작함

console.log("안녕안녕"[0])
> 안
undefined
console.log("안녕안녕"[1])
> 녕

문자열 길이 구하기 : 문자열.length 형태로 사용, 빈 문자열(빈 문자열도 문자열!)의 경우, 0

 

숫자 자료형

자바스크립트는 정수/실수 구분 없음, 모두 같은 자료형으로 인식!

숫자 연산자

+ (더하기 연산자) , - (빼기 연산자), * (곱하기 연산자), /(나누기 연산자), %(나머지 연산자)

 

불 자료형

참/거짓을 표현할 때 사용 (true/false)

비교 연산자

연산자
===	양쪽이 같음(값, 자료형이 같음)
!==	양쪽이 다름
>	왼쪽이 더 큼
<	오른쪽이 더 큼
>=	왼쪽이 더 크거나 같음
<=	오른쪽이 더 크거나 같음

문자열 자료도 비교 가능(사전에서 앞쪽에 있을수록 값이 작음)

불 부정 연산자

!기호를 이용하여 참 -> 거짓, 거짓 -> 참으로 바꿈

불 논리합/논리곱 연산자

&& : 논리곱 연산자

||  : 논리합 연산자

 

자료형 검사(typeof 연산자)

typeof(자료) 형태로 사용, 뒤에 괄호가 없어도 사용 가능!

결과로

string, number, boolean, undefined, function, object, symbol, bigint 중 하나 출력

console.log(typeof('hello'))
> string
undefined
console.log(typeof(2))
> number
undefined
console.log(typeof true)
> boolean
undefined

템플릿 문자열

console.log('표현식 273 + 52 값은 ' + (273+52) + '입니당')
> 표현식 273 + 52 값은 325입니당

이렇게 결합하면 코드가 복잡해지므로, 간단히 하기 위해 추가된 기능!

키보드의 숫자 1 왼쪽에 있는 `사용, `~~~${...}~~~` 

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

 

---

마무리 

자료형 : 자료의 종류(문자열, 숫자, 불 자료형)

확인문제1 / 불, 숫자, 숫자, 불

확인문제2 / # 연습문제, \\\\

확인문제3 / 녕, 하, 세, 요

확인문제4 / 0, 4

---

 

02-2 상수와 변수

상수 : 항상 같은 수, 한 번 값에 이름을 붙이면 값 수정 불가

변수 : 변할 수 있는 수

 

상자로 생각하면, 상수는 뚜껑이 닫혀 있고, 변수는 뚜겅이 열려 있음

따라서 상수는 쌓아서 저장할 수 있으므로 저장 효율(성능)이 변수보다 좋다!

 

상수(constant)

선언 : 상수를 만드는 과정, const 키워드로 선언

상수는 선언과 동시에 값을 지정해주어야 함(지정해주지 않을 시 Missing initializer in const declarization(구문 오류) 발생)

const 상수이름 = 상수 값

동일한 상수를 재선언 -> Identifier has already declared (구문 오류) 발생

선언된 상수의 자료 변경 시 -> Assignment to constant variable(TypeError) 발생

 

변수(variable) -> 변경 가능!!

선언 : let 키워드 사용, 재선언은 불가(값 변경은 가능) -> 재선언 시 Identifier has already declared (구문 오류) 발생

let 변수이름 = 변수 값;

 

변수에 적용 가능한 연산자

1. 복합 대입 연산자

+=, -=, *=, /=, %= 이 있음(다른 언어들에서 지겹게 배웠으므로 생략)

 

2. 증감 연산자

변수++	기존 값에 1을 더함(후위)
++변수	기존 값에 1을 더함(전위)
변수--	기존 값에 1을 뺌(후위)
--변수	기존 값에 1을 뺌(전위)

사용 예시는 다음과 같음

  <script>
    //변수 선언
    let num1 = 10;

    //증감 연산자 사용
    num1++

    //출력하기
    alert(num1)

  </script>

alert(num1) 출력 결과

  <script>
    //변수 선언
    let num1 = 10;

    //출력하기
    alert(num1++)  //이와 같음 alert(num1); num1 += 1
    alert(num1++)  //alert(num1); num1 += 1
    alert(num1++)  //alert(num1); num1 += 1

  </script>

엥 근데 10에 1을 더하는 걸 출력하라 그랬는데 왜 10부터 뜨지? 하지 말자.

후위(postfix)계산이라고!! 즉, alert(num1)실행 후, num1++ 실행이다.

 

전위(prefix) 계산의 경우, ++이 먼저 실행될 것이다. 즉, 11부터 뜰 것.

 

undefined 자료형

1. 상수/변수로 선언하지 않은 식별자

typeof(abc)
'undefined'
typeof(야옹)
'undefined'

2. 값이 없는 변수

변수 선언은 했으나 값 지정하지 않은 경우! 그러나 상수의 경우 선언과 동시에 값 지정이 필수이므로, 값이 없는 상수는 존재할 수가 없도다

let it
undefined
typeof(it)
'undefined'

---

마무리

확인문제1 / 1번. const

확인문제2 / 2번. =

확인문제3 / const r은 상수이므로 선언과 동시에 값 지정이 이루어져야 함. 즉, const r = 10 이 되어야함

확인문제4 / 오류남. 상수에 증감연산자 사용 불가

 

---

02-3 자료형 변환

문자열 입력 함수 : prompt()

prompt("메시지", "디폴트")

const a = prompt("입력해주세요", "")
undefined
a
'응애~'

• 무엇를 입력해도 문자열로 받음. 즉, 필요에 따라 자료형 변환을 해야할 수 있음
• Number() // 숫자로 변경 String() // 문자열로 변경 Boolean() // 불로 변경

불린 입력 함수 : confirm()

confirm("메시지")
true
confirm("메시지")
false
const b = confirm("확인?")
undefined
b
true
const b = confirm("확인?")
undefined
b
false

---

지금까지 배운 내용 중 중요한 부분 총정리

상수 → const 이름 = 값

변수 → let 이름 = 값

출력 ⇒ alert() OR console.log()

문자열 입력 : prompt(메시지, 입력)

논리값 입력 : confirm(메시지)

• 확인을 누를 경우, true
• 취소를 누를 경우 false

자료형 변환

1. Number() : 숫자로 변환
   • Number(”minju”) → 자료형은 Number(숫자형) 이지만, 이 경우 숫자로 나타낼 수 없는 숫자임 (NaN : Not a Number)
2. String() : 문자열로 변환
3. Boolean() : 불 자료형으로 변환
   • 0, NaN(Not a Number), “”, null, undefined ⇒ false 로 변환됨
   • 이 함수를 사용하지 않고 !! 를 사용하여 불 자료형으로 변환할 수 있다

inch ⇒ cm로 변환하기

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script>
    const a = Number(prompt('inch 단위 숫자를 입력해주세요'))
    const b = a * 2.54
    alert(`${a}inch는 ${b}cm 입니다.`)
  </script>
</head>
<body>
  
</body>
</html>

---

확인 문제 1 / 3번. confirm()

확인 문제 2 / String(), Boolean()

확인 문제 3

<script>
    //숫자를 입력받습니다.
    let a = prompt('cm 단위 숫자를 입력해주세요')

    //입력을 숫자로 변경하고 inch 단위로 변경합니다.
    const cm = Number(a)
    const inch = cm * 0.393701

    //출력합니다.
    alert(`${cm}cm는 ${inch}inch 입니다.`)
  </script>

확인 문제 4

<script>
    //숫자를 입력받습니다.
    const a = Number(prompt('반지름을 입력해주세요'))
    const pi = 3.14

    //출력합니다.
    alert(`원의 반지름: ${a}`)
    alert(`원의 넓이: ${pi*a*a}`)
    alert(`원의 둘레: ${2*pi*a}`)
  </script>

확인문제 5

<script>
    //숫자를 입력받습니다.
    const a = Number(prompt('달러 단위의 금액을 입력해주세요'))
    const b = 1207

    //출력합니다.
    alert(`달러: ${a}`)
    alert(`원화: ${a*b}`)

  </script>

확인 문제 6

1. 네이버 계산기
2. 엑셀
3. 환율 계산기