1. 데이터 타입

1.1 데이터 타입의 종류

JS에서 데이터 타입은 크게 원시타입, 객체타입 2가지로 나뉜다.

• 6가지 원시타입

데이터 타입	설명
숫자(number)	정수, 실수 구분없이 모든 숫자
문자(string)	문자열
불리언(boolean)	참/거짓 (true/false)
undefined	선언된 변수에 암묵적으로 할당된 값
null	아무 값도 없음을 나타내는 값
심볼(symbol)	고유한 의미를 가지는 값

• 객체타입
  객체, 함수, 배열, 클래스 등은 모두 객체타입이다.

1.2 데이터 타입이 필요한 이유

모든 값은 각각의 데이터 타입이 있다.
데이터 타입이 중요한 이유는 변수에 값을 할당할 때, 데이터 타입에 따라 필요한 메모리 공간이 다르기 때문에 변수를 참조할 때도 얼마나 메모리를 확인해야하는지 알 필요가 있다.

예를 들어, var x = 100; 변수 x에 100이라는 숫자 데이터 타입의 값을 할당하고 싶다. 그러면 JS엔진은 런타임때 할당하는 값의 데이터를 추론해 숫자 데이터에 해당하는 메모리 공간을 확보한다.
8바이트의 메모리 공간을 확보하고 100의 값을 2진수로 바꾸어 저장할 것이다.
이 때, x는 100의 값이 저장되어 있는 가장 맨 위의 주소를 가리키고 있고, 참조할 때 해당 메모리 주소를 찾아 2진수의 값을 숫자 데이터로 다시 해석해준다.

즉, 데이터 타입을 통해 값을 저장하기 위해 메모리 크기를 결정하고, 참조하는 변수의 메모리 크기를 알 수 있으며, 2진수로 저장된 값을 원하는 데이터 타입의 값으로 해석 해준다.

1.3 숫자 타입

숫자 타입은 배정밀도 64비트의 부동소수점 형식을 따른다.
JS에서는 JAVA나 C언어와 같이 int, float 처럼 정수인지, 실수인지 구분하지 않고 number 라는 하나의 숫자타입만 가지고 있다.

또한 2진수, 8진수, 16진수로 할당한 값도 모두 10진수로 표현한다. 모두 10진수의 실수 값으로 처리하기 때문이다.

var binary = 0b00000001;
var octal = 0o0001;
var hex = 0x01;

console.log(binary) // 1;
console.log(octal) // 1;
console.log(hex) // 1;

추가로 3가지의 예외적인 값을 표시할 수 있다.

• Infinity : 양의 무한대
• -Infinity : 음의 무한대
• NaN : 산술 연산이 불가

1.4 문자열 타입

