[DAY15] 해결사 내장객체 등장

0. 표준 내장 객체

지금까지 배웠던 모든 객체들이 상속받는 최상위 객체인 Object, 그가 가진 최상위 프로토타입에 들어있는 엄청난 내장 객체들을 공부해보자.

내장 객체를 공부할 땐 항상 이 사이트 참고하기 ➡️ MDN 공식 문서.
표준 내장 객체 종류는 어마무시하다. 그중 주요 객체 몇 가지만 다루어 보았다.

Number

`toLocaleString()`
    - 숫자 자릿수를 표기해줌
    
`toFixed()`
    - 자릿수 고정
    
`valueOf()`
    - 인스턴스 객체의 값을 숫자로 반환

String

`length`
    - 인스턴스 ‘속성’임

1. 문자열 표준 내장 객체

말 그대로 문자열을 다루는 내장 객체이다. 사용할 때 주의사항은 사용할 내장 객체가 원본 문자열을 파괴하는지 파괴하지 않는지 고려해야 한다.
⭐ : 중요도

➡️ length : 문자열 길이 반환

➡️ charAt(index) : 인덱스 문자를 가져올 때

➡️ indexOf(string) : 시작 인덱스 찾기 (⭐)

➡️ lastIndexOf(string) : 시작 인덱스 찾기 (끝에서)

➡️ substring(start, end) : start부터 end 전까지

➡️ slice(index) : index 번호를 기준으로 문자열 자름 (⭐)

➡️ toLowerCase() : 모두 소문자로 변환 (⭐)

➡️ toUpperCase() : 모두 대문자로 변환 (⭐)

➡️ trim() : 문자열 양쪽 공백을 제거합니다. (⭐⭐⭐)

➡️ split() : 문자열을 주어진 구분자로 분할하여 배열로 반환 (⭐)

➡️ replace(string, change) : 주어진 문자열을 첫 번째만 교체할 때 사용

➡️ replaceAll(string, change) : 주어진 문자열을 모두 교체할 때 사용

➡️ includes(문자열) : 특정 문자열에 문자열 포함 여부 true, false (⭐⭐⭐)

➡️ startsWith(문자열) : 문자열로 시작하면 true, false (⭐)

➡️ endsWith(문자열) : 문자열로 끝나면 true, false

➡️ repeat(count) : count만큼 반복

➡️ padStart(length, str) : 문자열의 길이가 주어진 길이보다 짧을 경우, 문자를 대체

• 5글자가 필요할 때 문장을 정해진 문자로 5글자로 만들어줌
• 사용 예시 → 5를 05로 보여주고 싶을 때

  String(5).padStart(2, "0"); // 05

➡️ padEnd(length, str) : 위와 반대로 동작

➡️ valueOf() : 값을 반환

➡️ match() : 정규 표현식과 일치하는 부분을 찾기

const str = "The rain in Spain stays mainly in the plain.";
/*  /찾고싶은문자열/g -> 찾고 싶은 문자열 모두 찾기 */
const result = str.match(/ain/g); // /g -> global 모두 찾아줘
console.log(result); // ['ain', 'ain', 'ain']

2. 배열 표준 내장 객체

배열에서 다루는 내장 객체로 대부분이 다 중요하다고 볼 수 있다.
⭐ : 중요도

➡️ push() : 뒤에서부터 추가한다. <=> pop()

➡️ pop() : 뒤에서부터 제거한다, 파괴적 메소드 (원본 손상)

➡️ unshift() : 앞에서부터 추가한다. <=> shift()

➡️ shift() : 앞에서부터 제거한다

➡️ slice(a, b) : a 인덱스부터 b 인덱스까지 잘라라, 비파괴적 메소드

➡️ splice(a, b, c) : a~b번 인덱스 자리에 c를 대체한다.

➡️ forEach((value, index, arr) ⇒ {}) : 값, 인덱스, 배열 (⭐⭐⭐)

➡️ map((a, b, c) ⇒ {}) : 배열을 순회해서 새로운 배열을 만들어냄

• 배열의 수만큼 만들어진다.

• 반환 값이 새로운 배열의 요소가 된다.

➡️ filter((value, index) ⇒ {}) : 기준값이 true인 것만 반환해줘

• 특정 배열에서 특정 데이터를 제거하고 싶을 때

➡️ find((value, index) ⇒ {}) : true인 걸 반환해줘

• 정해진 순서로 파라미터를 사용하고 싶은데 앞에 파라미터가 필요 없을 때 _ 처리해준다
  - find((_, index) ⇒ {})

