본문 바로가기
JavaScript

[#. JavaScript] MDN에 나와 있는 Object Method 정리하기

shab
반응형

 

 

 

 

 

 

 

Object 생성자는 객체 래퍼(wrapper)를 생성한다

주어진 값이 null이거나 undefined면 빈 객체를 생성해 반환하고, 그렇지 않으면 값에 맞는 자료형의 객체를 반환한다

만약 값이 이미 객체라면 그 값을 그대로 반환한다

생성자가 아닌 맥락에서 호출하면 Object는 new Object()와 동일하게 동작한다

 

 

 

 

 

 

 

 

Object 생성자의 메서드

 

 

정적 메서드

 

 

 

Object.assign() 

 

Object.assign(target, ...sources)

 

출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣는다 그 후 대상 객체를 반환한다
목표 객체의 속성 중 출처 객체와 동일한 키를 갖는 속성의 경우, 그 속성 값은 출처 객체의 속성 값으로 덮어쓴다 출처 객체들의 속성 중에서도 키가 겹칠 경우 뒤쪽 객체의 속성 값이 앞쪽 객체의 속성 값보다 우선한다



const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);	// { a: 1, b: 4, c: 5 }

console.log(returnedTarget);	// { a: 1, b: 4, c: 5 }

 

 

 

 

 

 

Object.create()

 

Object.create(proto[, propertiesObject])

 

지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만든다

 

 

 

 

 

 

Object.defineProperties() ⭐️

 

Object.defineProperties(obj, props)

 

 객체에 새로운 속성(key, value로 이루어진 데이터값)을 정의하거나 기존의 속성을 수정하고, 그 객체를 반환한다

주로 Low Level에서 많이 사용한다

 

 

 

const object1 = {};

Object.defineProperties(object1, {
  property1: {
    value: 42,
    writable: true
  },
  property2: {}
});

console.log(object1.property1);	// 42

 

var obj = {
  a: 'hello'
};

Object.defineProperty(obj, 'b', {
  value: 'world'
});

console.log(obj);	// { a: 'hello' }

Object.defineProperty(obj, 'c', {
  value: 'test',
  enumerable: true
});

console.log(obj);	// { a: 'hello', c: 'test' }

 

 

  • obj
    속성을 정의하거나 수정할 객체
  • props
    정의하거나 수정할 속성의 이름을 키, 그 속성을 서술하는 객체를 값으로 갖는 객체
    props의 각 값은 데이터 서술자(data descriptor) 혹은 접근자 서술자(accessor descriptor) 중 하나여야 하며, 동시에 두 유형을 포함할 수 없다

    데이터 서술자와 접근자 서술자 모두 다음 키를 선택적으로 포함할 수 있다
  • configurable
    true일 경우 이 속성 서술자의 형태를 변경하거나, 속성을 해당 객체에서 삭제할 수 있다
    기본값은 false이다
  • enumerable
    true일 경우 해당 객체의 속성을 열거할 때 이 속성이 열거된다
    추가한 key:value의 프로퍼티 값의 노출(열거) 여부를 결정한다
    기본값은 false이다


    데이터 서술자의 경우 다음 키를 추가로 포함할 수 있다
  • value
    이 속성에 설정할 값, 올바른 자바스크립트 값(숫자, 객체, 함수 등)이면 무엇이든 설정할 수 있다
    기본값은 undefined이다
  • writable
    true일 경우 이 속성에 설정된 값을 할당 연산자 (en-US)로 수정할 수 있다
    기본값은 false이다


    접근자 서술자의 경우 다음 키를 추가로 포함할 수 있다
  • get
    해당 속성의 getter가 될 함수, 혹은 getter가 없을 경우 undefined 이 함수의 반환값이 속성의 값으로 사용된다
    기본값은 undefined이다
  • set
    해당 속성의 setter가 될 함수, 혹은 setter가 없을 경우 undefined 이 함수는 이 속성에 할당되는 새로운 값을 유일한 인자로 받는다
    기본값은 undefined이다

 

 

 

 

 

Object.defineProperty()

 

Object.defineProperty(obj, prop, descriptor)


 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환한다

 

 

 

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: true
});

object1.property1 = 77;
console.log(object1.property1); // 77

 

 

 

 

 

Object.entries()

 

Object.entries(obj)

 

