Javascript 데이터 타입

📍 데이터 타입(data type)

메모리에 값을 저장하기 위해서 먼저 메모리 공간을 확보해야 할 메모리의 크기를 알아야한다. 이는 값의 종류에 따라 확보해야 할 메모리의 크기가 다르기 때문이며, 이때 값의 종류, 즉 데이터의 종류를 데이터 타입이라고 한다.
프로그래밍 입문자에게 가장 익숙한 데이터 타입은 숫자와 문자일 것이며, 프로그래밍 언어에서 사용할 수 있는 데이터로 숫자, 문자열, 불리언 등의 종류가 있다.

📍 JavaScript 데이터 타입 종류

• 자바스크립트의 모든 값은 데이터 타입을 갖는다.
• 자바스크립트에서 제공하는 데이터 타입으로는 크게 원시 타입과 객체 타입으로 구분할 수 있다.

1. 원시 타입 (primitive data type)

• 원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다.
• number, string, boolean, null, undefined, symbol로 구성되어 있다.

(1) Number (숫자형)

• 프로그래밍 언어에서의 숫자는 우리가 일반적으로 알고 있는 숫자와 그 성격이 사실상 동일하다. 우리는 숫자를 이용하여 덧셈, 뺄셈, 곱셈, 나눗셈 등의 연산을 할 수 있다.
• 자바스크립트는 정수든 소수점 숫자든 상관없이 number타입 하나로 할당되며,'number'라고 데이터 타입을 선언하지 않아도 된다. (JS에서는 타입이 다이내믹하게 결정이 되기 때문이다. 참고로 타입스크립트에서는 'number'하나만 지정해주면 끝이다.)

자바스크립트의 number 인식

alert(1+1);

• 자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자로 인식한다.
  
  

숫자를 변수에 담기

let number = 1;

• 위 코드는 'number'라는 '변수'를 생성하고, '1'이라는 '값'을 할당하는 코드이다.
  : number라는 변수를 생성하기 전까지는 자바스크립트에서 number라는 단어는 인식되지 않는 명령어지만 우리가 number라는 변수를 생성함으로 인해서, 인식 가능한 단어로 바뀌었고 해당 단어가 의미하는 값은 1이 되었다.
  
  

산술 연산과 비교 연산

- 산술 연산 (arithmetic operators)
1 + 3; // 더하기
6 - 4; // 빼기
2 * 7; // 곱하기
7 / 8; // 실수 나누기
14 % 3; // 나머지
2 ** 3; // 거듭제곱
- 비교 연산 (comparison operators)
2 < 3; // 작다
4 > 1; // 크다
3 <= 3; // 작거나 같다
6 >= 7; // 크거나 같다
5 === 5; // 같다
8 !== 9; // 같지 않다

• 모든 숫자는 +, -, /, *, %를 할 수 있으며, number 타입에 대해 위와 같은 연산자(operator)를 사용해 연산을 할 수 있다. 또, 수학에서 배운 것과 동일한 방식으로 곱하기와 나누기가 더하기와 빼기보다 더 우선시 된다.
  
  

같은 수 판별

let one = 3;
let two = 3;
console.log(one === two); // true

• 일치연산자(===)를 이용하여 같은 수인지에 대한 정보를 확인할 수 있다.

값의 종류를 판단

typeof operand
typeof(operand)

• JavaScript에서 제공하는 기능들 중 typeof라는 연산자가 있다. typeof는 값의 데이터 형을 알려주는 기능이다. 이 연산자는 어떤 종류의 값인지를 판단할 때 사용될 수 있다.
• typeof 연산자는 피연산자 앞에 위치한다.

3가지 특별한 값들의 표현

const infinity = 1 / 0;  // 양의 무한대
console.log(infinity);  // Infinity
const negativeInfinity = -1 / 0; // 음의 무한대
console.log(negativeInfinity);  // -Infinity
const nan = 1 * 'string'; // 산술 연산 불가
console.log(nan);       // NaN

• 'number' 중에서도 조금 특별한 number가 있는데, 특별한 값이 미리 정해져 있는 것들이다. (대부분의 프로그래밍 언어에서도 동일하다.)
  'Infinity / negativeInfinity / NaN' 세가지의 값들이다. NaN은 숫자가 아님을 의미하며 Infinity는 무한대를 의미한다.
  ❗️✍️ 나중에 연산할 때 나누고자 하는 값이 숫자인지 아닌지, 0인지 아닌지 확인 안하고 바로 연산하면 위의 셋중 하나의 오류로 에러가 발생할 수도 있다고 한다! 😟
  

(2) String (문자열)

• JavaScript는 일반적인 문자열(String)을 지원하는 대부분의 언어들처럼 문자형 자료형을 지원한다.
• JS에서는 한가지의 글자든 여러개의 글자든 다 string타입으로 할당이 된다.
• 일반 string과 다른 변수 (플러스 기호를 이용해서) 스트링을 붙이는 것도 확인된다.

자바스크립트의 string 인식

alert("coding everybody");
alert('coding everybody');
alert(typeof "1") // string

• 자바스크립트에서는 char형이 존재하지 않아 " 혹은 '중 어떤 것으로 감싸도 문자열로 만들어진다.
• 큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다.
• 숫자를 따옴표로 감싸면 문자가 된다.

문자열 붙이기

let a = "im";
let b = "seul";
let result = a + b;
console.log(result); // "imseul"

• 숫자들을 더할 때처럼 + 기호를 사용하여 문자열을 붙일 수 있다.

문자의 길이 구하기

let a = "coding everybody";
console.log(a.length); // 16
console.log("coding everybody".length); //16 (공백도 포함한다)

• 문자의 길이를 구할 때는 문자 뒤에 .length 를 붙인다.

이스케이프 기법

