[혼공스] 1주차_자료형 알아보기

혼공스 커리큘럼

Chapter 2

01. 기본 자료형

자료: 프로그래밍에서 프로그램이 처리할 수 있는 모든 것

자료형: 자료 형태에 따라 나눠 놓은 것

기본적으로 많이 쓰는 자료형은 숫자(number), 문자열(string), 불(boolean)이 있습니다.

 

문자열 자료형

문자열: 문자들의 집합

자바스크립트에서는 문자가 하나든 여러개든 모두 문자열 자료형이라고 합니다.

 

문자열 생성하기

문자열은 ''와 ""로 생성합니다.

ex) '안녕하세요', "안녕하세요"

문자열 안에 따옴표를 써야 한다면 2가지를 함께 사용해야 합니다.

ex) "This is 'string'"

      'This is "string"'

 

문자열 연산자

문자열 사이에 덧셈 기호(+)를 사용하면 문자열을 연결할 수 있습니다. 이때 덧셈기호를 문자열 연결 연산자라고 합니다.

 

문자열 내부의 문자 하나를 선택할 때는 문자 선택 연결자를 사용합니다.

문자열[숫자] 

이때 문자를 나타내는 숫자를 인덱스(index)라고 합니다. 인덱스는 0부터 시작합니다.

 

문자열 길이 구하기

문자열 길이(length): 문자열 내부의 문자 개수 

문자열 뒤에 .length를 입력하면 문자열의 길이를 구할 수 있습니다.

 

숫자 자료형

자바스크립트는 정수와 실수를 모두 같은 자료형으로 인식합니다.

 

숫자 연산자

숫자 자료형은 숫자 연산자로 사칙 연산을 할 수 있습니다. 자바스크립트는 연산자 우선순위를 고려합니다.

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

 

불 자료형

불은 영어로 Boolean이며 '불린'이라고도 표기됩니다.

하지만 '불'이 더 많이 사용되기도 하고 책을 따라 '불'이라고 사용하겠습니다.

 

불 만들기

참과 거짓 값을 표현할 때 불 자료형을 사용합니다.

불 자료형은 true와 false 2가지입니다. 불은 단순하게 true와 false를 입력하면 만들 수 있습니다.

비교 연산자를 사용해도 불을 만들 수 있습니다.

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

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

== 연산자와 != 연산자는 '값이 같은지' 비교하는 연산자입니다.

 

불 부정 연산자

논리 부정 연산자는 ! 기호를 사용하여 참을 거짓으로, 거짓을 참으로 바꿉니다.

!true = false, !false = true

 

불 논리합/논리곱 연산자

연산자	설명
&&	논리곱 연산자
||	논리합 연산자

&& 연산자는 양쪽 변의 값이 모두 true일 때 true를 결과를 내고 이외에는 모두 false를 냅니다.

|| 연산자는 양쪽 변의 값 중 하나만 true여도 true를 냅니다.

 

&& 연산자는 '그리고, ~와, ~과'로 해석할 수 있습니다.

|| 연산자는 '또는'으로 해석할 수 있습니다.

 

자료형 검사

자료형을 확인할 때는 typeof 연산자를 사용합니다.

typeof 연산자는 단항연산자입니다.

typeof(자료)

 

템플릿 문자열

