JavaScript - 객체(Object)

Object 클래스는 JavaScript의 데이터 유형중 하나입니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는데 사용됩니다. 

JavaScript의 거의 모든 객체는 Object의 인스턴스입니다.일반적인 객체는 Object.prototype에서 속성을 상속하지만, 이러한 속성들은 가려지거나 재정의 될 수 있습니다. 

 

Object 생성자는 주어진 값에 대한 객체 Rapper를 생성합니다.

• 값이 null 또는 undefined이면 빈 객체를 생성하여 반환합니다.
• 그렇지 않으면 주어진 값에 해당하는 타입의 객체를 반환합니다.
• 값이 이미 객체인 경우 그 값을 반환합니다.

생성자가 아닌 맥락에서 호출될 때 Object는 new Object()와 동일하게 작동합니다. 

객체 리터럴 표기법 vs JSON(JavaScript Object Notation)
객체 리터럴 표기법은 JSON과 동일하지 않습니다. 비슷하게 보이지만 다음의 차이를 갖습니다.
- JSON은 오직 "property" : value 구문을 사용해 정의한 프로퍼티만 사용합니다.
- JSON에서 값은 문자열, 숫자, 배열, true, false, null, 또는 다른 객체만 사용할 수 있습니다.
- 함수 값(메소드)은 JSON의 값으로 할당할 수 없습니다.
- Date와 같은 객체는 JSON.parse() 이후의 문자열이 됩니다.
- JSON.parse()는 계산된 프로퍼티명을 거부하며 에러가 발생합니다.  

 

메소드 정의

객체의 프로퍼티는 function, getter, setter 메소드를 참조할 수도 있습니다.

let o = {
  property: function (parameters) {},
  get property() {},
  set property(value) {}
}

 

계산된 프로퍼티명

: ECMAScript 2015부터 객체 초기자 구문은 계산된 프로퍼티 명도 지원합니다. 대괄호 [] 안에서 표현식을 허용하며, 표현식은 프로퍼티 명으로 계산되어 사용됩니다.

// 계산된 프로퍼티명(ES2015)
let i = 0
let a = {
  ['foo' + ++i]: i,
  ['foo' + ++i]: i,
  ['foo' + ++i]: i
}

console.log(a.foo1) // 1
console.log(a.foo2) // 2
console.log(a.foo3) // 3

const items = ["A","B","C"];
const obj = {
[items]: "Hello"
}
console.log(obj); // A,B,C: "Hello"
console.log(obj["A,B,C"]) // "Hello"

let param = 'size'
let config = {
  [param]: 12,
  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
}

console.log(config) // {size: 12, mobileSize: 4}

 

전개 프로퍼티

: ECMAScript의 전개 프로퍼티는 제공된 객체로부터 새로운 객체로 자신만의 열거형 프로퍼티를 복사합니다.

Object.assign() 보다 더 짧은 구문을 사용해 얕은 복제(prototype 제외) 또는 객체 병합이 가능합니다.

(*Object.assign()은 setters를 트리거하는 반면 전개 연산자는 그렇지 않음을 유의할 것!)

let obj1 = { foo: 'bar', x: 42 }
let obj2 = { foo: 'baz', y: 13 }

let clonedObj = { ...obj1 }
// Object { foo: "bar", x: 42 }

let mergedObj = { ...obj1, ...obj2 }
// Object { foo: "baz", x: 42, y: 13 }

 

프로토타입 변형

: __proto__ : value 도는 "__proto__" : value 형태의 프로토타입 정의는 __proto__ 이름을 갖는 프로퍼티를 생성하는 것 대신 제공된 값이 객체 또는 null인 경우, 생성된 객체의 [[Prototype]]을 해당 값으로 변경합니다.

 

정적 메소드 

• Object.assign() : 하나 이상의 원본 객체들로부터 모든 열거 가능한 속성들을 대상 객체로 복사.
• Object.create() : 지정한 프로토타입의 객체 및 속성을 갖고 있는 새 객체를 생성합니다.
• Object.defineProperty() : 지정한 서술자에서 서술한 속성을 객체에 추가합니다.
• Object.defineProperties() : 지정한 서술자들에게 서술한 속성들을 객체에 추가합니다.
• Object.entries() : 지정한 객체 자신의 모든 열거 가능한 문자열 속성들의 [key, value] 쌍으로 구성된 배열을 반환합니다. 
• Object.freeze() : 객체를 고정합니다. 다른 곳의 코드에서 해당 속성을 삭제하거나 변경할 수 없게 됩니다.
• Object.fromEntries() : [key, value] 쌍의 iterable로부터 새 객체를 반환합니다.

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

const obj = Object.fromEntries(entries);

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

• Object.is() : 두 값이 같은지를 비교합니다. 모든 NaN 값을 같다고 처리합니다.
• Object.getOwnPropertyNames() : 지정한 객체 자신의 모든 열거 가능하거나 불가능한 속성들의 이름으로 구성된 배열을 반환합니다.
• Object.keys() : 지정한 객체 자신의 모든 열거 가능한 문자열 속성들의 이름으로 구성된 배열을 반환합니다.
• Object.values() : 지정한 객체 자신의 모든 열거 가능한 문자열 속성에 해당하는 값들로 구성된 배열을 반환합니다.

 

직접 Docs를 보지 않으면 JSON과의 차이를 충분히 모를 수도 있겠다 싶다. 일반적인 웹 개발등의 작업을 할때 필요하지 않지만, 더 깊은 개발에 대한 이해와 좋은 효율을 지향한다면 봐야할 내용인 것 같다. 다음은 학부생 시절 코딩테스트를 진행하면서 헷갈려했던 this에 대해 정리하려고 한다.

 

[출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer]