1. 표준 빌트인 객체:
- ECMAScript 사양에 정의된 객체로 애플리케이션 전역의 공통 기능을 제공함 자바스크립트 실행 환경(브라우저,Node.js)과 관계없이 언제 어디서나 사용 가능함.
- 전역 객체의 프로퍼티로서 제공되어 별도의 선언없이 전역 변수처럼 언제나 참조 가능 2. 호스트 객체:
- ECMAScript 사양에 정의되어 있지 않지만, 자바스크립트 실행 환경에서 추가로 제공하는 객체
- 브라우저 환경에서는 DOM,XMLHttpRequest,SVG,Web Component 등 클라이언드 사이드 Web API를 호스트 객체로 제공, Node.js 환경에서는 고유의 API를 호스트 객체로 제공함 3. 사용자 정의 객체:
- 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체
자바스크립트 코드는 실행 환경이 필요합니다. 대표적인 실행 환경은 다음과 같습니다. 1. 브라우저 (Browser) • 크롬(Chrome) • 엣지(Edge) • 파이어폭스(Firefox) • 사파리(Safari) 2. Node.js • 서버에서 자바스크립트를 실행하는 환경
- ECMAScript는 매년 새로운 기능이 추가됩니다.
- 브라우저와 Node.js가 새로운 ECMAScript 기능을 한꺼번에 지원하는 것이 아니라, 버전이 업데이트될 때마다 점진적으로 지원합니다.
- 자바스크립트는
Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, Function, Promise, Reflect, Proxy, Json, Error등 40여 개의 표준 빌트인 객체를 제공한다.Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스 생성 가능한 생성자 함수 객체
생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공하고 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공합니다.
(예시: String, Number, Boolean, Function, Array, Date)
// String 생성자 함수에 의한 String 객체 생성
const strObj = new String("Lee"); // String {"Lee"}
console.log(typeof strObj); // object
// Number 생성자 함수에 의한 Number 객체 생성
const numObj = new Number(123); // Number {123}
console.log(typeof numObj); // object
// Boolean 생성자 함수에 의한 Boolean 객체 생성
const boolObj = new Boolean(true); // Boolean {true}
console.log(typeof boolObj); // object
// Function 생성자 함수에 의한 Function 객체(함수) 생성
const func = new Function("x", "return x * x");
// ƒ anonymous(x )
console.log(typeof func); // function
// Array 생성자 함수에 의한 Array 객체(배열) 생성
const arr = new Array(1, 2, 3); // (3) [1, 2, 3]
console.log(typeof arr); // object
// RegExp 생성자 함수에 의한 RegExp 객체(정규 표현식) 생성
const regExp = new RegExp(/ab+c/i);
// /ab+c/i
console.log(typeof regExp); // object
// Date 생성자 함수에 의한 Date 객체 생성
const date = new Date();
// Fri May 08 2020 10:43:25 GMT+0900 (대한민국 표준시)
console.log(typeof date); // object각각의 객체에는 프로퍼티(속성)와 메서드(함수) 가 정의되어 있으며, 이를 활용하여 다양한 기능을 쉽게 구현할 수 있습니다.
| 객체 | 주요 역할 |
|---|---|
| Object | 객체 생성 및 조작 |
| Array | 배열 관련 기능 제공 |
| String | 문자열 조작 |
| Number | 숫자 관련 기능 제공 |
| Math | 수학 연산 제공 |
| Date | 날짜 및 시간 관련 기능 |
| RegExp | 정규 표현식 관련 기능 |
- 문자열, 숫자, 불리언 등 원시값이 존재함에도 객체를 생성하는 표준 빌트인 생성자 함수(String, Number, Boolean)가 존재하는 이유는... 원시값에 접근 시, 자바스크립트 엔진이 일시적으로 연관된 객체를 생성하여 프로퍼티에( "key(키)" : "value(값)") 접근 or 메서드를 호출하고 다시 원시값으로 되돌리기 때문입니다.
- String, Number, Boolean 생성자 함수를 new 연산자와 함께 호출하여 문자열, 숫자, 불리언 인스턴스를 생성하지 않는다. 문자열, 숫자, 불리언, 심벌 외 null, undefined는 래퍼 객체를 생성하지 않아, 객체처럼 사용시 에러가 발생한다.
원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드 또는 속성도 가지지 않는 데이터입니다. 원시 값에는 7가지의 종류가 있습니다.
string, number, bigint, boolean, undefined, symbol, null
📌 래퍼 객체 == 문자열,숫자,불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체
/* 암묵적 타입 변환 */
const str = "hello";
/* 생성자 함수를 통해 만든 인스턴스 */
const strObject = new String("hi");
// 값 출력
console.log(str); // hello
console.log(strObject); // [String: 'hi']
// 타입 출력
console.log(typeof str); // string
console.log(typeof strObject); // object
// 원시 타입인 문자열이 프로퍼티와 메서드를 갖고 있는 객체처럼 동작한다.
console.log(str.length); // 5
console.log(str.toUpperCase()); // HELLO
console.log(strObject.length); // 2
console.log(strObject.toUpperCase()); // HI=> String 생성자 함수의 인스턴스는 String.prototype의 메서드(toUpperCase)를 상속받아 사용 가능하다.
// 1️⃣ 식별자 str은 문자열을 값으로 가지고 있음
const str = "hello";
// 2️⃣ 식별자 str은 암묵적으로 생성된 래퍼 객체를 가리킴
str.name = "Lee";
// 3️⃣ 식별자 str은 다시 원래의 문자열, 즉 래퍼 객체의 내부 슬롯에 할당된 원시값을 가짐
// 이때, 2️⃣에서 생성된 래퍼 객체는 아무도 참조하지 않는 상태로 가비지 컬렉션의 대상이 됨
// 4️⃣ 식별자 str은 새롭게 암묵적으로 생성된 2️⃣에서 생성된 래퍼 객체와 다른 래퍼 객체를 가리킴
// 새롭게 생성된 래퍼 객체는 name 프로퍼티가 존재하지 않음
console.log(str.name); // undefined
// 5️⃣ 식별자 str은 다시 원래의 문자열, 즉 래퍼 객체의 내부 슬롯에 할당된 원시값을 가짐
// 이때, 4️⃣에서 생성된 래퍼 객체는 아무도 참조하지 않는 상태로 가비지 컬렉션의 대상이 됨
console.log(typeof str, str); // str hello런타임 단계 이전에 자바스크립트 엔진에 의해 어떤 객체들보다도 먼저 생성되는 객체로 최상위 객체
- 브라우저 환경에서는
window(self,this,frames)Node.js환경에서는global - 전역 객체의 프로퍼티는 표준 빌트인 객체, 환경에 따른 호스트 객체,
var키워드로 선언한 전역 변수와 전역 함수이다. 즉, 계층적 구조상 어떤 객체에도 속하지 않는 모든 빌트인 겍체의 최상위 객체이다.
// 문자열 F를 16진수로 해석하여 10진수로 변환하여 반환한다.
window.parseInt("F", 16); // 15
// window.parseInt는 parseInt를 호출한다.
parseInt("F", 16); // 15
window.parseInt === parseInt; // true- 전역 객체는 개발자가 의도적으로 생성 불가능하며, 생성할 수 있는 생성자 함수가 제공되지 않는다.
- 전역 객체의 프로퍼티를 참조할 때
window(또는global)를 생략 가능하다. - 전역 객체는 표준 빌트인 객체를 프로퍼티로 가지고 있다.
- 자바스크립트 실행 환경에 따라 추가적인 프로퍼티와 메서드를 갖는다.
- var 키워드로 선언한 전역 변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 그리고 전역 함수는 전역 객체의 프로퍼티가 된다. let, const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다. 보이지 않는 전역 렉시컬 환경의 선언적 환경 레코드 내에만 존재하게 된다. => window.foo에 접근 불가능(접근시, undefined)
- 브라우저 환경의 자바스크립트 코드는 하나의 전역 객체 window를 공유한다.
== 전역 객체의 프로퍼티로 주로 애플리케이션 전역에서 사용하는 값을 제공한다.
InfinityNaNundefined
== 애플리케이션 전역에서 호출할 수 있는 빌트인 함수로서 전역 객체의 메서드
eval
- JS 코드를 나타내는 문자열을 인수로 전달 받음 ➡️ 전달받은 문자열 코드가 표현식이라면, 런타임 때 값 생성 or 전달 받은 인수가 표현식이 아닌 문이라면, 런타임에 실행
- 보안 및 성능 문제로 인해 사용을 지양하는 것이 좋음
console.log(eval("2 + 2")); // 4
eval("var x = 5");
console.log(x); // 5왜 보안 및 성능 측면에서 문제가 발생할까❓ **1. 보안 문제 (XSS, 코드 인젝션 위험) ** 사용자로부터 입력받은 콘텐츠를 실행하는 것에 보안이 매우 취약하다
let userInput = prompt("Enter a command:"); eval(userInput); // ⚠️ 사용자가 입력한 코드가 실행됨2. 성능 문제 (JIT 최적화 불가, 코드 해석 비용 증가 실행될 때마다 새로운 코드를 해석해야 하므로 성능이 저하됨. 3. 스코프 오염 가능성 eval()을 통해 생성된 변수는 예상치 못한 영향을 미칠 수 있음. ✅ 대체 방법
- JSON.parse() → 데이터 변환 시 사용
- Function() → 동적 코드 실행 시 사용
- window[], 객체 프로퍼티 접근 → 동적으로 속성을 조회할 때 사용
isFinite
- 전달 받은 인수가 정상적인 유한수면 true 반환 무한수면 false 반환
- 전달 받은 인수 타입이 숫자가 아닐 경우, 숫자로 타입 변환 후 검사 수행. (null을 숫자 타입으로 변환하면, 0이다.)
isNaN
- 전달 받은 인수가 NaN인지 검사한 후 해당 결과를 불리언 타입으로 반환함.
- 전달 받은 인수의 타입이 숫자가 아닌 경우 숫자로 타입 변환 후 검사 수행함.
// 숫자
isNaN(NaN); // -> true
isNaN(10); // -> false
// 문자열
isNaN("blabla"); // -> true: 'blabla' => NaN
isNaN("10"); // -> false: '10' => 10
isNaN("10.12"); // -> false: '10.12' => 10.12
isNaN(""); // -> false: '' => 0
isNaN(" "); // -> false: ' ' => 0
// 불리언
isNaN(true); // -> false: true → 1
isNaN(null); // -> false: null → 0
// undefined
isNaN(undefined); // -> true: undefined => NaN
// 객체
isNaN({}); // -> true: {} => NaN
// date
isNaN(new Date()); // -> false: new Date() => Number
isNaN(new Date().toString()); // -> true: String => NaNparseFloat
- 전달 받은 문자열 인수를 부동 수소점 숫자(floating point number, 실수)로 해석하여 반환
parseInt
- 전달 받은 문자열 인수를 정수(10진수,기본값)로 해셕하여 반환
- 10진수 숫자를 해당 기수의 문자열로 반환하여 반환하고 싶을 땐,
Number.prototype.toString메서드 사용
const x = 15;
// 10진수 15를 2진수로 변환하여 그 결과를 문자열로 반환한다.
x.toString(2); // -> '1111'
// 문자열 '1111'을 2진수로 해석하고 그 결과를 10진수 정수로 반환한다
parseInt(x.toString(2), 2); // -> 15
// 10진수 15를 8진수로 변환하여 그 결과를 문자열로 반환한다.
x.toString(8); // -> '17'
// 문자열 '17'을 8진수로 해석하고 그 결과를 10진수 정수로 반환한다
parseInt(x.toString(8), 8); // -> 15
// 10진수 15를 16진수로 변환하여 그 결과를 문자열로 반환한다.
x.toString(16); // -> 'f'
// 문자열 'f'를 16진수로 해석하고 그 결과를 10진수 정수로 반환한다
parseInt(x.toString(8), 8); // -> 15
// ✅ 진법을 나타내는 기수를 지정하지 않을시, 10진수 정수로 반환됨.
// 숫자값을 문자열로 변환한다.
x.toString(); // -> '15'
// 문자열 '15'를 10진수로 해석하고 그 결과를 10진수 정수로 반환한다
parseInt(x.toString()); // -> 15- 2진수 리터럴과 8진수 리터럴은 제대로 해석하지 못한다.
// 2진수 리터럴(0b로 시작)은 제대로 해석하지 못한다. 0 이후가 무시된다.
parseInt("0b10"); // -> 0
// 8진수 리터럴(ES6에서 도입. 0o로 시작)은 제대로 해석하지 못한다. 0 이후가 무시된다.
parseInt("0o10"); // -> 0- 문자열을 8진수로 해석하려면 지수를 반드시 지정해야 한다.
// 문자열 '10'을 2진수로 해석한다.
parseInt("10", 2); // -> 2
// 문자열 '10'을 8진수로 해석한다.
parseInt("10", 8); // -> 8- 전달 받은 지수의 숫자로 변환하지 못할 경우 NaN을 반환한다.
// 'A'는 10진수로 해석할 수 없다.
parseInt("A0"); // -> NaN
// '2'는 2진수로 해석할 수 없다.
// 2진수에서 사용할 수 있는 숫자는 0과 1뿐이므 2진수로 해석 불가능
parseInt("20", 2); // -> NaNencodeURI / decodeURI
1. encodeURI
- 완전한 URI를 문자열로 전달 받아 이스케이프 처리를 위해 인코딩한다. (URI: 인터넷에 있는 자원을 나타내는 유일한 주소)
- 인코딩: URI의 문자들을 이스케이프 처리하는 것 이스케이프 처리: 네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있는 아스키 문자셋으로 변환하는 것
- UTF-8 특수 문자의 경우 1문자당 1~3바이트 / UTF-8 한글 표현의 경우 1문자당 3바이트
2. decodeURI
- 인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩한다.
encodeURIComponent / decodeURIComponent
1. encodeURIComponent
- URI 구성 요소를 인수로 전달받아 인코딩
- 인수로 전달된 문자열을 URI의 구성요소인 쿼리 스트링의 일부로 간주함
2. decodeURIComponent
- 매개변수로 전달된 URI 구성 요소를 디코딩
var, let, const 키워드 없이 선언할 때 자동으로 전역 변수로 등록되는 현상
🚨 문제점
- 의도치 않게 전역 변수가 만들어져 스코프 오염 가능성 증가
- 동일한 이름의 변수를 다른 곳에서 사용하면 예상치 못한 동작 발생
window.name은 브라우저에서 중요한 시스템 속성이므로, 덮어쓰면 예기치 않은 문제 발생 가능