Cherry & Cherish

[JavaScript] 자료형 (템플릿 문자열, 형변환) 본문

Programming/JavaScript

[JavaScript] 자료형 (템플릿 문자열, 형변환)

앵도라지 2023. 2. 9. 20:26

 

1. 문자열 자료형

  • \n을 사용해 문자열을 줄바꿈 할 수 있다.
  • \\는 역슬래시 그 자체를 의미한다.
  • + 를 사용해 문자열을 연결할 수 있다.
  • 문자열 길이를 구하기 위해 '안녕하세요'.length 처럼 문자열 length를 통해 길이를 셀 수 있다.
  • prompt()를 사용해 문자열을 입력한다.
const input = prompt(’message’, 'default값입니다.')
alert(input)

 

2. 비교/논리 연산자

  • === : 양쪽의 같다.
    • 값과 자료형이 모두 같은지를 비교하는 연산자
  • !== : 양쪽이 다르다.
    • 값과 자료형이 모두 같은지를 비교하는 연산자
  • == : 값이 같다.
    • 자료형이 다르더라도 (1과 ‘1’) 값만 같으면, true 값이 리턴됨
    • false == “0” == [] 이 true로 출력됨 (문자열 0, 빈 문자열, 빈 배열, false를 0으로 인식)
  • != : 값이 다르다.
  • && : 논리곱 연산자 (and 역할 수행)
  • || : 논리합 연산자 (or 역할 수행)

 

3. 자료형 검사

typeof 연산자 사용

  • typeof(’문자열’)
    • typeof이 어디에 적용되는지 구분하기 쉽지 않으므로 일반적으로 괄호를 사용한다.

 

4. 템플릿 문자열

  • 문자열 내부에 표현식을 삽입할 때, 연결 연산자 ( + ) 를 사용해도 된다.
  • 하지만 다양한 결합식이 존재하면 코드가 복잡해지므로 템플릿 문자열 기능을 사용하면 편리하다.
  • 백틱()으로 감싸고, 문자열 내부에 ${}`를 삽입해 표현식을 넣으면 문자열 안에서 계산된다.
console.log('표현식 373 + 53의 값은 ${373 +53} 입니다.')

 

5. 상수

  • 항상 같은 수라는 의미로 값에 이름을 한 번 붙이면 수정할 수 없다.
    • 값을 넣으면 꺼낼 수 없는 자물쇠 잠긴 상자와 같다.
    • 내용을 다시 꺼낼 필요가 없으니까 쌓을 수 있고, 따라서 저장효율(성능)이 좋다.
  • 변수보다 훨씬 많이 사용된다.
  • 상수를 만드는 과정을 ‘선언’이라고 표현하고, const 키워드로 선언한다.
const pi = 3.141592
console.log(2 * pi)

 

6. 변수

  • 변할 수 있는 수로, 값을 수정할 수 있다.
    • 값을 꺼내고 넣을 수 있는 뚜껑 열린 상자라고 생각하면 된다.
    • 수시로 넣고 빼야 해서 위를 막을 수 없고, 스택처럼 쌓을 수 없어 저장효율(성능)이 나쁘다.
  • 변수를 만들 때는 let 키워드를 사용한다.
  • 상수와 비교했을 때 유연한다.
  • +=, -=, *=, /=, %=와 같은 복합 대입연산자, ++, -- 같은 증감 연사자(전위, 후위 모두 가능)를 사용할 수 있다.

 

7. undefined

  • 선언하지 않고 사용했을 때, 값이 없는 변수 등에서 undefined 자료형을 만날 수 있다.
  • null과는 다른 값이다.

 

8. 자료형 변환

10과 “10”이라는 문자열을 곱하면 어떻게 될까? 자바스크립트는 내부적으로 자료형을 변환해 100이라는 값을 출력해준다. 자료형이 어떠한 형태로 변환되는지 알면 자바스크립트의 변환 처리를 이해할 수 있다.

1) 숫자 자료형으로 변환하기

  • Number()함수를 사용한다.
Number("273")
// 273 출력됨
typeof(Number("273")
//"number" 출력됨
  • 만약 다른 문자가 들어있는 상태로 Number() 함수에 입력하면 어떻게 될까?
    • 다른 문자가 들어있어서 숫자로 변환할 수 없는 문자열의 경우 NaN이라는 값을 출력한다.
    • NaN은 Not a Number라는 뜻으로, 자바스크립트에서 숫자이지만 숫자로 나타낼 수 없는 숫자를 뜻한다.
Number("$273")
//NaN 출력됨
typeof(Number("$273"))
//"number"출력됨
  • Number()함수를 사용하지 않고도 연사자를 사용해 변환할 수 있다.
  • 즉, 숫자가 아닌 자료에서 0을 빼거나 1을 곱하거나 1로 나누면 숫자 자료형으로 변환한다.
    • 참고로, 불린 값과 숫자를 연산하면 불이 숫자(false = 0, ture = 1)로 변환된 뒤에 연산이 진행된다.
true - 0 
// 1

typeof(true - 0)
//"number""

2) 문자열을 자료형으로 변환하기

  • 다른 자료를 문자열 자료형으로 변환할 때, String() 함수가 사용된다.
String(53.272)
//"53.272"
  • 문자열 연산자를 사용해 자료형을 변환할 수 있다.
273 + ""
//"273"
true + ""
//"true"

3) 불린 자료형으로 변환

  • Boolean() 함수를 사용한다.
  • 대부분의 자료는 불로 변환했을 때 true로 변환된다. 다만, 아래 5개 자료형은 false로 변환된다.
    • 0
    • NaN
    • ‘…’ 혹은 “…” (빈문자열)
    • null
    • undefined
Boolean(NaN)
//false 출력됨
Boolean(null)
//false 출력됨
Boolean(232)
//true
  • 논리 부정 연산자 ! 를 사용해서 다른 자료형을 불린 자료형으로 변환 할 수 있다.
    • 다만, 2번의 논리 부정 연산자를 사용해야 한다.

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 함수  (0) 2023.02.09
[JavaScript] 반복문  (0) 2023.02.09
[JavaScript] 조건문  (0) 2023.02.09
[JavaScript] 함수  (0) 2023.02.08
[JavaScript] JavaScript 왜 쓸까?  (0) 2022.05.12
Comments