[데브코스/TIL] DAY19 - JavaScript(8) 내장 객체

자바스크립트 언제 끝나...? 혼자서 독학할 땐 이렇게 깊이 다루지 않았단 말이다ㅠㅠ
그만큼 대충 공부한거지 뭐ㅡ.ㅡ

🦴 표준 내장 객체

🔎 표준 내장 객체란?

자바스크립트 엔진에 기본으로 내장되어 있는 객체

• 언제 어디서든 활용할 수 있다!

1. 표준 내장 객체 종류

• Object / Function / Array
• String / Boolean / Number
• Math / Date / RegEXP

참고하면 좋은 문서

• 표준 내장 객체의 모든 속성과 메서드를 기억할 수 없다!
• 필요하다면 문서를 참고하자 => 문서

궁금증) 표준 내장 객체 종류가 기본 자료형과 비슷하네? 🤔

질문)
그렇다면 null, undefined, Symbol은 표준 내장 객체에 포함되지 않는걸까?

답변)
null과 undefined는 자바스크립트의 기본 값으로, 객체가 아니다.
Symbol은 Symbol()로 생성할 수 있기는 하나, 정확히는 기본 자료형이다. 그리고 기본 자료형과 상관없이 Symbol도 표준 내장 객체에 포함된다.

질문)
Number, String, Boolean은 표준 내장 객체인데, 그러면 기본 자료형은 표준 내장 객체인 거 아닐까?

답변)
기본 자료형은 객체가 아닌 단순 값이다.
표준 내장 객체는 기본 자료형의 래퍼 객체로, 이 객체들은 기본 자료형의 값을 객체처럼 다룰 수 있도록 해주는 역할이다.
따라서, 기본 자료형 자체는 표준 내장 객체가 아니다.

2. 기본 자료형과 참조 자료형, 그리고 표준 내장 객체

• 우리는 지금까지 편하게 리터럴 표기법으로 데이터를 만들었다.
• 지금처럼 리터럴로 만들 수도, 표준 내장 객체의 생성자 함수를 이용해서 만들 수 있다.
• 리터럴로 만들면 원시 값으로, 생성자 함수로 만들면 원시값에 래퍼 객체에 쌓여지는 형태이다.

숫자

let numLiteral = 10;
let numObject  = new Number(10);

console.log(numLiteral + numObject); // 20
console.log(numLiteral == numObject); // true
console.log(numLiteral === numObject); // false

문자

let strLiteral = "abc";
let strObject = new String("abc");

console.log(strLiteral + strObject); // abcabc
console.log(strLiteral == strObject); // true
console.log(strLiteral == strObject); // false

논리형

let booleanLiteral = true;
let booleanObject  = new Boolean(true);

배열

let arrLiteral = [10, 20, 30];
let arrObject  = new Array(10, 20, 30);

객체

let objLiteral = {name:'철수', age:20}
let objObject  = new Object({name:'철수', age:20});

함수

function sum(a, b) {
  return a+b;
}
sum(10, 20);

let sumObject = new Function('a', 'b', 'return a+b');
sumObject(10,20);

---

🚂 배열 내장 객체

push & pop & shift & unshift

• pop & shift : 제거하는 요소를 리턴한다.
• push & unshift : 요소를 추가하면서 새로운 배열의 길이를 리턴한다.

const array = ["a", "b"]
console.log(array.push("c")); // 3
console.log(array.unshift("d")); // 4

slice & splice

• arr.slice(시작 인덱스, 마지막 인덱스+1) => 배열의 일부를 얕은 복사하여 리턴한다.
• arr.splice(시작 인덱스, 제거 개수, [대체 요소]) => 원본 배열이 변경된다.

forEach & map & filter

• forEach : 제공된 함수를 실행할 뿐 리턴값은 없다.
• map : 주어진 함수를 호출한 결과를 리턴하여, 리턴 값들로 새로운 배열을 생성한다.
• filter : 함수를 통과하는 요소로 구성된 새로운 배열을 생성한다.

reduce

• 배열의 각 요소에 대해 함수를 실행하여 단일 값을 반환한다.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 초기값 설정
const sum = numbers.reduce((acc, num) => acc + num); // 초기값 미설정
console.log(sum); // 10

• reduce의 prev 초기값을 지정하는 것은 선택이나, 동작 방식이 달라진다.
  • 초기값이 없는 경우, prev는 배열의 0번 인덱스를 초기값으로 설정하며 1번 인덱스부터 함수를 실행한다. 그러나, 빈 배열인 경우 prev의 초기값을 지정해줄 수 없어 에러가 발생한다.
  • 초기값이 있는 경우, prev는 사용자가 지정한 초기값으로 설정하며 0번 인덱스부터 함수를 실행한다. 빈 배열이더라도 문제없이 실행된다.

