🏠
자바스크립트 개념서 기초부터 핵심까지/
4. 타입

4. 타입

4. 원시 타입4-1. 숫자 타입4-1-1. parseInt()4-1-2. isNaN()4-1-3. [+] 단항 산술 연산자4-1-4. [*] 산술 연산자4-1-5. Math 내장 객체4-2. 문자열 타입4-2-1. indexOf()4-2-2. replace()4-2-3. slice()4-2-4. split()4-2-5. toLowerCase(), toUpperCase()4-2-6. trim()4-3. 불리언 타입4-3-1. 관계 연산자4-3-2. 논리 연산자4-4. undefined 타입4-5. null 타입4-6. 심벌 타입
타입의 종류
자바스크립트에는 원시 타입(Primitive type)과 객체 타입(Reference type)이 있다.
원시 타입은 데이터를 메모리에 고정된 크기로 저장하고 데이터의 실제 값을 보관한다. 즉, 변수의 선언 시 값이 저장된 메모리로 직접 접근한다.
이와 달리 객체 타입은 고정된 크기가 아니기 때문에 별도의 메모리 공간에 저장되며, 데이터의 실제 값이 아닌 주소가 저장되어 이 주소를 통해 값에 접근할 수 있다. 함수를 프로퍼티로 저장할 수 있기 때문에 다양한 내장 객체를 제공한다.
 
📌
원시 타입 : 데이터의 실제 값을 할당한다. 객체 타입 : 데이터의 위치(주소) 값을 할당한다.
 
원시 타입의 종류
  • 숫자 타입
  • 문자열 타입
  • 불리언 타입
  • undefined 타입
  • null 타입
  • 심벌 타입
 
객체 타입의 종류
  • 객체
  • 함수
  • 배열

4. 원시 타입

4-1. 숫자 타입

숫자 타입(Number)은 배정 밀도 64비트 부동소수점 형식(double precision 64-bit binary format floating point number)을 따른다. 모든 수를 실수로 처리하기 때문에 실수를 포함하여 정수, 2진수, 8진수, 16진수 모두 부동소수점 형식의 2진수로 저장된다.
var num = 10;
typeof num; // 'number'

var num = 100.12;
typeof num; // 'number'

var octal = 0o101;
typeof octal; // 'number'

var hex = 0x41;
typeof hex; // 'number'

// *typeof 는 변수의 타입을 알아보기 위해 제공되는 연산자이다.
 

4-1-1. parseInt()

parseInt()는 문자열을 정수로 바꿔주는 함수이다. 또한 parseFloat()는 문자열을 소수로 바꿔주는 함수이다. 아래의 예시를 통해 자세한 내용을 살펴볼 수 있다. 
parseInt('10a'); // 10
parseInt('a10'); // NaN
parseInt('hello'); // NaN
parseInt(true); // NaN
parseInt('99', 1); // 99
parseInt(' 33 '); // 33
parseInt('100.10'); // 100

parseFloat('100.10'); // 100.10
 

4-1-2. isNaN()

데이터를 숫자로 변환했을 때 true 값 또는 false 값을 반환한다. isNaN은 숫자가 아니다로 해석할 수 있다. 아래의 예시를 통해 간단한 내용을 살펴볼 수 있다.
isNaN(1); // false
isNaN('1'); // false
isNaN('10a'); // true
isNaN('a10'); // true
 

4-1-3. [+] 단항 산술 연산자

식에 + 단항 산술 연산자를 이용하여 숫자 타입으로 변환한다. 아래의 예시를 통해 간단한 내용을 살펴 볼 수 있다.
+'10'; // 10
+'-10'; // -10
+'100.10'; // 100.10
+true; // 1
+false; // 0
 

4-1-4. [*] 산술 연산자

식에 * 산술 연산자를 이용하여 숫자 타입으로 변환한다. 아래의 예시를 통해 간단한 내용을 살펴볼 수 있다.
'100' * 1; // 100
'-100' * 1; // -100
'0' * 1; // 0
'0' * 100; // 0
'100.1' * 1; // 100.1
true * 1; // 1
false * 1; // 0
 

4-1-5. Math 내장 객체

