JS 객체

객체 생성

• 리터럴 방식으로 간단하게 아래와 같이 key-value 쌍으로 객체를 만들 수 있음, 메소드도 가능함

// 싱글 리터럴 객체
const object = {
  property: 'value',
  method: function() { },
};

// 생성자 함수 방식으로 객체 생성(파스칼 케이스)
function NewObject(name) {
  this.name = name;
}
const newObject = new NewObject('kevin');

// Object.create를 통해서 만들 수 있음(프로토타입, 객체 서술자(기술자), 객체를 자세하게 기술)가 포함됨
const newObject2 = Object.create(Object.prototype,
  {
    name: {
      value: 'kevin',
      writable: true, // 덧어쓸 줄 있는지 여부
      enumerable: true, // 열거할 수 있는지 여부
      configurable: true, // 객체 서술자를 수정할 수 있는지 여부
    },
  },
);

newObject2.name = 'Kim'; // writable: false면 바뀌지 않음

// enumerable: false면 아래의 방식으로 열거 할 수 없음
for (const key in newObject2) {
  console.log(key);
}

프로퍼티 열거

• for in 문을 통해서 객체를 열거할 수 있음

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3',
  prop4: 'value4',
};

// key 열거
for (const key in obj) {
  console.log(key);
}

// .과 key를 불러서 값을 불러올 수 있음(value를)
obj.prop1

const prop = 'prop'
obj[prop + 1] // value1

for (const key in obj) {
  console.log(obj[key]);
}

• 객체의 경우, 본인의 값을 찾기 위해서 스코프를 계속 체이닝처럼 따라감
• 이를 방지하고자 hasOwnProperty 메소드를 씀, 이를 통해 상위의 값을 체이닝을 통해서 가져와서 쓰지 않게함

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]);
  }
}

프로퍼티 조작

• 새로운 값을 추가하는데 있어서 아래와 같이 직관적으로 할 수 있음
• 예시에서 const는 재할당을 막는 것이지, 저장된 객체, 함수, 배열을 바꾸는데 지장은 없음

const person = {
  firstName: 'kevin',
  location: 'korea',
};

// 추가
person.lastName = 'hart';
// 수정
person.lastName = 'ha-rt';
// 삭제
delete person.location;

• 위의까지 한다면 생성, 열거, 조작으로 객체의 기본적인 처리는 끝낸 것

프로퍼티 접근자

• getter, setter라고 좀 더 안전하게 객체에 접근하고 처리하는 방식임
• 예시와 같이 사용할 수 있음(이때 변수명은 우회해서 유의해야함)

const person = {
  _firstName: 'kevin',
  lastName: 'hart',

  get firstName() {
    return this._firstName.toUpperCase();
  },

  set firstName(newFirstName) {
    // 이상한 값 방지
    if (typeof newFirstName !== 'string') {
      this._firstName = 'undefined name';

      return;
    }
    
    this._firstName = newFirstName;
  },

  get fullName() {
    return (this._firstName + this.lastName + '입니다.');
  },
};

// 위의 조건문에 걸림, 아래의 호출이 다 getter & setter에서 작업이 되고 값이 처리되는 것
person.firstName = 12345;
console.log(person.firstName);

person.fullName;

• 이를 통해 조금 더 안전하게, 일관성 있게 관리할 수 있음

인스턴스

• 인스턴스는 어떻게 보면 유일한 객체라고도 볼 수 있음, 아래 예시처럼 완전히 같은 두 객체도 각자의 인스턴스임
• 마치 동명이인을 주민등록번호로 식별하듯이 완전히 같아보이는 객체도 각자의 인스턴스가 있음
• 이는 객체의 속성이 같을지언정, 객체를 비교할 땐 객체가 저장된 메모리 주소를 보기에 같아 보이는 객체도 같다고 할 수가 없음

const me = {
  name: 'kevin',
  age: 10,
  location: 'korea',
};

const me2 = {
  name: 'kevin',
  age: 10,
  location: 'korea',
};

console.log(me === me2) // false
// 단, 객체 속성은 같다고 볼 수 있음
console.log(me.name === me2.name) // true

생성자

• 만약 앞서 배운 객체에 대해서 같은 양식에 있어서 계속 인스턴스를 만들고 싶다면, 매번 똑같은 양식을 복붙 내지 쓰지 않고 생성자 함수를 쓸 수 있음

// 생성자
const me = {
  name: 'kevin',
  age: 10,
  location: 'korea',
};

function Person(name, age, location) {
  // 생성될 인스턴스의 값을 this.로 표현
  this.name = name;
  this.age = age;
  this.location = location;

  // 메소드도 쓸 수 있음
  this.getName = function () {
    return this.name + '입니다';
  };
}

// 생성자 함수 사용
const me = new Person('leona', 20, 'korea');
const you = new Person('kim', 30, 'china');

me.getName(); // leona입니다.
you.getName();

• 요즘에는 클래스를 주로 씀