find & some & every

• find : 주어진 함수를 만족하는 첫 번째 요소를 반환하며, 없으면 undefined를 반환한다.
• some : 주어진 함수를 만족하는 요소가 있는지 확인한다.
• every : 주어진 함수를 모든 요소가 만족하는지 확인한다.

includes & join & reverse

• includes : 배열의 특정 요소가 포함되어 있는지를 확인한다.
• join : 배열의 모든 요소를 문자열로 결합한다.
• reverse : 배열을 거꾸로 반전시키며, 원본 배열이 변경된다.

sort

• sort는 유니코드 기반으로 정렬하기 때문에 문자열 비교 유의하기
  • 문자열을 전부 대문자나 소문자로 맞춰야 원하는 정렬이 가능하다.
  • 숫자와는 달리 - 연산이 불가능 하므로 다음 2가지 방법을 이용해야 한다.

items.sort(function(a, b) {
  var nameA = a.name.toUpperCase();
  var nameB = b.name.toUpperCase();
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  return 0;
});

items.sort(function(a, b) {
  var nameA = a.name.toUpperCase();
  var nameB = b.name.toUpperCase();
  return nameA.localeCompare(nameB); // 사전 순 정렬
});

flat

• 다차원 배열을 평면 배열로 변환하며, 기본값은 1이다.

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

findIndex & indexOf & lastIndexOf

• findIndex : 주어진 조건을 만족하는 첫번째 요소의 인덱스를 리턴한다. 없으면 -1를 리턴한다.
• indexOf : 특정 요소의 첫 번째 인덱스를 리턴한다. 없으면 -1를 리턴한다.
• lastIndexOf : 특정 요소의 마지막 인덱스를 리턴한다. 없으면 -1를 리턴한다.

fill & copyWithin

• fill : 배열의 모든 요소를 정해진 값으로 채운다.

const arr = new Array(5).fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

• copyWithin : 배열의 특정 부분을 다른 위치로 복사한다. 원본 배열이 변경된다.

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // 인덱스 3부터 시작([3, 4, 5])하여 인덱스 0으로 복사
console.log(arr); // [4, 5, 3, 4, 5]

---

🔤 문자 내장 객체

substring & slice

• substring : 주어진 인덱스 범위에 해당하는 문자열 반환
• slice : 주어진 인덱스 범위에 해당하는 문자열 반환 & 음수 인덱스 가능

startsWith, endsWith

• startsWith : 문자열이 특정 문자열로 시작하는지 여부
• endsWith : 문자열이 특정 문자열로 끝나는지 여부

localeCompare

• 두 문자열을 비교하여 정렬 순서 반환
• 음수면 첫번째 문자열이 앞에 위치한다는 뜻

toLocaleUpperCase & toLocaleLowerCase

• 지역에 따른 대, 소문자 변환

const str = "istanbul";
console.log(str.toLocaleUpperCase('tr-TR')); // 'İSTANBUL'
console.log(str.toLocaleLowerCase('tr-TR')); // 'istanbul'

padStart & padEnd

• padStart : 문자열의 길이가 주어진 길이보다 짧으면 시작 부분에 특정 문자로 채우기
• padEnd : 끝 부분에 특정 문자로 채우기

match & search

• match : 정규 표현식과 일치하는 부분 찾아 배열로 리턴, 없으면 null

const str = "The rain in Spain stays mainly in the plain.";
const result = str.match(/ain/g);
console.log(result); // ['ain', 'ain', 'ain']

• search : 정규 표현식과 일치하는 첫 번째 인덱스 리턴, 없으면 -1

const str = "The quick brown fox jumps over the lazy dog.";
const index = str.search(/fox/);
console.log(index); // 16

valueOf

• 문자열 객체의 원시 값 반환

그외

• length : 문자 길이 리턴
• charAt : 특정 인덱스의 문자 리턴
• indexOf : 특정 문자열이 시작되는 인덱스 리턴. 없으면 -1
• lastIndexOf : 특정 문자열이 마지막으로 시작되는 인덱스 리턴. 없으면 -1
• toLowerCase : 모두 소문자로 변환
• toUpperCase : 모두 대문자로 변환
• trim : 문자열 양쪽 공백 제거
• split : 문자열을 구분자 기준으로 분할하여 배열 리턴
• replace & replaceAll : 문자 교체
• includes : 특정 문자열 포함 여부
• repeat : 문자열 반복

📌 출처

수코딩(https://www.sucoding.kr)