javascript-examples/doc/03_내장_객체.md

내장 객체

자바스크립트는 프로그래머가 효율적으로 코드를 작성할 수 있도록 다양한 **내장 객체(Built-in Objects)**를 제공합니다. 내장 객체는 브라우저나 Node.js 환경에서 기본적으로 사용할 수 있는 객체이며, 자바스크립트의 기능을 확장하거나 데이터 처리를 간편하게 만들어줍니다.

내장 객체는 크게 **기본 객체(Core Objects)**와 **호스트 객체(Host Objects)**로 나뉩니다.

• 기본 객체: ECMAScript 표준에 정의된 객체로, 모든 환경에서 동일하게 사용 가능.
  • 예: Object, Array, String, Math
• 호스트 객체: 실행 환경(브라우저, Node.js 등)에서 제공하는 객체.
  • 브라우저 예: window, document, fetch
  • Node.js 예: process, fs

Object 객체

모든 객체의 부모 역할을 하는 최상위 객체입니다. 객체를 생성하거나 조작할 때 사용됩니다.

const obj = { name: "Alice", age: 25 };
console.log(Object.keys(obj)); // ["name", "age"]
console.log(Object.values(obj)); // ["Alice", 25]
console.log(Object.entries(obj)); // [["name", "Alice"], ["age", 25]]

Array 객체

배열은 순서가 있는 데이터 리스트를 다루기 위한 객체입니다.

메서드

• push(): 배열의 끝에 새로운 요소를 추가합니다.
• pop(): 배열의 마지막 요소를 제거하고 반환합니다.
• shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
• unshift(): 배열의 처음에 새로운 요소를 추가합니다.
• splice(): 배열의 특정 위치에 요소를 추가, 삭제, 교체합니다.
• slice(): 배열의 일부분을 잘라서 새로운 배열을 반환합니다.
• concat(): 두 개 이상의 배열을 합쳐 새로운 배열을 만듭니다.
• join(): 배열의 모든 요소를 문자열로 연결합니다.
• indexOf(): 배열에서 특정 요소의 인덱스를 찾습니다.
• includes(): 배열에 특정 요소가 포함되어 있는지 확인합니다.
• forEach(): 배열의 모든 요소를 순회하며 함수를 실행합니다.
• map(): 배열의 각 요소를 변환하여 새로운 배열을 생성합니다.
• filter(): 특정 조건을 만족하는 요소만 추출하여 새로운 배열을 생성합니다.
• reduce(): 배열의 모든 요소를 하나의 값으로 축소합니다.

const arr = [1, 2, 3, 4];
arr.push(5); // [1, 2, 3, 4, 5]
const squared = arr.map(x => x ** 2); // [1, 4, 9, 16, 25]
console.log(squared);

let numbers = [1, 2, 3, 4, 5];

// 배열의 길이
console.log(numbers.length); // 5

// 요소 추가
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]

// 요소 삭제
numbers.splice(2, 1); // 인덱스 2부터 1개 요소 삭제
console.log(numbers); // [1, 2, 4, 5, 6]

// 모든 요소를 더하기
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 18

// 짝수만 추출
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

String 객체

