[혼공자스]02. 자료와 변수

 

 

 

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

자료형(data type): 자료 형태에 따라 나눠 놓은 것

기본 자료형: 숫자 number, 문자열 string, 불 boolean

 

문자열 자료형

 

자바스크립트에서 문자와 문자열이 모두 같은 자료형으로 인식.

문자열 만들기 

1. 큰따옴표 사용
2. 작은따옴표 사용
내부에 작은 따옴표를 사용하고 싶으면 외부에는 큰따옴표 사용
따옴표를 문자 그대로 사용하고 싶으면 따옴표 앞에 \(이스케이프 문자) 사용

>"This is /"string/""
This is "string"

#구문 오류 발생 케이스
#Uncaight SyntaxError:Unexpected identifier
#식별자가 예상하지 못한 위치에서 등장했다는 오류
#아래와 같이 이스케이프 문자를 사용하지 않고 한 종류의 따옴표만을 사용했을 경우.

>'This is 'string''
Uncaight SyntaxError:Unexpected identifier

 

이스케이프 문자의 기능

/n: 줄바꿈
/t: 탭
//: 역슬래시 그 자체(/가 출력)

 

문자열 연산자

문자 연결 연산자 : 문자열 + 문자열 
문자 선택 연산자 : 문자열[숫자] _ 이 때 위치를 나타내는 숫자를 인덱스라고 부름.

 

문자열 길이 구하기

문자열 내부의 문자 개수를 문자열 길이 length이라고 함.

>"안녕하세요".length
5
>"자바스크립트".length
6
>"".length
0

 

---

 

숫자 자료형

 

자바스크립트에서 소수점이 있는 숫자, 없는 숫자 모두 같은 자료형으로 인식

 

 

숫자 연산자
연산자 우선순위를 고려해야함(*, /가 +, -보다 우선 계산)

+: 더하기
-: 빼기
*: 곱하기
/: 나누기
%: 나눠서 나온 나머지

 

---

 

불 자료형

 

참과 거짓값을 표현할 때 사용 (true, false)

 

불만들기

# 비교 연산자 사용하여 불 만들기

===	양쪽이 같다	!==	양쪽이 다르다
>	왼쪽이 더 크다	<	오른쪽이 더 크다
>=	왼쪽이 더 크거나 같다	<=	오른쪽이 더 크거나 같다

 

 

  <script>
    if (273 < 52) {
      alert('273은 52보다 작습니다.') 
    } 
    if (273>53) {
      alert('273은 52보다 큽니다')
    }
  </script>

위의 코드와 같이 실행하면 이런 창이 뜬다.

 

 

불 부정 연산자: !

불 && (and) 논리곱 연산자 .

좌변		우변	결과
true		true	true
true		false	false
false		true	false
false		false	false

불 || (or) 논리합 연산자

좌변		우변	결과
true		true	true
true		false	true
false		true	true
false		false	false

 

---

 

자료형 검사

 

typeof 연산자 사용
: string, number, boolean, underfined, function, object, symbol, bigint 8가지 중 하나 출력.

>typeof('문자열')
'string'
>typeof(273)
'number'
>typeof(true)
'boolean'

 

 

 

---

 

탬플릿 문자열

 

