본문 바로가기

Study/JavaScript

[JavaScript] 문자열 숫자 boolean 값비교

 

  • 문자열
  • 숫자 - parseInt, NaN
  • 문자열을 숫자로 바꾸기
  • 산술 연산자 
  • 무한값
  • 형변환
  • 실수계산
  • 불값 - boolean
  • == 와 === 의 차이

 

 

문자열

 

값(value)

  • 프로그램이 조작할 수 있는 데이터. 값에는 여러 가지 종류가 있으며 이런 값의 종류를 자료형(data type)이라고 한다.

 

백틱 ( ` ) 

 

 

  • 백틱을 사용하면 문자열 줄 바꿈을 위해 '\n'을 적어주거나 문자열을 이어 주기 위해 '+'를 사용할 필요가 없다.
  • 백틱 내에서 줄이 바뀌면 알아서 줄 바꿈 출력이 된다.

 

typeof

  • typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환한다.
typeof '문자열'   // "string"
typeof ''       // "string"

 

 

 

백틱, 따옴표, 백슬래시 출력

 

 

 

 

문자열 합치기

 

1+1            //2
'바나나'+'사과'   //바나나사과
'바나나'-'사과'   //NaN

 

 

숫자 - parseInt, NaN

 

숫자를 출력하는 방법

 

5        // 5
500000   // 500000

 

 

지수 표현법

 

5e5      // 500000
5e-5     // 0.00005
0b111    // 7 (이진법) 
0111     // 73 (팔진법) 
         // 0111 = 0o111 둘다 팔진법을 표시한다. 
0x1a1    //417 (16진법)

 

- 콘솔 출력

 

 

 

NaN

  • NaN은 Not a Number의 약자이다.
  • 하지만 type은 Number이다.
NaN            // NaN
typeof NaN     // 'number'
'바나나'-'사과'   // NaN

 

 

문자열을 숫자로 바꾸기

 

문자열과 숫자를 혼동하여 사용하면 원하는 결과를 얻지 못할 수 있다.

123                   // 123
'123'                 // '123'
123 + 4               // 127
'123' + 4             // '1234'

 

parseInt() 

  • 문자열을 숫자로 변경할 수 있다.
  • Number()도 일부 동일한 결과를 얻을 수 있으나, Number()와는 다르다. 
parseInt('123')         // 123
parseInt('123') + 5     // 128
Number('123')           // 123
typeof parseInt('123')  // "number"


parseInt('3.14')        // 3 
                        // parseInt는 문자열을 정수로 변경한다.
parseFloat('3.14')      // 3.14
                        // parseFloat는 문자열을 소수로 바꾼다.
Number('3.14')          // 3.14
                        // Number는 문자열을 그에맞는 타입에 맞춰 바꿔준다.
                      
parseInt('6월')          // 3
                        // parseInt는 문자열을 최대한 해석하여 숫자로 변환한다.
Number('6월')            // NaN 
                        // 주어진 문자열이 숫자가 아니므로 NaN을 반환한다.

 

parseInt는 다른 기수를 적용하는 데 사용할 수 있다.

parseInt(해석하려는 값, 기수)

- 예시

parseInt(111, 2)      // 7

 

 

산술 연산자 

 

3 + 2                 // 5
3 - 2                 // 1
3 * 2                 // 6
3 / 2                 // 1.5
3 % 2                 // 1
3 ** 2                // 9
                      // ** 는 거듭제곱을 나타낸다.  
2 ** 3                // 8

 

 

무한값

 

Infinity

  • 무한값을 나타낸다.
  • Infinity는 숫자가 아니지만, type은 Number이다.
Infinity              // Infinity
2 / 0                 // Infinity
-2 / 0                // -Infinity
typeof -Infinity      // number
Infinity -Infinity    // NaN
0 / 0                 // NaN

 

 

형 변환

 

자료형이 바뀌는 것, 또는 바꾸는 행위를 형 변환이라고 한다. 

 

문자열 + 숫자

  • 문자열에서 숫자를 더할 경우, 숫자가 문자열로 자료형이 바뀌게 된다
'문자열' + 0            // 문자열0
                      // 문자열 + 숫자의 경우 숫자가 문자열로 바뀌게 된다. 
'1' + 0               // 10

 

문자열 - 숫자

  • 문자열에서 숫자를 뺄 경우 문자열이 숫자로 자료형이 바뀌게 된다. 
  • 이때 문자열은 parseInt()로 변환되는 게 아니라 Number()로 변환된다. 
'문자열' - 0            // NaN 
                      // 문자열 - 숫자의 경우 문자열이 숫자로 바뀌게 된다. 
'4' - 1               // 3
                      // Number('4') = 4 이므로, 4-1 = 3
'6월' - 1              // NaN
                      // parseInt('6월') = 6 이지만
                      // Number('6월') = NaN 이므로, NaN - 1 = NaN

 

 

prompt()

  • prompt(입력창에 띄울 메시지, 입력 부분의 기본값)
  • 문자열을 입력받을 때 사용한다. 

- prompt()

 

- prompt('문자열을 입력하세요')

 

- prompt('문자열을 입력하세요', '여기에 입력하세요')

 

 

실수 계산

 

JavaScript는 정수와 실수가 구분되어있지 않다. 

0.5 + 0.5               // 1

 

부동소수점문제

  • 컴퓨터는 2진법으로 계산한다.
  • 2진법으로 실수를 표현하면 무한 반복되는 실수가 존재하고, 컴퓨터는 이를 근삿값으로 저장한다.
    이 때문에 10진법으로 계산한 결과와 차이가 발생하는 경우가 생기며, 이를 부동소수점 문제라고 한다. 
0.1 + 0.2               // 0.30000000000000004
(0.1*10 + 0.2*10) / 10  // 0.3
                        // 부동소수점 문제를 해결하는 가장 간단한 방법

 

 

 

불값 boolean

 

rue             // true. 문자열이 아니기때문에 따옴표로 감싸지 않는다.
typeof true      // boolean
6 == 1           // false

 

NaN의 비교

  • NaN과의 비교는 false 값을 반환한다.
  • 다만 != 연산에서는 true를 반환한다. 
NaN == NaN       // false
NaN != 1         // true

 

boolean 값 비교

  • true는 숫자로 변환하면 1, false는 0이다. 
true > false     // true 
                 // true=1 false=0

 

문자열끼리의 비교

  • 문자의 번호를 비교한다. (사전순)
  • 문자열의 번호를 알아보기 위해서는 charCodeAt()을 사용한다. 
'b' > 'a'        // true
'&'.charCodeAt() // 38
'a'.charCodeAt() // 97
'b'.charCodeAt() // 98

 

 

문자열과 숫자 비교

  • 자료형이 모두 숫자로 형 변환된 후 비교된다. 
  • 문자열은 숫자로 변환하면 NaN이다.
'3' < 5          // true
                 // 3 < 5 == true
'abc' < 5        // false
                 // NaN과의 비교는 false이다.

 

불값 연산

'0' < true       // true
                 // 불값도 비교연산을 할 때 숫자로 형 변환이 된다.
                 // 문자열 0은 숫자 0이되고, true는 숫자 1이된다.

 

 

== 와 === 의 차이

 

==

  • == 는 값만을 비교한다.
  • != 도 마찬가지로 값만 비교한다.  

=== 

  • 값뿐만 아니라 자료형이 같은지까지 비교한다.
  • !== 도 마찬가지로 값 뿐만 아니라 자료형까지 비교한다. 
'1' == 1         // true
                 // ==는 값만 비교하고 자료형은 비교하지 않다. 
1 == true        // true
1 == '1'         // true

'1' === 1        // false
                 // ===는 값 뿐만 아니라 자료형이 같은지까지 비교한다. 
1 === true       // false
1 === '1'        // false

1 != '1'         // false
1 !== '1'        // true
                 // !==는 자료형까지 비교한다.