Math 내장 객체 연산을 이용하여 아래의 예시와 같은 식 들을 숫자 타입으로 변환한다.
Math.PI; // 3.141592653589793
Math.round(100.9); // 101
Math.pow(2, 2); // 4
Math.sqrt(81); // 9
Math.abs(-10); // 10
Math.max(100, 200, 300, 400, 500); // 500
Math.min(100, 200, 300, 400, 500); // 100
 

4-2. 문자열 타입

문자열 타입(String)이란 작은따옴표(’ ‘), 큰따옴표(” “), 백 틱(` `)으로 텍스트를 묶어 사용함으로써 문자열로 인식하게 만든다. 예를 들어 숫자를 따옴표로 묶으면 문자로 인식하게 된다. 
var letter = hello; // Uncaught ReferenceError: hello is not defined

var letter = 'hello';
typeof letter // 'string'

var num = '1004';
typeof num // 'string'
 

4-2-1. indexOf()

문자열에서 찾고자 하는 특정 문자를 indexOf()를 이용하여 인덱스로 반환할 수 있다.
  • 첫 번째 인자 : 검색할 문자를 입력한다.
  • 두 번째 인자 : 검색을 시작할 인덱스 번호를 입력한다. (찾는 문자가 없으면 -1을 반환한다.)
let greeting = 'hello world';
console.log(greeting.indexOf('e')); // 1
console.log(greeting.indexOf('o', 6)); // 7
console.log(greeting.indexOf('l', 5)); // 9
console.log(greeting.indexOf('z')); // -1

4-2-2. replace()

replace()는 문자열에서 일치하는 첫 문자열을 찾아, 바꾸고자 하는 문자열로 바꿈으로써 새로운 문자열로 반환한다.
  • 첫 번째 인자 : 검색할 문자를 첫 번째 인자값으로 입력한다.
  • 두 번째 인자 : 바꿀 문자를 두 번째 인자값으로 입력한다. ( / /g 를 사용하여 해당하는 모든 문자열을 중복으로 찾아서 바꿀 수 있다.)
// 예제1
let greeting = 'hello';
greeting.replace('e', 'E'); // 'hEllo'

// 예제2
let letter = 'abcdef';
letter.replace('a', 'z'); // 'zbcdef'

// 예제3
let words = 'hello world! hello nice meet all of you guys';
words.replace(/hello/g, 'HELLO');
// 'HELLO world! HELLO nice meet all of you guys'
 

4-2-3. slice()

slice()를 사용하여 문자열에서 한 부분을 기준으로 복사하고 새로운 문자열로 반환한다.
  • 첫 번째 인자 : 복사를 시작할 인덱스를 첫 번째 인자로 입력한다.
  • 두 번째 인자 : 복사를 끝낼 인덱스를 두 번째 인자로 입력한다.
// 예제1
let greeting = 'hello';
greeting.slice('1', '3'); // 'el'

// 예제2
let letter = 'abcdef';
letter.slice('4'); // 'ef'

// 예제3
let words = 'hello world! hello nice meet all of you guys';
words.slice('-5'); // ' guys'
 

4-2-4. split()

split()는 주어진 문자열을 쪼개서 각각의 값을 원소로 새롭게 반환한다. 아래의 예시를 통해 간단한 내용을 살펴볼 수 있다.
// 예제1
let greeting = 'hello';
greeting.split(' '); // ['hello']
greeting.split(''); // ['h', 'e', 'l', 'l', 'o']

// 예제2
let words = 'hello world! hello nice meet all of you guys';
words.split('hello'); // ['', ' world! ', ' nice meet all of you guys']
words.split('world'); // ['hello ', '! hello nice meet all of you guys']
words.split('hello', 2); // ['', ' world! ']
words.split('world', 5); // ['hello ', '! hello nice meet all of you guys']
 

4-2-5. toLowerCase(), toUpperCase()

toLowerCase()를 사용하여 주어진 문자열을 소문자로 변환하고, toUpperCase()를 사용하면 주어진 문자열을 대문자로 변환할 수 있다. 결괏값으로 새로운 문자열을 출력한다.
// 예제1
let lowerCase = 'HELLO WORLD';
lowerCase.toLowerCase(); // 'hello world'

