# 내장 객체 자바스크립트는 프로그래머가 효율적으로 코드를 작성할 수 있도록 다양한 **내장 객체(Built-in Objects)**를 제공합니다. 내장 객체는 브라우저나 Node.js 환경에서 기본적으로 사용할 수 있는 객체이며, 자바스크립트의 기능을 확장하거나 데이터 처리를 간편하게 만들어줍니다. 내장 객체는 크게 **기본 객체(Core Objects)**와 **호스트 객체(Host Objects)**로 나뉩니다. * 기본 객체: ECMAScript 표준에 정의된 객체로, 모든 환경에서 동일하게 사용 가능. - 예: Object, Array, String, Math * 호스트 객체: 실행 환경(브라우저, Node.js 등)에서 제공하는 객체. - 브라우저 예: window, document, fetch - Node.js 예: process, fs ## Object 객체 모든 객체의 부모 역할을 하는 최상위 객체입니다. 객체를 생성하거나 조작할 때 사용됩니다. ```javascript 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(): 배열의 모든 요소를 하나의 값으로 축소합니다. ```javascript 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); ``` ```javascript 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(): 문자열을 모두 대문자로 변환 ```javascript 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(): 문자열을 부동소수점 숫자로 변환합니다. ```javascript const num = 123.456; console.log(num.toFixed(2)); // "123.46" console.log(Number.isNaN(NaN)); // true ``` ## Boolean 객체 불리언 값을 다룹니다. ```javascript 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() 등 : 다양한 삼각함수를 제공합니다. ```javascript // 원의 넓이 계산 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 객체 날짜와 시간을 처리하는 데 사용됩니다. ```javascript // 현재 시각을 나타내는 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(): 지역 설정에 맞는 문자열로 변환합니다. ```javascript 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 문자열을 객체로 변환 ```javascript 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 객체 정규표현식을 다루는 객체입니다. 문자열 검색과 패턴 매칭에 사용됩니다. ```javascript 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. ``` ### 생성 * 리터럴 표기법 : 슬래시(/) 사이에 정규 표현식 패턴을 직접 작성하는 방법입니다. 간단한 패턴을 정의할 때 주로 사용합니다. ```javascript let re = /pattern/; ``` * 생성자 함수 : RegExp 생성자 함수를 사용하여 정규 표현식을 생성하는 방법입니다. 동적으로 패턴을 생성해야 할 때 유용합니다. ```javascript let re = new RegExp('pattern'); ``` ### 메서드 * test(): 주어진 문자열이 정규 표현식과 일치하는지 여부를 반환합니다. (boolean) * exec(): 주어진 문자열에서 정규 표현식과 일치하는 첫 번째 부분을 배열로 반환합니다. * match(): 주어진 문자열에서 정규 표현식과 일치하는 모든 부분을 배열로 반환합니다. * search(): 주어진 문자열에서 정규 표현식과 일치하는 첫 번째 인덱스를 반환합니다. * replace(): 주어진 문자열에서 정규 표현식과 일치하는 부분을 다른 문자열로 치환합니다. ## Map 키-값 쌍을 저장하는 객체. ES6에서 추가된 데이터 구조로, 보다 효율적인 데이터 관리가 가능합니다. * 다양한 데이터 타입의 키: 일반 객체는 문자열만 키로 사용할 수 있지만, Map은 문자열뿐만 아니라 숫자, 객체 등 어떤 타입의 데이터든 키로 사용할 수 있습니다. * 순서 유지: Map은 요소가 추가된 순서를 기억합니다. * 중복된 키 허용하지 않음: 하나의 키에 대해 여러 개의 값을 저장할 수 없습니다. * 크기 속성: size 속성을 통해 Map 객체에 저장된 요소의 개수를 쉽게 확인할 수 있습니다. ```javascript // 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 객체에 저장된 요소의 개수를 쉽게 확인할 수 있습니다. ```javascript // 빈 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 문과 같은 반복문으로 순회할 수 없습니다. ```javascript const weakmap = new WeakMap(); const obj = {}; weakmap.set(obj, 'value'); // obj가 더 이상 참조되지 않으면, weakmap에서도 자동으로 삭제됩니다. ``` ## WeakSet WeakSet은 Set과 유사하지만, 값(요소)이 반드시 객체여야 하고 약한 참조를 가진다는 점이 다릅니다. * 약한 참조: WeakSet의 값은 약한 참조를 가지므로, 더 이상 다른 곳에서 참조되지 않는 값은 가비지 컬렉션의 대상이 됩니다. * 값 제한: WeakSet의 값은 반드시 객체여야 합니다. 원시 값은 값으로 사용할 수 없습니다. * 크기 속성 없음: WeakSet은 size 속성이 없어 저장된 요소의 개수를 직접 확인할 수 없습니다. * 순회 불가: WeakSet은 for...of 문과 같은 반복문으로 순회할 수 없습니다. ```javascript 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을 키로 사용하면 다른 코드와의 충돌을 방지하고, 객체 내부의 프로퍼티를 더 안전하게 관리할 수 있습니다. ```javascript const sym1 = Symbol(); const sym2 = Symbol('description'); // description은 설명을 위한 문자열이며, 실제 값에 영향을 주지 않습니다. ``` * Symbol.for(key): 전역 심볼 레지스트리에서 해당 키에 해당하는 심볼을 찾거나, 없으면 새로운 심볼을 생성하고 등록합니다. * Symbol.keyFor(sym): 전역 심볼 레지스트리에서 주어진 심볼에 해당하는 키를 찾습니다. ## BigInt 객체 BigInt는 자바스크립트에서 아주 큰 정수를 표현하기 위해 도입된 새로운 자료형입니다. * BigInt 리터럴: 정수 뒤에 n을 붙여 BigInt를 생성합니다. * BigInt 생성자: BigInt() 함수를 사용하여 숫자나 문자열을 BigInt로 변환합니다. ```javascript const bigInt = 123456789012345678901234567890n; const bigInt = BigInt("9007199254740991"); ``` BigInt는 일반적인 숫자와 비슷하게 사칙연산, 비교 연산 등을 지원합니다. 하지만 BigInt와 Number를 직접 혼용해서 사용할 수는 없으며, 필요에 따라 형 변환을 해줘야 합니다. ```javascript 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를 사용하여 문자열을 지역별 정렬 규칙에 따라 비교할 수 있습니다. ```javascript // 날짜 포맷팅 (한국어) 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 ```