Data Objects vs OOP Objects (javascript)

Play Game in DOSGamePlayer App

데이터 오브젝트

데이터를 공개하고 수정할 수 있게 제공해준다

OOP 오브젝트

데이터를 숨기고 데이터를 다룰 수 있는 메소드를 제공해준다

데이터 오브젝트 예시

//첫번째
const createPerson = ({ fname, lname }) => ({
  fname,
  lname
});

const obj = { fname: 'Jhon', lname: 'Locke' };
const clone = { ...obj }


//두번째
function person(fname, lname) {
  const person = {};
  person.fname = fname;
  person.lname = lname; 
  return person;
}

const fname = 'Jhon';
const lname = 'Locke'
const obj = { fname, lname };

//세번째
function person(fname, lname){
  const fullname = () => `${fname} ${lname}`;
  return {
    fname,
    lname,
    fullname
  }
}
const person1 = person('John', 'Locke');
person1.fullname();

//네번째 freeze 를 사용했지만 데이터를 바로 접근가능하다
function createPerson(name) {
    function getName() {
        return name;
    }
    
    return Object.freeze({
        name,
        getName
    });
}
const person = createPerson('John Locke');
console.log(person.name)

OOP 오브젝트 예시 (Factory Functions)

PersonStore 라는 Factory Function 을 만들어서 사용하기에
Person 에 직접 접근할 수 가 없다.
add, removeById, getItems 메소드만 접근이 가능하다.

function PersonStore() {
  let items = [];

  function add(person) {
    items.push(person);
  }

  function removeById(id) {
    items = items.filter((p) => p.id !== id);
  }

  function getItems() {
    return Object.freeze([...items]);
  }

  return Object.freeze({
    add,
    removeById,
    getItems,
  });
}
const store = PersonStore();
store.add({ id: 1, name: 'John Lock' });
store.add({ id: 2, name: 'Jack Shephard' });
store.add({ id: 3, name: 'James "Sawyer" Ford' });
store.removeById(3);

console.log(store.getItems());

/* 출력결과
[ { id: 1, name: 'John Lock' }, 
  { id: 2, name: 'Jack Shephard' } ] 
*/

Factory method 는 변경불가

add 메소드를 재정의 하거나
items 를 강제로 변경하려고 해도 변경되지 않는다