탬플릿 문자열은 백틱(`) 기호로 감싸 만들며, 문자열 내부에 `${ }` 기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산됨.

#백틱(`)이랑 작은따옴표(') 조심해야한다. 왜냐면 아래와 같이 첫번째는 작은 따옴표로 해서 표현식이 문자열 안에서 문자열로 인식하여 계산이 안되었음.

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

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

 

 

상수와 변수

 

상수 " 항상 같은 수로 값에 이름을 한 번 붙이면 값을 수정 불가"
변수  " 변할 수 있는 수로 값을 수정 가능"

 

---

 

상수

선언 : 상수를 만드는 과정. const 키워드 사용

선언 한 후 자료를 사용. 숫자가 들어있는 상수는 숫자연산 가능. 문자열이 들어있는 상수는 문자열 연산 가능.

const 이름 = 값

 

>const pi = 3.141592
undefined
>pi
3.141592
>const r = 10
undefined
>2 * pi * r //반지름으로 원의 둘레 구하기
62.83184
>pi * r * r //반지름으로 원의 넓이 구하기
314.1592

 

 

오류

Identifier has already declared

상수의 1번만 선언하는 성질에 따른 오류 -> 새로고침 눌러서 상태 초기화 or 다른 이름의 식별자를 사용해 상수를 선언

> const name = "name이라는 이름의 상수를 선언"
undefined
> const name = "한 번 더 선언합니다요"
Uncaught SyntaxError: ideIdentifier 'name' has already been declared

라고 뜨는게 맞는데...나는 콘솔에서 실행해보니까 그냥 잘 된다...왜 이러는지는 모르겠다...

 

오류가 나지 않는다;;뭐람; 나중에 이유를 알게되면 추가하겠음.

 

 

Missing intializer in onst declaration

상수는 한 번만 선언할 수 있으니 선언할 때 반드시 값을 지정해줘야하는데 안해주면 오류발생함.

 

Assignment to constant variable

한 번 선언된 상수의 자료는 변경할 수 없음. 이런 경우는 사웃가 아니라 변수를 사용해야함.

 

---

 

변수

# 변수 선언
let 이름 = 값

#변수값을 변경할 때 
변수 = 값

 

> let pi = 3.141592 //pi 변수 선언, 값을 지정
undefined
> pi  // 변수 이름을 입력하면 해당 값을 사용 가능
3.141592

> let r = 10  // 반지름이 10인 변수를 선언 
underfined
> 2 * pi * r 
62.83184
> pi * r * r
314.1592

>let g = 9.8
undefined
>let m = 10
undefined
>m * g 
98

 

 

오류

identifier has already been declared 

상수와 마찬가지로 특정한 이름의 변수는 한 파일에서 한 번만 선언할 수 있음. 다른 이름으로 선언해주면 문제해결.

<script>
   let name = "name이라는 이름의 변수를 선언"
   let name = "한 번 더 선언"
</script>

위의 코드를 실행하면 'name'의 변수가 이미 선언되었다고 오류가 뜬다!

 

 

 

그렇다면 언제 상수를 사용하고, 언제 변수를 사용할까?

변경 가능성이 있으면 변수를 사용.
그렇지 않다면 상수를 사용.

 

 

 

변수에 적용할 수 있는 연산자  "복합 대입 연산자, 증감 연산자"

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

복합 대입 연산자

복합 대입 연산자	설명	사용 예	의미
+=	기존 변수의 값에 값을 더함	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

 

>let value = 10
undefined
>value +=10
20
>value
20

 

//복합 대입 연산자 활용
  <script>
    //변수를 입력합니다.
    let list = ''

    //연산자를 입력합니다.
    list += '<ul>'
    list += ' <li>Hello</li>'
    list += ' <li>JavaScript...!</li>'
    list += '</ul>'

    //문서에 출력합니다.
    document.write(list)
  </script>

 

위의 코드를 입력해서 인터넷 화면에 출력하면 이런 모습으로 뜬다.

 

<ul> ul태그. (Unordered List) : HTML 태그. 순서가 없는 목록을 의미. 

<li> li태그. (List Item) : HTML 태그. ul태그 내부에서 사용하고, 실질적인 목록 내용이 됨.

 

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

 

증감연산자

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

 

//증감 연산자 사용 예 (1)
  <script>
   //변수를 선언합니다.
   let number = 10
   //연산자를 사용합니다.
   number++
   //출력합니다.
   alert(number)
  </script>

 

//증감 연산자 사용 예 (2)
  <script>
   //변수를 선언합니다.
   let number = 10
   //출력합니다.
   alert(number++)
   alert(number++)
   alert(number++)
  </script>

//증감 연산자 사용 예 (3)
  <script>
    //변수를 선언합니다.
    let number = 10
    //출력합니다.
    alert(number); number += 1
    alert(number); number += 1
    alert(number); number += 1
  </script>

//증감 연산자 사용 예 (4)
  <script>
    //변수를 선언합니다.
    let number = 10
    //출력합니다.
    alert(++number)
    alert(++number)
    alert(++number)
  </script>

//증감 연산자 사용 예 (5)
  <script>
    //변수를 선언합니다.
    let number = 10
    //출력합니다.
    alert(number++)
    alert(++number)
    alert(number--)
    alert(--number)
  </script>

//증감 연산자를 한 줄에 하나만 사용한 예
  <script>
    //변수를 선언합니다.
    let number = 10
    //출력합니다.
    alert(number)
    number++
    number++
    alert(number)
    alert(number)
    number--
    number--
    alert(number)
  </script>

 

---

 

undefined 자료형

상수와 변수를 사용하면 undefined 자료형을 확인 가능. 어더한 경우에 undefined가 나오는지 확인해보자.

상수와 변수로 선언하지 않은 식별자

> typeof(abc)
'undefined'
> typeof(그냥식별자)
'undefined'

 

값이 없는 변수

변수를 선언하면서 값을 지정하지 않는경우.

상수는 선언할 때 반드시 값을 지정해야하므로 값이 없는 상수는 존재하지않음.

> let a
undefined
> typeof(a)
'undefined'

 

---

 

자료형 변환

문자열 입력 

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

//prompt()함수 매개변수의 역할
  <script>
    //상수를 선언합니다.
    const input = prompt('message', '_default')
    //출력합니다.
    alert(input)
  </script>

 

위의 코드를 실행하면 이렇게 된다. 안녕하쇼를 입력해보면

 

이렇게 된다.

 

 

불 입력

불자료형도 값으로 입력받을 수 있음

confirm(메시지 문자열)

//confirm()함수의 사용
  <script>
    //상수를 선언합니다.
    const input = confirm('수락하시겠습니까?')
    //출력합니다.
    alert(input)
  </script>

위의 코드를 실행하면 이렇게 뜬다.

확인을 누르면 나오는 페이지

취소를 누르면 나오는 페이지

 

---

 

숫자 자료형으로 변환하기 "다른 자료형 -> 숫자 자료형 변환"

Number(자료)

 

>Number("273")
273
>typeof(Number("273"))
'number'
>Number("$273")
NaN   //다른 문자가 들어있어서 숫자로 변환할 수 없는 문자열의 경우 NaN(Not a Number)라는 값이 뜸.
>typeof(Number("$273"))
'number'
>Number(true)
1
>Number(false)
0

 

숫자 연산자를 사용해 자료형 변환하기

Number()함수를 사용하지 않고 다른 자료형을 숫자 자료형으로 변환할 수 있음. 바로 숫자 연산자를 사용하는 것. 숫자가 아닌 다른 자료에서 0을 빼거나, 1을 곱하거나 또는 1로 나누면 숫자 자료형으로 변환됨.

> "52" - 0
52
> typeof("52" - 0)
'number'
> true - 0
1
> typeof(true - 0)
'number'
> 1 + true
2
> 1 + false
1

 

---

 

문자열 자료형으로 변환하기 " 다른 자료형 -> 문자열 자료형 "

String(자료)

String(52.273) //숫자 자료형이 문자열 자료형으로 변환됨.
'52.273'
String(true)  // 불 자료형이 문자열 자료형으로 변환됨.
'true'
String(false)
'false'

 

문자열 연산자를 사용해 자료형 변환하기

String()함수를 사용하지 않고도 다른 자료형을 문자열 자료형으로 변환 가능

문자열 연결 연산자 사용. 문자열이 아닌 다른 자료에 빈 문자열을 연결하면 문자열 자료형으로 변환.

> 273 + ""  //빈 문자열을 연결해 문자열 자료형으로 변환함.
'273'
> true + ""
'true'

 

---

 

불 자료형으로 변환하기 " 다른 자료형 -> 불 자료형 "

Boolean(자료)

대부분의 자료는 불로 변환했을 때 true로 변환됨. 다만 0, NaN, '...' 혹은 "..."(빈 문자열), null, undefined 5개의 자료형은 false로 변환됨.

> Boolean(0)
false
> Boolean(NaN)
false
> Boolean("")
false
> Boolean(null)
false
> let 변수
undefined
> Boolean(변수)
false
> Boolean('false')
true

 

논리 부정 연산자(!)를 사용해 자료형 변환하기

Boolean()함수를 사용하지 않고, 논리 부정 연산자(!)사용하여 다른 자료형을 불 자료형으로 변환 가능. 불이 아닌 다른 자료에 논리 부정 연산자를 2번 사용하면 불 자료형으로 변환.

> !!273
true
> !!0
false
> !!'안녕하쎕세요'
true
> !!''
false

 

 

---

 

 

문제 inch를 cm 단위로 변경하기

  <script>
  //숫자를 입력받습니다.
  const rawInput = prompt('inch 단위의 숫자를 입력해주세요.')
  //입력받은 데이터를 숫자형으로 변경하고 cm단위로 변경합니다.
  const inch = Number(rawInput)
  const cm = inch * 2.54
  //출력합니다.
  alert( ${inch}inch는 ${cm}cm 입니다.)
  </script>