2-9. 객체

객체 만드는 방법

1. 객체 생성자 이용(생성자 방식)

let person1 = new Object();

2. 중괄호를 이용한 객체 생성 {} (객체 리터럴 방식) -- 더 편함 -- 비원시형자료형(여러개 가질 수 있음)

프로퍼티(객체 프로퍼티)라고 부름 --> 속성(객체가 가지고있는 데이터)

let person2 = {};

// 객체 만드는 방법
// 1. 객체 생성자 이용
// --> 생성자 방식
// new 는 객체를 생성한다는 뜻
// person이라는 객체를 생성
let person1 = new Object();

// 2. 중괄호를 이용한 객체 생성 {}
// --> 객체 리터럴 방식 (조금 더 편함)
let person2 = {};

--> key: value는 여러 자료형이어도 상관없다.

// 객체 리터럴 방식
let person = {
  // 객체 저장방식
  // 프로퍼티(객체 프로퍼티)라고 부름 --> 속성(객체가 가지고있는 데이터)
  // 여러 자료형태로 넣어도 괜찮다.
  key: "value", // key value방식으로 가지면 된다.
  key1: 123,
  key2: true,
  key3: undefined,
  key4: [1, 2],
  key5: function () {}
};
console.log(person);
/*
{key: "value", key1: 123, key2: true, key3: undefined, key4: Array(2)…}
key: "value"
key1: 123
key2: true
key3: undefined
key4: Array(2)
0: 1
1: 2
key5: ƒ key5() {}
<constructor>: "Function"
name: "Function"
*/

--> key는 무조건 문자열로 써야하지 ""를 쓰면 안된다.

key끼리 중복되면 안되지만, 지양한다. (쓴 경우 마지막에 쓴 value만 들고온다.)

// 이렇게 들고오는것을 표기법
// 점을 사용하면 점 표기법이라고 한다.
console.log(person.key1);
console.log(person.key5);
// 괄호를 사용하면 괄호 표기법이라고 한다.
// 이때 반드시 key는 문자열로 넣어야한다.
console.log(person["key1"]);
console.log(person["key2"]);

let person = {
  name: "이정환",
  age: 25
};
console.log(person.name); //이정환
console.log(person["name"]); //이정환
console.log(person.age); //25

괄호 표기법을 사용할 시, 이렇게 사용할 수 있어서 훨씬 편하다.

let person = {
  name: "이정환",
  age: 25
};

console.log(getPropertyValue("name"));

function getPropertyValue(key) {
  return person[key];
}

 

괄호 표기법 - 동적인 파라미터 전달 받는 상황, 키가 고정적이지 않는 상황에 좋다.

 

Property값 추가 및 수정

- 점 표기법, 괄호 표기법을 사용

let person = {
  name: "이정환",
  age: 25
};
// 추가
person.location = "한국";
person["gender"] = "남성";
// 변경
person.name = "이정환 A";
person["age"] = 30;

console.log(person);

/*
{name: "이정환 A", age: 30, location: "한국", gender: "남성"}
name: "이정환 A"
age: 30
location: "한국"
gender: "남성"
*/

- let이 아닌 const로 추가 및 변경해도 에러가 나지 않음!

--> 프로퍼티를 수정하지, person자체를 수정하지 않기 때문에 (person의 object를 수정하는것이기 때문에)

const person = {
  name: "이정환",
  age: 25
};
// 추가
person.location = "한국";
person["gender"] = "남성";
// 변경
person.name = "이정환 A";
person["age"] = 30;

console.log(person);

아래를 새로 선언하면 에러가 난다.

person = {
  age: 20
};
//TypeError: "person" is read-only

--> 객체 자체가 아니라, 객체의 property만 수정 및 추가한다면 문제가 되지 않는다.

 

Property값 삭제

const person = {
  name: "이정환",
  age: 25,
  gender: "F"
};

delete person.age;
delete person["gender"];
console.log(person);

실제 객체와 property와의 관계를 끊을 뿐, 실제 person의 것들을 지우지는 않는다. --> 지워도 메모리는 그대로 쓰고있음

 

그래서 delete보다는 null사용을 추천한다. --> 이렇게 하면 기존의 메모리를 날릴 수 있다.

 

객체형 함수 사용 --> 이 객체를 메서드(방법)라고 함

함수아닌 프로퍼티들은 멤버

함수는 메서드

this는 자신, 그래서 person과 this는 같다고 생각하면 됨

 

const person = {
  name: "이정환",
  age: 25,
  say: function () {
    console.log(`안녕 나는 ${this["name"]}`);
  }
};

console.log(person.gender); // undefined

선언하지 않았던 값에 대해서는 undefined가 나온다. 그래서 이 값이 있는지 없는지 구별하기가 어려운데

 

아래와 같이 테스트 하면 있는지 없는지 구별할 수 있다.

const person = {
  name: "이정환",
  age: 25,
  say: function () {
    console.log(`안녕 나는 ${this["name"]}`);
  }
};

console.log(`name: ${"name" in person}`); // name: true
console.log(`gender: ${"gender" in person}`); // gender: false