[JavaScript] 원시형 - String, Number (문자, 숫자 데이터)

 

자바스크립트의 데이터에 대해 살펴본다. 제일 먼저 문자 데이터와, 숫자 데이터에 대해 정리를 해본다. 터미널에서 npm run dev를 입력하여 개발 서버를 오픈해놓은 상태로 브라우저에 출력을 하여 기본 프로젝트 준비를 해주었다. 이 상태에서 main.js 파일 열어서 간단하게 내용을 테스트 해본다.

---

String

문자 데이터

 

const string1 = "Hello";
const string2 = "Hello";
const string3 = `Hello ${string1} ?!`;

 

const 키워드를 통해서 string1 이라는 변수를 만들어서 큰 따옴표 ("") 사용해서 문자를 만들 것이고, 이렇게 Hello 라는 텍스트를 작성해본다. 문자 데이터는 큰 따옴표 (" ") 를 사용해서 작성할 수도 있고, 혹은 작은 따옴표 (' ') 를 사용할 수도 있다. string2 변수에는 ' '를 활용해서 Hello 텍스트를 작성해봤다. 우리가 문자 데이터를 만드는 것은 " ", ' ' 를 사용하는 것 뿐만 아니라 백틱 (` `) 이라는 기호를 사용하는 템플릿 리터럴 (Template Literal) 방식도 존재한다. " " 와 ' ' 는 자바스크립트 코딩을 하면서 둘 중에 하나의 기호만 선택해서 사용하면 된다. 그래서 일종의 취향의 차이로 " " 혹은 ' ' 를 선택적으로 사용하면 된다.

 

` ` 이라는 기호를 사용하는 문자 데이터는 선택의 개념보다는 '보간' 이라는 데이터를 문자 데이터 내부에 채워넣는 용도로 사용할 수 있다. 그래서 보간 처리를 할 때는 문자 데이터 내부에서 $ 사인으로 시작해서 중괄호를 열고 닫아서 작성할 수가 있겠고, 중괄호 사이에다가 가지고 있는 어떤 데이터를 채워넣을 수 있다. string1 변수를 채워넣어봤다. string1 이라는 변수가 가지고 있는 데이터가 문자 데이터 사이로 들어갈 수 있게 된다.

 

 

그리고나서, 중괄호가 끝난 이후에다가 띄어쓰기 한 칸 넣고 물음표와 느낌표를 추가하게 되면 이것이 어떤 문자로 완성이 될까 console.log를 통해서 string3을 출력해보자. 그리고나서 저장한 후 개발자도구에 console 창을 확인해보면 Hello Hello ?! 라고 띄어쓰기까지 잘 뜨는 것을 확인할 수 있다. 이렇게 콘솔에 출력된 두 번째 Hello 라는 문자는 string1이 가지고 있었던 Hello라는 글자가 '보간 처리' 되서 출력이 된 것이다.

 

=> 정리를 하자면, " "와 ' '는 선택적으로 원하는 기호로 사용하면 되고, `` 이라는 기호로 만드는 문자 데이터는 중간에 어떤 데이터를 채워넣을 때 사용하면 된다. 이렇게 백틱이라는 기호를 통해서 문자 데이터를 만드는 것을 템플릿 리터럴 (Template Literal) 이라고 하고, 여기에서 말하는 리터럴 이라는 개념은 어떠한 기호를 통해서 데이터를 만드는 방식을 이야기 한다. " "나 ' '를 사용해서 만드는 것도 기호를 통해서 데이터를 만드는 방식이기 때문에 전부다 리터럴 방식이라고 부를 수 있는데 백틱 기호를 사용하는 것은 앞에 '템플릿' 이라는 단어를 사용해서 템플릿 리터럴 이라고 부르는 것이다. 이 리터럴 이라는 단어를 기억해두고, 어떠한 기호를 통해서 데이터를 만드는 방식이라고 기억하고 있으면 되겠다.

 

---

 

Number

숫자 데이터

 

 