템플릿 문자열은 백틱(`) 기호로 감싸 만듭니다.

문자열 내부에 '${}'기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산됩니다.

템플릿 문자열 말고 문자열에 표현식을 넣으면 표현식도 문자열로 인식하여 계산이 안됩니다.

 

확인문제

1. 다음 연산자들의 피연산자가 어떤 자료형인지 적어보세요.

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

 

2. 다음 프로그램의 실행 결과를 예측해 보세요.

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

# 연습문제 \\\\

 

3. 다음 프로그램의 실행 결과를 예측해 보세요.

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

 

녕 하 세 요

 

4. 다음 프로그램의 실행 결과를 적어 보세요. 예측하는 것보다 실제로 크드를 입력해 보고 결과를 확인하는 것이 쉬울 수 있습니다.

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

0 4

 

02. 상수와 변수

상수

상수: 항상 같은 수

상수를 만드는 과정을 선언이라 표현하고, const 키워드로 다음과 같이 선언합니다.

const 이름 = 값

 

변수

변수를 만들 때는 let 키워드를 사용합니다.

let 이름 = 값

변수의 값을 변경할 때 변수 이름 뒤에 = 기호를 입력하고 값을 넣어주면 됩니다.

변수 = 값

 

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

복합 대입 연산자

복합 대입 연산자는 대입 연산자와 다른 연산자를 함께 사용하는 연산자입니다.

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

 

증감 연산자

증감 연산자는 복합 대입 연산자를 약간 간략하게 사용한 형태입니다.

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

후위 - 문장을 실행한 후 값을 더함

전위 - 값을 더한 후 문장 실행

 

undefined 자료형

상수와 변수를 사용하면 undefined 자료형을 확인할 수 잇습니다.

undefined 자료형이 나오는 경우

• 상수와 변수로 선언하지 않은 식별자
• 값이 없는 변수

확인 문제

1. 다음 중 상수를 선언할 때 사용하는 키워드는 어떤 것인가요?  ①

    ① const

    ② let

    ③ var

    ④ comment

 

2. 다음 중 값을 할당할 떄 사용하는 연산자는 어떤 것인가요?  ②

    ① ≔

    ② =

    ③ <=

    ④ >=

 

3. 다음 프로그램 중에서 오류를 발생하는 것을 찾고, 어떤 오류가 발생하는지 적어보세요.

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

const r을 선언한 다음 바로 값을 지정하지 않았기 때문에 오류가 발생함 오류: Uncaught SyntaxError: Missing initializer in const declaration

 

4. 다음 프로그램의 실행 결과를 예측해 보세요.

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

13

 

03. 자료형 변환

문자열 입력

문자열 자료형을 입력할 때 prompt() 함수를 사용합니다.

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

 

불 입력

불 자료형을 입력받을 때 confirm() 함수를 사용합니다.

confirm(메시지 문자열)

 

숫자 자료형으로 변환하기

다른 자료형을 숫자 자료형으로 변환할 때 Number() 함수를 사용합니다.

Number(자료)

다른 문자가 들어있어서 숫자로 변환하지 못하는 경우 NaN(Not a Number)라는 값을 출력합니다. NaN은 자바스크립트에서는 숫자지만, 숫자로 나타낼 수 없는 숫자를 뜻합니다.

Number() 함수를 사용하지 않고 숫자 연산자로 숫자를 더하거나 빼서 숫자 자료형으로 변환할 수 있습니다.

 

문자열 자료형으로 변환하기

다른 자료형을 문자열로 변환할 때 String() 함수를 사용합니다.

Boolean(자료)

String() 함수를 사용하지 않고 문자 연결자(+)와 빈 문자열("")을 연결하면 문자열 자료형으로 변환할 수 있습니다.

 

불 자료형으로 변환하기

다른 자료형을 불 자료형으로 변환할 때 Boolean() 함수를 사용합니다.

Boolean(자료)

 

대부분의 자룐느 불로 변환했을 때 true로 변환됩니다. 다만 0, NaN, ' '혹은 " ", null, undefined라는 5개의 자료형은 false로 변환됩니다.

Boolean() 함수를 사용하지 않고 논리 부정 연산자(!)를 사용해서 불 자료형으로 변환할 수 있습니다. 불이 아닌 자른 자료에 논리 부정 연산자를 2번 사용하면 불 자료형으로 변환됩니다.

 

확인문제

1. 다음 중 사용자로부터 불 입력을 받는 함수는 어떤 것인가요?  ③

    ① input()

    ② boolInput()

    ③ confirm()

    ④ prompt()

 

2. 다음 표의 빈칸을 채우세요.

함수 이름	설명
Number()	숫자 자료형으로 변환합니다.
String()	문자열 자료형으로 변환합니다.
Boolean()	불 자료형으로 변환합니다.

 

3. 사용자로부터 숫자를 입력받아 cm를 inch 단위로 변환하여 출력하는 프로그램을 만들어 보세요. 1cm는 0.393701inch로 변환할 수 있습니다.

<script>
    // 숫자 입력받기
    const input = prompt('cm 단위의 숫자를 입력해주세요.')

    // 입력을 숫자로 변경하고 inch 단위로 변경
    const cm = Number(input)
    const inch = 0.393701

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

 

4. 사용자로부터 원의 반지름을 입력받아 원의 넓이와 둘레를 구하는 프로그램을 만들어 보세요.

<script>
    // 반지름 입력받기
    const input = prompt('원의 반지름을 입력해주세요.')
    const r = Number(input)

    // 출력
    let output = ''
    output += `원의 반지름: ${r}\n`
    output += `원의 넓이: ${3.14 * r * r}\n`
    output += `원의 둘레: ${2 * 3.14 * r}`
    alert(output)
</script>

 

5. 현재 환율을 기반으로 사용자에게 숫자를 입력받아 달러(USD)에서 원화(KRW)로 환율을 변환하는 프로그램을 만들어보세요. 저는 책에 나온대로 1달러 = 1207로 했습니다.

<script>
    // 숫자 입력 받기
    const input = prompt('달러 단위의 금액을 입력해주세요.')
    const USD = Number(input)

    // 출력
    let output = ''
    output += `달러: ${input}\n`
    output += `-> 원화: ${input * 1207}`
    alert(output)
</script>

 

6. 위의 문제들처럼 데이터를 입력받아 처리하고 출력하는 프로그램에는 어떤 것이 있는지 생각해보고 3개 정도 적어보세요.

• 속력, 시간을 입력받아 거리를 구하는 프로그램
• 나이를 입력받아 태어난 해를 구하는 프로그램
• 소금물의 농도를 구하는 프로그램