**문자열(String)**은 텍스트 데이터를 나타내는 자바스크립트의 기본적인 데이터형입니다. 문자열은 작은따옴표(')나 큰따옴표(")로 감싸서 표현합니다.

• 불변성: 한번 생성된 문자열은 변경할 수 없습니다. 새로운 문자열을 만들어 할당해야 합니다.
• 인덱스: 문자열의 각 문자는 0부터 시작하는 숫자로 접근할 수 있는 인덱스를 가집니다.

메서드

• slice(): 문자열의 일부분을 추출
• substring(): 문자열의 일부분을 추출 (slice와 유사하지만 음수 인덱스를 지원하지 않음)
• substr(): 문자열의 일부분을 추출 (deprecated)
• replace(): 문자열의 일부분을 다른 문자열로 대체
• trim(): 문자열 양쪽의 공백을 제거
• toLowerCase(): 문자열을 모두 소문자로 변환
• toUpperCase(): 문자열을 모두 대문자로 변환

const str = "Hello, World!";
console.log(str.length); 
console.log(str.charAt(0));
console.log(str.indexOf("World"));
console.log(str.toUpperCase()); // "HELLO, WORLD!"
console.log(str.slice(0, 5)); // "Hello"
console.log(str.split(", ")); // ["Hello", "World!"]

Number 객체

숫자를 다루기 위한 객체로, 정수와 실수 연산을 지원합니다.

매우 정확한 계산이 필요한 경우에는 BigInt를 사용하거나 별도의 라이브러리를 활용해야 합니다.

속성

• Number.MAX_VALUE: JavaScript에서 표현할 수 있는 가장 큰 양수
• Number.MIN_VALUE: JavaScript에서 표현할 수 있는 가장 작은 양수 (0보다 크지만 0에 가장 가까운 수)
• Number.POSITIVE_INFINITY: 양의 무한대
• Number.NEGATIVE_INFINITY: 음의 무한대
• Number.NaN: Not a Number. NaN을 처리할 때는 isNaN() 함수를 사용하는 것이 좋습니다.
• Number.EPSILON: 두 개의 표현 가능한 숫자 사이의 최소 간격

메서드

• toFixed(): 소수점 이하 자릿수를 지정하여 반올림한 문자열을 반환합니다.
• toExponential(): 지수 표기법으로 변환합니다.
• toPrecision(): 유효 자릿수를 지정하여 반올림한 문자열을 반환합니다.
• toString(): 숫자를 문자열로 변환합니다.
• parseInt(): 문자열을 정수로 변환합니다.
• parseFloat(): 문자열을 부동소수점 숫자로 변환합니다.

const num = 123.456;
console.log(num.toFixed(2)); // "123.46"
console.log(Number.isNaN(NaN)); // true

Boolean 객체

불리언 값을 다룹니다.

const bool = new Boolean(false); // 객체 생성 (잘 사용하지 않음)
console.log(bool.valueOf()); // false

Math 객체

수학 계산을 위한 정적 메서드와 속성을 제공합니다.

메서드

• Math.abs(x): 숫자 x의 절댓값을 반환합니다.
• Math.ceil(x): x보다 크거나 같은 가장 작은 정수를 반환합니다. (올림)
• Math.floor(x): x보다 작거나 같은 가장 큰 정수를 반환합니다. (버림)
• Math.round(x): x를 반올림하여 정수를 반환합니다.
• Math.random(): 0 이상 1 미만의 난수를 생성합니다.
• Math.max(x, y, ...): 여러 개의 숫자 중 가장 큰 값을 반환합니다.
• Math.min(x, y, ...): 여러 개의 숫자 중 가장 작은 값을 반환합니다.
• Math.pow(x, y): x의 y승을 계산합니다.
• Math.sqrt(x): x의 제곱근을 계산합니다.
• sin(), cos(), tan(), asin(), acos(), atan() 등 : 다양한 삼각함수를 제공합니다.

// 원의 넓이 계산
const radius = 5;
const area = Math.PI * radius * radius;
console.log(area); // 78.53981633974483

// 0부터 10 사이의 랜덤 정수 생성
const randomNum = Math.floor(Math.random() * 11);
console.log(randomNum);

// 두 수 중 큰 수 찾기
const maxNumber = Math.max(10, 5, 20);
console.log(maxNumber); // 20

Date 객체

날짜와 시간을 처리하는 데 사용됩니다.

// 현재 시각을 나타내는 Date 객체 생성
const now = new Date();

// 특정 날짜를 나타내는 Date 객체 생성
const specificDate = new Date(2023, 11, 25); // 월은 0부터 시작하므로 12월은 11

Date 생성자에 전달할 수 있는 인수:

• 년, 월, 일, 시, 분, 초, 밀리초: 각각의 값을 숫자로 지정하여 날짜를 생성합니다.
• 문자열: ISO 8601 형식의 문자열 또는 자바스크립트에서 이해할 수 있는 다른 날짜/시간 표현식을 사용할 수 있습니다.
• 타임스탬프: 1970년 1월 1일 00:00:00 UTC부터 경과된 밀리초를 나타내는 숫자입니다.

메서드

• getFullYear(): 연도를 반환합니다.
• getMonth(): 월을 반환합니다. (0: 1월, 11: 12월)
• getDate(): 일을 반환합니다.
• getDay(): 요일을 반환합니다. (0: 일요일, 6: 토요일)
• getHours(): 시를 반환합니다.
• getMinutes(): 분을 반환합니다.
• getSeconds(): 초를 반환합니다.
• getMilliseconds(): 밀리초를 반환합니다.
• getTime(): 1970년 1월 1일 00:00:00 UTC부터 경과된 밀리초를 반환합니다.
• toDateString(): 날짜를 문자열로 변환합니다.
• toTimeString(): 시간을 문자열로 변환합니다.
• toISOString(): ISO 8601 형식의 문자열로 변환합니다.
• toLocaleString(): 지역 설정에 맞는 문자열로 변환합니다.

const now = new Date();
console.log(now.getFullYear()); // 현재 연도
console.log(now.getMonth()); // 현재 월 (0부터 시작)
console.log(now.toISOString()); // ISO 형식의 날짜 문자열

• UTC 시간: getUTCXXX() 메서드를 사용하여 UTC 시간을 가져올 수 있습니다.
• 현지 시간: 기본적으로 getXXX() 메서드는 시스템의 현지 시간을 반환합니다.
• 월: 월은 0부터 시작하므로 1월은 0으로 표현합니다.
• 시간대: Date 객체는 시스템의 시간대 설정에 따라 다른 값을 반환할 수 있습니다.
• 타임존 오프셋: getTimezoneOffset() 메서드를 사용하여 UTC와의 시간 차이를 확인할 수 있습니다.

JSON 객체

JSON(JavaScript Object Notation) 데이터를 다루는 데 사용됩니다.

메서드

• JSON.stringify(): 객체를 JSON 문자열로 변환
• JSON.parse(): JSON 문자열을 객체로 변환

const obj = { name: "Alice", age: 25 };
const json = JSON.stringify(obj); // '{"name":"Alice","age":25}'
console.log(json);

const parsed = JSON.parse(json);
console.log(parsed.name); // "Alice"

RegExp 객체

정규표현식을 다루는 객체입니다. 문자열 검색과 패턴 매칭에 사용됩니다.

let str = "The quick brown fox jumps over the lazy dog.";
let re = /brown/;

// test() 메서드 사용
console.log(re.test(str)); // true

// exec() 메서드 사용
let result = re.exec(str);
console.log(result); // ["brown"]

// replace() 메서드 사용
let newStr = str.replace(re, "red");
console.log(newStr); // The quick red fox jumps over the lazy dog.

생성

• 리터럴 표기법 : 슬래시(/) 사이에 정규 표현식 패턴을 직접 작성하는 방법입니다. 간단한 패턴을 정의할 때 주로 사용합니다.

let re = /pattern/;

• 생성자 함수 : RegExp 생성자 함수를 사용하여 정규 표현식을 생성하는 방법입니다. 동적으로 패턴을 생성해야 할 때 유용합니다.

let re = new RegExp('pattern');

메서드

• test(): 주어진 문자열이 정규 표현식과 일치하는지 여부를 반환합니다. (boolean)
• exec(): 주어진 문자열에서 정규 표현식과 일치하는 첫 번째 부분을 배열로 반환합니다.
• match(): 주어진 문자열에서 정규 표현식과 일치하는 모든 부분을 배열로 반환합니다.
• search(): 주어진 문자열에서 정규 표현식과 일치하는 첫 번째 인덱스를 반환합니다.
• replace(): 주어진 문자열에서 정규 표현식과 일치하는 부분을 다른 문자열로 치환합니다.

Map

키-값 쌍을 저장하는 객체. ES6에서 추가된 데이터 구조로, 보다 효율적인 데이터 관리가 가능합니다.

• 다양한 데이터 타입의 키: 일반 객체는 문자열만 키로 사용할 수 있지만, Map은 문자열뿐만 아니라 숫자, 객체 등 어떤 타입의 데이터든 키로 사용할 수 있습니다.
• 순서 유지: Map은 요소가 추가된 순서를 기억합니다.
• 중복된 키 허용하지 않음: 하나의 키에 대해 여러 개의 값을 저장할 수 없습니다.
• 크기 속성: size 속성을 통해 Map 객체에 저장된 요소의 개수를 쉽게 확인할 수 있습니다.

// Map 객체 생성
const myMap = new Map();

// 키-값 쌍 추가
myMap.set('name', '홍길동');
myMap.set(1, '숫자 값');
myMap.set({ a: 1 }, '객체 키');

// 값 가져오기
console.log(myMap.get('name')); // 홍길동
console.log(myMap.get(1)); // 숫자 값

// 키 존재 여부 확인
console.log(myMap.has('name')); // true

// 모든 요소 순회
for (let [key, value] of myMap) {
  console.log(key, value);
}

// Map 객체의 크기
console.log(myMap.size);

메서드

• set(key, value): Map에 새로운 키-값 쌍을 추가합니다.
• get(key): 지정된 키에 해당하는 값을 반환합니다.
• has(key): 지정된 키가 Map에 존재하는지 확인합니다.
• delete(key): 지정된 키와 값을 삭제합니다.
• clear(): Map의 모든 요소를 삭제합니다.
• keys(): 모든 키를 포함하는 Iterator를 반환합니다.
• values(): 모든 값을 포함하는 Iterator를 반환합니다.
• entries(): 모든 키-값 쌍을 포함하는 Iterator를 반환합니다.

Set

중복되지 않는 값들의 집합. ES6에서 추가된 데이터 구조로, 보다 효율적인 데이터 관리가 가능합니다.

• 중복 허용 X: 같은 값이 여러 번 추가되어도 한 번만 저장됩니다.
• 순서 유지: 값이 추가된 순서대로 유지됩니다.
• 다양한 데이터 타입 지원: 숫자, 문자열, 객체 등 다양한 데이터 타입을 저장할 수 있습니다.
• 크기 속성: size 속성을 통해 Set 객체에 저장된 요소의 개수를 쉽게 확인할 수 있습니다.

// 빈 Set 생성
const mySet = new Set();

// 값 추가
mySet.add(1);
mySet.add('hello');
mySet.add(true);

// 중복된 값 추가 시 무시
mySet.add(1); // 이미 존재하므로 추가되지 않음

// 값 존재 여부 확인
console.log(mySet.has(1)); // true

// 값 삭제
mySet.delete(1);
console.log(mySet.has(1)); // false

// 모든 값 순회
for (const value of mySet) {
  console.log(value);
}

메서드

• add(value): Set에 새로운 값을 추가합니다.
• delete(value): Set에서 특정 값을 삭제합니다.
• has(value): Set에 특정 값이 존재하는지 확인합니다.
• clear(): Set의 모든 값을 삭제합니다.
• size: Set의 크기(요소의 개수)를 나타냅니다.

WeakMap

WeakMap은 Map과 유사하게 키-값 쌍을 저장하는 객체지만, 몇 가지 중요한 차이점이 있습니다.

• 약한 참조: WeakMap의 키는 약한 참조를 가지므로, 더 이상 다른 곳에서 참조되지 않는 키 객체는 가비지 컬렉션의 대상이 됩니다. 즉, 메모리 누수를 방지하는 데 효과적입니다.
• 키 제한: WeakMap의 키는 반드시 객체여야 합니다. 원시 값(숫자, 문자열 등)은 키로 사용할 수 없습니다.
• 크기 속성 없음: WeakMap은 size 속성이 없어 저장된 요소의 개수를 직접 확인할 수 없습니다.
• 순회 불가: WeakMap은 for...of 문과 같은 반복문으로 순회할 수 없습니다.

const weakmap = new WeakMap();
const obj = {};
weakmap.set(obj, 'value');

// obj가 더 이상 참조되지 않으면, weakmap에서도 자동으로 삭제됩니다.

WeakSet

WeakSet은 Set과 유사하지만, 값(요소)이 반드시 객체여야 하고 약한 참조를 가진다는 점이 다릅니다.

• 약한 참조: WeakSet의 값은 약한 참조를 가지므로, 더 이상 다른 곳에서 참조되지 않는 값은 가비지 컬렉션의 대상이 됩니다.
• 값 제한: WeakSet의 값은 반드시 객체여야 합니다. 원시 값은 값으로 사용할 수 없습니다.
• 크기 속성 없음: WeakSet은 size 속성이 없어 저장된 요소의 개수를 직접 확인할 수 없습니다.
• 순회 불가: WeakSet은 for...of 문과 같은 반복문으로 순회할 수 없습니다.

const weakset = new WeakSet();
const obj1 = {};
const obj2 = {};
weakset.add(obj1);
weakset.add(obj2);

// obj1이 더 이상 참조되지 않으면, weakset에서도 자동으로 삭제됩니다.

Symbol

Symbol 객체는 ES6에서 새롭게 도입된 원시 값(primitive type)으로, 고유한 식별자를 생성하는 데 사용됩니다. 즉, Symbol은 다른 어떤 값과도 절대 일치하지 않는, 유일한 값을 만들어낼 수 있습니다.

• 유일성: 동일한 방법으로 생성된 Symbol이라도 서로 다른 값을 가집니다.
• 변경 불가능: 한번 생성된 Symbol은 변경할 수 없습니다.
• 객체의 프로퍼티 키로 사용: 일반 문자열 키와 달리, Symbol을 키로 사용하면 다른 코드와의 충돌을 방지하고, 객체 내부의 프로퍼티를 더 안전하게 관리할 수 있습니다.

const sym1 = Symbol();
const sym2 = Symbol('description'); // description은 설명을 위한 문자열이며, 실제 값에 영향을 주지 않습니다.

• Symbol.for(key): 전역 심볼 레지스트리에서 해당 키에 해당하는 심볼을 찾거나, 없으면 새로운 심볼을 생성하고 등록합니다.
• Symbol.keyFor(sym): 전역 심볼 레지스트리에서 주어진 심볼에 해당하는 키를 찾습니다.

BigInt 객체

BigInt는 자바스크립트에서 아주 큰 정수를 표현하기 위해 도입된 새로운 자료형입니다.

• BigInt 리터럴: 정수 뒤에 n을 붙여 BigInt를 생성합니다.
• BigInt 생성자: BigInt() 함수를 사용하여 숫자나 문자열을 BigInt로 변환합니다.

const bigInt = 123456789012345678901234567890n;
const bigInt = BigInt("9007199254740991");

BigInt는 일반적인 숫자와 비슷하게 사칙연산, 비교 연산 등을 지원합니다. 하지만 BigInt와 Number를 직접 혼용해서 사용할 수는 없으며, 필요에 따라 형 변환을 해줘야 합니다.

const bigInt1 = 10n;
const bigInt2 = 5n;
console.log(bigInt1 + bigInt2); // 15n

// BigInt와 Number를 직접 더하면 에러 발생
// console.log(bigInt1 + 2);

Intl

Intl 객체는 자바스크립트에서 다양한 언어와 지역 설정에 맞춰 날짜, 시간, 숫자, 통화 등을 표현하고 처리할 수 있도록 지원하는 국제화 API입니다.

• 날짜와 시간 포맷팅: Intl.DateTimeFormat을 사용하여 다양한 형식으로 날짜와 시간을 표현할 수 있습니다.
• 숫자 포맷팅: Intl.NumberFormat을 사용하여 숫자를 지역별로 다양한 형식으로 표현할 수 있습니다.
• 통화 포맷팅: Intl.NumberFormat을 사용하여 통화를 지역별로 다양한 형식으로 표현할 수 있습니다.
• 문자열 비교: Intl.Collator를 사용하여 문자열을 지역별 정렬 규칙에 따라 비교할 수 있습니다.

// 날짜 포맷팅 (한국어)
const date = new Date();
const formatter = new Intl.DateTimeFormat('ko-KR');
console.log(formatter.format(date)); // 예: 2023년 5월 15일 (월요일)

// 숫자 포맷팅 (미국)
const number = 12345.67;
const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(number)); // 12,345.67

// 통화 포맷팅 (일본)
const price = 10000;
const formatter = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
console.log(formatter.format(price)); // ¥10,000