number 라는 변수이름을 추가해서 숫자데이터 123을 할당해본다. 그리고나서 console.log를 통해서 number 라는 데이터를 출력하게 되면 숫자 데이터 123이 잘 출력이 된다. 그리고나서 숫자는 연산이 가능한데, 간단하게 number 라는 변수에다 + 1을 하게 되면 number 라는 데이터가 가지고 있는 123 이라는 숫자에서 1을 더하는 것이기 때문에 124 라는 숫자가 콘솔창에 출력이 된다.

 

 

그리고 이 숫자 데이터는 기본적으로 양수를 나타내는데, 음수도 작성할 수 있다. numer 라는 변수에 할당되는 숫자 앞에다가 - 기호를 추가하게 되면 number는 -123 이라는 숫자이고 거기에 숫자 +1 을 추가해서 콘솔에 출력하니까 -122 라는 숫자가 출력이 된다. -123 + 1 이라는 결과라는 것으로 이렇게 음수를 추가할 수도 있겠고, 부동소수점 숫자를 만들 수도 있다. 단순하게 숫자 뒤에다 마침표를 추가하고 또다른 숫자가 입력되는 것이다.

 

 

그래서 우리가 대표적으로 알고있는 것이 3.14 라는 원주율인데 pi라는 이름의 변수에다가 3.14 라는 소수점 자리의 숫자를 할당할 수도 있겠고, 그리고 맨 앞의 숫자가 0인 경우에는 0.14가 되는 것인데 정수 부분이 숫자 0일 때는 이렇게 숫자 0을 제거해서 .14 라고 작성할 수도 있다. 이런 방식은 우리가 CSS 작성할 때 많이 봤을 것이다. .14를 pi 라는 이름으로 출력하게 되면, 콘솔창에 0이 자동으로 붙어서 0.14 라고 뜨는 것을 확인할 수 있다.

 

 

주의할 부분이 하나 있다. 예를 들면, 지금 console.log 에서 number 라는 부분에서 숫자 1을 더하고 있는데, + 기호 뒤쪽에 있는 숫자 1을 숫자 데이터가 아니고 다른 데이터로 넣어보도록 한다. undefined 라는 자바스크립트 데이터를 넣어보게되면 저장을 했을 때 NaN 이라는 단어가 콘솔에 출력되는 것을 볼 수 있다. NaN은 Not a Number 라는 약어이다. 그래서 숫자가 아닌 숫자 라는 것이다. 그래서 데이터의 타입은 숫자인데 숫자로 표기할 수 없는 값을 의미한다.

 

 

그래서 이 Not A Number 라는 데이터가 숫자 데이터인지 확인하기 위해서 우리가 사용할 수 있는 자바스크립트 키워드가 typeof 라는 것이 있다. (nuber +undefined) 부분을 소괄호로 한 번 묶어주고, 소괄호 앞에서 typeof 라는 키워드를 붙여주면 이 결과의 타입을 콘솔 로그로 확인할 수 있다. 그것과 같은 방식으로 pi 라는 0.14 라는 데이터 타입도 콘솔에 출력해서 확인해보자. 2개의 콘솔 앞에 typeof 라는 키워드를 추가한 상태로 저장한 후 콘솔을 보면 이렇게 NaN 부분도 숫자 데이터 number, pi 부분도 number 숫자 데이터 라는 것을 확인할 수 있다.

 

그래서 이렇게 NaN (Not A Number) 라는 데이터를 보면, 이것은 타입 자체는 숫자 데이터인데 어떤 특정한 숫자값으로 표현을 할 수 없기 때문에 이렇게 NaN 이라는 단어로 표시를 하는 것이라고 이해하면 된다. NaN가 나왔다는 것은 숫자 연산에 숫자가 아닌 다른 값이 포함되어져 있을 가능성이 높기 때문에 기본적으로 코드를 다시 검사 해봐야하는 것이다. 그래서 일반적인 경우에는 긍정보다는 부정의 의미로 보통 많이 해석이 된다. 

 

---

새로운 예제 ▼

 

 