for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다 

 

 

 

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// "a: somestring"
// "b: 42"

 

 

 

 

 

 

Object.fromEntries()

 

Object.fromEntries(iterable);

 

키값 쌍의 목록을 객체로 바꾼다

 

 

 

const entries = [
  ['foo', 'bar'],
  ['baz', 42]
];

const obj = Object.fromEntries(entries);

console.log(obj);	// { foo: "bar", baz: 42 }

 

 

 

 

 

 

Object.freeze() 🌟

 

Object.freeze(obj)

 

객체를 동결한다 동결된 객체는 더 이상 변경될 수 없습니다

즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 설정 가능성(configurability), 작성 가능성이 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도 방지한다 또한, 동결 객체는 그 프로토타입이 변경되는것도 방지한다

freeze()는 전달된 동일한 객체를 반환한다 

 

 

 

const obj = {
  prop: 42
};

Object.freeze(obj);

console.log(Object.freeze(obj));	// Object { prop: 42 }

obj.prop = 33;
console.log(obj.prop);	// 42

 

 

 

 

 

Object.isFrozen()

 

객체가 동결됐는지 판별한다 Boolean 값을 반환한다

 

Object.isFrozen(obj)

 

 

 

const object1 = {
  property1: 42
};

console.log(Object.isFrozen(object1));	// false

Object.freeze(object1);

console.log(Object.isFrozen(object1));	// true

 

 

 

 

 

 

Object.is()

 

Object.is(value1, value2);

 

두 값이 같은 값인지 결정한다 Boolean 값을 반환한다

 

 

 

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

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

Object.is(null, null);       // true

// 특별한 경우
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

 

  • 둘 다 undefined
  • 둘 다 null
  • 둘 다 true 또는 둘 다 false
  • 둘 다 같은 문자에 같은 길이인 문자열
  • 둘 다 같은 객체
  • 둘 다 숫자이며
    • 둘 다 +0
    • 둘 다 -0
    • 둘 다 NaN
    • 둘 다 0이나 NaN이 아니고 같은 값을 지님

 

 

 

 

 

 

Object.preventExtensions()

 

Object.preventExtensions(obj)

 

새로운 속성이 이제까지 객체에 추가되는 것을 방지한다 (즉 객체의 확장을 막는다)

 

 

 

const object1 = {};

Object.preventExtensions(object1);

try {
  Object.defineProperty(object1, 'property1', {
    value: 42
  });
} catch (e) {
  console.log(e);
  // expected output: TypeError: Cannot define property property1, object is not extensible
}

 

 

 

 

 

Object.isExtensible()

 

Object.isExtensible(obj)

 

객체가 확장 가능한지(객체에 새 속성을 추가할 수 있는지 여부)를 결정한다 객체는 기본으로 확장 가능하다 Boolean 값을 반환한다

 

 

 

const object1 = {};

console.log(Object.isExtensible(object1));	// true
Object.preventExtensions(object1);

console.log(Object.isExtensible(object1));	// false

 

 

 

 

 

Object.seal() ⭐️

 

Object.seal(obj)

 

객체를 밀봉한다 객체를 밀봉하면 그 객체에는 새로운 속성을 추가할 수 없고, 현재 존재하는 모든 속성을 설정 불가능 상태로 만들어 준다

하지만 쓰기 가능한 속성의 값은 밀봉 후에도 변경할 수 있다(Object.freeze()와의 차이라고 할 수 있다)

 

 

 

const object1 = {
  property1: 42
};

Object.seal(object1);
object1.property1 = 33;
console.log(object1.property1);	// 33

// cannot delete when sealed
console.log(delete object1.property1); // false
console.log(object1.property1);	// 33

 

 

 

Object.seal() vs Object.freeze()

 

Object.seal()은 객체의 데이터 쓰기가 가능하지만 Object.freeze()는 불가능하다

 

const object1 = {
  property1: 42,
};

const object2 = {
  property1: 42,
};

const object3 = {};

Object.defineProperty(object3, 'property1', {
  value: 33,
  writable: false
});

Object.seal(object1);
Object.freeze(object2);
Object.seal(object3);

object1.property1 = 1;
object2.property1 = 2;
object3.property1 = 3;

console.log(object1);	// { property1: 1 } => 바뀜
console.log(object2)	// { property1: 42 }	=> 안 바뀜
console.log(object3.property1);	// 33	=> 안 바뀜

 

 

 

 

 

 

