[JS] 📚 Object 객체 메소드 종류 💯 정리

...

자바스크립트 객체 메소드

모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티와 메소드를 상속받습니다. 자주 사용되는 대표적인 객체 메소드는 다음과 같습니다.

Object.create()

주어진 프로토타입(prototype)의 객체와 속성들을 갖고 있는 새 객체를 생성합니다.

Object.assign()

하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사합니다.

var user ={
  name : "mike",
  age : 30
}

var cloneUser = user; // 객체주소 참조값이 복사된다. -> 서로 공유한다. 진정한 복사 X


var cloneUser2 = Object.assign({}, user); // 빈객체는 초깃값, 내용을 고대로 복사한다.
var cloneUser3 = Object.assign({gender : 'male'}, user); // gender라는 프로퍼티를 추가해서 객체값을 얻는다.
//  { gender:'male', name : "mike", age : 30 }
var cloneUser4 = Object.assign({name : "Tom"}, user);  // 같은 프로퍼티면 덮어씌워진다.


const user = { name : "Mike" }
const age_info = { age : 30 }
const gender_info = { gender : "male" }
var cloneUser5 = Object.assign(user, age_info, gender_info); // 객체 변수를 합칠 수 있다.

Object.keys()

객체의 키만 담은 배열을 반환합니다.

Object.values()

객체의 값만 담은 배열을 반환합니다.

Object.entries()

[키, 값] 쌍을 담은 배열을 반환합니다.

보통 객체를 이차원 배열로 변환하고 Map자료형으로 만들때 사용

const user = {
  name : "Mike",
  age : 30,
  gender : "male"
}

Object.entries(user); // [ ["name", "Mike"], ["age", 30], ["gender", "male"] ]

Object.fromEntries()

[키, 값] 형태의 배열을 객체로 반환합니다.

Object.is()

두 값이 같은지를 비교합니다.

모든 NaN 값은 같다고 처리됩니다

var test = { a: 1 };
Object.is(test, test);       // true

Object.is(null, null);       // true
Object.is([], []);           // false
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

Object.freeze() / Object.isFrozen()

객체를 프리징(freeze)합니다. 즉, 다른 곳의 코드에서 객체의 속성을 지우거나 바꿀 수 없습니다.

/ 객체가 프리징 되었는지 확인합니다.

Object.seal() / Object.isSealed()

다른 코드가 객체의 속성을 삭제하지 못하도록 합니다.

/ 객체가 실링(seal) 되었는지 확인합니다.

Object.getPrototypeOf()

명시된 객체의 프로토타입을 반환.

Object.setPrototypeOf()

프로토타입(즉, 내부의 [[Prototype]] 속성)을 설정합니다.

Instanceof

해당 변수가 객체인지 비교하거나, 객체가 특정 생성자의 자식인지 조회할 수 있습니다.

// Object객체랑 비교해서 객체 확인
child instanceof Object; // true

// 객체 상속 확인
child instanceof Parent; // true
child instanceof GrandParent; // true

typeof 5; // return 'number' 
typeof 'haha'; // return 'string' 
typeof {}; // return 'object' 
typeof []; // return 'object' 
typeof function () {}; // return 'function' 
typeof null; // return 'object'

delete

객체 내의 속성을 지울 수 있습니다. 성공하면 true를 실패하면 false를 반환합니다.

configurable이 false거나 freeze된 상태면 실패합니다.

var obj = {
  a: 'hi',
  b: 'zero',
};

obj.b; // zero
delete obj.b;
obj.b; // undefined

hasOwnProperty()

특정 프로퍼티가 해당 객체에 존재하는지를 검사합니다.

해당 객체에서 직접 선언된 프로퍼티만을 검사하며, 같은 이름의 프로퍼티라도 상속받은 프로퍼티는 false 값을 반환합니다.

var obj = {
  example: 'yes',
};
obj.example; // yes
obj.hasOwnProperty('example'); // true
obj.toString; // function toString() { [native code] }
obj.hasOwnProperty('toString'); // false

propertyIsEnumerable()

특정 프로퍼티가 해당 객체에 존재하고, 열거할 수 있는 프로퍼티인지를 검사합니다.

즉, 이 메소드는 hasOwnProperty() 메소드의 결과가 true이면서, 동시에 열거할 수 있는 프로퍼티인지를 검사합니다.

열거 가능이란 for ... in과 같은 반복문 안에서 쓸 수 있는지를 말합니다. 상속받은 속성과 해당 객체의 속성이 아닌 것은 기본적으로 제외됩니다.

function Dog(color, name, age) {
  this.color = color;
  this.name = name;
  this.age = age;
}

var myDog = new Dog("흰색", "마루", 1);
// color 프로퍼티의 enumerable 속성을 false로 설정함.
Object.defineProperty(myDog, 'color', { enumerable : false} );

document.write(myDog.propertyIsEnumerable("color") + "<br>"); // false
document.write(myDog.propertyIsEnumerable("name") + "<br>"); // true
document.write(myDog.propertyIsEnumerable("age")); // true

isPrototypeOf()

특정 객체의 프로토타입 체인에 현재 객체가 존재하는지를 검사합니다.

객체가 대상의 조상인지 알려줍니다.

var GrandParent = function() { };

var Parent = function() { };
Parent.prototype = new GrandParent();
Parent.prototype.constructor = Parent;

var Child = function() { };
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child();
Parent.prototype.isPrototypeOf(child); // true
GrandParent.prototype.isPrototypeOf(child); // true