JS가 문자열 타입임을 알기 위해서는 작은 따옴표('), 큰 따옴표("), 백틱(`)으로 감싸주어야 한다.

var small = 'hi, """" ';
var big = "hi, '''' ";
var backtic = `hi, ", ' `;

만약 작은 따옴표를 사용해 문자열을 표시할 경우, 작은 따옴표를 내부에서 사용할 수 없고 큰 따옴표를 사용해야한다. 반대로 큰 따옴표로 문자열을 표시하면, 작은 따옴표를 쓸 수 있다.

ES6부터 백틱(`)을 사용할 수 있는데, 백틱 내부에서는 공백, 작은 따옴표, 큰 따옴표는 물론 개행도 입력할 수 있다.

var str = `hi,
I'm joo.
How are you?`;

하지만, 작은 따옴표나 큰 따옴표로 나타낸 일반 문자열은 \n 과 같은 이스케이프 시퀀스를 사용해 개행을 나타내야 한다.

또한 백틱을 사용한 문자열 리터럴은 표현식도 삽입할 수 있다.

var name = "joo";

var str = `hi, I'm ${name}`;

console.log(str) // hi, I'm joo

1.5 boolean, undefined, null 타입

1.5.1 boolean

boolean 타입은 true/false 두가지 밖에 없다.

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

foo = false;
console.log(foo) // false

1.5.2 undefined

undefined 타입을 가지는 것은 undefined만이 유일하다.

변수를 선언할 때, JS 엔진이 메모리를 초기화하는 용도로 undefined를 임의로 사용한 값이다.

따라서 개발자가 한번도 할당하지 않은 변수임을 알 수 있으며 초기화하지 않았으므로 undefined를 마음대로 사용하지 않아야 한다.
원래 undefined가 존재하는 의미가 폐색되어질 수 있기 때문이다. 변수 값이 없음을 명시할 때는 null을 사용하는 것이 좋다.

1.5.3 null

null 타입을 가지는 것은 null이 유일하다.

null은 의도적을 변수의 값이 부재한다는 것을 나타내기 위해 사용한다. 변수가 이전에 참조하던 값을 사용하지 않음을 의미한다.

또한 함수가 유효한 값을 반환하지 않는 경우 null을 반환하기도 한다.

1.6 symbol 타입

symbol 타입은 ES6에서 추가된 타입으로, 변경이 불가능한 원시 타입이다.
다른 값과 중복이 되지 않는 유일한 값이기 때문에, 겹칠 위험이 거의 없는 프로퍼티의 키 값으로 주로 사용된다.

symbol은 다른 원시 데이터 값과 다르게 함수를 호출해 생성한다.

var key = Symbol('key');
console.log(typeof key); // symbol

var obj = {};
obj[key] = 'value';

1.7 객체 타입

객체 타입은 JS에서 원시 데이터 타입을 제외한 모든 데이터 타입에 해당한다. JS는 객체 기반의 언어로 JS를 이루는 대부분이 객체로 만들어졌다.

객체는 추가로 포스팅할 예정!

1.8 동적 타입

JS는 정적 타입의 언어와 달리 변수를 선언할 때 데이터 타입이 정해지지 않는다. 변수에 값을 할당할 때 데이터 타입이 정해지기 때문에 var, let과 같은 키워드로 변수가 선언되고 나면 변수에 다양한 타입의 값을 할당할 수 있고, 할당된 값에 따라 데이터 타입이 바뀐다.

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

foo = 1;
console.log(typeof foo); // number

foo = 'hi';
console.log(typeof foo); // string

foo = null;
console.log(typeof foo); // object

foo = Symbol();
console.log(typeof foo); // symbol

그런데 위의 코드에서 한가지 의문이 든다.
분명 null값은 null 타입이 유일한데 object 타입으로 출력이 된다.

실제로 브라우저에서 실행해봤더니 정말 object 타입으로 나왔다.

이유가 무엇일까? 🤔

typeof 는 연산자로 피연산자인 foo 값의 데이터 타입을 문자열로 반환해준다.
반환되는 종류는 number string undefined symbol object function 중 한 가지가 반환되며, 원래 알고 있던 데이터 타입 null 은 반환되지 않는다.

JS가 가진 버그로 기존 코드에 영향을 줄 수 있어 수정되지 못하고 있다고 한다.
따라서 값이 null인지 확일할 때는 === 일치 연산자를 사용해 판단하는 것이 좋다.

var foo = null;

typeof foo === null // false
foo === null; // true

2. 연산자

연산자는 피연산자를 평가해 어떠한 값을 도출해낸다.
대표적으로 +, -, /, * 와 같이 수학에서 사용하는 산술 연산자, 문자열 연결 연산자, 할당 연산자, 동등/일치 연산자, 비교 연산자, typeof 연산자 등등 있다.

2.1 산술 연산자

2.1.1 이항 연산자

2개의 피연산자를 연산해 새로운 값을 도출한다.
덧셈 +, 뺄셈 -, 곱셈 *, 나눗셈 /, 나머지 % 와 같은 연산자가 있다.

1 + 1 // 2

1 - 1 // 0

1 * 1 // 1

1 / 1 // 1

5 % 2 // 1

2.1.2 단항 연산자

1개의 피연산자를 연산한다.

• ++ : 기존의 값을 증가시켜 변경하기 때문에 부수 효과가 있다.
• -- : 기존의 값을 감소시켜 변경하기 때문에 부수 효과가 있다.
• + : 값에 +를 해도 변화는 없다.
• - : 값에 -를 하면 양수는 음수가 되고, 음수는 양수가 되어 새로운 값을 도출한다.

var foo = 1;

foo++ // foo = foo + 1;
console.log(foo); // 2

foo-- // foo = foo - 1;
console.log(foo); // 1

+foo // 1

-foo // -1

++ 나 -- 가 피연산자 앞에 위치했는지, 뒤에 위치했는지에 따라 할당과 연산의 타이밍이 다르다.
예로, 아래 코드에서 ++ 나 -- 가 앞에 위치해 있으면 foo 의 연산이 이루어진 다음에 result 에 값이 할당이 된다.
그러나 ++ 나 -- 가 뒤에 위치해 있으면 result 에 먼저 값이 할당되고 foo 의 값이 연산되어 변경됨을 알 수 있다.

var foo = 1, result;

// 선증가 후할당
result = ++foo;
console.log(result, foo) // 2 2

// 선할당 후증가
result = foo++;
console.log(result, foo) // 2 3

// 선감소 후할당
result = --foo;
console.log(result, foo) // 2 2

// 선할당 후감소
result = foo--;
console.log(result, foo) // 2 1

기본적으로 + - 를 숫자 앞에 붙이면 양수나 음수로 바뀌는데 숫자가 아닌 문자열이나 불리언 값에 붙이면 타입 변환이 이루어진다.

var x = '1';

console.log(+x); // 1
console.log(x); // '1'

var x = true;

console.log(-x); // 0
console.log(x); // true

var x = 'hi';

console.log(+x); // NaN
console.log(x) // 'hi'

2.2 문자열 연결 연산자

만약 피연산자 중에 문자열 표현식이 하나 이상 있을 경우 + 연산자는 문자열을 연결하는 의미로 해석되어 수행한다.
또한 문자열이 아닌 다른 타입 + 숫자 인 경우는 다른 원시 타입이 숫자로 타입 변환되어 수행한다. null 은 숫자 0 으로 변경되고, true 는 숫자 1 로 변경된다.

1 + '2'; // '12'

1 + 1; // 2

1 + true; // 2

1 + undefined; // NaN

1 + null; // 1

JS에서 연산할 때, 강제로 타입이 변환되어 연산이 수행되는 것을 암묵적인 타입 변환이라고 한다.