Object.isSealed()

 

Object.isSealed(obj)

 

객체가 봉인됐는지 판별한다 Boolean 값을 반환한다

 

 

 

 

const object1 = {
  property1: 42
};

console.log(Object.isSealed(object1));	// false

Object.seal(object1);

console.log(Object.isSealed(object1));	// true

 

 

 

 

 

Object.keys()

 

Object.keys(obj)

 

주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다

 

 

 

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// ["a", "b", "c"]

 

 

 

 

 

Object.values()

 

Object.values(obj)

 

전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴한다 이 배열은 for...in 구문과 동일한 순서를 가진다

 

 

 

 

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// ["somestring", 42, false]

 

 

 

 

 

Object.getOwnPropertyDescriptor() ⭐️

 

Object.getOwnPropertyDescriptor(obj, prop)

 

주어진 객체 자신의 속성(즉, 객체에 직접 제공하는 속성, 객체의 프로토타입 체인을 따라 존재하는 덕택에 제공하는 게 아닌)에 대한 속성 설명자(descriptor)를 반환한다

 

 

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false,
  enumerable: true
});

console.log(Object.getOwnPropertyDescriptor(object1, 'property1'));
// {value: 42, writable: false, enumerable: true, configurable: false}

 

 

 

 

Object.getOwnPropertyDescriptors()

 

Object.getOwnPropertyDescriptors(obj)


주어진 객체의 모든 속성들의 설명자(descriptor)들을 반환한다

Object.defineProperties()로 설정한 여러 개의 모든 property를 가져온다

 

 

const object1 = {};

Object.defineProperties(object1, {
  property1: {
    value: 42,
    writable: false,
    enumerable: true
  },
  property2: {
    value: 33,
    writable: true,
    enumerable: false
  }
});

console.log(Object.getOwnPropertyDescriptors(object1));
// property1: {configurable: false, enumerable: true, value: 42, writable: false}
// property2: {configurable: false, enumerable: false, value: 42, writable: true}

 

 

 

 

 

 

Object.getOwnPropertyNames()

 

Object.getOwnPropertyNames(obj)

 

전달된 객체의 모든 속성 (심볼을 사용하는 속성을 제외한 열거할 수 없는 속성 포함) 들을 배열로 반환한다

 

 

const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = {};

Object.defineProperties(object2, {
  property1: {
    value: 42,
    writable: false,
    enumerable: true
  },
  property2: {
    value: 33,
    writable: true,
    enumerable: false
  }
});

console.log(Object.getOwnPropertyNames(object1));
// ["a", "b", "c"]

console.log(Object.getOwnPropertyNames(object2));
// ['property1', 'property2']

 

 

 

 

 

Object.setPrototypeOf()

 

Object.setPrototypeOf(obj, prototype);

 

지정된 객체의 프로토타입 (즉, 내부 [[Prototype]] 프로퍼티)을 다른 객체 또는 null로 설정한다

 

 

 

 

 

Object.getPrototypeOf()

 

Object.getPrototypeOf(obj)

 

지정된 객체의 프로토타입(가령 내부 [[Prototype]] 속성값)을 반환한다

 

 

 

=> 성능에 관심이 있는 경우 개체의 [[Prototype]]을 설정하지 않는 것이 좋다 대신 Object.create()를 사용하여 원하는 [[Prototype]]으로 새 개체를 생성하자

 

 

 

 

 

인스턴스 메서드

 

 

Object.prototype.constructor

 

인스턴스의 프로토타입을 만든 Object 함수의 참조를 반환한다

이 속성값은 함수 이름을 포함하는 문자열이 아니라 함수 자체의 참조이다 그 값은 1, true 및 "test"와 같은 원시(primitive) 값에 대해서만 읽기 전용이다

 

var obj1 = {a: 1};

console.log(obj1.constructor);
// ƒ Object() { [native code] }

var o = {};
o.constructor === Object; // true

var o = new Object;
o.constructor === Object; // true

var a = [];
a.constructor === Array; // true

var a = new Array;
a.constructor === Array; // true

var n = new Number(3);
n.constructor === Number; // true

 

 

 

 

 

 

Object.prototype.toString()

 

obj.toString()

 

문자열을 반환하는 object의 대표적인 방법이다