isExtensible() / Object.preventExtensions()

객체에 새로운 프로퍼티를 추가할 수 있는지 여부를 반환합니다.

자바스크립트에서 모든 객체는 기본적으로 새로운 프로퍼티를 추가할 수 있습니다.

하지만 Object.preventExtensions() 메소드를 사용하여 해당 객체에 새로운 프로퍼티를 추가할 수 없도록 설정할 수 있습니다.

var day = new Date(); // Date 객체를 생성함.

// 객체 day에 새로운 프로퍼티를 추가할 수 있는지 검사함.
document.write(Object.isExtensible(day) + "<br>"); // true

// 해당 객체에 새로운 프로퍼티를 추가할 수 없도록 설정함.
var myDay = Object.preventExtensions(day);

document.write(Object.isExtensible(day)); // false

toString() 메소드

이 메소드를 호출한 객체의 값을 문자열로 반환합니다.

var arr = [10, "문자열", true]; // 배열
var bool = false; // 불리언
function func() { return 0; } // 함수
arr.toString(); // 10,문자열,true
bool.toString(); // false
func.toString(); // 함수의 소스 코드가 전부 문자열로 반환됨.

toString() 메소드는 어떠한 인수도 전달받지 않습니다.

valueOf() 메소드

특정 객체의 원시 타입(primitive type)의 값을 반환합니다.

자바스크립트에서는 원시 타입의 값이 기대되는 곳에 객체가 사용되면, 내부적으로 이 메소드를 호출하여 처리합니다.

만약 어떤 객체가 원시 타입의 값을 가지고 있지 않다면, 이 메소드는 객체 자신을 반환합니다.

function func(n) {
  this.number = n;
}

myFunc = new func(4);
document.write(myFunc + 5); // ① : [object Object]5

func.prototype.valueOf = function() { // valueOf() 메소드를 정의함.
  return this.number;
}

document.write(myFunc + 5); // ② : 9

위의 예제 ① 부분에서는 산술 연산을 위해 number 타입의 값을 기대하는 곳에 myFunc 객체가 사용됩니다.

따라서 자바스크립트는 내부적으로 해당 객체의 valueOf() 메소드를 호출합니다.

하지만 이 객체의 valueOf() 메소드는 아직 정의되지 않았으므로, 해당 객체 자신을 반환하게 됩니다.

따라서 산술 연산이 아닌 문자열 결합 연산이 수행됩니다.

그 후에 예제에서는 prototype 프로퍼티를 이용하여 valueOf() 메소드를 정의합니다.

따라서 ② 부분에서는 내부적으로 호출된 valueOf() 메소드가 해당 객체의 number 프로퍼티 값을 반환합니다.

따라서 정상적으로 산술 연산이 수행됩니다.

Object.defineProperty() / Object.defineProperties()

객체의 속성을 자세하게 정의할 수 있습니다.

속성의 설명을 따로 설정할 수 있는데,

writable은 속성값을 변경할 수 있는지,
enumerable은 for ... in 반복문 안에서 사용할 수 있는지,
configurable은 속성의 설명을 바꿀 수 있는지를 설정합니다. false인 경우 delete 동작도 불가능합니다.

기본적으로 writable, enumerable, configurable은 false입니다.

value는 속성의 값, get은 속성의 값을 가져올 때, set은 속성의 값을 설정할 때를 의미합니다.

[JS] 📚 getter & setter 란?

프로퍼티 getter와 setter 객체의 프로퍼티는 두 종류로 나뉩니다. 첫 번째 종류는 데이터 프로퍼티(data property) 입니다. 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티입니다. 두 번째는 접근

inpa.tistory.com

var obj = {};

Object.defineProperties(obj, { // 객체 복수 정의
  a: {
    value: 5, // a: 5 로 설정
    writable: false, // 쓰기 불가능
    enumerable: true, // 순회 가능
  },
  b: {
    get: function() { // defineProperties안에 get을 쓰면 getter로 동작
      return 'zero';
    },
    set: function(value) { // defineProperties안에 set을 쓰면 setter로 동작
      console.log(this, value);
      this.a = value;
    },
    enumerable: false,
    configurable: false,
  },
});

obj.a; // 5
obj.b; // 'zero'
obj.a = 10;
obj.a; // writable이 false라 그대로 5
for (var key in obj) {
  console.log(key); // b의 enumerable이 false이니까 a만 log됨
}

obj.b = 15; // 15로 설정되는 대신 set의 내용이 실행됨. set의 value는 15
obj.a; // this.a = value로 인해 15로 바뀌어야 하나 writable이 false라 무시됨
obj.b; // 그대로 'zero'
Object.defineProperty(obj, 'b', {
  value: 5
}); // Uncaught TypeError: Cannot redefine property: b
Object.defineProperty(obj, 'b', { enumerable : true} ); // b의 순회가능함을 true로

Object.getOwnPropertyDescriptor()

객체의 이름붙은 속성의 기술자를 반환합니다.

Object.getOwnPropertyDescriptor(obj, 'b'); 
// { enumerable: false, configurable: false, get: function() {}, set: function(value) {} }

Object.getOwnPropertyNames()

열거가능하거나 열거불가능한 속성들, 즉 모든 속성들의 이름을 포함하는 배열(array)을 반환합니다.

let obj = {
    a: 1,
    b: 2,
    c: 3
}

Object.defineProperty(obj, 'b', { enumerable: false }); // b속성을 순회불가능하게 설정

console.log(Object.keys(obj)); // ['a', 'c']
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b', 'c']