이런 경우 우리가 기본적인 산술만 할 줄 알면 0.3 이라는 결과가 도출될 것이라고 예상이 간다. 하지만 콘솔에는 0.3 뒤쪽에도 주르르륵 0.300000000000004 의 결과값이 나온다. 이런 부분이 왜 발생하냐면, 이 문제 자체는 부동소수점 오류라고 해서 컴퓨터가 기본적으로는 0과 1의 이진수를 이용해서 동작하게 되는데 우리가 숫자를 표하려면 기본적으로 십진수를 써야된다. 그랬을 때 컴퓨터가 십진수를 이진수로 표현을 해야되기 때문에 간혹 '무한소수' 라는 개념이 발생하게 되고, 이것을 무한한 것이 아니고 유한하게 표현하기 위해서 세부적인 값에 초과나 혹은 손실로 계산오류가 발생할 수 있다.

 

그래서 우리가 일반적으로 코딩할 때는 이 부분에 문제가 아주 심각한 것은 아니지만 그래도 기본적인 내용은 알고있어야 문제를 해결하거나 오해할 수 가 있겠다. 그래서 일단 a와 b의 더한 값이 0.3으로 출력되게 하기 위해 약간의 작업이 필요하다. 일단 0.3 뿐만 아니고, 소수점이 계속 추가되고 있는 부분을 우리가 원하는 소수점 단위까지 잘라낼 것이다. 그때 우리가 사용할 수 있는 것이 'Tofixed' 라는 메소드가 있다. 숫자데이터에서 바로 활용할 수가 있는데, a와 b를 더하는 코드를 소괄호로 묶어서 뒤에 (a+b).toFixed() 라는 메소드를 호출한다!

 

 

우리가 원하는 것 소수점 자리에 숫자 3이 있는 부분, 소수점의 첫 번째 자리까지만 남겨놓고 나머지는 제거할 것이기 때문에 toFixed에 인수로 숫자 1을 적어준다. 그리고나서 저장을 하게 되면 0.3 뒤에 00000이 전부 다 잘리고, 소수점에 한 자리 숫자만 남는 것을 볼 수 있는데 toFixed 라 메소드에서 주의할 부분이라면, toFixed는 숫자 데이터를 문자 데이터로 바꾸게 된다. 그래서 일반적으로 숫자 데이터를 출력하게 되면 파란색 글씨로 콘솔에 나타나게 되는데 지금은 흰색으로 글자가 출력되고 있다.

 

 

그래서 아까 확인했던 것처럼 출력되는 데이터에 타입을 확인하기 위해서 앞쪽에 typeof 라는 키워드를 추가하고, 저장하게되면 지금 출력된 값은 숫자 데이터가 아닌, 문자 데이터 string인 상황이다. 또 이것을 숫자 데이터로 바꿀 때 쓸 수 있는 것이 바로 number 라는 자바스크립트의 내장함수가 있다.

 

 

우리가 출력하는 a와 b를 더해서 toFixed 라는 메소드로 소수점 자리를 한 자리까지만 남겨놓는 코드를 잘라내서 (a+b).toFixed(1) 그 자리에다가 대문자 N으로 시작하는 Number 라는 함수를 이렇게 호출하고, 함수의 인수로 잘라낸 코드를 붙여넣는다. Number((a+b).toFixed(1)) 그러면 이 Number 함수를 통해서 숫자값을 포함하고 있는 문자 데이터를 말그대로 숫자 데이터로 변환을 시켜준다. 이렇게 변환된 값은 숫자 데이터 number로 출력이 된다.

 

 

앞에 typeof 라는 키워드만 제거하면, 이제 숫자 데이터 0.3 으로 보라색 글씨가 되어져 있는 것으로 콘솔에서 내용을 확인할 수 있다.

 

=> 컴퓨터에서는 이렇게 부동소수점의 숫자를 연산할 때 간혹 문제가 발생할 수 있겠고, 그 때 우리는 우리가 원하는 값의 소수점 지로 잘라내서 그것을 명확하게 숫자 데이터로 바꿔서 사용해야 한다. 그래서 이렇게 사용하는 toFixed 라던가, Number 라는 함수는 뒤 포스팅에서 더 자세하게 다룰 예정이다. 일단 이렇게 문제와 해결 방법에 대해 기억하고 있어야겠다.