인자로 들어온 값이 어떤 클래스 타입인지 감지해서 우리에게 알려준다

 

 

function Dog(name) {
  this.name = name;
}

const dog1 = new Dog('Gabby');

console.log(dog1.toString());	// "[object Object]"


Object.prototype.toString.call(''); // [object String]
Object.prototype.toString.call(1); // [object Number]
Object.prototype.toString.call(true); // [object Boolean]
Object.prototype.toString.call(Symbol('symbol')); // [object Symbol]
Object.prototype.toString.call(BigInt(1e10)); // [object BigInt]
Object.prototype.toString.call([]); // [object Array]
Object.prototype.toString.call({}); // [object Object]
Object.prototype.toString.call(null); // [object Null]
Object.prototype.toString.call(undefined); // [object Undefined]

 

 

 

 

 

Object.prototype.toLocaleString()

 

obj.toLocaleString()

 

객체로 된 문자열을 반환한다 이 메서드는 지역별로 다른 객체로 재정의되어 표시된다

 

 

 

const date1 = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

console.log(date1.toLocaleString('ar-EG'));	// "٢٠‏/١٢‏/٢٠١٢ ٤:٠٠:٠٠ ص"

const number1 = 123456.789;

console.log(number1.toLocaleString('de-DE'));	// "123.456,789"

 

 

 

 

 

Object.prototype.valueOf()

 

object.valueOf()

 

특정 객체의 원시 값을 반환한다

 

 

 

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

MyNumberType.prototype.valueOf = function() {
  return this.number;
};

const object1 = new MyNumberType(4);

console.log(object1 + 3);	// 7

 

 

 

 

 

Object.prototype.hasOwnProperty() 🌟

 

객체가 특정 프로퍼티를 가지고 있는지를  나타내는 Boolean 값을 반환한다

 

obj.hasOwnProperty(prop)

 

 

 

const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));
// expected output: true

console.log(object1.hasOwnProperty('toString'));
// expected output: false

console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false

Object.defineProperties(object1, {
  prop1: {
    value: 1                                 
  }
});

console.log(object1.hasOwnProperty('prop1'));	// true

 

 

 

 

 

Object.prototype.propertyIsEnumerable()

 

obj.propertyIsEnumerable(prop)

 

특정 속성이 열거가능한지 여부를 나타내는 Boolean 값을 반환한다

 

 

 

const object1 = {};
const array1 = [];
object1.property1 = 42;
array1[0] = 42;

console.log(object1.propertyIsEnumerable('property1'));	// true
console.log(array1.propertyIsEnumerable(0));	// true

console.log(array1.propertyIsEnumerable('length'));	// false

var object1 = {}

Object.defineProperties(object1, {
  prop1: {
    value: 1,
    enumerable: false                              
  }
});

console.log(object1.propertyIsEnumerable('prop1'));	// false

 

 

 

 

 

Object.prototype.isPrototypeOf()

 

prototypeObj.isPrototypeOf(obj)

 

해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지 확인하기 위해 사용된다

 

 

function Fee() {
  // ...
}

function Fi() {
  // ...
}
Fi.prototype = new Fee();

function Fo() {
  // ...
}
Fo.prototype = new Fi();

function Fum() {
  // ...
}
Fum.prototype = new Fo();

var fum = new Fum();
// ...

console.log(Fi.prototype.isPrototypeOf(fum));	// true

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf

 

Object.prototype.isPrototypeOf() - JavaScript | MDN

isPrototypeOf() 메소드는 해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지 확인하기 위해 사용됩니다.

developer.mozilla.org

 

반응형

'JavaScript' 카테고리의 다른 글

[#. JavaScript] 초성, 중성, 종성 구하기 / 앞 단어에 따라 은, 는, 이, 가 조사 붙이기  (0) 2022.01.06
[#. JavaScript] 일수 계산하기  (0) 2022.01.04
[#. JavaScript] ES6 정리하기  (0) 2021.11.23
[#. JavaScript] input maxlength 글자수 제한하기  (0) 2021.10.27
[#. JavaScript] js touch event 사용하기 touchstart, touchend, touchmove, 클릭할 시에는 이벤트 발생하지만 스크롤 시에는 이벤트 발생되지 않도록 하기  (0) 2021.10.01

'JavaScript' Related Articles

티스토리툴바