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

Minha Ahn·2024년 11월 1일
1

데브코스

목록 보기
16/22
post-thumbnail

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

🦴 표준 내장 객체

🔎 표준 내장 객체란?

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

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

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 : 정규 표현식과 일치하는 부분 찾아 배열로 리턴, 없으면 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 : 문자열 반복
profile
프론트엔드를 공부하고 있는 학생입니다🐌

2개의 댓글

comment-user-thumbnail
2024년 11월 1일

정리 진짜 간결하게 잘하시네요!

1개의 답글