[JS 개념정리] Object

rlorxl·2022년 2월 7일

Javascript

목록 보기

3/12

Object 생성법

1. 싱글 리터럴 객체

const object = {
	property: 'value',
    method: function() { ~~~ }
};

2. Object 생성자 함수

const obj = new Object();

obj.property = 'value';
obj.method = function(){ ~~~ }

프로퍼티

프로퍼티는 프로퍼티 키(key)와 프로퍼티 값(value)으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다. 즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다. 프로퍼티 키의 명명 규칙과 프로퍼티 값으로 사용할 수 있는 값은 아래와 같다.

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값

프로퍼티 값 : 모든 값

프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.
객체가 프로퍼티 값을 '함수'로 가지는 경우, 그것을 메서드라고 부른다.

참고 - 모던 자바스크립트 Deep Dive

3. 생성자 함수

싱글 리터럴 객체를 빠르고 많이 만들어야 하는 경우에 생성자 함수(constructor)로 객체를 만들면 보다 쉽게 객체를 만들 수 있다. 일반적인 객체를 유사하게 자주 만들어야 할 때 주로 사용한다. 함수명은 파스칼케이스(PascalCase)(함수 이름의 첫글자가 대문자로 시작한다.)로 만드는게 일반적이며 new연산자와 함께 사용한다.

function Person(name, age){ 
	this.name = name;
    this.age = age;
}
const p = new Person('Mark', 37); // instance
console.log(p, p.name, p.age);

Person이라는 함수는 생성자 new를 사용해서 객체를 생성할 때 들어가야할 프로퍼티를 초기설정해주는 역할을 한다. 재사용이 가능한 객체 생성 코드를 생성한 것이다.
프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킨다.

결과

{ name: 'Mark', age: 37 }
'Mark'
37

Object.create()

Object.create()메서드는 지정된 프로토타입과 객체서술자 2가지의 매개변수를 받아 새 객체를 만든다.

const newObject2 = Object.create(
  Object.prototype, 
  {
	name: {
      value: 'Mark',
      writable: true, // 덮어쓸 수 있는지
      enumerable: true, // 열거할 수 있는지
      configurable: true, // 객체 서술자를 수정할 수 있는지
    },
  },
);

프로퍼티 열거

for...in 반복문으로 객체의 프로퍼티를 열거할 수 있다. (const사용 추천)
단, 순서는 보장되지 않는다.

const obj = { 
  prop1: 'value1', 
  prop2: 'value2', 
  prop3: 'value3', 
  prop4: 'value4' 
};
for(const key in obj){ 
  console.log(key); 
} // prop1 prop2 prop3 prop4

for(const key in obj){ 
  console.log(obj[key]); 
} // value1 value2 value3 value4

for-in 문은 객체의 문자열 키(key)를 순회하기 위한 문법이므로 배열에는 사용하지 않는 것이 좋다.

hasOwnProperty()

for...in으로 프로퍼티를 열거할 때 객체에 상속되거나 확장되어서 사용된 속성이 있다면 상위의 값들을 체이닝(chaining)해서 가져오는 경우가 생긴다. 체인을 확인하는걸 방지하지 위해 hasOwnProperty()메서드를 사용한다. 이 메서드는 객체가 특정 프로퍼티를 자기만의 직접적인 프로퍼티로서 소유하고 있는지를 판단하는데 사용된다.

for(const key in obj){
	if(obj.hasOwnProperty(key)){
    	console.log(obj[key]);
    }
} // value1 value2 value3 value4

프로퍼티 접근

// 1.추가, 수정
obj.prop5 = 'value5' // 추가
obj.prop4 = 'value-4' // 이미 있는 프로퍼티 속성 갱신

obj['prop5'] = 'value5' // 이렇게 작성해도 추가된다.

// 2.value 가져오기
obj.prop1 // value1
obj['prop1'] // value1

// 3.삭제
delete obj.prop1