[ Javascript ] 자료형

값: 프로그램에서 조작할 수 있는 데이터
자료형: 값의 종류
식, 표현식(expression): 값이 나오는 명령
연산자: 값에 대해 특정 작업을 수행하는 기호

#1 문자열

문자열이란 하나 이상 나열 된 문자들이다. 시작과 끝이 작은 따옴표(’’) 또는 큰 따옴표(””)로 감싸져 있다.

'Hello World!'; // 작은 따옴표로 감쌈
"Hello World!"; // 큰 따옴표로 감쌈

문자열을 표현할 때 사용하는 따옴표는 앞뒤로 반드시 동일해야한다.

typeof 연산자

typeof 연산자는 값의 자료형을 반환한다.

typeof "Hello World!"; // 'string'
typeof ""; // 빈 문자열도 'string'

문자열의 자료형은 string이다. 참고로, ‘’도 문자열이다. 값이 비었다고 해서 빈 문자열이라고 한다.

탬플릿 리터럴은 백틱(```)을 활용해서 문자열을 표현한다.

`Hello World!`; // 탬플릿 리터럴도 문자열이다

탬플릿 리터털은 여러줄 문자열을 편하게 사용할 수 있게 한다.

alert(`여러 줄에 표시 됩니다.

줄을 더 늘려볼까요?`);

문자열 합치기

+연산자를 통해 문자열을 합칠 수 있다.

'문자열이 긴 경우에는 ' + '문자열을 합치기도 합니다.'; // '문자열이 긴 경우에는 문자열을 합치기도 합니다.'

#2 숫자

정수, 실수, 0, 음의 정수 모두 숫자 자료형이다.

5; // 숫자
-5; // 숫자
0.0; // 숫자
'5'; // 문자열

숫자를 따옴표로 감싸면 숫자 자료형이 아니라 문자열이다.

지수표기법

아주 크거나 아주 작은 숫자를 지수표기법을 활용하여 표현할 수 있다.

5e4; // 5 * 10^4
5e+4; // 소수점 위 4자리
5e-4; // 소수점 아래 4자리

진법

숫자는 10진법 뿐만 아니라 2진법, 8진법, 16진법으로도 표현할 수 있다. 다른 진법으로 표현 된 수는 10진법인 형태를 반환한다.

10; // 10진법
0b11; // 2진법, 3
0o11; // 8진법, 9
0x1c; // 16진법, 28

문자열을 숫자로 바꾸기

문자열을 숫자로 바꿀 수 있다.

parseInt('5'); // 5
Number('5'); // 5

parseInt()

정수와 문자열을 같이 써서 인자로 전달 할 경우에 정수분분만 추출해서 반환한다. 실수도 마찬가지다.
```
  parseInt('5등'); // 5
  parseInt(3.14); // 3
```
parseFloat()

소수형 문자열을 숫자로 추출하려고 할 때 parseFloat()를 사용한다.
```
  parseFloat('3.14'); // 3.14
```
prompt()

외부에서 입력을 받을 수 있는 함수다. 입력받은 값을 반환한다.
```
  prompt("Hello");
```

⭐️ NaN

반환값이 숫자가 아님을 표시하는 값이다. 하지만 NaN은 숫자 자료형이다.

typeof NaN; // 'number'

산술연산자

숫자자료형끼리 산술연산자를 사용하면 사칙연산을 수행한다.

1 + 2;
1 - 2;
3 * 6;
6 / 4;
2 ** 4;

⭐️ 무한값

수식상 무한이 나올 때 무한값(Infinity)이 반환된다. 무한값도 숫자 자료형이다.

 0 / 0 ; // Infinity
 typeof Infinity; // 'number'

무한값도 음수를 가질 수 있다.

-2 / 0; // -Infinity

무한값을 사칙연산에 사용하면 무한값을 반환한다.

Infinity - 100; // Infinity

무한값에서 무한값을 더하면 Infinity를 반환하지만 빼면 NaN을 반환한다.

Infinity + Infinity; // Infinity
Infinity - Infinity; // NaN

⭐️ 형변환

문자열과 숫자를 더하면 문자열이 반환된다. 숫자자료형인 10은 문자열로 변환된 후 문자열 더하기 연산이 실행된 것이다.

10 + 'a'; // '10a'

숫자를 문자열로 빼면 NaN이 반환된다. 즉, 문자열이 숫자 자료형으로 변환된 후 빼기 연산이 실행된 것이다.

10 - 'a'; // NaN

숫자에서 숫자형태의 문자열을 뺄 경우에 빼기 연산에 따른 형변환 때문에 숫자 연산이 된다.

10 - '5'; // 5

⭐️ 부동소수점 문제

실수 숫자자료형 간에 연산을 할 경우에 부동소수점 문제가 발생한다. 부동소수점 문제란 컴퓨터의 한계상 실수 연산시 오차가 발생할 수 밖에 없는 문제다. 컴퓨터는 0과 1로만 데이터를 처리하기 때문에 발생한다.

0.1 + 0.2; // 0.30000000000000004

부동소수점 문제를 회피하기 위해 실수를 정수로 변환하여 계산을 한 다음 다시 본래의 실수형태로 변환한다.

(0.1 * 10 + 0.2 * 10) / 10; // 0.3

#3 불 값

true와 false를 값으로 갖는 자료형이다. true는 1, false는 0에 대응한다. 자료형은 boolean이다. 비교연산자의 결과로 boolean이 반환되는 경우가 많다.

NaN 비교하기

NaN끼리 비교할 때 false를 가진다. 비교연산자를 사용해도 마찬가치다. 불일치 연산자를 사용할 때만 참을 반환한다.

NaN == NaN; // false
NaN === NaN; // false
NaN >= NaN; // false
NaN != NaN; // true
NaN !== NaN; // true

문자열 간에 비교하기

문자열 간에는 인덱스 순으로 순서대로 비교한다. 앞에 오는 문자열이 일치할 경우에 하나씩 차이가 날 때까지 비교한다. 아스키코드가 큰쪽이 큰값으로 본다.

'b' > 'a'; // true
'ab' > 'a'; // true
'ab' > 'c'; // false

다른 자료형 간의 비교

다른 자료형 간에 비교할 경우 모두 숫자 자료형으로 형변환을 한 후에 비교를 한다. 문자열의 경우 NaN으로 형변환한다.

'3' < 5; // true
'abc' < 5; // false
'0' < true; // true

문자의 아스키코드 확인하기

charCodeAt()함수를 통해 문자열의 첫번째 문자의 아스키코드를 반환받는다. 인자로 인덱스를 넣을 경우에 해당 인덱스의 문자의 아스키코드를 반환받는다.

'a'.charCodeAt(); // 97
'abc'.charCodeAt(2); // 99

== vs ===

==는 값이 일치하는 지를 비교한다. ===는 값뿐만 아니라 자료형까지도 일치하는지를 비교한다.

논리연산자

‘그리고’와 ‘또는’은 &&와 ||에 대응한다.

10 < 5 || 6 > 8; // false
10 < 5 || 6 < 8; // true

!는 불린값을 반전시킨다. 이를 통해 자료형을 불린으로 형변환 할 수 있다. null, undefined, ‘0’, 0, NaN, ‘’를 제외하고는 모두 true이다. false를 갖는 값을 거짓인 값, true를 갖는 값을 참인 값이라고 한다.

!!a; // true
!!null; // false
!0; // true
!''; //true

&&와 ||는 불값 뿐만 아니라 다른 값도 반환할 수 있다. &&는 앞의 피연산자가 참인 경우에 뒤의 값을 반환하고 앞의 피연산자가 거짓인 경우에 앞의 피연산자를 반환한다. ||는 앞의 피연산자가 참인 경우에 앞의 값을 반환하고 앞의 피연산자가 거짓인 경우에 뒤의 값을 반환한다. 피연산자가 참인지 거짓인지는 참인 값과 거짓인 값을 활용한다.

3 && 5; // 5
4 || 6; // 4

null과 undefined가 있을 때는 널병합연산자를 통해 판단할 수 있다. 앞의 피연산자가 null이나 undefined인 경우에 뒤의 피연산자를 반환하고 아닌 경우에는 앞의 피연산자를 반환한다.

null ?? 5; // 5
undefined ?? 6; // 6
1 ?? 5 ; // 1

#4 빈값(undefined, null)

undefined

console.log(); // 출력문구는 없음. undefined 반환

함수가 반환할 값이 없을 때 빈값을 반환했다는 의미로 undefined를 반환한다. undefined는 값이자 자료형이다.

typeof undefined; // undefined

null

null도 undefined처럼 값이자 자료형이다. 값도 null로 유일하다. undefined와 값은 같지만 자료형은 다르다.

null == undefined; // true
null === undefined; // false

null의 자료형은 놀랍게도 object이다. 이는 자바스크립트가 개발 초기 당시의 버그이지만 레거시에 의해 유지되고 있다.

typeof null; // object

값이 null인지 확인하기 위해서는 typeof 보다 ===이 확실하다.

저작자표시 비영리 변경금지