// 예제2
let letter = 'abcdef';
letter.toUpperCase(); // 'ABCDEF'
 

4-2-6. trim()

trim()을 사용하여 주어진 문자열의 맨 앞과 뒤에 있는 공백을 제거하여 반환한다. 문자열의 중간에 입력된 공백은 제거되지 않는다. 아래의 예시를 통해 간단한 내용을 살펴볼 수 있다.
// 예제1
let letter = '    abcdef         ';
letter.trim(); // 'abcdef'

// 예제2
let num = '   o n  e ';
num.trim(); // 'o n  e'
 

4-3. 불리언 타입

불리언 타입(Boolean)은 값을 논리적 참(true)이나 거짓(false)으로 표현하는 자료형이다. 주어진 식에서 조건을 확인하여 조건이 참이면 true, 틀리면 false로 결괏값을 출력한다. 아래의 예시를 통해 간단한 내용을 살펴볼 수 있다.
// 예제1
var me = true; 
console.log(me); // true

// 예제2
100 - 10 > 0; // true

// 예제3
99 < 9; // false
 

4-3-1. 관계 연산자

관계 연산자는 주어진 식에서 두 값을 비교하여 true 또는 false 값으로 결과를 반환한다. 두 식의 값을 비교할 때 사용할 수 있다. 아래의 예시를 통해 간단한 내용을 살펴볼 수 있다.
let x = 10;
let y = 20;
let z = 30;

// 예제1
x > y; // false

// 예제2
y < z; // true

// 예제3
x * 2 > z; // false

// 예제4
x >= z; // false

// 예제5
x + 20 === z; // true

// 예제6
x !== y; // true
 

4-3-2. 논리 연산자

  • 논리곱은(&&) 주어진 식의 모든 값이 truthy 일 때만 true 값을 반환한다. 그 외에 falsy 값을 가지는 것이 한 개라도 있으면 false 값을 반환한다.
true && true; // true
true && false; // false
false && false; // false
📌
truthy 값이란? - 결과가 true - 0을 제외한 모든 숫자 - 공백을 포함 모든 문자열 - 객체, 함수, 배열 등 모든 객체 falsy 값이란? - 결과가 false - 0 - ‘ ‘ (빈 문자열) - undefined, null, NaN
 
  • 논리합은 (||) 주어진 식에 truthy 값이 한 개라도 있다면 falsy 값의 여부와 무관하게 true 값을 반환한다.
true || true; // true
true || false; // true
false || false; // false
 
  • 논리 부정 연산자 (!) 는 not의 의미 있다. 식에서 쓰이게 되면 부정의 not으로 해석하면 된다. 아래의 예시를 통해 간단한 내용을 살펴볼 수 있다.
!true; // false
!!true; // true
!false; // true
!!false; // false
!!undefined; // false
!!null; // false
!!NaN; // false
 

4-4. undefined 타입

undefined 타입은 값을 할당하지 않은 변수의 자료형이다. 변수를 선언만 하고 값이 할당되지 않은 자료형을 뜻한다. 아래의 예시를 통해 간단한 내용을 살펴볼 수 있다. 
var noting; 
console.log(noting); // undefined
 

4-5. null 타입

null 타입은 변수에 값이 없다는 것을 나타낸다. 데이터의 값이 유효하지 않은 상태를 의미한다. 이전에 참조되었던 값을 더 이상 사용하지 않을 때, 변수에 null을 할당하는 방법으로 실전에서 사용될 수 있다.
var num = 100; 
num = null; // null
console.log(num); // null

// num = 100으로 할당한 뒤 다시 재사용하지 않기 위해 num에 다시 null 값을 할당
 
undefined 와 null 의 차이점
📌
undefined : 변수는 선언되었고 값이 할당되지 않은 상태를 의미한다. null : 변수에 할당된 값이 유효하지 않을 때의 상태를 의미한다.
 

4-6. 심벌 타입

심벌(Symbol) 타입은 변경이 불가능한 원시 타입의 값으로 ES6에 추가된 타입이다. Symbol 함수를 호출해 생성하며, 값은 외부에 노출되지 않고 다른 값과도 중복되지 않는 유일한 값이다.
var me = Symbol('me');
console.log(typeof me); // symbol