[JavaScript] 모든 객체의 모형 Object 객체와 Global 객체

 

 

Object 객체

Object 객체는 모든 객체의 기본 객체라고 할 수 있다. Object 객체는 다른 객체에 대하여 객체의 공통적인 성질/기능을 제공한다. 내장형 객체는 물론 모든 객체에서 Object  객체의 기능을 사용할 수 있다. 예외적으로 Object.create 메소드를 사용하면 Object 객체의 기능을 상속받지 않는 객체를 만들 수 있다.

 

 

 객체를 기본형으로 변환하기

toString 과 valueOf 메소드는 각각의 객체의 내용을 기본형의 값으로 변환한다. toString() 은 문자열을 반환하고 valueOf() 는 문자열 이외의 값이 반환되는 것을 기대하며 사용한다.

var obj = new Object();
console.log(obj.toString());    // [object object]
console.log(obj.valueOf());     // {}

var dat = new Date();      
console.log(dat.toString());    // Thu Mar 13 2025 17:48:52 GMT+0900 (대한민국 표준시)
console.log(dat.valueOf());     // 1741855732102

var ary = [1, 2, 3];
console.log(ary.toString());    // 1,2,3
console.log(ary.valueOf());     // [ 1, 2, 3 ]

var num = 10;    // Number 객체 
console.log(num.toString());    // 10
console.log(num.valueOf());     // 10

var reg = /[0-9]{7}/g;
console.log(reg.toString());    // /[0-9]{7}/g
console.log(reg.valueOf());     // /[0-9]{7}/g

 

 

 객체 결합하기 - assign 메소드

assign 메소드로 기존의 객체를 결합할 수 있다. 반환값으로 결합 후의 객체를 반환한다. 동일 명칭의 프로퍼티는 나중에 정의된 값으로 덮어 씌인다. 재귀적인 결합은 지원하지 않는다.

// target 에 인수 source1, source2, ... 로 지정된 맴버를 복사한다. target 에 영향을 미친다.
Object.assign(target, source1, source2, ...);

 

예시)

let pet = {
    type: 'A',
    name: '강아지'
}

let pet2 = {
    type: 'B',
    name: '고양이',
    color: '흰색'
}

let pet3 = {
    name: '네로',
    weight: 43
}

Object.assign(pet, pet2, pet3);
console.log(pet);    // { type: 'B', name: '네로', color: '흰색', weight: 43 }
console.log(pet2);   // { type: 'B', name: '고양이', color: '흰색' }
console.log(pet3);   // { name: '네로', weight: 43 }

 

 

 객체 생성하기 

 

㉮ 객체 리터럴

이름을 갖고 있지 않는 객체(익명객체)를 생성하는 가장 간단한 수단이다.

var obj = {x:1, y:2, z:3};

 

㉯ new 연산자

var obj = new Object();

obj.x = 1;
obj.y = 2;
obj.z = 3;

 

㉰ create 메소드

Object.create(proto [,propos]);

create 메소드로 생성할 때 인스 props 에는 다양한 성질을 나타내기 위한 속성값을 제공한다.

• configurable : 속성(writable 이외)의 변경이나 프로퍼티의 삭제가 가능한가 (default: false)
• enuemerable : 열거 가능하게 할 것인가 (default: false)
• value : 값
• writable : 갱신 가능한가 (default: false)
• get : 게터함수
• set : 세터함수

 

예시)

var obj = Object.create(Object.prototype, {
    x: {value:1, writable: true, configurable: true, enumerable: true},
    y: {value:2, writable: true, configurable: true},
    z: {value:3, writable: true, configurable: true}
});

var obj2 = {x:1, y:2, z:3};

console.log(obj2);   // { x: 1, y: 2, z: 3 }
console.log(obj);    // { x:1 } : 열거 가능한 x 만 출력된다.

 

 

 불변 객체 정의하기

불변 객체란 처음에 인스턴스를 생성한 뒤에는 일절 상태(값)를 변경할 수 없는 객체를 말한다. 불변 객체를 위해 preventExtennsions, seal, freeze 세가지 메소드를 제공하고 있다.

 

메소드	preventExtensions	seal	freeze
프로퍼티 추가	불가	불가	불가
프로퍼티 삭제	가능	불가	불가
프로퍼티값의 변경	가능	가능	불가

 

예시) 프로퍼티 추가

비 strict 모드에서는 메소드 제약에도 불구하고 예외가 발생하지 않는다. 다음 예시는 strict 모드이므로 프로퍼티 추가는 불가하므로 오류가 나온다.

'use strict';
var pet = {name: '강아지', age: 12};


Object.preventExtensions(pet);
// Object.seal(pet);
// Object.freeze(pet);

// 프로퍼티 추가
pet.color = "흰색";

 

 

Global 객체

글로벌 객체는 다른 객체들과 달리 인스턴스화도 불가능하며 메소드를 호출할 수 없다.

// 전부 다 불가능
var a = new Global();

Global.메소드명();

 

글로벌 객체는 글로벌 변수나 글로벌 함수를 관리하기 위해 자바스크립트가 자동으로 생성하는 편의적인 객체이다. 

글로벌 변수와 글로벌 함수는 함수의 밑에 속하지 않는 톱 레벨의 변수와 함수를 말한다. 글로벌 별수와 함수를 직접 정의할 수 있지만 자바스크립트에서 기본적으로 제공하고 있는 몇 개의 글로벌 변수와 함수가 있다.

 

글로벌 객체는 'Global.~' 로 참조하는 것은 불가능하다 아래처럼 변수명과 함수명으로 참조가 가능하다.

변수명
함수명(인수,...)

 

㉮ 글로벌 변수

// 숫자가 아니다 (Not a Number)
NaN

// 무한대
Infinity

// 미정의값
undefined

 

㉯ 글로벌 함수

// 변환 함수
Boolean(str);
Number(str);
String(str);

// 인코드 관련 함수
encodeURI(str);
decodeURI(str);
encodeURIComponent(str);
decodeURIComponent(str);

// 식 혹은 값을 평가
eval(exp);

 

 

 쿼리 정보 이스케이프 처리하기 - encodeURI(), encodeURIComponent()

 

https://www.tistory.com/search?type=post&sort=ACCURACY&page=1

 

URL 끝 부분에 "키명=값" 과 '&' 의 형식으로 기술되고 있는 쿼리 정보가 있다. 이 쿼리 정보의 단락 문자인 '?', '=', '%', 공백, 멀티 바이트 문자 등은 사용할 수 없다. 이러한 문자가 쿼리 정보에 포함된 경우에는 미리 악영향을 끼치지 않는 문자열(%xx)로 변환해야 한다. 이러한 변환 처리를 URI encode 라고 한다. 그리고 이런 이스케이프 처리를 실시하는 것이 encodeURI(), encodeURIComponent() 함수이다.

var str = 'key=ewere!#%$+fewre';
console.log(encodeURI(str));      // key=ewere!#%25$+fewre
console.log(encodeURIComponent(str));    // key%3Dewere!%23%25%24%2Bfewre

 

 

 동적으로 생성한 스크립트 실행하기 - eval()

eval() 함수는 주어진 문자열을 자바스크립트의 코드로 평가/실행한다. 다음과 같이 문자열 형태의 코드가 실행된다.

var str = "console.log('eval 함수');";

eval(str);     // eval 함수

 

하지만 eval 함수는 제 3자에 의해 임의의 스크립트가 실행될 수 있는 가능성이 있으며 일반적인 코드를 실행하는 것보다 처리 속도가 느리기 때문에 eval 함수를 사용하는 것을 피하는 것이 좋다.