Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- JavaScript Data Type.

✏️ Data Type ✏️

JavaScript는 원시 값(숫자, 문자열 등)을 마치 객체처럼 메서드를 호출하여 다룰 수 있다.

1. 숫자형

숫자형(number)은 정수 및 부동소수점 숫자(floating point number)를 나타내며
$25^3$이상이거나 $-25^3$이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어졌니다.

1-1. 숫자형 선언

let n = 123;	// number
let f = 12.345;	// float
let big = 9999999999999999n; // BigInt
let num = 1e9; // 1 * 10**9 == 1000000000
let num = 123e-5; // 123 * 10**-5 == 0.00123
let number = 0b1010; // 2진수 0, 1
let number = 0o12; // 8진수 0 ~ 7
let number = 0xff; // 16진수 0 ~ f

1-2. 숫자형 연산

console.log("더하기 : ", 2 + 2.5, '<br>');  // 4.5
console.log("빼기 : ", 5 - 7, '<br>');  // -2
console.log("곱하기 : ", 3 * 2, '<br>');  // 6
console.log("나누기 : ", 2 / 2, '<br>'); // 1
console.log("나머지 : ", 13 % 5, '<br>'); // 3

1-3. 숫자형 메서드

let n = 123;
let f = 12.345;
// n.toString(base) : 숫자형 n을 base 진법의 문자열로 변환한다. (default : 10)
console.log("숫자형을 문자열로 변환 : ", n.toString()); // String "123"
console.log("부동소수점 숫자의 내림 : ", Math.floor(f)); // 12
console.log("부동소수점 숫자의 올림 : ", Math.ceil(f)); // 13
console.log("부동소수점 숫자의 반올림 : ", Math.round(f)); // 12
console.log("제곱 구하기 : ", Math.pow(2, 8)); // 2^8 === 256
console.log("제곱근 구하기 : ", Math.sqrt(64)); // 64^(0.5) === 8
console.log("최대값 구하기 : ", Math.max(10, 20, 15, 5)); // 20
console.log("최소값 구하기 : ", Math.min(10, 20, 15, 5)); // 5
console.log("랜덤 숫자 생성 : ", Math.random()); // 0 ~ 1 사이의 난수 생성

2. 문자열

자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없기 때문에 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장된다.

2-1. 문자열 선언

let str1 = 'single quotation mark';
let str2 = "double quotation marks";
let str3 = `back ticks`;

2-2. 문자열 연산

// 문자열은 + 연산만 가능하다.
console.log("abc" + "def"); // "abcdef"
console.log("123" + "456"); // String "123456"
console.log("123" - "456"); // Number -333

2-3. 문자열 메서드

let s = "10,000,000";
let str = "abCDef";

// 탐색 메서드
// parseInt(s, base) : 문자열의 0번째부터 숫자로 인식되는 부분까지만 base 진법 숫자형으로 변환한다. (default : 10)
console.log("문자열을 숫자형으로 변환 : ", parseInt(s));
console.log("문자열의 길이 : ", str.length); // 6
console.log("특정 index에 접근 : ", str[0]); // "a"
console.log("문자열의 위치(index) 찾기 : ", str.indexOf("CD")); // 2

// 변형 메서드
console.log("문자열 잘라내기_1 : ", str.slice(3)); // index 3부터 끝까지 잘라내기 "Def"
console.log("문자열 잘라내기_1 : ", str.slice(0, 3)); // index 0부터 3미만까지 잘라내기 "abC"
console.log("문자열 잘라내기_2 : ", str.substr(2, 3)); // index 2부터 3개 잘라내기 "CDe"
console.log("문자열 잘라내기_3 : ", s.slit(",")); // 인자를 기준으로 문자열을 잘라 배열로 반환 ["10", "000", "000"]
console.log("문자열 대체하기 : ", str.replace("ab", "ZZZZ")); // "ZZZZCDef" "ab"를 "ZZZZ"로 대체하기
console.log("문자열을 대문자로 변경 : ", str.toUpperCase()); // "ABCDEF"
console.log("문자열을 소문자로 변경 : ", str.toLowerCase()); // "abcdef"

// 공백 제거하기
let str2 = "     abc  "
console.log("문자열 공백 제거하기 : ", str.trim()); // "abc"
console.log("문자열 오른쪽 공백 제거하기 : ", str.trimRight()); // "     abc"
console.log("문자열 왼쪽 공백 제거하기 : ", str.trimLeft()); // "abc  "

3. 배열

배열은 순서가 있는 데이터를 저장할 때 주로 사용한다.

3-1. 배열 선언

let arr1 = [];
let arr2 = new Array();
let fruit = ["사과", "수박", "복숭아", "딸기"];

3-2. 배열 메서드

// 배열 맨 뒤에 데이터 삽입 및 제거 (스택 구조)
let fruit = ["사과", "수박", "복숭아", "딸기"];
fruit.push("바나나"); // 배열 맨 뒤에 데이터 삽입
console.log(fruit); // ["사과", "수박", "복숭아", "딸기", "바나나"]
fruit.pop(); // 배열 맨 뒤에 위치한 데이터 제거 후 반환
console.log(fruit); // ["사과", "수박", "복숭아", "딸기"]