alert('egoing\'s javascript') // string

• \ 를 ' 앞에 위치시키면 ' 를 문자열의 시작과 끝을 구분하는 구분자가 아니라 단순히 문자로 해석하도록 강제 할 수 있다. 이러한 기법을 이스케이프(escape)라고 한다.

문자열 인덱스

let a= "abcdef";
console.log(a[0]); // "a"
console.log("seul"[2]); // "u"

• 문자열 종류의 값들은 인덱스 정보를 이용할 수 있다. 인덱스라는 정보는 위치 / 순서를 의미하는 것과 비슷하다고 보면 된다.
• 인덱스는 항상 '0'부터 시작한다 !

JS의 string(문자열) 타입

var str = 'Hello';
str = 'world';

• C와 같은 언어와는 다르게, 자바스크립트의 문자열은 원시 타입이며 변경 불가능(immutable)하다. 이것은 한 번 문자열이 생성되면, 그 문자열을 변경할 수 없다는 것을 의미한다.
• 첫번째 구문이 실행되면 메모리에 문자열 ‘Hello’가 생성되고 식별자 str은 메모리에 생성된 문자열 ‘Hello’의 메모리 주소를 가리킨다. 그리고 두번째 구문이 실행되면 이전에 생성된 문자열 ‘Hello’을 수정하는 것이 아니라 새로운 문자열 ‘world’를 메모리에 생성하고 식별자 str은 이것을 가리킨다. 이때 문자열 ‘Hello’와 ‘world’는 모두 메모리에 존재하고 있다. 변수 str은 문자열 ‘Hello’를 가리키고 있다가 문자열 ‘world’를 가리키도록 변경되었을 뿐이다.

템플릿 리터럴 (template literals)

1) 백틱(` `)으로 감싼다
2) ${expression}로 표현식에 변수, 표현식을 넣는다
ex.)
const brendan = 'brendan';
const greeting = 'hello ' + brendan;
console.log(`value: ${greeting}, type: ${typeof greeting}`);
//value: hello brendan, type: string

• template literals : ``(백틱)기호를 이용해서 원하는 스트링을 적고, $와 {} 기호를 사용한다.

• ✍️ 결과를 보면 ('value: ' + helloBob + 'type: ' + typeof helloBob); 으로 안쓰고 위와 같이 써도 된다는 걸 알 수 있다! 😚

(3) Boolean (논리형)

• 불리언(boolean) 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐이다.
• false : 0, null, undefined, NaN, ' '(비어있는 문자열)
• true : any other value. false 이외의 값들이다. (1이나 string 등등 전부 포함한다.)
• 불리언 타입의 값은 참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다.

ex1.)
let canRead = true;
console.log(typeof canRead);
// boolean
ex2.)
let test = 3 < 1;
console.log(`value: ${test}, type: ${typeof test}`);
// value: false, type: boolean

(4) undefined

• undefined 타입의 값은 undefined가 유일하다. 선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다. (선언은 되었지만 값이 지정되어 있지 않다. 즉 텅텅 비어있는지, 값이 들어가 있는지에 대해 아예 정해지지 않았다.)

let x = undefined;  혹은  let x;
ex)
let aa;
console.log(aa); // undefined

(5) null

• null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다.
• null 타입의 값은 null이 유일하다. 자바스크립트는 대소문자를 구별하므로 null은 Null, NULL등과 다르다.
• 텅텅 비어있는 값이라고 명확히 지정(할당)한다.

// type of를 사용 했을 때 ▼
let aoo = null;
console.log(typeof aoo); // object
// 일치 연산자(===)를 사용 했을 때 ▼
let aoo = null;
console.log(typeof aoo === null); // false
console.log(aoo === null);        // true

• 타입을 나타내는 문자열을 반환하는 typeof 연산자로 null 값을 연산해 보면 null이 아닌 object가 나온다. 이는 자바스크립트의 설계상의 오류이다.
  ( ✍️ null 은 빈 객체를 참조하고 있어서 그렇다고 한다.)
• null 타입을 확인할 때 typeof 연산자를 사용하면 안되고 일치 연산자(===)를 사용하여야 한다.

❗️ undefined 와 null 의 차이
undefined
: 단어의 의미 그대로 정의되지 않음이라는 뜻이며 값이 대입되지 않은 상태를 위해 많이 사용된다. (어떤 변수를 만들고 그 값을 정의해주지 않았을 때 사용된다.)
null
: 의도적으로 값이 없음을 표현하고 싶을 때 대입해주곤 한다.

(6) symbol

• 심볼은 ES6에서 새롭게 추가된 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 Property Key를 만들기 위해 사용한다.
• 심볼을 이용해서 동일한 스트링으로 작성해도 각각 다른 심볼로 만들어진다. 즉 고유한 식별자를 만들때 사용한다.

// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
let key = Symbol('key');
console.log(typeof key); // symbol
// 스트링이 동일해도 다른 심볼이다.
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false

2. 객체 타입 (Object type, Reference type)

• 객체는 데이터와 그 데이터에 관련한 동작(절차, 방법, 기능)을 모두 포함할 수 있는 개념적 존재이다. 달리 말해, 이름과 값을 가지는 데이터를 의미하는 프로퍼티(property)와 동작을 의미하는 메소드(method)를 포함할 수 있는 독립적 주체이다.

• JavaScript는 객체 기반의 스크립트 언어로써 JavaScript를 이루고 있는 거의 모든 것이 객체이다. 원시 타입을 제외한 나머지 값들(배열, 함수, 정규표현식 등)은 모두 객체이다. 또한 객체는 참조에 의한 전달 (pass-by-reference)방식으로 전달된다.

reference
MDN data type-PoiemaWeb Coding Everybody wiki W3School dream coding