➡️ some(() ⇒ {}) : 배열의 일부 요소가 조건을 만족하는지

➡️ every(() ⇒ {}) : 모든 조건이 일치해야 반환

➡️ includes(a) : 배열 안에 특정 요소가 포함됐는지

➡️ join(a) : 배열의 요소들을 a로 묶어서 문자열로 반환

➡️ reverse() : 배열의 요소를 뒤집는다.

➡️ sort() : 파괴적 메소드

1. 일반적 .sort()
   일반적 sort 시 원리 -> 문자열로 변경한 다음 문자의 유니코드 값으로 비교
   const array = [4, 3, 15, 1] // .sort() 시 1, 15, 4, 3

2. sort로 숫자 비교하기 (원시적 방법)
   array.sort((a, b) => {
       if (a < b) return -1;
       else if (a > b) return 1;
       else return 0;
   });

3. sort로 숫자 비교하기 (멋진(?) 방법)
   array.sort((a, b) => a - b) // 오름차순
   array.sort((a, b) => b - a) // 내림차순

4. 객체도 정렬할 수 있다!!!
   const item = [
       {name: , value: 10},
       {name: , value: 2},
       {name: , value: 5},
   ];

   item.sort((a, b) => a.value - b.value); // value 기준으로 오름차순

   item.sort((a, b) => { // name 기준 알파벳순 정렬
       const uppera = a.name.toLowerCase();
       const upperb = b.name.toLowerCase();
       if (uppera < upperb) return -1;
       else if (uppera > upperb) return 1;
       else return 0;
   });

5. 멋있게 객체 정렬하기
   item.sort((a, b) => 
         {a.name.toLowerCase().localeCompare(b.name.toLowerCase())});

➡️ findIndex() : 주어진 조건을 만족하는 인덱스 찾기

➡️ flat(a) : 중첩 배열을 평탄화할 때 사용, a 중첩만큼 평탄화 함

const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flatArray = nestedArray.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

➡️ Set 객체 : 중복된 값을 제거할 때 사용

• 참조 자료형은 중복 제거 못함 → 주소로 하니까 다른 값이라 인식

const api = [
	{id: 1, name: "sss", tags: ['bag', 'ad']},
	{id: 2, name: "sss", tags: ['shoose', 'ad']},
	{id: 3, name: "sss", tags: ['cap', 'ad']},
];

// API 응답 결과에서 tags 추출하고, 중복된 태그를 제거하고 싶다
["bag", "shoose", "cap"]

// tags만 모아서 평준화를 시킨다.
// [["bag", "shoose"], ["ad"], ["cap", "ad"]];
const allTags = api.map((data) => data.tags).flat();
const unique = [...new Set(allTags)];

➡️ fill(a) : 주어진 요소만큼 a로 채워진다. 더미 배열을 만들고 싶을 때

➡️ reduce((prev, currentValue, currentIndex, array) ⇒ {}) : 어떤 값을 누적하여 계산해주는 기능 (⭐⭐⭐⭐⭐)

1. reduce 기본 구조
   arr.reduce(callback함수, 초기값);

2. reduce 초기값 설정
   const arr = [1, 2, 3, 4, 5

];
   /*
   	1. 초기값이 없을 때, 배열이 비어 있을 때는 초기값이 반환된다
   	prev -> 0번, cur -> 1번, 1번부터 시작
   */
   const sum = arr.reduce((prev, cur) => prev + cur);

   /*
       2. 초기값이 있을 때, 배열이 비어있을 때 초기값이 없으면 에러
       prev -> 초기값, cur -> 0번, 0번부터 시작
   */
   const sum = arr.reduce((prev) => {}, 0);

3. 활용하기 - 모든 price 값 누계 구하기
   const basket = [
     { id: 1, name: "상의", price: 1000 },
     { id: 2, name: "하의", price: 2000 },
     { id: 3, name: "겉옷", price: 3000 },
   ];

   const totalPrice = basket.reduce((prev, cur) => prev + cur.price, 0);
   console.log(totalPrice.toLocaleString());

4. 활용하기 - 중복값 제거하기
   const numbers = [1, 2, 2, 3, 4];
   const uniqueNumbers = numbers.reduce((prev, cur) => {
     if (!prev.includes(cur)) prev.push(cur);
     return prev;
   }, []);

배운 점

내장 객체는 결국 외우거나 존재함을 알거나 아무튼 많이 사용해서 익히는 방법밖에 없다. 정리만 했다고 머리에 들어갈 리 없으니 문제를 많이 풀어서 체득하자.