-
Object의 분류 - 네이티브 객체, 호스트객체프론트엔드/JavaScript 2020. 9. 21. 02:01
Object는 앞서 말했듯 자바스크립트에서 굉장히 중요한 개념이다.
그런데 이 Object의 구조나 분류 등은 자바스크립트 상황에 따라서 달라진다.
다만 대체로 보면 ECMAScript에 따른 분류를 보면 다음과 같다.
네이티브 객체
네이티브 객체(Native Object)는 애플리케이션 전역의 공통 기능을 제공한다.
네이티브 객체는 어느 애플리케이션이든 관계없이 사용이 가능하다.
Object, String, Number, Function, Array, RegEXP, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성된다.
네이티브 객체를 'Global Object'라고도 부르는데, 이것은 전역 객체(Global Object)와는 다른 개념이다.
네이티브 객체의 종류는 다음과 같다.
1. Object
Object() 생성자 함수는 객체를 생성한다.
만약 생성자 인수 값이 null이거나 undefined이면 빈 객체를 반환한다.
그 이외의 경우 생성자 함수의 인수값에 따라 강제 형변환된 객체가 반환된다.
2. Function
자바스크립트는 모든 함수를 일급객체하고 있다. 즉 함수도 객체다.
Function은 함수를 만들 수 있는 객체로 new 연산자를 이용하면 객체 생성이 가능하다.
또한 함수를 이용해 자바의 클래스를 흉내내 상속 등이 가능하다.
3. Boolean
Boolean 객체는 원시 타입을 위한 래퍼(wrapper) 객체다.
Boolean 생성자 함수로 Boolean 객체를 생성할 수 있다.
참고로 래퍼 객체란 원시 타입의 경우 원칙적으로 자료 타입이 달라 객체들(배열 등)과는 똑같이 취급할 수 없다.
객체의 메서드를 이용하거나 연산에서 제약을 받는다.
이를 위해 나온 것이 래퍼객체다.
래퍼객체란 원시타입의 자료를 일시적으로 또는 원할 경우 영구적으로 객체 취급하여 연산이나 메서드 사용에 제약이 없게 해주는 것을 말한다.
4. Number
Boolean과 마찬가지로 Number 역시 래퍼객체다.
원시 타입의 number의 경우 별도 변환없이 wrapper 객체의 메소드 사용이 가능하다.
그 이유로는 원시 타입이 프로퍼티, 메서드를 호출시 일시적으로 wrapper 객체로 변해서 계산을 도와주기 때문이다.
주요 메서드는 코드를 참고하자.
<body> <script> // 1. Number의 생성자 함수 let x = new Number(123); // 123 출력 let y = new Number('123'); // 123 출력 let z = new Number('str'); // NaN 출력 // 2. 문자열 안의 숫자 추출 let int = Number.parseInt("3.4"); // 3 출력 let float = Number.parseFloat("3.4"); // 3.4 출력 // 3. 전달된 값이 NaN인지 아닌지 확인 let na = Number.isNaN(NaN); // true 출력 let na2 = Number.isNaN(5); // false 출력 // Number.prototype 메서드 // 모든 Number 인스턴스가 자동 상속 받아 쓸 수 있는 메서드 // 1. 인스턴스 값을 지수 표기법으로 표시 변환후 문자열 반환 var num = 13579; num.toExponential() // 1.3579e+4 출력 num.toExponential(1) // 1.4e+4 출력 num.toExponential(2) // 1.36e+4 출력 num.toExponential(3) // 1.358e+4 출력 num.toExponential(4) // 1.3579e+4 출력 num.toExponential(5) // 1.35790e+4 출력 // 2. 원하는 자릿수만큼 숫자 표기 var num = 2.3579; num.toFixed() // 2 출력 num.toFixed(1) // 2.4 출력 num.toFixed(2) // 2.36 출력 num.toFixed(3) // 2.358 출력 num.toFixed(4) // 2.3579 출력 // 3. 인스턴스 값을 문자열로 반환 var num = 256; var test = num.toString(); console.log(typeof test); // string 출력 // 4. 인스턴스가 가진 값을 반환한다 var num = 256; var test = num.valueOf(); console.log(typeof test); // number 출력 </script> </body>5. Math 객체
수학 상수와 함수를 위한 프로퍼티와 메소드를 제공한다.
Math 객체는 생성자 함수가 아니고 정적 프로퍼티와 메소드만 제공한다.
<body> <script> // 자주 쓰는 상수 // 1. 파이값 var pi = Math.PI; console.log(pi) // 3.14159265....파이값을 반환 // 자주 쓰는 메서드 // 1. 절대값 반환 Math.abs(-1) // 1 Math.abs(1) // 1 Math.abs(0) // 0 Math.abs(null) // 0 Math.abs({}) // NaN // 2. 소수점 이하 반올림한 정수 반환 Math.round(1.4); // 1 Math.round(1.6); // 2 Math.round(-1.4); // -1 Math.round(-1.6); // -2 // 2. 소수점 이하를 올림한 정수 반환 Math.ceil(1.4); // 2 Math.ceil(1.6); // 2 Math.ceil(-1.4); // -1 Math.ceil(-1.6); // -1 // 3. 인수의 제곱근을 반환 Math.sqrt(9) // 3 Math.sqrt(1) // 1 // 4. 랜덤 숫자( 0부터 1미만 숫자 반환 ) Math.random(); // 랜덤 Math.random(); // 랜덤 Math.floor((Math.random() * 10) + 1); // 1~10의 정수 반환 // 5. 거듭 제곱 Math.pow(2,8) // 256 Math.pow(2,-1) // 0.5 // 6. 가장 큰 수 반환 Math.max(1,2,3,4,5) // 5 // 7. 가장 작은 수 반환 Math.min(1,2,3,4,5) // 1 </script> </body>6. DATE 객체
DATA 객체는 날짜와 시간에 관한 객체이면서 생성자 함수다.
DATA 생성자 함수로 생성한 DATA 객체는 내부적으로 숫자값을 갖는다.
이 값은 1970년 1월 1일 00:00 시를 기점으로 현재까지의 밀리초를 나타낸다.
<body> <script> // Date 객체 // 1. Date객체 생성 var time = new Date(); console.log(time); // Mon Sep 21 2020 01:45:17 GMT+0900 (대한민국 표준시) // 2. 원하는 날짜와 시간 반환 var time = new Date('February 22, 2222 22:22:22'); console.log(time); // Fri Feb 22 2222 22:22:22 GMT+0900 (대한민국 표준시) // 3. Date 생성자 함수를 new 연산자 없이 호출 var time = Date(); console.log(time); // Mon Sep 21 2020 01:49:36 GMT+0900 (대한민국 표준시) // 4. 현재 시간 Date.now(); // 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환한다. // 5. 날짜 시간 표현 (ISO양식) var now = new Date("2020-02-02T22:22:22"); console.log(now); // Sun Feb 02 2020 22:22:22 GMT+0900 (대한민국 표준시) // 6. 날짜 시간 표현 두 가지 방법 var now = new Date("Aug 05 2002"); console.log(now); // Mon Aug 05 2002 00:00:00 GMT+0900 (대한민국 표준시) var now2 = new Date("02/04/1998") console.log(now2); // Wed Feb 04 1998 00:00:00 GMT+0900 (대한민국 표준시) // Date 프로토타입 객체 // 1. 연도수 반환 var today = new Date(); today.getFullYear(); // 2020 // 2. 원하는 날짜 반환, 시간 반환 var today = new Date(); today.setFullYear(1900, 0, 1); // Mon Jan 01 1900 01:54:11 GMT+0827 (대한민국 표준시) // 3. 월을 반환 var today = new Date(); today.getMonth() // 9월이라서 8. 월(月)의 경우 1월이 0부터 12월이 11로 끝난다.mid_text </script> </body>7. String 객체
String 객체는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공하는 래퍼 객체다.
변수 또는 객체 프로퍼티가 있다면 별도의 생성자 없이 String 객체의 메서드, 프로퍼티 이용이 가능하다.
<body> <script> // String 프로퍼티 // 1. String 생성자 생성 var str = new String("테스트"); console.log(str[0]) // 테 console.log(str[1]) // 스 console.log(str[2]) // 트 console.log(str); // String {"테스트"} var str2 = "테스트"; console.log(str2[0]) // 테 console.log(str2[1]) // 스 console.log(str2[2]) // 트 console.log(str2); // 테스트 // 2. 문자열의 길이 확인 var str = new String("테스트"); var str2 = "테스트"; str.length // 3 str2.length // 3 // String 메서드 // 1. 문자열 합치기 var str = new String("테스트1"); var str2 = "테스트2"; str.concat(str2); // 테스트1테스트2 str.concat("입니다") // 테스트1입니다 // 2. 문자열의 위치 찾기 var str = "가나다ABC가나다"; str.indexOf("가나다"); // 0 (해당 글자의 처음 나타나는 인덱스 반환) str.lastIndexOf("가나다") // 6 (뒤에서부터 해당 글자 처음 나타나는 인덱스 반환) str.indexOf("abc"); // -1 ( 대소문자 구분함. 없으면 -1 반환) // 3. 문자열 추출 var str = "가나다ABC가나다"; str.slice(3,6); // ABC str.substring(3,6); // ABC // slice와 substring은 괄호 안에 있는 첫번째 인덱스에서 두번째 인덱스까지 글자 추출 str.substr(3,3); // ABC // substr은 괄호 안에 첫번째 인덱스에서 시작해서 두번째 숫자 수만큼 글자 추출 // 4. 문자열 분리 var str = "응, 아니야, 안돼, 돌아가"; str.split(); // ["응, 아니야, 안돼, 돌아가"], 아무 입력 없으면 그대로 출력 str.split(","); // ["응", " 아니야", " 안돼", " 돌아가"], 입력한 기준점 기준으로 분리 str.split(" "); // ["응", " 아니야", " 안돼", " 돌아가"], 공백 기준으로 분리 str.split(""); // ["응", ",", " ", "아", "니", "야", ",", " ", "안", "돼", ",", " ", "돌", "아", "가"] // 띄어쓰기까지 한글자 단위로 추출 // 5. 대문자&소문자 변경 var str = "ABCabcABCabc"; str.toUpperCase(); // ABCABCABCABC str.toLowerCase(); // abcabcabcabc // 6. 공백 없애기 var str = " 공백 없애는 테스트 입 니 다 . "; str.trim(); // "공백 없애는 테스트 입 니 다 .", 문자열 양쪽 공백 제거 // 7. toString(); var str = "이것은 테스트입니다" str.toString(); // 이것은 테스트입니다 str.valueOf(); // 이것은 테스트입니다 </script> </body>호스트 객체
호스트 객체는 브라우저 환경에서 제공하는 window, DOM 등 호스트 환경에 정의된 객체를 말한다.
예를 들어 브라우저에 동작하는 환경과 브라우저 외부에서 사용하는 환경의 자바스크립트(Node.js)는 다른 호스트 객체를 사용할 수 있다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
고차함수(Higher-Order Function)에 대해서 (0) 2020.09.22 자바스크립트 배열(Array) (0) 2020.09.21 기본자료형/객체 비교하기, 타입 확인하기 (0) 2020.09.19 자료, 객체의 복사에 대해서 (0) 2020.09.19 자바스크립트의 클로저(Closure) (0) 2020.09.15