// 배열 맨 앞에 데이터 삽입 및 제거 (큐 구조)
fruit.unshift("바나나"); // 배열 맨 앞에 데이터 삽입
console.log(fruit); // ["바나나", "사과", "수박", "복숭아", "딸기"]
fruit.shift(); // 배열 맨 앞에 위치한 데이터 제거 후 반환
console.log(fruit); // ["사과", "수박", "복숭아", "딸기"]

// 탐색 메서드
fruit.forEach(x => console.log(x)); // 배열의 value를 처음부터 끝까지 순회한다
console.log("데이터 탐색하기_1 : ",fruit.indexOf("사과")); // 인자 값이 위치한 index 반환, 없을 시 -1 반환
console.log("데이터 탐색하기_2 : ",fruit.includes("사과")); // 인자 값이 존재하면 true, 없을 시 false 반환
console.log("데이터 탐색하기_3 : ",fruit.find(x => x === "사과")); // 인자 값이 존재하면 인자 값, 없을 시 undefined 반환
console.log("데이터 탐색하기_4 : ",fruit.filter(x => x.length < 3)); // 조건에 일치하는 value를 전부 반환
console.log("데이터 탐색하기_5 : ",fruit.map(x => x.length)); // 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환

// 순서 메서드
console.log("배열을 사전식 정렬 후 저장 : ",fruit.sort()); // 사전식 정렬 후 저장
console.log("배열의 순서를 뒤집어서 저장 : ",fruit.reverse()); // 배열의 순서를 뒤집어서 저장

//변형 메서드
console.log("배열 잘라내기_1 : ", fruit.slice(1,3); // index 1 부터 3 미만까지 잘라내기
console.log("배열 잘라내기_2 : ", fruit.splice(0, 1, "새로운", "데이터"); // index 0 부터 1 미만까지 삭제 후 반환, 해당 위치에 새로운 데이터 추가
console.log("배열 값들 join하여 출력 : ", fruit.join("-")); // 각 데이터 사이에 인자 값을 넣어 출력한다.
let fruit2 = ["키위", "오렌지", "포도"];
console.log("배열 뒤 배열을 붙여 출력 :", fruit.concat(fruit2)); // 배열 뒤 배열을 이어 붙여 새로운 배열을 출력한다.

4. 객체

4-1. 객체 선언

//객체 (object)
function sum(x, y){
  return x + y;
}

let person = {
  //key: value
  name: "오래규",
  age: 25,
  height: 176,
  weight: 70,
  career: {
    firstCareer : "하나",
    secondCareer : "둘"
  },
  func: sum
}
person.company = "Like-Lion";

// .(dot)으로 호출
console.log("이름 :", person.name); // "오래규"
console.log("나이 :", person.age); // 25

// [] 대괄호로 호출
console.log("신장 :", person["height"]); // 176
console.log("몸무게 :", person["weight"]); // 70

console.log("회사 :", person.company); // "Like-Lion
console.log("이력 :", person.career.firstCareer); // "하나"
console.log("기능 :", person.func(10, 20)); // 30

4-2. this

this는 자신을 호출한 객체 혹은 자신이 생성할 객체 이 두 경우를 가리키는 자기 참조 변수이다.

- 자신을 호출한 객체

function a(){
  console.log(this); // window를 가리킴
}
a();

- 자신이 생성할 객체

function sayName(){
  console.log(this.name);
}

let peter = {
  name : 'Peter Parker',
  sayName : sayName
}

let bruce = {
  name : 'Bruce Wayne',
  sayName : sayName
}

peter.sayName(); // "Peter Parker"
bruce.sayName(); // "Bruce Wayne"

this 의 특징

this는 함수가 만들어질 때가 아닌 실행될 때 그 값이 결정된다.

5. Map

Map은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만, Map은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다.

5-1. Map 선언

let m = new Map();

5-2. Map 메서드

// Map에 값을 넣기
// m.set(key, value)
m.set('하나', 'one');
m.set(1, 'one');
m.set(true, 1);
m.set(false, 0);

// Map의 값에 접근하기
// m.get(key)
console.log(m.get('하나'));
console.log(m.get(true));

// Map의 크기를 확인하기
// m.size
console.log(m.size);

// Map의 값이 있는지 확인하기
// m.has(key)
console.log(m.has('하나'));

// Map의 값을 제거하기
// m.delete(key)
console.log(m.delete('하나'));
console.log(m.has('하나'));
console.log(m);

// Map의 key 혹은 value 확인하기
// m.keys() 혹은 m.values()
console.log(m.keys());
console.log(m.values());

// Map의 모든 값 제거하기
console.log(m.clear());

6. Set

Set은 중복을 허용하지 않는 값을 모아놓은 특별한 자료형으로 키가 없는 값이 저장된다.

6-1. Set 선언

let s = new Set('abcdeeeeeeeee');
console.log(s);	// {"a", "b", "c", "d", "e"}
console.log(s.size); // 5

6-2. Set 연산

// Set에 값을 추가하기
// s.add(value)
console.log(s.add("f"));

// Set의 값을 제거하기
// s.delete(value)
console.log(s.delete('b'));

// Set의 크기를 확인하기
// s.size
console.log(s.size);

// Set의 값을 확인하기
// s.has(value)
console.log(s.has('a'));

// Set의 모든 값을 제거하기 
console.log(s.clear());