타입

타입이란?

여러 종류의 데이터를 식별하는 분류로서, 더 나아가 해당 자료형에 대한 가능한 값, 해당 자료형에서 수행을 마칠 수 있는 명령들, 데이터의 의미, 해당 자료형의 값을 저장하는 방식을 결정한다. -위키백과

타입은 데이터 타입, 자료형, 형 등으로 사용되는데 모두 같은 의미입니다. 데이터(값)이 가지는 고유한 정체성같은 거라고 생각하면 되겠네요.

타입 종류

자바스크립트의 모든 값은 데이터 타입을 갖습니다. 또한 7개의 데이터 타입을 제공합니다.

구분	데이터타입	설명
원시타입	숫자(number)	숫자, 정수와 실수 구분 없이 하나의 숫자타입만 존재
원시타입	문자열(string)	문자열
원시타입	불리언(boolean)	논리적 참과 거짓
원시타입	undefined	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
원시타입	null	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
원시타입	심벌(symbol)	ES6에서 추가된 7번째 타입
객체타입(참조타입)		객체, 함수, 배열 등

숫자 타입

자바스크립트는 하나의 숫자 타입만 제공합니다. 배정밀도 64비트 부동소수점 형식을 따른다고 합니다. 즉, 모든 수를 실수로 처리하며 정수를 위한 타입이 별도로 존재하는 것이 아닙니다. 다른 언어들은 정수는 int, 실수는 float이나 double을 사용하는데, 자바스크립트는 그냥 number라는 타입만 존재한다는 의미입니다.

그냥 그렇구나 하고 넘어가도 될 거 같네요.

var integer = 10; // 정수
var double = 10.12; // 실수
var negative = -20; // 음의 정수

console.log(1 === 1.0); // true

2진수 8진수 16진수를 표현하기 위한 데이터 타입이 없기 때문에 값을 참조하면 모두 10진수로 해석됩니다.

var binary = 0b0101; // 2진수
var octal = 0o101; // 8진수
var hex = 0x41; //16진수

특별한 값도 표현 가능합니다.

Infinity: 양의 무한대
-Infinity: 음의 무한대
NaN: 산술 연산 불가 (not a number)

문자열 타입

문자열 타입은 텍스트 데이터를 표현할 때 사용합니다. 작은 따옴표, 큰따옴표, 백틱으로 텍스트를 감싸 사용합니다.

var string;
string = 'str';
string = "str";
string = `str`;

템플릿 문자열

특별히 백틱을 사용하면 템플릿 리터럴이라는 표기법이 됩니다. 이는 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 여러 기능을 제공하죠.

템플릿 리터럴은 기존에 +연산자를 사용하여 문자열을 연결시키는 방식보다 훨씬 편하기 때문에 자주 사용하게 됩니다.

var multiLine = `여러 줄로 표시가

가능하다.`;

var name = 'kim';
var expression = `안녕하세요 ${name}입니다.`; // 안녕하세요 kim입니다.

태그드 템플릿

일반 함수호출과 달리 함수명`` 형식입니다. 첫파라미터는 정적데이터가 저장되고 나머지는 동적 데이터가 저장됩니다. 함수를 공부하고 확인하면 더 좋겠네요.

var name1 = 'kim';
var name2 = 'park';
function test(static, ...args){
  console.log(static); // ['hi ', ' and ', '', raw: Array(3)]
  console.log(args); // ['kim', 'park']

}
test`hi ${name1} and ${name2}`

문자열 연결 연산자 +

+는 산술 연산자이면서 문자열과 쓰일 때는 문자열 연결 연산자로 사용됩니다. 숫자와 문자열을 같이 쓰이면 숫자타입을 문자열로 암묵적으로 형변환되어 문자로 인식된다는 것을 기억하세요!

var string = 'hi ' +'kim'; // 'hi kim'
var numberString = 1 + 'test'; // '1test'

불리언 타입

불리언 타입은 논리적 참, 거짓을 나타내는 true와 false만 존재합니다. 불리언은 값을 비교하는 경우, 특정 조건을 확인하는 경우 등 많이 사용됩니다.

var foo = true;
console.log(foo); // true

단, false의 의미를 나타내는 falsy값도 존재합니다.

// 대표적인 falsy 값
0
-0
0n
''
""
``
null
undefined
NaN

주의할 것은 falsy값이 false와 같다는 것은 아닙니다. 일치 연산자 ===를 사용한다면 주의해야 됩니다.

0 === false; // false
0 == false; // true

// 불리언의미로 비교하고 싶을 때
Boolean(0) === false; // true
!!0 === false; // true 0을 암묵적으로 불리언으로 바꾸어 비교

리액트에서 고려해야 되는 경우가 있을 수 있습니다. false의 경우 화면에 출력되지 않지만, 0은 falsy값이어도 출력되죠. 당연한 것이지만 count를 사용할 때 놓칠 수 있을 것 같네요.

const test = <div> { 0 && 'test' }  </div>; // 화면에 아무것도 출력되지 않기를 원한다. 
  ...

return (
  {test}
) // 0이 출력된다

undefined 타입

undefined 타입의 값은 undefined가 유일합니다. 변수 선언 후 자바스크립트 엔진이 undefined로 초기화하죠. (변수 포스트에서 설명합니다.)

var foo;
console.log(foo); // undefined

중요한 것은 이 값은 개발자가 필요에 의해서 의도적으로 할당한 것이 아니라 자바스크립트 엔진이 임의로 초기화한 값이라는 것입니다. 어떤 의미를 가지고 사용한 것이 아니라는 것이죠. 실행 중간 결과가 undefined가 출력된다면, 무언가 잘못되고 있다는 것일 수 있겠죠?

null 타입

null 타입의 값은 null이 유일합니다. 이 값은 undefined와 다르게 변수에 값이 없다는 것을 의도적으로 명시할 때 사용합니다. 이전 참조값을 참조하지 않겠다는 의미죠.

var foo = 'foo';
foo = null;

유효한 값을 반환할 수 없을 때에도 null을 반환하기도 합니다.

심벌 타입

심벌은 ES6에 추가된 타입으로 다른 값과 중복되지 않는 유일무이한 값입니다. 심벌은 Symbol함수를 호출해 생성합니다.

TODO 심벌에 대해 정리한다.

객체 타입

원시 타입과 다르게 객체 타입은 변경 가능한 값이라고 할 수 있습니다. 그렇다면 원시 타입은 변경이 불가능하다는 것인데, 재할당해주면 변경되는 것이 아닐까요?

답을 드리자면 변경된다는 것은 그것을 의미하는 것이 아닙니다. 이는 변수 포스트에서 설명한 왜 이름이 있는 방에 값을 넣는 것이 아닌지와 연관이 있습니다. 방에 있는 값을 다른 값으로 교체하는 것 (수정할 수 있다는 것입니다.) 과 새로운 값이 있는 방에 이름표를 붙이는 것이 다르기 때문이죠. 전자는 변경 가능한 값이고, 후자는 변경 불가능한 값입니다.

숫자 80은 90으로 바꿀 수 없는 그 자체로 80입니다. 80에 10을 더하면 되는 것이 아닌가할 수 있지만, 더한 값은 새로운 방에 저장되는 것입니다.

이에 대해 자세한 설명은 추후 포스트에 정리하도록 하겠습니다.