JavaScript 데이터 타입

* 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다.

(섹션 2 : 23~25)

 

 

 

---

 

 

 

 

데이터 타입은 숫자와 문자열로 나뉠 수 있다.

 

숫자

정수(양수, 음수)와 소수 등

* 22.956과 같이 소수점 이하에 소수를 가진 수를 부동수 또는 부동 소수점 수라고 부른다.

 

활용 예시: 계산기 만들 때, 가격을 다룰 때 등

 

 

문자열 

텍스트를 작은따옴표, 큰 따옴표, 백틱으로 감싸서 문자열을 생성할 수 있다.

 

작은따옴표, 큰 따옴표, 백틱 중에서 무엇을 사용하든 상관없지만 일관성을 유지하는 것이 중요하다. 하지만 작은따옴표와 큰 따옴표와 달리 백틱만의 특별함이 있다. 그것은 아래에서 확인할 수 있다. 

 

활용 예시: 로그인된 사용자의 이름을 다루거나 사용자에게 메시지를 보내야 할 때 등

 

 

문자열 사이에 변수 값이나 숫자 연산을 사용하고자 할 때

출력할 때 어떤 것을 따옴표나 백틱으로 감싸면 숫자나 변수라도 모두 문자열로 인식하기 때문에 텍스트 그대로 출력된다. 변수 값이나 숫자 연산을 사용하고자 한다면 따옴표를 감싸지 않은 + 연산자를 통해 문자열을 결합시켜 사용할 수 있다,

 

 

사용 예시

 

const defaultResult = 0;

let calculationDescription = "(" + defaultResult + " + 10) * 3 / 2 - 1";

 

 

calculationDescription이라는 변수에 문자열 값을 넣어주는 예시인데 여기서 문자열 사이에 defaultResult 상수를 사용하고 싶을 때 + 연산자를 사용해 문자열을 결합시켜 주었음을 볼 수 있다.

 

 

작은따옴표나 큰 따옴표 자체를 출력하고자 할 때

• 작은따옴표가 포함된 문자열을 출력하고자 할 때 : 큰 따옴표로 감싸준다. → 문자열을 생성하기 위해 큰 따옴표를 사용했기 때문에 그 사이 모든 것은 텍스트로 간주됨
• 큰 따옴표가 포함된 문자열을 출력하고자 할 때: 작은따옴표로 감싸줌

 

 

백틱만의 특별함

백틱을 사용하면 문자열 사이에 변수 또는 연산할 값을 넣을 때 + 연산자를 사용하지 않고 ${변수 또는 연산할 값}를 통해 간단하게 나타낼 수 있다. 이것을 template literal이라고 부른다.

 

 

사용 예시

 

let calculationDescription = `(${defaultResult} + 10) * 3 / 2 - 1`

 

 

앞의 코드와 비교하여 확실히 간단하게 나타낼 수 있다는 것을 볼 수 있다.

 

 

 

이것의 또 다른 편리한 점 중 하나는 여러 행으로 된 문자열(줄 바꿈을 포함한 문자열)을 쉽게 작성할 수 있다는 것이다. 백틱을 사용하면 단순히 줄 바꿈을 통해 이것을 문자열로 인식하여 실제로 나타내어진다. 따라서 줄 바꿈이 IDE에서 가독성에 도움을 줄 뿐만 아니라 실제로 문자열의 일부라는 것을 기억해야 한다.

* 만약 h2 태그로 인해 줄 바꿈이 나타나지 않는다면 h2 요소에 white-space: pre;를 설정하여 줄 바꿈이 실제로 존재함을 화면에서 확인할 수 있다.

 

 

사용 예시

 

let calculationDescription = `(${defaultResult} + 10) 

* 3 / 2 - 1`;

 

백틱으로 감싸 져 있는 문자열에 줄 바꿈을 해준 후

 

 

 

 

이 부분을 클릭한 후 element.style에 white-space: pre;를 설정하여 주면

(브라우저와 h2 요소의 기본적인 행동 방식 때문에)

 

 

 

 

 

다음과 같이 줄 바꿈이 되었음을 확인할 수 있다.

 

 

 

 

일반 문자열(따옴표를 이용한 문자열)에서 여러 행으로 된 문자열 작성 방법

문자열을 따옴표로 닫은 후에 + 연산자를 적고 줄 바꿈을 한 후 다시 따옴표를 열어서 줄 바꿈 후 작성할 문자열을 적으면 된다. 하지만 이때 줄 바꿈은 문자열로 인식하지 않기 때문에 실제로 줄 바꿈이 되지 않는다. IDE에서 가독성에 도움을 줄 뿐이다.

 

실제로 줄 바꿈이 되게 하려면 특수 문자 \n을 사용해야 한다.

 

 

 

사용 예시

 

 

let errorMessage = "An error\n" + "occured!";

 

 

새로운 변수를 생성하여 문자열 값을 넣어주었다.

 

 

 

 

 

문자열에 특수 문자 \n을 사용하여 실제로 줄 바꿈이 되었음을 볼 수 있다.

 

 

 

※ 참고

문자열에서 \를 사용하는 것은 \ 뒤에 오는 문자를 탈출시켜준다는 의미이다.

 

ex1) \n

n이 \와 결합함으로써 탈출하게 되어 n이 출력되지 않고 줄 바꿈이 된다.

 

ex2) \'

작은따옴표가 \과 결합함으로써 '를 탈출시켜주기 때문에 '가 출력된다. 작은따옴표로 감싸져 있는 문자열에 작은따옴표를 포함한 문자열을 출력하고자 할 때 \를 사용하면 오류가 나지 않고 작은따옴표 자체가 출력된다.